Refine menu, toast, and popover colors #12247

robintown · 2024-02-14T00:21:46Z

So that they use Compound semantic colors correctly and appear more similar to the real components now found in Compound.

Before	After

The border on the above elements is necessary to visually separate the menu from the background in dark themes.

For element-hq/element-web#26992

Here's what your changelog entry will look like:

✨ Features

Refine menu, toast, and popover colors (#12247).

robintown · 2024-02-14T00:23:52Z

res/css/views/rooms/_MessageComposer.pcss

@@ -314,74 +314,6 @@ limitations under the License.
    }
 }

-.mx_MessageComposer_formatting {


While updating the colors of the message action bar and composer formatting bar, I found that none of these classes are used anymore

So that they use Compound semantic colors correctly and appear more similar to the real components now found in Compound.

This is part 3 of the Compound color refinement work. I've updated the following components to reflect design decisions 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 - Dialogs (corner radius changed to match the new popover styles from matrix-org#12247)

This is part 3 of the Compound color refinement work. I've updated the following components to reflect design decisions 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 - Dialogs (corner radius changed to match the new popover styles from matrix-org#12247) - Tooltips

This reverts commit 0856c76.

This reverts commit 0856c76. Co-authored-by: David Langley <langley.dave@gmail.com>

@robintown

Changes in [1.11.59](https://github.com/element-hq/element-web/releases/tag/v1.11.59) (2024-02-27) ================================================================================================== ## 🦖 Deprecations * Enable custom themes to theme Compound ([#12240](matrix-org/matrix-react-sdk#12240)). Contributed by @robintown. * Remove welcome bot `welcome_user_id` support ([#12153](matrix-org/matrix-react-sdk#12153)). Contributed by @t3chguy. ## ✨ Features * Ignore activity in TAC ([#12269](matrix-org/matrix-react-sdk#12269)). Contributed by @florianduros. * Use browser's font size instead of hardcoded `16px` as root font size ([#12246](matrix-org/matrix-react-sdk#12246)). Contributed by @florianduros. * Revert "Use Compound primary colors for most actions" ([#12264](matrix-org/matrix-react-sdk#12264)). Contributed by @florianduros. * Revert "Refine menu, toast, and popover colors" ([#12263](matrix-org/matrix-react-sdk#12263)). Contributed by @florianduros. * Fix Native OIDC for Element Desktop ([#12253](matrix-org/matrix-react-sdk#12253)). Contributed by @t3chguy. * Improve client metadata used for OIDC dynamic registration ([#12257](matrix-org/matrix-react-sdk#12257)). Contributed by @t3chguy. * Refine menu, toast, and popover colors ([#12247](matrix-org/matrix-react-sdk#12247)). Contributed by @robintown. * Call the AsJson forms of import and exportRoomKeys ([#12233](matrix-org/matrix-react-sdk#12233)). Contributed by @andybalaam. * Use Compound primary colors for most actions ([#12241](matrix-org/matrix-react-sdk#12241)). Contributed by @robintown. * Enable redirected media by default ([#12142](matrix-org/matrix-react-sdk#12142)). Contributed by @turt2live. * Reduce TAC width by `16px` ([#12239](matrix-org/matrix-react-sdk#12239)). Contributed by @florianduros. * Pop out of Threads Activity Centre ([#12136](matrix-org/matrix-react-sdk#12136)). Contributed by @florianduros. * Use new semantic tokens for username colors ([#12209](matrix-org/matrix-react-sdk#12209)). Contributed by @robintown. ## 🐛 Bug Fixes * [Backport staging] Fix spurious session corruption error ([#12287](matrix-org/matrix-react-sdk#12287)). Contributed by @RiotRobot. * Fix the space panel getting bigger when gaining a scroll bar ([#12267](matrix-org/matrix-react-sdk#12267)). Contributed by @dbkr. * Fix gradients spacings on the space panel ([#12262](matrix-org/matrix-react-sdk#12262)). Contributed by @dbkr. * Remove hardcoded `Element` in tac labs description ([#12266](matrix-org/matrix-react-sdk#12266)). Contributed by @florianduros. * Fix branding in "migrating crypto" message ([#12265](matrix-org/matrix-react-sdk#12265)). Contributed by @richvdh. * Use h1 as first heading in dialogs ([#12250](matrix-org/matrix-react-sdk#12250)). Contributed by @dbkr. * Fix forced lowercase username in login/registration flows ([#9329](matrix-org/matrix-react-sdk#9329)). Contributed by @vrifox. * Update the TAC indicator on event decryption ([#12243](matrix-org/matrix-react-sdk#12243)). Contributed by @dbkr. * Fix OIDC delegated auth account url check ([#12242](matrix-org/matrix-react-sdk#12242)). Contributed by @t3chguy. * New Header edgecase fixes: Close lobby button not shown, disable join button in various places, more... ([#12235](matrix-org/matrix-react-sdk#12235)). Contributed by @toger5. * Fix TAC button alignment when expanded ([#12238](matrix-org/matrix-react-sdk#12238)). Contributed by @florianduros. * Fix tooltip behaviour in TAC ([#12236](matrix-org/matrix-react-sdk#12236)). Contributed by @florianduros. Changes in [1.11.58](https://github.com/element-hq/element-web/releases/tag/v1.11.58) (2024-02-13) ================================================================================================== ## ✨ Features * 🦀 🔒 **The flag to enable the Rust crypto implementation is now set to `true` by default. This means that without any additional configuration every new login will use the new cryptography implementation.** * Add Element call related functionality to new room header ([#12091](matrix-org/matrix-react-sdk#12091)). Contributed by @toger5. * Add labs flag for Threads Activity Centre ([#12137](matrix-org/matrix-react-sdk#12137)). Contributed by @florianduros. * Refactor element call lobby + skip lobby ([#12057](matrix-org/matrix-react-sdk#12057)). Contributed by @toger5. * Hide the "Message" button in the sidebar if the CreateRooms components should not be shown ([#9271](matrix-org/matrix-react-sdk#9271)). Contributed by @dhenneke. * Add notification dots to thread summary icons ([#12146](matrix-org/matrix-react-sdk#12146)). Contributed by @dbkr. ## 🐛 Bug Fixes * [Backport staging] Fix the StorageManger detecting a false positive consistency check when manually migrating to rust from labs ([#12230](matrix-org/matrix-react-sdk#12230)). Contributed by @RiotRobot. * Fix logout can take ages ([#12191](matrix-org/matrix-react-sdk#12191)). Contributed by @BillCarsonFr. * Fix `Mark all as read` in settings ([#12205](matrix-org/matrix-react-sdk#12205)). Contributed by @florianduros. * Fix default thread notification of the new RoomHeader ([#12194](matrix-org/matrix-react-sdk#12194)). Contributed by @florianduros. * Fix display of room notification debug info ([#12183](matrix-org/matrix-react-sdk#12183)). Contributed by @dbkr.

This is a reintroduction of matrix-org#12247, with the difference that modal styles have now been refreshed as well.

* Refine styles of menus, toasts, popovers, and modals This is a reintroduction of #12247, with the difference that modal styles have now been refreshed as well. * Restore the fixed heights of some dialogs * Fix formatting and flaky screenshot

* Upgrade dependency to matrix-js-sdk@31.5.0-rc.0 * v3.94.0-rc.0 * Handle up/down as well as left/right for horizontal toolbars for improved a11y (matrix-org#12305) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove references to internal js-sdk type `CryptoBackend` (matrix-org#12321) * Remove references to internal js-sdk type `CryptoBackend` * Use `Paramteters` to avoid `ts-ignore` * Use `strong` element to semantically denote visually emphasised content (matrix-org#12320) * Use `strong` element to semantically denote visually emphasised content Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused slider component (matrix-org#12303) It is unused as of matrix-org#12246. I noticed this while working on matrix-org#12299. * Update matrix-org (matrix-org#11966) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update all non-major dependencies (matrix-org#12322) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency stylelint-scss to v6.2.0 (matrix-org#12323) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @vector-im/compound-web to v3.1.3 (matrix-org#12281) * Update dependency @vector-im/compound-web to v3.1.3 * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix TAC width due to compound update (matrix-org#12326) --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Florian Duros <florianduros@element.io> * Call guest access link creation to join calls as a non registered user via the EC SPA (matrix-org#12259) * Add externall call link button if in public call room Signed-off-by: Timo K <toger5@hotmail.de> * Allow configuring a spa homeserver url. Signed-off-by: Timo K <toger5@hotmail.de> * temp Signed-off-by: Timo K <toger5@hotmail.de> * remove homeserver url Signed-off-by: Timo K <toger5@hotmail.de> * Add custom title to share dialog. So that we can use it as a "share call" dialog. Signed-off-by: Timo K <toger5@hotmail.de> * - rename config options - only show link button if a guest url is provided - share dialog custom Title - rename call share labels Signed-off-by: Timo K <toger5@hotmail.de> * rename to title_link Signed-off-by: Timo K <toger5@hotmail.de> * add tests for ShareDialog Signed-off-by: Timo K <toger5@hotmail.de> * add tests for share call button Signed-off-by: Timo K <toger5@hotmail.de> * review Signed-off-by: Timo K <toger5@hotmail.de> * remove comment Signed-off-by: Timo K <toger5@hotmail.de> * Update src/components/views/dialogs/ShareDialog.tsx Co-authored-by: David Baker <dbkr@users.noreply.github.com> --------- Signed-off-by: Timo K <toger5@hotmail.de> Co-authored-by: David Baker <dbkr@users.noreply.github.com> * Fix spotlight opening in TAC (matrix-org#12315) * Fix spotlight opening in TAC * Add tests * Remove `RovingTabIndexProvider` * Reset power selector on API failure to prevent state mismatch (matrix-org#12319) * Reset power selector on API failure to prevent state mismatch Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Allow onChange to be sync or async Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add unmounted check Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use correct push rule to evaluate room-wide mentions (matrix-org#12318) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve Forward Dialog a11y by switching to roving tab index interactions (matrix-org#12306) * Improve Forward Dialog a11y by switching to roving tab index interactions Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve screen reader readout Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve screen reader readout Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * [create-pull-request] automated change (matrix-org#12330) Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com> * Reuse media content/info types from the js-sdk (matrix-org#12308) * TAC: Fix CSS & component typos (matrix-org#12333) * Fix CSS & component typo * Update snapshots * Element Call: fix widget shown while its still loading (`waitForIframeLoad=false`) (matrix-org#12292) * show loading spinner also if waitForIframeLoad = false Configure EC so it waits for the content loaded action !WARNING This breaks compatibility with the full mesh branch. I would like to discuss here if/when we can do that. Signed-off-by: Timo K <toger5@hotmail.de> * stop show loading screen on widget ready (instead of preparing) Signed-off-by: Timo K <toger5@hotmail.de> * wait until widget loading is over before comparing screenshots Signed-off-by: Timo K <toger5@hotmail.de> * fix waitForIFrame=true widgets Signed-off-by: Timo K <toger5@hotmail.de> * test Signed-off-by: Timo K <toger5@hotmail.de> * always start with loading true. + cleanup Signed-off-by: Timo K <toger5@hotmail.de> * simplify loading Signed-off-by: Timo K <toger5@hotmail.de> * update snapshots (start not in loading state for waitForIframe = true widgets) Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de> * Upgrade dependency to matrix-js-sdk@31.5.0 * v3.94.0 * Resetting package fields for development * Reset matrix-js-sdk back to develop branch * Refine styles of menus, toasts, popovers, and modals (matrix-org#12332) * Refine styles of menus, toasts, popovers, and modals This is a reintroduction of matrix-org#12247, with the difference that modal styles have now been refreshed as well. * Restore the fixed heights of some dialogs * Fix formatting and flaky screenshot * Make EC widget theme reactive - Update widget url when the theme changes (matrix-org#12295) * update widget url when the theme changes Signed-off-by: Timo K <toger5@hotmail.de> * quick "make it EC specific" workaround proposal. Signed-off-by: Timo K <toger5@hotmail.de> * use `matches` Signed-off-by: Timo K <toger5@hotmail.de> * test coverage Signed-off-by: Timo K <toger5@hotmail.de> * more test coverage Signed-off-by: Timo K <toger5@hotmail.de> * fix jest Signed-off-by: Timo K <toger5@hotmail.de> * add tests for theme changes Signed-off-by: Timo K <toger5@hotmail.de> * update snapshots Signed-off-by: Timo K <toger5@hotmail.de> * test for theme update with non ec widget Signed-off-by: Timo K <toger5@hotmail.de> * add dark custom theme widget url Signed-off-by: Timo K <toger5@hotmail.de> * trigger conditions for theme cleanup Signed-off-by: Timo K <toger5@hotmail.de> * update tests using testId Signed-off-by: Timo K <toger5@hotmail.de> * use typed event emitter for theme watcher Signed-off-by: Timo K <toger5@hotmail.de> * simplify condition Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Signed-off-by: Timo K <toger5@hotmail.de> Co-authored-by: RiotRobot <releases@riot.im> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: Robin <robin@robin.town> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: Timo <16718859+toger5@users.noreply.github.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com> Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>

* Refine styles of menus, toasts, popovers, and modals This is a reintroduction of #12247, with the difference that modal styles have now been refreshed as well. * Restore the fixed heights of some dialogs * Fix formatting and flaky screenshot

robintown added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Feb 14, 2024

robintown requested a review from a team as a code owner February 14, 2024 00:21

robintown requested review from t3chguy and MidhunSureshR February 14, 2024 00:21

robintown mentioned this pull request Feb 14, 2024

Compound color refinements element-hq/element-web#26992

Closed

robintown commented Feb 14, 2024

View reviewed changes

github-actions bot deployed to Netlify February 14, 2024 00:24 View deployment

github-actions bot deployed to EndToEndTests February 14, 2024 00:41 View deployment

Refine menu, toast, and popover colors

110f994

So that they use Compound semantic colors correctly and appear more similar to the real components now found in Compound.

robintown force-pushed the menu-toast-popover branch from fcd1464 to 110f994 Compare February 14, 2024 03:08

github-actions bot deployed to Netlify February 14, 2024 03:10 View deployment

github-actions bot deployed to EndToEndTests February 14, 2024 03:27 View deployment

MidhunSureshR approved these changes Feb 14, 2024

View reviewed changes

robintown added this pull request to the merge queue Feb 14, 2024

Merged via the queue into matrix-org:develop with commit 0856c76 Feb 14, 2024
19 checks passed

robintown deleted the menu-toast-popover branch February 14, 2024 22:50

robintown mentioned this pull request Feb 15, 2024

Refine the colors of many smaller components #12255

Closed

langleyd added a commit that referenced this pull request Feb 19, 2024

Revert "Refine menu, toast, and popover colors (#12247)"

0dc0336

This reverts commit 0856c76.

florianduros mentioned this pull request Feb 20, 2024

Revert "Refine menu, toast, and popover colors" #12263

Merged

github-merge-queue bot pushed a commit that referenced this pull request Feb 20, 2024

Revert "Refine menu, toast, and popover colors (#12247)" (#12263)

ac435c8

This reverts commit 0856c76. Co-authored-by: David Langley <langley.dave@gmail.com>

robintown added a commit to robintown/matrix-react-sdk that referenced this pull request Mar 11, 2024

Refine styles of menus, toasts, popovers, and modals

6efbd86

This is a reintroduction of matrix-org#12247, with the difference that modal styles have now been refreshed as well.

robintown mentioned this pull request Mar 11, 2024

Refine styles of menus, toasts, popovers, and modals #12332

Merged

robintown added a commit to robintown/matrix-react-sdk that referenced this pull request Mar 11, 2024

Refine styles of menus, toasts, popovers, and modals

bb8b954

This is a reintroduction of matrix-org#12247, with the difference that modal styles have now been refreshed as well.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refine menu, toast, and popover colors #12247

Refine menu, toast, and popover colors #12247

robintown commented Feb 14, 2024 •

edited by github-actions bot

Loading

robintown Feb 14, 2024

Refine menu, toast, and popover colors #12247

Refine menu, toast, and popover colors #12247

Conversation

robintown commented Feb 14, 2024 • edited by github-actions bot Loading

✨ Features

robintown Feb 14, 2024

Choose a reason for hiding this comment

robintown commented Feb 14, 2024 •

edited by github-actions bot

Loading