Refine the colors of some more components (#12343)

Browse source

* Refine the colors of some more components

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system:

- Message bubbles
- Pills
- Sent indicators
- Jump to bottom/unread buttons
- Composer placeholder
- Notification badges
- Room sublists
- Verification shields
- Date separators
- Tooltips

Closes https://github.com/element-hq/element-web/issues/22122

* Update some screenshots

...

This commit is contained in:

Robin 2024-03-18 11:47:55 -04:00 • committed by GitHub

parent f765a44b46

commit 26b4d47af1

No known key found for this signature in database

GPG key ID: B5690EEEBB952194

49 changed files with 63 additions and 76 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download patch file Download diff file Expand all files Collapse all files

BIN

playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 63 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: 24 KiB After Width:  |  Height:  |  Size: 24 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: 24 KiB After Width:  |  Height:  |  Size: 24 KiB

BIN

playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 5.5 KiB After Width:  |  Height:  |  Size: 5.5 KiB

BIN

playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 6.6 KiB After Width:  |  Height:  |  Size: 6.6 KiB

BIN

playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 20 KiB After Width:  |  Height:  |  Size: 21 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: 47 KiB After Width:  |  Height:  |  Size: 47 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: 41 KiB After Width:  |  Height:  |  Size: 41 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: 41 KiB After Width:  |  Height:  |  Size: 42 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: 52 KiB After Width:  |  Height:  |  Size: 52 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 7.5 KiB After Width:  |  Height:  |  Size: 7.6 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 8 KiB After Width:  |  Height:  |  Size: 8.1 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 9.1 KiB After Width:  |  Height:  |  Size: 9.3 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 8.2 KiB After Width:  |  Height:  |  Size: 8.3 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 40 KiB After Width:  |  Height:  |  Size: 40 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-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/event-tiles-irc-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 56 KiB After Width:  |  Height:  |  Size: 56 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 40 KiB After Width:  |  Height:  |  Size: 40 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: 56 KiB After Width:  |  Height:  |  Size: 57 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 51 KiB After Width:  |  Height:  |  Size: 51 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 58 KiB After Width:  |  Height:  |  Size: 58 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: 52 KiB After Width:  |  Height:  |  Size: 52 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: 51 KiB After Width:  |  Height:  |  Size: 52 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: 55 KiB After Width:  |  Height:  |  Size: 56 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 51 KiB After Width:  |  Height:  |  Size: 51 KiB

BIN

playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-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