diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 7a5d608cd65..f46205a5ec7 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -176,7 +176,7 @@ describe("Audio player", () => { // Enable high contrast manually cy.openUserSettings("Appearance") - .get(".mx_ThemeChoicePanel") + .findByTestId("mx_ThemeChoicePanel") .findByLabelText("Use high contrast") .click({ force: true }); // force click because the size of the checkbox is zero diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts index f566eeeda82..cb22d26b58b 100644 --- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts @@ -36,12 +36,11 @@ describe("Appearance user settings tab", () => { it("should be rendered properly", () => { cy.openUserSettings("Appearance"); - cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => { - // Assert that the top heading is rendered - cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible"); + cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => { + cy.get("h2").should("have.text", "Customise your appearance").should("be.visible"); }); - cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement( + cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement( "User settings tab - Appearance (advanced options collapsed)", { // Emulate TabbedView's actual min and max widths @@ -57,7 +56,7 @@ describe("Appearance user settings tab", () => { // Assert that "Hide advanced" link button is rendered cy.findByRole("button", { name: "Hide advanced" }).should("exist"); - cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement( + cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement( "User settings tab - Appearance (advanced options expanded)", { // Emulate TabbedView's actual min and max widths @@ -74,7 +73,7 @@ describe("Appearance user settings tab", () => { cy.openUserSettings("Appearance"); - cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => { + cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => { // Assert that the layout selected by default is "Modern" cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => { cy.findByLabelText("Modern").should("exist"); @@ -84,7 +83,7 @@ describe("Appearance user settings tab", () => { // Assert that the room layout is set to group (modern) layout cy.get(".mx_RoomView_body[data-layout='group']").should("exist"); - cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => { + cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => { // Select the first layout cy.get(".mx_LayoutSwitcher_RadioButton").first().click(); @@ -97,7 +96,7 @@ describe("Appearance user settings tab", () => { // Assert that the room layout is set to IRC layout cy.get(".mx_RoomView_body[data-layout='irc']").should("exist"); - cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => { + cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => { // Select the last layout cy.get(".mx_LayoutSwitcher_RadioButton").last().click(); @@ -114,7 +113,7 @@ describe("Appearance user settings tab", () => { it("should support changing font size by clicking the font slider", () => { cy.openUserSettings("Appearance"); - cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => { + cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => { cy.get(".mx_FontScalingPanel_fontSlider").within(() => { cy.findByLabelText("Font size").should("exist"); }); @@ -150,7 +149,7 @@ describe("Appearance user settings tab", () => { it("should disable font size slider when custom font size is used", () => { cy.openUserSettings("Appearance"); - cy.get(".mx_FontScalingPanel").within(() => { + cy.findByTestId("mx_FontScalingPanel").within(() => { cy.findByLabelText("Use custom size").click({ force: true }); // force click as checkbox size is zero // Assert that the font slider is disabled @@ -167,10 +166,8 @@ describe("Appearance user settings tab", () => { // Click "Show advanced" link button cy.findByRole("button", { name: "Show advanced" }).click(); - cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => { - // force click as checkbox size is zero - cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true }); - }); + // force click as checkbox size is zero + cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true }); // Assert that the room layout is set to compact group (modern) layout cy.get("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout").should("exist"); @@ -178,13 +175,7 @@ describe("Appearance user settings tab", () => { it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => { const checkDisabled = () => { - cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => { - cy.get(".mx_Checkbox") - .first() - .within(() => { - cy.get("input[type='checkbox'][disabled]").should("exist"); - }); - }); + cy.findByLabelText("Use a more compact 'Modern' layout").should("be.disabled"); }; cy.openUserSettings("Appearance"); @@ -193,7 +184,7 @@ describe("Appearance user settings tab", () => { cy.findByRole("button", { name: "Show advanced" }).click(); // Enable IRC layout - cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => { + cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => { // Select the first layout cy.get(".mx_LayoutSwitcher_RadioButton").first().click(); @@ -206,7 +197,7 @@ describe("Appearance user settings tab", () => { checkDisabled(); // Enable bubble layout - cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => { + cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => { // Select the first layout cy.get(".mx_LayoutSwitcher_RadioButton").last().click(); @@ -225,10 +216,8 @@ describe("Appearance user settings tab", () => { // Click "Show advanced" link button cy.findByRole("button", { name: "Show advanced" }).click(); - cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => { - // force click as checkbox size is zero - cy.findByLabelText("Use a system font").click({ force: true }); - }); + // force click as checkbox size is zero + cy.findByLabelText("Use a system font").click({ force: true }); // Assert that the font-family value was removed cy.get("body").should("have.css", "font-family", '""'); @@ -242,7 +231,7 @@ describe("Appearance user settings tab", () => { it("should be rendered with the light theme selected", () => { cy.openUserSettings("Appearance") - .get(".mx_ThemeChoicePanel") + .findByTestId("mx_ThemeChoicePanel") .within(() => { cy.findByTestId("checkbox-use-system-theme").within(() => { cy.findByText("Match system theme").should("be.visible"); @@ -252,7 +241,7 @@ describe("Appearance user settings tab", () => { cy.get(".mx_Checkbox_checkmark").should("not.be.visible"); }); - cy.get(".mx_ThemeSelectors").within(() => { + cy.findByTestId("theme-choice-panel-selectors").within(() => { cy.get(".mx_ThemeSelector_light").should("exist"); cy.get(".mx_ThemeSelector_dark").should("exist"); @@ -274,11 +263,11 @@ describe("Appearance user settings tab", () => { "the system theme is clicked", () => { cy.openUserSettings("Appearance") - .get(".mx_ThemeChoicePanel") + .findByTestId("mx_ThemeChoicePanel") .findByLabelText("Match system theme") .click({ force: true }); // force click because the size of the checkbox is zero - cy.get(".mx_ThemeChoicePanel").within(() => { + cy.findByTestId("mx_ThemeChoicePanel").within(() => { // Assert that the labels for the light theme and dark theme are disabled cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_disabled").should("exist"); cy.get(".mx_ThemeSelector_dark.mx_StyledRadioButton_disabled").should("exist"); @@ -321,7 +310,7 @@ describe("Appearance user settings tab", () => { }); cy.openUserSettings("Appearance") - .get(".mx_ThemeChoicePanel") + .findByTestId("mx_ThemeChoicePanel") .findByLabelText("Use high contrast") .click({ force: true }); // force click because the size of the checkbox is zero diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 504dbca5bc6..b2aecd0348a 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -179,7 +179,6 @@ @import "./views/elements/_Dropdown.pcss"; @import "./views/elements/_EditableItemList.pcss"; @import "./views/elements/_ErrorBoundary.pcss"; -@import "./views/elements/_EventTilePreview.pcss"; @import "./views/elements/_ExternalLink.pcss"; @import "./views/elements/_FacePile.pcss"; @import "./views/elements/_Field.pcss"; diff --git a/res/css/views/elements/_EventTilePreview.pcss b/res/css/views/elements/_EventTilePreview.pcss deleted file mode 100644 index 67bed16ea8e..00000000000 --- a/res/css/views/elements/_EventTilePreview.pcss +++ /dev/null @@ -1,21 +0,0 @@ -/* -Copyright 2021 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_FontScalingPanel { - .mx_FontScalingPanel_preview.mx_EventTilePreview_loader { - padding: var(--FontScalingPanel_preview-padding-block) 0; - } -} diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss index 9aadf3497d1..06b248d7295 100644 --- a/res/css/views/settings/_FontScalingPanel.pcss +++ b/res/css/views/settings/_FontScalingPanel.pcss @@ -14,63 +14,48 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_FontScalingPanel { - color: $primary-content; +.mx_FontScalingPanel_preview { + --FontScalingPanel_preview-padding-block: 9px; - .mx_FontScalingPanel_preview, - .mx_FontScalingPanel_fontSlider { - margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); - } - - .mx_FontScalingPanel_preview { - --FontScalingPanel_preview-padding-block: 9px; - - border: 1px solid $quinary-content; - border-radius: 10px; - padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16; - pointer-events: none; - display: flow-root; - - &.mx_IRCLayout { - padding-top: 9px; /* TODO: Use a spacing variable */ - } - - .mx_EventTile[data-layout="bubble"] { - margin-top: 30px; /* TODO: Use a spacing variable */ - } + border: 1px solid $quinary-content; + border-radius: 10px; + padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16; + pointer-events: none; + display: flow-root; - .mx_EventTile_msgOption { - display: none; - } + &.mx_IRCLayout { + padding-top: 9px; /* TODO: Use a spacing variable */ } - .mx_FontScalingPanel_fontSlider { - display: flex; - align-items: center; - padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */ - background: rgba($quinary-content, 0.2); - border-radius: 10px; - font-size: $font-10px; - margin-top: $spacing-24; - margin-bottom: $spacing-24; + .mx_EventTile[data-layout="bubble"] { + margin-top: 30px; /* TODO: Use a spacing variable */ + } - .mx_FontScalingPanel_fontSlider_smallText, - .mx_FontScalingPanel_fontSlider_largeText { - font-weight: 500; - } + .mx_EventTile_msgOption { + display: none; + } +} - .mx_FontScalingPanel_fontSlider_smallText { - font-size: $font-15px; - padding-inline-end: $spacing-20; - } +.mx_FontScalingPanel_fontSlider { + display: flex; + align-items: center; + padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */ + background: rgba($quinary-content, 0.2); + border-radius: 10px; + font-size: $font-10px; + + .mx_FontScalingPanel_fontSlider_smallText, + .mx_FontScalingPanel_fontSlider_largeText { + font-weight: 500; + } - .mx_FontScalingPanel_fontSlider_largeText { - font-size: $font-18px; - padding-inline-start: $spacing-20; - } + .mx_FontScalingPanel_fontSlider_smallText { + font-size: $font-15px; + padding-inline-end: $spacing-20; } - .mx_FontScalingPanel_customFontSizeField { - margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start); + .mx_FontScalingPanel_fontSlider_largeText { + font-size: $font-18px; + padding-inline-start: $spacing-20; } } diff --git a/res/css/views/settings/_ImageSizePanel.pcss b/res/css/views/settings/_ImageSizePanel.pcss index 19736347a2d..89500c55b44 100644 --- a/res/css/views/settings/_ImageSizePanel.pcss +++ b/res/css/views/settings/_ImageSizePanel.pcss @@ -14,34 +14,31 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ImageSizePanel { - color: $primary-content; - - .mx_ImageSizePanel_radios { - display: flex; - margin-top: 16px; /* move away from header a bit */ +.mx_ImageSizePanel_radios { + display: flex; + flex-direction: row; + gap: $spacing-16; + + > label { + margin-right: 68px; /* keep the boxes separate */ + cursor: pointer; + } - > label { - margin-right: 68px; /* keep the boxes separate */ - cursor: pointer; + .mx_ImageSizePanel_size { + background-color: $quinary-content; + mask-repeat: no-repeat; + mask-size: 221px; + mask-position: center; + width: 221px; + height: 148px; + margin-bottom: 14px; /* move radio button away from bottom edge a bit */ + + &.mx_ImageSizePanel_sizeDefault { + mask: url("$(res)/img/element-icons/settings/img-size-normal.svg"); } - .mx_ImageSizePanel_size { - background-color: $quinary-content; - mask-repeat: no-repeat; - mask-size: 221px; - mask-position: center; - width: 221px; - height: 148px; - margin-bottom: 14px; /* move radio button away from bottom edge a bit */ - - &.mx_ImageSizePanel_sizeDefault { - mask: url("$(res)/img/element-icons/settings/img-size-normal.svg"); - } - - &.mx_ImageSizePanel_sizeLarge { - mask: url("$(res)/img/element-icons/settings/img-size-large.svg"); - } + &.mx_ImageSizePanel_sizeLarge { + mask: url("$(res)/img/element-icons/settings/img-size-large.svg"); } } } diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss index 500519bbf59..be07573a52c 100644 --- a/res/css/views/settings/_LayoutSwitcher.pcss +++ b/res/css/views/settings/_LayoutSwitcher.pcss @@ -15,79 +15,77 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_LayoutSwitcher { - .mx_LayoutSwitcher_RadioButtons { - display: flex; - flex-direction: row; - gap: 24px; - - color: $primary-content; - - > .mx_LayoutSwitcher_RadioButton { - flex-grow: 0; - flex-shrink: 1; - display: flex; - flex-direction: column; +.mx_LayoutSwitcher_RadioButtons { + display: flex; + flex-direction: row; + gap: 24px; - width: 300px; - min-width: 0; + color: $primary-content; - border: 1px solid $quinary-content; - border-radius: 10px; - - .mx_EventTile_msgOption, - .mx_MessageActionBar { - display: none; - } + > .mx_LayoutSwitcher_RadioButton { + flex-grow: 0; + flex-shrink: 1; + display: flex; + flex-direction: column; - .mx_LayoutSwitcher_RadioButton_preview { - flex-grow: 1; - display: flex; - align-items: center; - padding: 10px; - pointer-events: none; + flex-basis: 33%; + min-width: 0; - .mx_EventTile[data-layout="bubble"] .mx_EventTile_line { - padding-right: 11px; - } - } + border: 1px solid $quinary-content; + border-radius: 10px; - .mx_StyledRadioButton { - flex-grow: 0; - padding: 10px; - } + .mx_EventTile_msgOption, + .mx_MessageActionBar { + display: none; + } - .mx_EventTile_content { - margin-right: 0; - } + .mx_LayoutSwitcher_RadioButton_preview { + flex-grow: 1; + display: flex; + align-items: center; + padding: 10px; + pointer-events: none; - &.mx_LayoutSwitcher_RadioButton_selected { - border-color: $accent; + .mx_EventTile[data-layout="bubble"] .mx_EventTile_line { + padding-right: 11px; } } .mx_StyledRadioButton { - border-top: 1px solid $quinary-content; + flex-grow: 0; + padding: 10px; } - .mx_StyledRadioButton_checked { - background-color: rgba($accent, 0.08); + .mx_EventTile_content { + margin-right: 0; } - .mx_EventTile { - margin: 0; - &[data-layout="bubble"] { - margin-right: 40px; - flex-shrink: 1; - } - &[data-layout="irc"] { - > a { - display: none; - } - } - .mx_EventTile_line { - max-width: 90%; + &.mx_LayoutSwitcher_RadioButton_selected { + border-color: $accent; + } + } + + .mx_StyledRadioButton { + border-top: 1px solid $quinary-content; + } + + .mx_StyledRadioButton_checked { + background-color: rgba($accent, 0.08); + } + + .mx_EventTile { + margin: 0; + &[data-layout="bubble"] { + margin-right: 40px; + flex-shrink: 1; + } + &[data-layout="irc"] { + > a { + display: none; } } + .mx_EventTile_line { + max-width: 90%; + } } } diff --git a/res/css/views/settings/_ThemeChoicePanel.pcss b/res/css/views/settings/_ThemeChoicePanel.pcss index 367191430a4..7d3a87cd121 100644 --- a/res/css/views/settings/_ThemeChoicePanel.pcss +++ b/res/css/views/settings/_ThemeChoicePanel.pcss @@ -14,53 +14,47 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ThemeChoicePanel { +.mx_ThemeChoicePanel_themeSelectors { color: $primary-content; + display: flex; + flex-direction: row; + flex-wrap: wrap; - > .mx_ThemeSelectors { - display: flex; - flex-direction: row; - flex-wrap: wrap; + > .mx_StyledRadioButton { + padding: $font-16px; + box-sizing: border-box; + border-radius: 10px; + width: 180px; - margin-top: 4px; - margin-bottom: 30px; + background: $quinary-content; + opacity: 0.4; - > .mx_StyledRadioButton { - padding: $font-16px; - box-sizing: border-box; - border-radius: 10px; - width: 180px; + flex-shrink: 1; + flex-grow: 0; - background: $quinary-content; - opacity: 0.4; + margin-right: 15px; + margin-top: 10px; - flex-shrink: 1; - flex-grow: 0; + font-weight: var(--font-semi-bold); - margin-right: 15px; - margin-top: 10px; - - font-weight: var(--font-semi-bold); - - > span { - justify-content: center; - } + > span { + justify-content: center; } + } - > .mx_StyledRadioButton_enabled { - opacity: 1; + > .mx_StyledRadioButton_enabled { + opacity: 1; - /* These colors need to be hardcoded because they don't change with the theme */ - &.mx_ThemeSelector_light { - background-color: #f3f8fd; - color: #2e2f32; - } + /* These colors need to be hardcoded because they don't change with the theme */ + &.mx_ThemeSelector_light { + background-color: #f3f8fd; + color: #2e2f32; + } - &.mx_ThemeSelector_dark { - /* 5% lightened version of 181b21 */ - background-color: #25282e; - color: #f3f8fd; - } + &.mx_ThemeSelector_dark { + /* 5% lightened version of 181b21 */ + background-color: #25282e; + color: #f3f8fd; } } } diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss index 658f91ed4f9..e27751ebe1a 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss @@ -14,25 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_AppearanceUserSettingsTab { - --AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px); - - .mx_SettingsTab_subsectionText { - margin-block: $spacing-12 $spacing-32; - color: $primary-content; /* Same as mx_SettingsTab */ - } - - .mx_Field { - width: 256px; - } - - .mx_AppearanceUserSettingsTab_Advanced { - .mx_Checkbox { - margin-block: $spacing-16; - } - - .mx_AppearanceUserSettingsTab_systemFont { - margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start); - } - } +.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField { + width: 256px; + // matches checkbox box + padding + // to align with checkbox label + margin-inline-start: calc($font-16px + 10px); } diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index aec8489af3a..e1b79a7bf30 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -82,11 +82,11 @@ $roomtopic-color: $secondary-content; background-color: $panel-actions !important; } -.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div { +.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div { border-color: $primary-content; } -.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled { +.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled { color: $primary-content; } diff --git a/src/components/views/settings/FontScalingPanel.tsx b/src/components/views/settings/FontScalingPanel.tsx index 89cb785f195..cfede4d14c0 100644 --- a/src/components/views/settings/FontScalingPanel.tsx +++ b/src/components/views/settings/FontScalingPanel.tsx @@ -28,6 +28,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { SettingLevel } from "../../../settings/SettingLevel"; import { _t } from "../../../languageHandler"; import { clamp } from "../../../utils/numbers"; +import SettingsSubsection from "./shared/SettingsSubsection"; interface IProps {} @@ -108,8 +109,7 @@ export default class FontScalingPanel extends React.Component { const max = 18; return ( -
- {_t("Font size")} + { onValidate={this.onValidateFontSize} onChange={(value: ChangeEvent) => this.setState({ fontSize: value.target.value })} disabled={!this.state.useCustomFontSize} - className="mx_FontScalingPanel_customFontSizeField" + className="mx_AppearanceUserSettingsTab_checkboxControlledField" /> -
+ ); } } diff --git a/src/components/views/settings/ImageSizePanel.tsx b/src/components/views/settings/ImageSizePanel.tsx index cc27bc70a9d..927b76ca440 100644 --- a/src/components/views/settings/ImageSizePanel.tsx +++ b/src/components/views/settings/ImageSizePanel.tsx @@ -21,6 +21,7 @@ import StyledRadioButton from "../elements/StyledRadioButton"; import { _t } from "../../../languageHandler"; import { SettingLevel } from "../../../settings/SettingLevel"; import { ImageSize } from "../../../settings/enums/ImageSize"; +import SettingsSubsection from "./shared/SettingsSubsection"; interface IProps { // none @@ -49,9 +50,7 @@ export default class ImageSizePanel extends React.Component { public render(): React.ReactNode { return ( -
- {_t("Image size in the timeline")} - +
+ ); } } diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx index 462147df2ef..60a1a6cee45 100644 --- a/src/components/views/settings/LayoutSwitcher.tsx +++ b/src/components/views/settings/LayoutSwitcher.tsx @@ -25,6 +25,7 @@ import StyledRadioButton from "../elements/StyledRadioButton"; import { _t } from "../../../languageHandler"; import { Layout } from "../../../settings/enums/Layout"; import { SettingLevel } from "../../../settings/SettingLevel"; +import SettingsSubsection from "./shared/SettingsSubsection"; interface IProps { userId?: string; @@ -67,9 +68,7 @@ export default class LayoutSwitcher extends React.Component { }); return ( -
- {_t("Message layout")} - +
-
+ ); } } diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx index b65d9b9d112..893bc2d43ae 100644 --- a/src/components/views/settings/ThemeChoicePanel.tsx +++ b/src/components/views/settings/ThemeChoicePanel.tsx @@ -30,6 +30,7 @@ import Field from "../elements/Field"; import StyledRadioGroup from "../elements/StyledRadioGroup"; import { SettingLevel } from "../../../settings/SettingLevel"; import PosthogTrackers from "../../../PosthogTrackers"; +import SettingsSubsection from "./shared/SettingsSubsection"; interface IProps {} @@ -245,10 +246,9 @@ export default class ThemeChoicePanel extends React.Component { const orderedThemes = getOrderedThemes(); return ( -
- {_t("Theme")} + {systemThemeSection} -
+
({ @@ -264,7 +264,7 @@ export default class ThemeChoicePanel extends React.Component {
{this.renderHighContrastCheckbox()} {customThemeForm} -
+ ); } diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 2cbcf03bdb0..14dbf48bd5b 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -31,6 +31,9 @@ import LayoutSwitcher from "../../LayoutSwitcher"; import FontScalingPanel from "../../FontScalingPanel"; import ThemeChoicePanel from "../../ThemeChoicePanel"; import ImageSizePanel from "../../ImageSizePanel"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; +import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection"; interface IProps {} @@ -115,7 +118,7 @@ export default class AppearanceUserSettingsTab extends React.Component this.setState({ useSystemFont: checked })} /> ) => { this.setState({ @@ -133,10 +136,10 @@ export default class AppearanceUserSettingsTab extends React.Component + }> {toggle} {advanced} -
+ ); } @@ -144,25 +147,24 @@ export default class AppearanceUserSettingsTab extends React.Component -
- {_t("Customise your appearance")} -
-
- {_t("Appearance Settings only affect this %(brand)s session.", { brand })} -
- - - - {this.renderAdvancedSection()} - -
+ + + + {_t("Appearance Settings only affect this %(brand)s session.", { brand })} + + + + + {this.renderAdvancedSection()} + + + ); } } diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap index d203a90b3f4..4c370d7c150 100644 --- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap @@ -3,104 +3,113 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
- - Font size -
-
-
-
+ Font size +
- Aa -
-
- - - - 15 - - +
+
- Aa -
-
- - -