14 Commits

Author SHA1 Message Date
Michael Telatynski
1d3421417f Switch to rendering svg icons rather than css masking (#31517)
* Switch to rendering svg icons rather than masking them in left panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused stylesheet

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them for ExternalLink

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them for TabbedView

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them for JoinRuleDropdown

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in ManageRestrictedJoinRuleDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in LeaveSpaceDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in ReplyPreview

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in SearchBox

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in RoomStatusBar

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix advanced.svg

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix bad merge conflict resolution

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-15 09:52:50 +00:00
Will Hunt
a2f5c49438 Update settings toggles to use consistent design across app. (#30169)
* Use EditInPlace for identity server picker.

* Update test

* Add a test for setting an ID server.

* fix tests

* Reformat other :not sections

* forgot a comma

* Update Apperance settings to use toggle switches.

* Remove unused checkbox setting.

* Remove unused import.

* Update tests

* lint

* update apperance screenshot

* Begin replacing settings

* Refactor RoomPublishSetting

* Remove LabelledToggleSwitch

* Refactor SettingsFlag to use SettingsToggleInput

* Refactor CreateRoomDialog to use SettingsToggleInput

* Refactor DeclineAndBlockInviteDialog to use SettingsToggleInput

* Update DevtoolsDialog

* Refactor ReportRoomDialog to use SettingsToggle

* Update RoomUpgradeWarningDialog to use SettingsToggleInput

* Update WidgetCapabilitiesPromptDialog to use SettingsToggleInput

* Update trivial switchovers

* Update Notifications settings to use SettingsFlag where possible

* Update RoomPublishSetting and SpaceSettingVisibilityTab to use SettingsToggleInput with a warning

* revert changes to field

* Updated screenshots

* Prevent accidental submits

* Replace test ID tests

* Create new snapshot tests

* Add screenshot test for DeclineAndBlockDialog

* Add screenshot for create room dialog.

* Add devtools test

* Add upgrade rooms test

* Add widget capabilites prompt test

* Fix spec

* Add a test for the live location sharing prompt.

* fix copyright

* Add tests for notification settings

* Add tests for user security tab.

* Add test for room security tab.

* Add test for video settings tab.

* remove .only

* Test creating a video room

* Mask the IM name in the header.

* Add spaces vis tab test.

* Fixup unit tests to check correct attributes.

* Various fixes to components for tests.

* lint

* Update compound

* update setting names

* Cleanup tests

prettier

Updates some more playwright tests

Update more snapshots

Update switch

more fixes

drop .only

last screenshot round

fix video room flake

Remove console.logs

Remove roomId from devtools view.

lint

final screenshot

* Add playwright tests

* import pages/ remove duplicate create-room

* Update screenshots

* Fix accessibility for devtools

* Disable region test

* Fixup headers

* remove extra test

* Fix permissions dialog

* fixup tests

* update snapshot

* Update jest tests

* Clear up playwright tests

* update widget screenshot

* Fix wrong snaps from using wrong compound version

* Revert mistaken s/checkbox/switch/

* lint lint

* Update headings

* fix snap

* remove unused

* update snapshot

* update tab screenshot

* Update snapshots

* Fix margins

* Iterate

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>

* Delint

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>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-04 15:46:21 +00:00
Michael Telatynski
421a69aede Replace more icons with compound (#31381)
* Replace element-icons/chat-bubbles.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/chat-bubbles.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace external-link.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/hide.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/explore.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/hash-*.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/share.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/group-members.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/mask-as-*.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/low-priority.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/plus-circle.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace element-icons/roles.svg with compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update jest snapshots

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>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-02 15:58:46 +00:00
Will Hunt
07c253d11f Add Playwright tests for settings toggles (#30318)
* Add playwright tests

* import pages/ remove duplicate create-room

* Update screenshots

* Fix accessibility for devtools

* Disable region test

* Fixup headers

* remove extra test

* Fix permissions dialog

* fixup tests

* update snapshot

* Update jest tests

* Clear up playwright tests

* update widget screenshot

* Fix wrong snaps from using wrong compound version

* Revert mistaken s/checkbox/switch/
2025-09-04 07:12:24 +00:00
renovate[bot]
ce1055f5fe Update playwright to v1.52.0 (#29835)
* Update playwright to v1.52.0

* Update screenshots

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>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stabilise screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

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>
2025-04-30 12:41:02 +00:00
renovate[bot]
e5c8d7dbf0 Update playwright to v1.50.1 (#29183)
* Update playwright to v1.50.1

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

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>
2025-02-18 18:43:40 +00:00
Michael Telatynski
db5b3359c6 Switch to using @fontsource for Inter & Inconsolata (#28540)
* Switch to using @fontsource for Inter & Inconsolata

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused font Open_Sans

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to less broken imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to Ubuntu 24.04

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to res/themes/dark/css/dark.pcss

* Discard changes to res/themes/legacy-light/css/_fonts.pcss

* Discard changes to res/themes/light-high-contrast/css/light-high-contrast.pcss

* Discard changes to res/themes/light/css/light.pcss

* Discard changes to .github/workflows/end-to-end-tests.yaml

* Set outputDir for fonts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use headed mode for Playwright

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to new Chrome headless mode instead

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Cache bust playwright browser install in CI

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Try with 22.04

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update to Ubuntu Noble

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-12-04 11:55:27 +00:00
Michael Telatynski
db30bc51a1 Deduplicate icons using Compound Design Tokens (#28419)
* Deduplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots & snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-11-11 17:27:22 +00:00
Michael Telatynski
a1897583b1 Stabilise screenshot tests (#12835)
* 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>
2024-07-30 08:20:07 +00:00
Robin
80c4c3c28c Refine styles of menus, toasts, popovers, and modals (#12332)
* 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
2024-03-13 13:38:32 +00:00
Robin
6eafe0e5a8 Refine styles of controls to match Compound (#12299)
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.
2024-03-05 04:25:47 +00:00
Florian Duros
96a33b800a Revert "Use Compound primary colors for most actions" (#12264)
* Revert ed5ef023b2

* Update failing snapshots

* Update snapshots after develop merge
2024-02-20 16:24:40 +00:00
Robin
ed5ef023b2 Use Compound primary colors for most actions (#12241)
* 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
2024-02-13 20:10:07 +00:00
Michael Telatynski
1b3f473c10 Migrate settings/* from Cypress to Playwright (#11949)
* 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>
2023-11-29 13:50:13 +00:00