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.
* Use h1 as first heading in dialogs
The dialog should be modal and therefore the only content active
on the screen, so the title of the dialog should be the top level.
Update snapshots & tests appropriately.
* Just customise the letter spacing on dialog titles
* Use Compound primary colors for most actions
The "accent" color variable is something we should generally not use anymore: it maps to a Compound text token, which makes its semantics inappropriate for icons and backgrounds, and it clashes with the primary colors present on the Compound components we're now bringing into the app. As discussed with design, we would like to phase out its usage on interactive components in favor of the correct icon and background colors from Compound. This is a best-effort attempt at applying new colors to all the major places that we were previously using "accent": mainly, buttons and form controls are affected.
* Update some more colors
* Update test snapshots
* Fix broken screenshot
* Enable custom themes to theme Compound
* Remove the now redundant username color variables
They are replaced by the Compound theming options (specifically, username colors can be themed by changing the color of Compound's decorative color tokens).
* Use new semantic tokens for username colors
To match the tokens now used by the Compound Web avatar component
* Fix incorrect lock icon
* Update screenshots
* Fix CSS stacking contexts for Dialogs & PersistedElement
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix Widget PIP overlay being under the widget and dragging being broken
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix border-radius on widget pip
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix majority of tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix jest retryTimes applying outside of CI
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix remaining tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix React unique key warnings
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix sticker picker
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* id not class
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix widget pip button colour in light theme
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Revert unrelated change
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate InfoTooltip to use Compound Tooltip
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate DecoratedRoomAvatar.tsx to Compound tooltips
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Small type tweaks
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove unused props
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate TextWithTooltip.tsx to Compound tooltips
This adds `contain: strict` to #matrixchat which may have side effects.
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>
* Update snapshot
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Revert accidental layout change to TextWithTooltip from inline to block
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Improve test coverage and simplify
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update snapshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Ditch the sleep call
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Improve coverage
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix performance issues with useRoomMembers
With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless
* Add public room indicator
* Format room members count better
* Add public room test
* Add search to room summary card
* Update settings UI
* Update snapshot
* Remove default title attribute
* Add E2E status in room header
* Clearer logic for dmRoomList
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
* Add test for E2E shield
* Remove dead code
---------
Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
* Create useRoomName hook
Mark RoomName component as deprecated
* Pass out-of-band data to relevant RoomHeader component
* Mark LegacyRoomHeader as deprecated
* Fix incorrect search&replace in _RoomHeader.pcss
* lintfix
* Mark room as optional in room topic hook
* Fix i18n
* Discard use of useCallback
* Change export of useRoomName
* fix ts issue
* lints
* Add room topic to room header
* lintfix
* lintfix & clamp to one line
* Revert optimisations to DecoratedRoomAvatar
* Add test for opening the room summary
* Make transition honour prefer-reduced-motion
* Integrate @vector-im/compound-web
* Use compound type styles
* Use latest version of @vector-im/compound-web
* Change component name
* Fallback when room is undefined
* fix snapshot
* Integrate compound design tokens
The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here
* Pareto color pass on the light theme
* bugfixes in the light color pass
* Compound color pass dark theme
* Compound color pass high contrast
* Fix typo
* fix tooltip
* Fix PR feedback
* fix composer button mixin
* Normalise some of the auth page colors
* Update based on figma feedback
* lintfix
* regenerate theme index
* Fix cypress tests
Removed the CSS assertions in the room header as it overlaps with the Percy snapshot
* fix more e2e tests
* update colors based on feedback
* fix color pass
* Fix theme overrides
* Restore -transparent
* fix color mapping
* Final colour pass update
* Do not consume compound colors directly
* rethemedex
* Update pass
* Final tweaks
* a11y pass
* scope opacity to checkbox and not label
* Add missing customisations var for theming
* lintfix
* remove unwanted test
* Integrate compound design tokens
The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here
* Delete unused or incorrect - sass variables
* Typography pass
* Deprecate _font-weights.pcss and use Compound instead
* lint fix
* Fix snapshot
* Fix typography pass feedback
* Remove unwanted e2e test
cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties
* lintfix
* Migration script for baseFontSize
* Updates after design review
* Update font scaling panel to use min/max size
* Fix custom font
* Fix font slider e2e test
* Update custom font
* Update new baseFontSizeV2
* Disambiguate heading props
* Fix appearance test
* change max font size
* fix e2ee test
* fix tests
* test baseFontSize migration code
* typescript strict
* Migrate baseFontSize account setting
* Change assertion for font size
* Fix font size controller test
Because the style rules do not belong to AppsDrawer.tsx and are used by other multiple components, it is sensible to manage the rules on _common.pcss rather than _AppsDrapwer.pcss to improve maintainability.
* Integrate compound design tokens
The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here
* lintfix
* Use correct SpyInstance import
* Using npm build of design tokens
* Nest - .mx_Dialog .markdown-body
* Nest - .mx_Dialog .markdown-body *
* Run prettier
* Nest
* Nest - * .mx_Dialog_background
* Run prettier
* Nest - * .mx_Dialog
* Nest - mx_Dialog_title.danger
* Use a variable for z-index: default wrapper index
* Use a variable for z-index: static dialog background
* Use a variable for z-index: static dialog itself
* Use a variable for z-index: standard dialog background
* Use a variable for z-index: standard dialog
* Merge :root selector blocks
* Calculate z-index values to fix the order
* Rename the variables
* Include mx_Dialog_buttons_row in mx_Dialog_buttons
mx_Dialog_buttons_row is used on DialogButtons.tsx only inside mx_Dialog_buttons under {additive}
* Run prettier
* Nest `pre code` in `pre`
* Use CSS custom property: --timeline-image-border-radius
Remove the same variable from _MImageBody.pcss
* Rename the property
The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.
* Remove a mixin - mx_Tooltip_dark
The mixin has been used on `_AppsDrawer.pcss` only.
* Rename mx_Tooltip_dark based on the naming policy
'mx_Tooltip_dark' has been used on `AppPermission.tsx` only.
* Remove an obsolete variable - `$MessageTimestamp_width_hover`
Added by 9b54aba4c0
Deprecated 5343be7814
* Replace a variable with a custom property - $MessageTimestamp_width
* Merge with an existing property in :root
rename
* Manage the variable on _MessageTimestamp.pcss
* Replace a Sass variable with a CSS custom property - $container-gap-width
* Replace a Sass variable with a CSS custom property - $container-border-width
The style rules have been obsolete since IA 1.1 feedback toast was removed by 5d89230271.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style rules - `mx_linkButton`
The block was added with fbab8ceeef for CreateKeyBackupDialog.js. It has been replaced with AccessibleButton element (see: onSkipPassPhraseClick on L283 and changeText on L314-316). The last function which had used mx_linkButton (_onOptOutClick) has been removed.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove obsolete style rules - `mx_textButton`
mx_textButton has been replaced with AccessibleButton (with kind="link"). There is also not an element which uses the class.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Use grid layout instead
- BEM naming style
- Increase block gap from 4px to 8px
- Use flexbox inside 'header' grid-area to let the buttons wrapped
- Use variables
- Remove 4px gap when one of the buttons is not rendered
- Change 'body' to 'message'
- Set 'align-self: start' to the icon and spinner
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Unset height of spinner
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Break lines at newline characters with white-space: pre-line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit tests to check decryption failure bars on narrow timeline
- checkTimelineNarrow() looks for buttons by default
- Test indicator as well
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a line
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix double underscores
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix double underscores - pcss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Iterate - buttons at the bottom
- Set common spacing to buttons with variables
- Remove line breaks, yarn run i18n
- Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check waiting headline as well
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Increase spacing between the message and the buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Increase block gap between wrapped buttons for clickability
Apply 8px between wrapped buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Revert bottom margin of buttons which are not expected to be wrapped
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check visibility instead of existence
This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge
This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element currently includes the button(s) only.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint - prettier
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow()
The loading spinner is likely to disappear while checking the bar on the narrow timeline.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Kerry <kerrya@element.io>
* Fix flaky Percy tests of ReplyChain
- Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain
- Use CSS variables for visibility
- Manage those variables on _common.pcss for maintainability
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check receptSent as well for consistency
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Specify zero spacing and remove list-style
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Update our cancel icon
The cancel icon we're using in the app has drifted out of sync with the ones used in our designs. We also had two identical-looking icons, so this consolidates them into one.
I've simultaneously updated our chevron icons, since in the case of the 'jump to unread' timeline button, it became clear that the weight of the new close icon did not match the thinner chevron.
* Don't squish bottom/top-aligned tooltips near the edge of the screen
* Close the timeline panel when returning to the fullscreen timeline view
* Add layout switching capabilities to ElementCall
* Bring the room header in line with the group call designs
* Bring the PiP header in line with the group call designs
* Fix lints
* Clarify tooltip CSS calculations
* Test PipView
* Expand RoomHeader test coverage
* Test PipView more
* Improve accessibility and testability of Tooltip
Adding a role to Tooltip was motivated by React Testing Library's
reliance on accessibility-related attributes to locate elements.
* Make the ReadyWatchingStore constructor safer
The ReadyWatchingStore constructor previously had a chance to
immediately call onReady, which was dangerous because it was potentially
calling the derived class's onReady at a point when the derived class
hadn't even finished construction yet. In normal usage, I guess this
never was a problem, but it was causing some of the tests I was writing
to crash. This is solved by separating out the onReady call into a start
method.
* Rename 1:1 call components to 'LegacyCall'
to reflect the fact that they're slated for removal, and to not clash
with the new Call code.
* Refactor VideoChannelStore into Call and CallStore
Call is an abstract class that currently only has a Jitsi
implementation, but this will make it easy to later add an Element Call
implementation.
* Remove WidgetReady, ClientReady, and ForceHangupCall hacks
These are no longer used by the new Jitsi call implementation, and can
be removed.
* yarn i18n
* Delete call map entries instead of inserting nulls
* Allow multiple active calls and consolidate call listeners
* Fix a race condition when creating a video room
* Un-hardcode the media device fallback labels
* Apply misc code review fixes
* yarn i18n
* Disconnect from calls more politely on logout
* Fix some strict mode errors
* Fix another updateRoom race condition
