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.
* Show a progress bar during migration of crypto data
* playwright: add new `pageWithCredentials` fixture
* Add a playwright test for migration progress
* Add documentation for `idbSave`
* Factor out post-login splash screen to a new component
* Move CSS classes to per-component file
* Rename CSS classes
... to reflect the component that uses them
* code review
* 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
* add delegatedauthentication to validated server config
* dynamic client registration functions
* test OP registration functions
* add stubbed nativeOidc flow setup in Login
* cover more error cases in Login
* tidy
* test dynamic client registration in Login
* comment oidc_static_clients
* register oidc inside Login.getFlows
* strict fixes
* remove unused code
* and imports
* comments
* comments 2
* util functions to get static client id
* check static client ids in login flow
* remove dead code
* OidcRegistrationClientMetadata type
* navigate to oidc authorize url
* navigate to oidc authorize url
* test
* adjust for js-sdk code
* update test for response_mode query
* use new types
* strict
* tidy
* Add font-size: inherit to link button
Remove redundant font-size settings
_FeedbackDialog.scss
_GenericFeatureFeedbackDialog.scss
_Login.scss
_NewRoomIntro.scss
_NotificationSettingsTab.scss
_PinnedEventTile.scss
_PreferencesUserSettingsTab.scss
_SpaceCreateMenu.scss
_ToastContainer.scss
_UserMenu.scss
Specify font-size
- _ProfileSettings.scss
- _SpaceBasicSettings.scss
- _SpaceSettingsDialog.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add line-height: inherit to link button
Remove redundant setting
- _GenericFeatureFeedbackDialog.scss
- _PinnedEventTile.scss
- _SpaceCreateMenu.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Add font-weight: normal to link button
Remove redundant setting
- _SpotlightDialog.scss
- _UserMenu.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Dedupe _link and _link_inline
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Set inline to "link_inline"
Treat the button as its name indicates.
For elements that should not be inlined, "link" should be used.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
- Don't show loading spinners while waiting for user action
- When checking if there are other devices we can verify against, only
look for devices that are actually cross-signed.
- Adjust displayed options depending on whether other devices and/or
recovery keys exist, and add an option to reset cross-signing keys
if necessary.
- Various minor clarifying adjustments to UI styling/text
Signed-off-by: Faye Duxovni <fayed@element.io>
It's become obvious that these random floating points everywhere
are unwieldy. Now they're all in one place with some fairly logical
variable names which will help out in design->implementation phase.
Font size of the whole app would ideally be controlled by a single
value. This value is currently hard coded using the :root CSS selector.
It is the intention to make this value configurable within riot. In the
interim all font-sizes have been converted to rem by the simple process
of regex. Replacing px values with their equivalent rem values assuming
a font size of 15px and then rounded to three decimal places, which was
the base at the time of this transformation.
I'm expecting another commit cleaning up rem values but I thought it
best to leave that to review.
This commit doesn't address any scaling issues. I thought it better to
land this unwieldy, mechanical, invisible change before the others
otherwise the pr would be impossible to review thoroughly.
Instead of twisting `AuthBody`, this adds a new component for the different
styling of post-auth security flows. This also makes them fixed width and
adjusts padding to match designs.
This adds a step after login to complete security for your new session. At the
moment, the only verification method is entering your SSSS passphrase, but nicer
paths will be added soon.
This new step only appears when crypto is available and the account has
cross-signing enabled in SSSS.
Fixes https://github.com/vector-im/riot-web/issues/11214
As with other auth flows, this converts inputs on the login page to use the
Field component for consistent styling. The login type dropdown is left as-is
for now.
This converts most fields in the registration form to use the Field component,
except for the phone number, which is a left as a separate task because of the
country dropdown menu.
Robin