Improve contrast for timestamps, date separators & spotlight trigger (#…

…91) * Improve contrast for timestamps and room list search trigger Signed-off-by: Michael Telatynski <[email protected]> * Update screenshot Signed-off-by: Michael Telatynski <[email protected]> * Change timeline separator colour to primary for improved contrast Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Sep 27, 2024 · 8962e8c · 8962e8c
1 parent ef9e310
commit 8962e8c
Show file tree

Hide file tree

Showing 21 changed files with 4 additions and 4 deletions.
diff --git a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png
diff --git a/...snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/...snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
diff --git a/.../snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/.../snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
diff --git a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png
diff --git a/...hots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/...hots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
diff --git a/...ight/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/...ight/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
diff --git a/...wright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/...wright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
diff --git a/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
diff --git a/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
diff --git a/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
diff --git a/...wright/snapshots/timeline/timeline.spec.ts/highlighted-search-results-linux.png b/...wright/snapshots/timeline/timeline.spec.ts/highlighted-search-results-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
diff --git a/...napshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/...napshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/...shots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png
diff --git a/.../snapshots/timeline/timeline.spec.ts/search-results-with-TextualEvent-linux.png b/.../snapshots/timeline/timeline.spec.ts/search-results-with-TextualEvent-linux.png
diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss
@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomSearch_spotlightTriggerText {
-        color: $tertiary-content;
+        color: var(--cpd-color-text-secondary);
         flex: 1;
         min-width: 0;
         /* the following rules are to match that of a real input field */

diff --git a/res/css/views/messages/_TimelineSeparator.pcss b/res/css/views/messages/_TimelineSeparator.pcss
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     align-items: center;
     font: var(--cpd-font-body-md-regular);
-    color: var(--cpd-color-text-secondary);
+    color: var(--cpd-color-text-primary);
 }
 
 .mx_TimelineSeparator > hr {

diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
@@ -250,7 +250,7 @@ $live-badge-color: #ffffff;
 $progressbar-bg-color: var(--cpd-color-gray-200);
 $kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #800;
-$event-timestamp-color: $text-secondary-color;
+$event-timestamp-color: var(--cpd-color-text-secondary);
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 $breadcrumb-placeholder-bg-color: #272c35;
 $theme-button-bg-color: #e3e8f0;

diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
@@ -314,7 +314,7 @@ $call-light-quaternary-content: #c1c6cd;
 $progressbar-bg-color: var(--cpd-color-gray-200);
 $kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #faa;
-$event-timestamp-color: #acacac;
+$event-timestamp-color: var(--cpd-color-text-secondary);
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 $breadcrumb-placeholder-bg-color: #e8eef5;
 $theme-button-bg-color: $quinary-content;