Commit Graph

3904 Commits

Author SHA1 Message Date
Germain
5d4153fa64
Fix colour regressions (#11273)
* Fix color contrast of notice events

Fixes https://github.com/vector-im/element-web/issues/25808

* Restore alert color for highlighted events

Fixes https://github.com/vector-im/element-web/issues/25788

* Fix quote border for highlighted events

Fixes https://github.com/vector-im/element-web/issues/25811

* Fix media background mixing with event highlighted

Fixes https://github.com/vector-im/element-web/issues/25812
2023-07-17 09:59:10 +00:00
Germain
9077592bec
Make event highliht use primary content token (#11255) 2023-07-13 12:42:23 +00:00
Germain
06403d07f8
Fix event info events size and color (#11252) 2023-07-13 09:35:08 +00:00
Germain
38d24f164a
Compound color pass (#11079)
* 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
2023-07-12 17:46:49 +00:00
Andy Balaam
b6c7fe4235
Make checkboxes less rounded. Fixes #25715 (#11224) 2023-07-11 11:33:04 +00:00
Janne Mareike Koschinski
d0147561d7
GYU: Update banner (#11211)
* Update help text

* chore: fixed lint issues

* update i18n

* Update button text

* Correct css for settings banners
2023-07-11 10:38:14 +00:00
Charly Nguyen
fd749172e1
Allow creating knock rooms (#11182)
Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>
2023-07-10 08:01:03 +00:00
Germain
f32b9bab99
Fix room tile text clipping (#11196) 2023-07-07 07:24:48 +00:00
Germain
2034cce235
Scope smaller font size to user info panel (#11178) 2023-07-04 18:02:39 +00:00
Germain
2a7780052e
Compound Typography pass regression fixes (#11189)
* Compound Typography pass regression fixes

* updates to the room list sizing

* fix subtitle clipping

* revert display name to use medium variant
2023-07-04 16:54:28 +00:00
Germain
cfc13c58cd
Make event info size consistent with state events (#11181) 2023-07-03 15:30:55 +00:00
Germain
880d9b1004
fix markdown content (#11177) 2023-07-03 15:07:30 +00:00
Janne Mareike Koschinski
f62fe2626c
GYU: Account Notification Settings (#11008)
* Implement new notification settings UI

* Sort new keywords at the front

* Make ts-strict happier

* Make ts-strict happier

* chore: fixed lint issues

* update beta card

* Fix issue with the user settings test

* chore: fixed lint issues

* Add tests for notification settings

* chore: fixed lint issues

* fix: spurious text failures

* improve tests further

* make ts-strict happier

* improve tests further

* Reduce uncovered conditions

* Correct snapshot

* even more test coverage

* Fix an issue with inverted rules

* Update res/css/views/settings/tabs/_SettingsIndent.pcss

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix license headers

* Improve i18n

* make linters happier

* Improve beta labels

* improve i18n

* chore: fixed lint issues

* fix: more lint issues

* Update snapshots to match changed text

* Update text as requested

* Remove labs image

* Update snapshots

* Correct an issue with one of the tests

* fix: keyword reconcilation code

* Determine mute status more accurately

* Address review comments

* Prevent duplicate updates

* Fix missing license header

* slight change to avoid ts-strict complaining

* fix test issue caused by previous merge

---------

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
2023-06-29 15:46:31 +00:00
Germain
9c7d935aae
Compound Typography pass (#11103)
* 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
2023-06-29 10:30:25 +00:00
Germain
aca6a66f6a
Remove new room breadcrumbs (#11104)
* Deprecate new room breadcrumbs

* i18n
2023-06-19 08:18:46 +00:00
Suguru Hirahara
2972219959
Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy (#11002)
* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Update a Jest snapshot

* Update a Jest snapshot
2023-06-16 18:24:10 +00:00
Suguru Hirahara
707fd9ccf0
Move style rules for AppWarning.tsx and AppPermission.tsx from _AppsDrawer.pcss to _common.pcss (#11094)
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.
2023-06-15 12:22:15 +00:00
Michael Telatynski
cb2b1718ff
Remove feature_favourite_messages as it is has been abandoned for now (#11097)
* Remove `feature_favourite_messages` as it is has been abandoned for now

* i18n

* Fix test

* Remove unused css
2023-06-15 11:02:45 +00:00
Suguru Hirahara
b40f29f04c
Fix visual regressions around widget permissions (#10954)
* Add a Jest snapshot of AppPermission

* Move the test inside 'for a pinned widget' category

* Make only spinner message bold

* Set font size specified with "mx_AppPermission_smallText" by default

- Add "mx_AppPermission_largeText" for elements whose size has not been specified with mx_AppPermission_smallText
- Create _AppWarning.pcss for AppWarning

* Make AppPermission panel scrollable, keeping the content at the center

* Run prettier

* Use Heading component

* Use Icon component

* Fix the test
2023-06-14 11:11:06 +00:00
Suguru Hirahara
0ce3664434
Conform to the naming policy - AppsContainer resizer (#11042)
* Add a snapshot to track AppTile in AppsDrawer

* Conform to the naming policy - AppsContainer resizer

* Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style

- mx_AppsContainer_resizer
- mx_AppsContainer_resizer_container
- mx_AppsContainer_resizer_container_handle

* Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer"

PersistentVResizer is defined by mx_AppsDrawer (see const "classes")
2023-06-13 11:13:07 +00:00
Suguru Hirahara
87f329789b
Fix translucent TextualEvent on search results panel (#10810)
* Unset the opacity value of textual events on the search results panel

* Add a test for checking opacity
2023-06-08 11:11:18 +00:00
Suguru Hirahara
d340fa8d2a
Remove TODO comments about spacing variables (#10695)
The variables on _spacing.pcss have been deprecated by https://github.com/matrix-org/matrix-react-sdk/pull/10686
2023-06-06 14:03:52 +00:00
Suguru Hirahara
b3545736dc
Replace Sass variables specific to each CSS file with CSS custom properties (#11039)
* Use CSS custom properties on _LeftPanel.pcss

* Use CSS custom properties on _SpacePanel.pcss

* Use CSS custom properties on _SpaceRoomView.pcss

* Use CSS custom properties on _ImageView.pcss

* Use CSS custom properties on _EventTile.pcss

* Remove a CSS custom properties on _SpaceCreateMenu.pcss

Used only on one instance

* Revert "Use CSS custom properties on _ImageView.pcss"

This reverts commit 0210659f94fcf1107adabecf1bce443fc970a31b.

* Revert "Use CSS custom properties on _EventTile.pcss"

This reverts commit 83cf824a57b174e62935bb9a4433aadcd8f8164f.

* Run prettier
2023-06-06 11:09:04 +00:00
Suguru Hirahara
68a1721b8d
Align list items on the tooltip to the start (#11041) 2023-06-06 07:29:22 +00:00
Suguru Hirahara
43d9e30673
Fix fadein spinner placement on AppTileBody (#10970) 2023-06-01 15:17:28 +00:00
Suguru Hirahara
610ee53257
Extract style rules specific to ThreadsList to prevent a visual regression (#10894) 2023-06-01 15:04:52 +00:00
Michael Weimann
b5727cb463
Include thread replies in message previews (#10631)
* Include thread replies to message previews

* Extend tests

* Fix type issue

* Use currentColor for thread icon

* Fix long room name overflow

* Update snapshots

* Fix preview

* Fix typing issue

* Fix type issues

* Tweak thread reply detection

* Extend tests

* Fix type issue

* Fix test
2023-06-01 07:53:48 +00:00
Kerry
e9a8f4a11d
Use semantic headings in space preferences (#11021)
* remove mx_SettingsTab_heading style

* use semantic headings in space preferences dialog

* remove unused settings style: mx_SettingsTab_subheading
2023-05-31 21:22:03 +00:00
Michael Telatynski
176daad49f
Fix room list notification badges going missing in compact layout (#11022) 2023-05-31 12:20:26 +00:00
Kerry
7ef6e1b6f8
Use semantic headings in user settings - Ignored users (#11006)
* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot

* use semantic headings in mjolnir settings

* remove debug

* unit test UI changes for mjolnir settings
2023-05-30 22:42:53 +00:00
Suguru Hirahara
50f7317762
Remove hover effect from user name on a DM creation UI (#10887) 2023-05-30 09:23:23 +00:00
Michael Telatynski
aa5a2e1363
Fix layout regression in session dropdown (#10999)
* Fix layout regression in session dropdown

* Fix layout regression in session dropdown
2023-05-30 07:59:00 +00:00
Kerry
b35fb4fed2
Use semantic headings in user settings - profile (#10973)
* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot
2023-05-29 01:36:09 +00:00
Kerry
520659242b
Fix spacing regression in user settings - roles & permissions (#10993)
* add content container to settingsfieldset

* fix spacing
2023-05-28 22:20:44 +00:00
Kerry
530197bfcd
Move session manager out of beta (#10968)
* remove old device manager

* undo type fix for cypress crypto

* update test case
2023-05-26 01:58:28 +00:00
Kerry
d0d9a36d07
Use semantic headings in user settings - account (#10972)
* account password section

* account email and phone numbers

* update cypress selectors
2023-05-25 22:42:01 +00:00
Suguru Hirahara
953da1ae2a
Remove _RoleButton.pcss (#10958)
* Remove obsolete style rules

These have been obsolete since 3c5c2bef6d.

* Remove _RoleButton.pcss

mx_RoleButton_tooltip style rules are used only on NotificationBadge.tsx.

* Rename the class
2023-05-25 04:03:19 +00:00
Suguru Hirahara
0c30f0c838
Simplify nodes on ThirdPartyMemberInfo (#10889)
* Remove mx_MemberInfo_profileField

* Merge mx_MemberInfo_profile with mx_MemberInfo_container

* Remove redundant div elements

* Update a Jest snapshot
2023-05-24 08:28:15 +00:00
Kerry
9f011b955b
Use semantic headings in user settings - discovery (#10838)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* use currentColor in warning-triangle svg, update use in RoomStatusBar

* use semantic headings for discovery section

* test manage integration settings

* test deactivate account section display

* remove SettingsFieldset margins

* threepids styles

* remove debug

* test discovery email and phone
2023-05-24 02:37:10 +00:00
Kerry
9211da20f4
Use semantic headings in user settings - Notifications (#10948)
* use semantic headings in user notif settings

* unset margin for subsection content when no heading

* remove debug
2023-05-23 23:36:09 +00:00
Kerry
f491f2f951
use semantic headings for spellcheck and language (#10959) 2023-05-23 23:34:56 +00:00
Kerry
2f2804f8af
fix content overflow in settings subsection (#10960) 2023-05-23 23:31:56 +00:00
Suguru Hirahara
b7cd1f00fc
Use Icon component for icons on AppTile's menu bar (#10955)
* Use icon component for buttons on mx_AppTileMenuBar_widgets

* Remove redundant declarations

* Add a Percy snapshot test

* Set color value to mx_Icon, fill and stroke with currentColor

* Iterate
2023-05-22 07:48:40 +00:00
Suguru Hirahara
2e3cb0adf7
Replace a Sass variable with a CSS custom property - hover-transition (#10786) 2023-05-22 07:40:40 +00:00
Suguru Hirahara
08c0f332b3
Remove an obsolete CSS file - _ChatCreateOrReuseChatDialog.pcss (#10949)
It has been obsolete since f85898cdca.
2023-05-21 23:50:14 +00:00
Kerry
b3b03e5dcb
Use semantic headings in user settings Appearance (#10827)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy
2023-05-21 21:12:11 +00:00
Kerry
55336bf932
Use semantic heading in user settings Sidebar & Voip (#10782)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* semantic headings and cleanup in Sidebar user settings

* semantic heading in voice user settings

* sonarcloud bug and test
2023-05-19 00:03:39 +00:00
Kerry
d9a61c093c
Use semantic headings in user settings Security (#10774)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* test cross signing panel

* strict

* more strict

* tweak

* test eventindexpanel

* strict fixes
2023-05-18 22:32:10 +00:00
Suguru Hirahara
fabfae172b
Update _AuxPanel.pcss (#10888)
* Fix class names - from m_ to mx_

* Move mx_RoomView_auxPanel from _RoomView.pcss to _AuxPanel.pcss

The class name 'mx_RoomView_auxPanel' belongs to AuxPanel, not RoomView

* Correct naming

* Strictify: mx_RoomView_auxPanel *

* Nest mx_AuxPanel_stateViews_span

* Sort

* Run prettier

* Use custom properties

* Revert "Use custom properties"

This reverts commit fe720d05f4572e74e71887203d43c491f0723a92.
2023-05-18 08:54:31 +00:00
Suguru Hirahara
9f574cc764
Replace Sass variable with CSS custom property: --selected-message-border-width (#10876) 2023-05-18 04:18:59 +00:00