From e9a8f4a11df2e4e5ef5e7b56d99c267a4c855a31 Mon Sep 17 00:00:00 2001 From: Kerry Date: Thu, 1 Jun 2023 09:22:03 +1200 Subject: [PATCH] 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 --- .../dialogs/_SpacePreferencesDialog.pcss | 10 ---- .../views/dialogs/_SpaceSettingsDialog.pcss | 6 -- res/css/views/settings/tabs/_SettingsTab.pcss | 24 -------- .../views/dialogs/SpacePreferencesDialog.tsx | 59 ++++++++++--------- .../views/dialogs/UserSettingsDialog-test.tsx | 1 - 5 files changed, 31 insertions(+), 69 deletions(-) diff --git a/res/css/views/dialogs/_SpacePreferencesDialog.pcss b/res/css/views/dialogs/_SpacePreferencesDialog.pcss index 3cdb08cf92..eb644f802d 100644 --- a/res/css/views/dialogs/_SpacePreferencesDialog.pcss +++ b/res/css/views/dialogs/_SpacePreferencesDialog.pcss @@ -31,16 +31,6 @@ limitations under the License. .mx_SettingsTab { min-width: unset; - - .mx_SettingsTab_section { - font-size: $font-15px; - line-height: $font-24px; - - .mx_Checkbox + p { - color: $secondary-content; - margin: 0 20px 0 24px; - } - } } } } diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss index 78c4e42c07..7b7c40e268 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.pcss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.pcss @@ -37,12 +37,6 @@ limitations under the License. margin-bottom: 20px; } - & + .mx_SettingsTab_subheading { - border-top: 1px solid $menu-border-color; - margin-top: 0; - padding-top: 24px; - } - .mx_StyledRadioButton { margin-top: 8px; margin-bottom: 4px; diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 1de3e947f7..064bd457d9 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_SettingsTab { - --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */ --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ color: $primary-content; @@ -47,29 +46,6 @@ limitations under the License. color: $alert; } -.mx_SettingsTab_heading { - font-size: $font-20px; - font-weight: var(--font-semi-bold); - color: $primary-content; - margin-top: 10px; /* TODO: Use a spacing variable */ - margin-bottom: 10px; /* TODO: Use a spacing variable */ - margin-right: 100px; /* TODO: Use a spacing variable */ - - &:nth-child(n + 2) { - margin-top: var(--SettingsTab_heading_nth_child-margin-top); - } -} - -.mx_SettingsTab_subheading { - font-size: $font-16px; - display: block; - font-weight: var(--font-semi-bold); - color: $primary-content; - margin-top: $spacing-12; - margin-bottom: 10px; /* TODO: Use a spacing variable */ - margin-right: 100px; /* TODO: Use a spacing variable */ -} - .mx_SettingsTab_subsectionText { color: $secondary-content; font-size: $font-14px; diff --git a/src/components/views/dialogs/SpacePreferencesDialog.tsx b/src/components/views/dialogs/SpacePreferencesDialog.tsx index 0963a53118..c0e7e6ea33 100644 --- a/src/components/views/dialogs/SpacePreferencesDialog.tsx +++ b/src/components/views/dialogs/SpacePreferencesDialog.tsx @@ -27,6 +27,9 @@ import { SettingLevel } from "../../../settings/SettingLevel"; import RoomName from "../elements/RoomName"; import { SpacePreferenceTab } from "../../../dispatcher/payloads/OpenSpacePreferencesPayload"; import { NonEmptyArray } from "../../../@types/common"; +import SettingsTab from "../settings/tabs/SettingsTab"; +import { SettingsSection } from "../settings/shared/SettingsSection"; +import SettingsSubsection, { SettingsSubsectionText } from "../settings/shared/SettingsSubsection"; interface IProps { space: Room; @@ -38,34 +41,34 @@ const SpacePreferencesAppearanceTab: React.FC> = ({ space const showPeople = useSettingValue("Spaces.showPeopleInSpace", space.roomId); return ( -
-
{_t("Sections to show")}
- -
- ) => { - SettingsStore.setValue( - "Spaces.showPeopleInSpace", - space.roomId, - SettingLevel.ROOM_ACCOUNT, - !showPeople, - ); - }} - > - {_t("People")} - -

- {_t( - "This groups your chats with members of this space. " + - "Turning this off will hide those chats from your view of %(spaceName)s.", - { - spaceName: space.name, - }, - )} -

-
-
+ + + + ) => { + SettingsStore.setValue( + "Spaces.showPeopleInSpace", + space.roomId, + SettingLevel.ROOM_ACCOUNT, + !showPeople, + ); + }} + > + {_t("People")} + + + {_t( + "This groups your chats with members of this space. " + + "Turning this off will hide those chats from your view of %(spaceName)s.", + { + spaceName: space.name, + }, + )} + + + + ); }; diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx index bb28dae58b..cba01bc1e1 100644 --- a/test/components/views/dialogs/UserSettingsDialog-test.tsx +++ b/test/components/views/dialogs/UserSettingsDialog-test.tsx @@ -75,7 +75,6 @@ describe("", () => { const getActiveTabLabel = (container: Element) => container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent; const getActiveTabHeading = (container: Element) => - container.querySelector(".mx_SettingsTab_heading")?.textContent || container.querySelector(".mx_SettingsSection .mx_Heading_h2")?.textContent; it("should render general settings tab when no initialTabId", () => {