* 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
* 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.
* 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
* explicit cast to boolean
* Update src/components/views/settings/shared/SettingsSubsection.tsx
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* test manage integration settings
* test deactivate account section display
* remove debug
* fix cypress test
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* settingssubsection text component
* use semantic headings in HelpUserSetttings tab
* test
* strict
* lint
* semantic heading in labs settings
* semantic headings in keyboard settings tab
* semantic heading in preferencesusersettingstab
* tidying
* findByTestId
* prettier
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* use semantic headings in usersettingspreferences
* rethemendex
* put back margin var
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* use semantic headings in usersettingspreferences
* rethemendex
* put back margin var
* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g
* Conform the selectors to our naming policy: with flag (--)
- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g
* Update a Jest snapshot
* Move the declarations and Sass variables
- Move Sass variables to the place where they are used
* Separate mx_AppWarning and mx_AppPermission
* Remove mx_AppPermission_row for a type selector
* Nest: mx_AppPermission
* Run prettier
* Create a CSS file for AppPermission
* allow testids in settings sections
* use semantic headings in LabsUserSettingsTab
* put back margin var
* explicit cast to boolean
* Update src/components/views/settings/shared/SettingsSubsection.tsx
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>
* Set zero min-width to prevent input area blowout
* Set min-width values to mx_SearchBar_input and mx_SearchBar_button
* Prevent the input area and cancel button from being overlapped by BaseCard
* Use custom properties: --size-button-search
* Take Percy snapshot of mx_SearchBar
* Apply suggestions from code review
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Edit a comment
* Feedback
* Edit a comment
* Update cypress/e2e/timeline/timeline.spec.ts
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>
This fixes a visual regression introduced in 73007d6dd6: AppTiles with the class mx_AppTile_mini don't get an mx_AppsDrawer as their parent, so the --AppTile_mini-height variable needs a broader scope.
* Optimize mx_RoomView_myReadMarker
- Replace the compound selector with a type selector
- Nest the type selector in "mx_RoomView_myReadMarker_container"
* Conform the style rules to the naming policy
Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element.
* Run prettier
* Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker`
- Remove a unit
- Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots
* Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker`
The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion.
- Create _MessagePanel.pcss for the style rules of MessagePanel
* Update permalinks.spec.ts
* Nesting: `mx_GeneralUserSettingsTab_changePassword`
* Nesting: `mx_Spinner`
* Conform the style rules to the naming policy
For elements inside "mx_GeneralUserSettingsTab_accountSection" and "mx_GeneralUserSettingsTab_discovery"
* Conform `mx_GeneralUserSettingsTab_discovery_existing*` to the naming policy
* Nesting
* Run prettier
* Common style rules for `mx_AppTileBody` and `mx_AppTileBody_mini`
* Common style rules for iframe
* Use a custom property for height
* Replace with a custom property - $MiniAppTileHeight
* Replace with a custom property - $MinWidth
* Group common declarations
* Sorting
* Use CSS custom property: --timeline-image-border-radius
Remove the same variable from _MImageBody.pcss
* Rename the property
The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.
* Remove obsolete style blocks from _MemberInfo.pcss
Deprecated by 2b432b0d82
* Remove obsolete style blocks from _MemberInfo.pcss
Deprecated by fce36ec826
* Nesting: mx_AppLoading
* Conform class and animation name to the naming policy
* Nesting for maintainability, preventing the rule from becoming an orphan
* Rename the class: mx_AppLoading to mx_AppTile_loading
* Remove a mixin - mx_Tooltip_dark
The mixin has been used on `_AppsDrawer.pcss` only.
* Rename mx_Tooltip_dark based on the naming policy
'mx_Tooltip_dark' has been used on `AppPermission.tsx` only.
* Remove `_HeaderButtons.pcss`
Now that mx_HeaderButtons class is no longer necessary as ARIA "tabpanel" role has been removed from it, it is possible to remove both the class and the style rule for it.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Tests: add `room-header.spec.ts` and edit the existing tests
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit snapshot widths settings
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Fix typo
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Edit a comment
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Optimize a test to check default buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Check highlighted buttons
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Loop
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Nesting: `mx_ResizeHandle`
* Nesting: `> div`
* Run prettier
* Use a custom property
* Remove a redundant declaration: `cursor: row-resize`
The resizer is either vertical or horizontal, and since `cursor: row-resize` is applied by default, it does not need to be repeated here.
* Conform the class names to the naming policy
* Revert "Use a custom property"
This reverts commit 6116939eec7d9e4220b89a638623e5876e143adf.
* Remove an obsolete variable - `$MessageTimestamp_width_hover`
Added by 9b54aba4c0
Deprecated 5343be7814
* Replace a variable with a custom property - $MessageTimestamp_width
* Merge with an existing property in :root
rename
* Manage the variable on _MessageTimestamp.pcss
* 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
* Rename: `mx_ExistingPhoneNumber_*` to `mx_PhoneNumber--existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rename: `mx_ExistingEmailAddress_*` to `mx_EmailAddress--existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge styles for maitainability: `mx_GeneralUserSettingsTab_discovery_existing_*`
`mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` adopt the same declarations, so maintaining them with common selectors should improve the maintainability.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com
* Rename: `mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` to `mx_GeneralUserSettingsTab_discovery_existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove empty selectors
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a duplicate selector: `.mx_GeneralUserSettingsTab_discovery--existing`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Rename the button
The button with the class name 'mx_GeneralUserSettingsTab_discovery_existing_button' is used for various types of action, so 'confirm' seems to be a bit misleading.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Include: `mx_GeneralUserSettingsTab_discovery_existing_*`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Run prettier
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* lint
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Review
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com
* Manage rules related to EventTile on `_EventTile.pcss`
The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `--EventTile_irc_line_info-margin-inline-start`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_EventTile_msgOption`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_MessageTimestamp`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_EventTileBubble`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_ReplyChain`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_ReplyTile .mx_EventTileBubble`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `&.mx_EventTile_info`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Convert the variable with a custom property
To fix the syntax error "Undefined variable $irc-line-height" because of cascading order.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - '.mx_EventTile_emote'
The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Replace a Sass variable with a CSS custom property - $container-gap-width
* Replace a Sass variable with a CSS custom property - $container-border-width
