PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* Improve contrast for timestamps and room list search trigger

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Change timeline separator colour to primary for improved contrast

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-09-27 15:22:15 +01:00 committed by GitHub
parent ef9e310a25
commit 8962e8cdd3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 7 KiB

BIN
playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/highlighted-search-results-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 101 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/search-results-with-TextualEvent-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

2
res/css/structures/_RoomSearch.pcss
View file

@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_RoomSearch_spotlightTriggerText { .mx_RoomSearch_spotlightTriggerText {
color: $tertiary-content; color: var(--cpd-color-text-secondary);
flex: 1; flex: 1;
min-width: 0; min-width: 0;
/* the following rules are to match that of a real input field */ /* the following rules are to match that of a real input field */

2
res/css/views/messages/_TimelineSeparator.pcss
View file

@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
align-items: center; align-items: center;
font: var(--cpd-font-body-md-regular); font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-secondary); color: var(--cpd-color-text-primary);
} }
.mx_TimelineSeparator > hr { .mx_TimelineSeparator > hr {

2
res/themes/dark/css/_dark.pcss
View file

@ -250,7 +250,7 @@ $live-badge-color: #ffffff;
$progressbar-bg-color: var(--cpd-color-gray-200); $progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color; $kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #800; $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); $composer-shadow-color: rgba(0, 0, 0, 0.28);
$breadcrumb-placeholder-bg-color: #272c35; $breadcrumb-placeholder-bg-color: #272c35;
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;

2
res/themes/light/css/_light.pcss
View file

@ -314,7 +314,7 @@ $call-light-quaternary-content: #c1c6cd;
$progressbar-bg-color: var(--cpd-color-gray-200); $progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color; $kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #faa; $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); $composer-shadow-color: rgba(0, 0, 0, 0.04);
$breadcrumb-placeholder-bg-color: #e8eef5; $breadcrumb-placeholder-bg-color: #e8eef5;
$theme-button-bg-color: $quinary-content; $theme-button-bg-color: $quinary-content;