* Deduplicate more icons using Compound Design Tokens
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>
(cherry picked from commit 7448bd52e2ff354917d6e5f769ca052961c13aa0)
* [create-pull-request] automated change (#12966)
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
* Add timezone to right panel profile.
* Add setting to publish timezone
* Add string for timezone publish
* Automatically update timezone when setting changes.
* Refactor to using a hook
And automatically refresh the timezone every minute.
* Check for feature support for extended profiles.
* lint
* Add timezone
* Remove unintentional changes
* Use browser default timezone.
* lint
* tweaks
* Set timezone publish at the device level to prevent all devices writing to the timezone field.
* Update hook to use external client.
* Add test for user timezone.
* Update snapshot for preferences tab.
* Hide timezone info if not provided.
* Stablize test
* Fix date test types.
* prettier
* Add timezone tests
* Add test for invalid timezone.
* Update screenshot
* Remove check for profile.
---------
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
* Update `@vector-im/compound-design-tokens`
* Update jest snapshots
* Update playwright snapshots
* Use `--cpd-font-body-lg-semibold` for toast
* Use `--cpd-font-body-lg-semibold` for other elements
* Remaining heading fix
* Rename general user settings to account
Everything 'general' is now elsewhere, so this is ready for its
new name.
* Update snapshots
* Rename & update playwright test
* Rename class & remove unused CSS class
* Change test ID
* rethemendex
* More tests!!
* snapshots
* Put the screenshots back in the new place
* Fix tests with restoreAllMocks
* More screenshot renaming
* More test fixes & screenshot updates
* More test fixes
* un-skip
* Typo
Co-authored-by: Robin <robin@robin.town>
---------
Co-authored-by: Robin <robin@robin.town>
* Change icon for general/account tab
...and add support for compound design token icons to TabbedView,
changing all the other icons over while we're at it.
* Update snapshots
* Fix responsive mode
* Missed one
* truthy-check the whole block
* Use asset imports
* Update snapshots
* Warn users on unsupported browsers before they lack features
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update Learn more link
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>
* Update toast styles to match Figma
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove test code
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* update tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update snapshots
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Hide tooltips in screenshot tests by default
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Blank out dialog backgrounds by default
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Crop image-upload-preview screenshot
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Stabilise width of masked user is in user profile
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Tidy
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Add sign out button to settings profile section
And move the logic for displaying the dialog out of the user menu
to somewhere it can be re-used.
Also close any open dialog on logout, because otherwise, well... you
can guess.
* Missing import
* Update screenshot
* This button doesn't need to be an anchor
* Use Flex component
* Use new force-close function
* More tests
* Split up slow Playwright tests
To optimise parallelism
Deals with:
```
Slow test file: read-receipts/redactions.spec.ts (5.4m)
Slow test file: read-receipts/new-messages.spec.ts (3.9m)
Slow test file: read-receipts/high-level.spec.ts (3.6m)
Slow test file: read-receipts/editing-messages.spec.ts (3.1m)
Slow test file: read-receipts/reactions.spec.ts (2.2m)
Slow test file: crypto/crypto.spec.ts (2.4m)
Slow test file: settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts (1.2m)
Slow test file: composer/composer.spec.ts (1.1m)
Slow test file: crypto/verification.spec.ts (1.1m)
```
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Move around snapshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Add test reporter to prevent stale screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Iterate
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix test
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Iterate
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove darwin screenshots which should not have been checked in
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix absolute vs relative path mismatch
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Revert "Remove darwin screenshots which should not have been checked in"
This reverts commit 1e189977fa9ec873339fc02b2b231a314809b2d5.
* Iterate
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Revert "Revert "Remove darwin screenshots which should not have been checked in""
This reverts commit 5144b9b28e31ca543b2c5d02820c3f957dbd8c04.
* Iterate
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove stale screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Revert "Remove stale screenshots"
This reverts commit 9beae9974557c1ffa99c2372da280bb0da407bd1.
* Apply same sanitization as Playwright for file name consistency
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* add dev dep
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove stale screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Discard changes to playwright/flaky-reporter.ts
* Update end-to-end-tests.yaml
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Split up slow Playwright tests
To optimise parallelism
Deals with:
```
Slow test file: read-receipts/redactions.spec.ts (5.4m)
Slow test file: read-receipts/new-messages.spec.ts (3.9m)
Slow test file: read-receipts/high-level.spec.ts (3.6m)
Slow test file: read-receipts/editing-messages.spec.ts (3.1m)
Slow test file: read-receipts/reactions.spec.ts (2.2m)
Slow test file: crypto/crypto.spec.ts (2.4m)
Slow test file: settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts (1.2m)
Slow test file: composer/composer.spec.ts (1.1m)
Slow test file: crypto/verification.spec.ts (1.1m)
```
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Move around snapshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix test
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Move language settings to 'preferences'
Their new home is in this tab
* Update snapshot
* Move playwright test code
* Add test
* tests
* Update screenshot
* WIP update of threepid settings section
* Remove email / phone number section from original place
and don't show the new one if 3pids are disabled
* Update snapshots
* Pull identity server / 3pid binding settings out to separate component
and put it in the security & privacy section which is its new home
* Update snapshot
* Move relevant part of test & update screenshots / snapshots
* Remove unnecessary dependency
* Add test for discovery settings
* Add spacing in terms agreement
* Keep dialog glass border on narrow screens
It got pushed off the edge and eventually disappeared on narrow
screens, so force it to always be present.
* Update screenshot
* New user profile UI in User Settings
Using new Edit In Place component.
* Show avatar upload error
* Fix avatar upload error
* Wire up errors & feedback for display name setting
* Implement avatar upload / remove progress toast
* Add 768px breakpoint
* Fix display of no avatar in avatar setting controls
There was supposed to be a person icon but it was invisible, and also
would have been inappropriate for room avatars anyway.
This makes it match the designs by being the same as whatever the
default avatar is.
* Fix room profile display
* Update edit icon on avatarsetting comnponent
* Change avatarsetting componment to use a menu
As per the designs, remove the 'remove' link and instead have a menu
pop up to either upload a new file or remove the avatar.
This also changes the room profile viw, since that uses the same view.
* Update to released compund-web with required components / fixes
* Require compound-web 4.4.0
because we do need it
* Update snapshots
Because of course all the auto-generated IDs of unrelated things
have changed.
* Fix duplicate import
* Fix CSS comment
* Update snapshot
* Run all the tests so the ids stay the same
* Start of a test for ProfileSettings
* More tests
* Test that a toast appears
* Test ToastRack
* Update snapshots
* Add the usernamee control
* Fix playwright tests
* New compound version for editinplace fixes
* Fix useId to not just generate a constant ID
* Use the label in the username component
* Fix widths of test boxes
* Update screenshots
* Put ^ back on compound-web version
* Split CSS for room & user profile settings
and name the components correspondingly
* Fix playwright test
* Update room settings screenshot
* Use original screenshot instead
* Add required props in test
* Fix test
* Also here
* Update screenshots
* Remove user icon
...which is unused now, as far as I can see.
* Fix styling of unrelated buttons
Needed to be added in other places otherwise the specificity changes.
Also put the old screenshots back.
* Add copyright year
* Fix copyright year
* Switch to useMatrixClientContext
* Fix other test
* Make clickable with no avatar again and fix tests
and renmove a test for the remove button which is no longer there
* Put back missing CSS to make the menu entry red
* Fix type error
* Fix tests
* Supply open / onOpenChange props
* Fix tests
* There is no hover anymore
* Use the computed name, not the name which may be null
* Fix room avatar remove behaviour
* Remove redundant else
* New user profile UI in User Settings
Using new Edit In Place component.
* Show avatar upload error
* Fix avatar upload error
* Wire up errors & feedback for display name setting
* Implement avatar upload / remove progress toast
* Add 768px breakpoint
* Fix display of no avatar in avatar setting controls
There was supposed to be a person icon but it was invisible, and also
would have been inappropriate for room avatars anyway.
This makes it match the designs by being the same as whatever the
default avatar is.
* Fix room profile display
* Update to released compund-web with required components / fixes
* Require compound-web 4.4.0
because we do need it
* Update snapshots
Because of course all the auto-generated IDs of unrelated things
have changed.
* Fix duplicate import
* Fix CSS comment
* Update snapshot
* Run all the tests so the ids stay the same
* Start of a test for ProfileSettings
* More tests
* Test that a toast appears
* Test ToastRack
* Update snapshots
* Add the usernamee control
* Fix playwright tests
* New compound version for editinplace fixes
* Fix useId to not just generate a constant ID
* Use the label in the username component
* Fix widths of test boxes
* Update screenshots
* Put ^ back on compound-web version
* Split CSS for room & user profile settings
and name the components correspondingly
* Fix playwright test
* Update room settings screenshot
* Use original screenshot instead
* Add required props in test
* Fix test
* Also here
* Update screenshots
* Remove user icon
...which is unused now, as far as I can see.
* Fix styling of unrelated buttons
Needed to be added in other places otherwise the specificity changes.
Also put the old screenshots back.
* Add copyright year
* Fix copyright year
* Switch to useMatrixClientContext
* Fix other test
* New user profile UI in User Settings
Using new Edit In Place component.
* Show avatar upload error
* Fix avatar upload error
* Wire up errors & feedback for display name setting
* Implement avatar upload / remove progress toast
* Add 768px breakpoint
* Fix room profile display
* Update to released compund-web with required components / fixes
* Require compound-web 4.4.0
because we do need it
* Update snapshots
Because of course all the auto-generated IDs of unrelated things
have changed.
* Fix duplicate import
* Fix CSS comment
* Update snapshot
* Run all the tests so the ids stay the same
* Start of a test for ProfileSettings
* More tests
* Test that a toast appears
* Test ToastRack
* Update snapshots
* Add the usernamee control
* Fix playwright tests
* New compound version for editinplace fixes
* Fix useId to not just generate a constant ID
* Use the label in the username component
* Fix widths of test boxes
* Update screenshots
* Put ^ back on compound-web version
* Split CSS for room & user profile settings
and name the components correspondingly
* Fix playwright test
* Update room settings screenshot
* Use original screenshot instead
* Fix styling of unrelated buttons
Needed to be added in other places otherwise the specificity changes.
Also put the old screenshots back.
* Add copyright year
* Fix copyright year
* Collapse UserSettings tabs to just icons on narrow screens
* Add screenshot test
* Better comment formatting.
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Comment the media query
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Convert tabbedview to functional component
The 'Tab' is still a class, so now it's a functional component that
has a supporting class, which is maybe a bit... jarring, but I think
is actually perfectly logical.
* put comment back
* Fix bad tab ID behaviour
* Make TabbedView a controlled component
This does mean the logic of keeping what tab is active is now in each
container component, but for a functional component, this is a single
line. It makes TabbedView simpler and the container components always
know exactly what tab is being displayed rather than having to effectively
keep the state separately themselves if they wanted it.
Based on https://github.com/matrix-org/matrix-react-sdk/pull/12478
* Move the active tab in user settings to the dialog title
Separated by a colon, as per the new design.
* Update snapshots
* Update a playwright test
* Fix more tests / snapshots
* Attempt to test all the cases of titleForTabID
* More tests
* Take the TAC out of labs!
Requires https://github.com/matrix-org/matrix-react-sdk/pull/12438
and ideally https://github.com/matrix-org/matrix-react-sdk/pull/12418
* i18n
* Add test method
That's needed now we we don't include threads in the notif count in the tests
* One less labs setting
* Update snapshot
* Disable release announcement
* Unused import
* Fix some screenshots
* Fix all the unread test cases now room unreads don't include threads
* Fix more tests
* Even more test fixes
* Still more test fixes
* Oh goodness, it's more test fixes
* Fix selectors now there are 2 buttons called Threads
* Disable some tests that aren't passing
for reasons that don't appear releated to any of the TAC work, as
per the comment.
* Remove debugging
* Oops, removed too much
* Rearrange user settings tab order to move Sessions up to 2nd
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Iterate copy & iconography on Settings > Sessions > Link new device
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Iterate design of Scan QR code screen
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Tweak styles
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update tests and snapshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update tests and snapshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.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
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.
* Fix alignment of user menu avatar
https://github.com/matrix-org/matrix-react-sdk/pull/12267 made the avatar
a couple of pixels out of alignment with the space icons. It just needed
to be moved 2px to the right to match the 18px margin of the space icons
(including the padding from the black border).
Also change elements in the user menu to block elements so they don't
generate extra vertical space in the user menu div, which was causing the
hairline to be too far down.
* Update snapshots
* Typo
Co-authored-by: Robin <robin@robin.town>
* Reference the span by class
* The img wasn't actually necessary here
---------
Co-authored-by: Robin <robin@robin.town>
* Fix the space panel getting bigger when gaining a scroll bar
Just makes the scrollbar gutter stable and removes 8px of padding
to compensate, so it will make the bar slightly larger, but it will
no longer change size weirdly if you have too many spaces in too short
a window.
* Tweak margins to keep space panel the same size
* Try 1px more
* Try 1px more to the left
* Fix sizes and disable flex when in narrow mode
* Update screenshots
* Another screenshot
* Last screenshot hopefully
* 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
* Stabilise bot MXID length
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Stabilise test user MXID
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>
* Migrate location.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate location.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate appearance-user-settings-tab.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate device-management.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate general-room-settings-tab.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate general-user-settings-tab.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate preferences-user-settings-tab.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Migrate security-user-settings-tab.spec.ts from Cypress to Playwright
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Add screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Add screenshot
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Deflake
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>
* Move settings into subclass
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
