Refine styles of controls to match Compound (#12299)

Browse source

This changes the styles of buttons, other form controls, and tabs in settings to:

1. Improve their usage of semantic colors, so that they adapt correctly to custom themes
2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app

This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.

...

This commit is contained in:

Robin 2024-03-04 23:25:47 -05:00 • committed by GitHub

parent 5c8b14c53e

commit 6eafe0e5a8

No known key found for this signature in database

GPG key ID: B5690EEEBB952194

119 changed files with 225 additions and 201 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/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-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.5 KiB

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-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.5 KiB

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-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

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png

View file

Binary file not shown.

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

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: 8.2 KiB After Width:  |  Height:  |  Size: 8.4 KiB

BIN

playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-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/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png

View file

Binary file not shown.

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

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: 62 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/register/email.spec.ts/registration-check-your-email-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 1.3 MiB After Width:  |  Height:  |  Size: 1.3 MiB

BIN

playwright/snapshots/register/register.spec.ts/email-prompt-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 1.1 MiB After Width:  |  Height:  |  Size: 1.1 MiB

BIN

playwright/snapshots/register/register.spec.ts/registration-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 1.2 MiB After Width:  |  Height:  |  Size: 1.2 MiB

BIN

playwright/snapshots/register/register.spec.ts/server-picker-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 1.2 MiB After Width:  |  Height:  |  Size: 1.2 MiB

BIN

playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-11-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-21-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-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/spaces/spaces.spec.ts/invite-teammates-dialog-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-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/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 15 KiB After Width:  |  Height:  |  Size: 15 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: 20 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: 46 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: 40 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: 40 KiB After Width:  |  Height:  |  Size: 41 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: 51 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.5 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 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.1 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.2 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: 49 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: 55 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: 56 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: 50 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: 57 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: 51 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: 50 KiB After Width:  |  Height:  |  Size: 51 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: 54 KiB After Width:  |  Height:  |  Size: 55 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: 50 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: 49 KiB After Width:  |  Height:  |  Size: 50 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: 92 KiB After Width:  |  Height:  |  Size: 93 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: 91 KiB After Width:  |  Height:  |  Size: 92 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: 100 KiB After Width:  |  Height:  |  Size: 101 KiB

BIN

playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-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/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png

View file

Binary file not shown.

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

BIN

playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png

View file

Binary file not shown.

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