* Improve readability of badges and pills
Badges will now always use light theme colors so that they become white-on-gray in both themes, and the contrast of pills has been increased so that they use primary action colors as the background.
* Fix tests
* Add PowerLevelSelector.tsx.
It's extracting the current behavior of the privileged users and muted of `RolesRoomSettingsTab.tsx` into a dedicated component.
It's also adding a new apply button.
* Use `PowerLevelSelector` to render privileged and muted users in `RolesRoomSettingsTab`
* Update existing tests
* Add playwright test
* Fix typo
* Fix typo
* Support the mark as unread flag
* Add mark as unread menu option
and make clering notifications also clear the unread flag
* Mark as read on viewing room
* Tests
* Remove random import
* Don't show mark as unread for historical rooms
* Fix tests & add test for menu option
* Test RoomNotificationState updates on unread flag change
* Test it doesn't update on other room account data
* New icon for mark as unread
* Add analytics events for mark as (un)read
* Bump to new analytics-events package
* Read from both stable & unstable prefixes
* Cast to boolean before checking
to avoid setting state unnecessarily
* Typo
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Doc external interface (and the rest at the same time)
* Doc & rename unread market set function
* Doc const exports
* Remove listener on destroy
* Add playwright test
* Clearer language, hopefully
* Move comment
* Add reference to the MSC
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Expand on function doc
* Remove empty beforeEach
* Rejig badge logic a little and add tests
* Fix basdges to not display dots in room sublists again
and hopefully rename the forceDot option to something that better
indicates what it does, and add tests.
* Remove duplicate license header (?)
* Missing word (several times...)
* Incorporate PR suggestion on badge type switch
* Better description in doc comment
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Update other doc comments in the same way
* Remove duplicate quote
* Use quotes consistently
* Better test name
* c+p fail
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Refine styles of menus, toasts, popovers, and modals
This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/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
* 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>
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.
* WIP Use browser font size instead of hardcoded 16px
* Add font migration to v3
* Remove custom font size input
* Use a dropdown instead of a slider
* Add margin to the font size dropdown
* Fix `UpdateFontSizeDelta` action typo
* Fix `fontScale`in `Call.ts`
* Rename `baseFontSizeV3` to `fontSizeDelta`
* Update playwright test
* Add `default` next to the browser font size
* Remove remaining `TODO`
* Remove falsy `private`
* Improve doc
* Update snapshots after develop merge
* Remove commented import
* 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
* Add notification dots to thread summary icons
Adopts new IndicatorIcon from compound to have threads icons with
indicator dot (that aren't also buttons). Adds green & red dots on
the threads icon in the thread summary to indicate notifications.
Changes the notification level dots colours in the threads panel to
be green to match.
* Update test for new CSS class
* Update snapshots with new class name
* Another snapshot update for new class name
* Replace more uses of old class name in tests
* More snapshot updates for new class name
* Unsure how this ever worked in chronological mode
* More snapshot updates
* Fix dot colours
* Upgrade to compound-web 3
* Fix computed notification levels
* Add test for notificationLevelToIndicator
Add a paramter to make it a dot rather than a badge rather than mangling
it to a dot with CSS in EventTile. Move it to a place in the DOM that reflects
where it's actually supposed to sit rather than repositioning it with CSS.
Tweak sizes to match what figma says (8px everywhere for dots rather than 6px in
some places as it was).
* Don't reference the notification levels by colour
We're about to change what colours they are so either we'd have to rename
a bunch of constants. We may as well make things not reference what colour
anything is in the actual UI. Hopefully these constants are clear enough.
* Rename NotificationColor -> NotificationLevel
* Red -> Highlight
* Grey -> Notification
* Bold -> Activity
* Anywhere else that calls it 'color' -> 'level'
Also fixes some weird mixes of US & UK English.
It turns out this is referenced in... quite a lot of places, so this is
quite a large PR. It can't really be much smaller, sorry.
* One test rename & some hiding due to ts-ignore
* More hiding behind ts-ignore
* Damn you, @ts-ignore...
* Fix test CSS values
* Missed some colour -> level
Co-authored-by: Florian Duros <florianduros@element.io>
* Change other instances of variables renamed in suggestion
* Update new test for renames
---------
Co-authored-by: Florian Duros <florianduros@element.io>
* Switch StatelessNotificationBadge to using Compound Tooltips
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix test
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate CheckEmail & VerifyEmailModal to Compound tooltips
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix test
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* 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>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* 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 file-panel.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate right-panel.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate notification-panel.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix test flakes
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* delint
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update screenshot
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Try stabilise test
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* sleep
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Handle both cases
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix assertion
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Flip
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Test
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Iterate
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Test
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Disable Twemoji emoji font by default
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Force Twemoji font in SAS Verification
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Iterate
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Iterate
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Add tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Improve tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update RoomSummaryCard navigation links
* Fix tests
* remove unneeded test
* "@vector-im/compound-web": "0.8.0"
* Fix: search button no transition on hover
* Fix: disabled invite option is not reflected in UI
* test canInviteTo
* update snapshots for CW 0.8.1
* unit test inviteToRoom
* unit test tagRoom
* add member link to roomsummarycard when using legacy room header
* use onChange instead of onClick for ToggleMenuItem favourite room
* update selectors in cypress tests
* always show people menu item
* add hover style to close button
* add padding around room name
* prettier
---------
Co-authored-by: Kerry Archibald <kerrya@element.io>
* Update room summary card header
* test coverage for public room label
* test coverage for public room label (#11841)
* fix encrypted badge selector in cypress/crypto.spec
---------
Co-authored-by: Kerry <kerrya@element.io>
* Fix string ref issue
* Implement unreachable state
* Fix eslint failure
* Fix i18n
* Fix i18n again
* Write cypress test
* Write jest test
* Write more jest tests
* Update method name
* Use unstable prefix
* Always use prefix
This is never to going to be in the spec so always use the io.element
prefix
* Update tests
* Remove redundant code from cypress test
* Use unstable prefix
* Refactor code
* Remove supressOnHover prop
* Remove sub-text label
* Join lines
* Remove blank line
* Add jsdoc
* Fix CSS for uploading-files in threads
* fix-close button to stick at top of container
* re-align close button
* re-align close button
* Fix verification-message-scaling
* add min width to mx_EventTileBubble
---------
Co-authored-by: Kerry <kerrya@element.io>
* make invitation dialog scrollable when room name or invitation text/info is too long.
Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>
* truncate room name in invitation dialog to two lines
Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>
* truncate room name in invitation dialog to two lines
Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>
* fix linter issue
Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>
---------
Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>
* Fixed the layout, added border to match design
* Border fixed for hover and highlighted messages
* moved some selectors up to avoid duplicate selectors
Robin