From 2f9c9376d33ccd461007bb515df6967b2fb2f27d Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 31 May 2023 14:34:38 +1200 Subject: [PATCH 1/3] remove mx_SettingsTab_heading style --- res/css/views/settings/tabs/_SettingsTab.pcss | 14 -------------- .../views/dialogs/UserSettingsDialog-test.tsx | 1 - 2 files changed, 15 deletions(-) diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 1de3e947f73..498d2aa2f2b 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,19 +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; diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx index bb28dae58b2..cba01bc1e17 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", () => { From 33eecc5cfc99ebdc5265866ae6c94363a6526dba Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 31 May 2023 14:45:10 +1200 Subject: [PATCH 2/3] use semantic headings in space preferences dialog --- .../dialogs/_SpacePreferencesDialog.pcss | 10 ---- .../views/dialogs/SpacePreferencesDialog.tsx | 59 ++++++++++--------- 2 files changed, 31 insertions(+), 38 deletions(-) diff --git a/res/css/views/dialogs/_SpacePreferencesDialog.pcss b/res/css/views/dialogs/_SpacePreferencesDialog.pcss index 3cdb08cf928..eb644f802d2 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/src/components/views/dialogs/SpacePreferencesDialog.tsx b/src/components/views/dialogs/SpacePreferencesDialog.tsx index 0963a531181..c0e7e6ea33e 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, + }, + )} + + + + ); }; From 5c70bc3b93708366363274c397dfbb32e4e30960 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 31 May 2023 14:45:41 +1200 Subject: [PATCH 3/3] remove unused settings style: mx_SettingsTab_subheading --- res/css/views/dialogs/_SpaceSettingsDialog.pcss | 6 ------ res/css/views/settings/tabs/_SettingsTab.pcss | 10 ---------- 2 files changed, 16 deletions(-) diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss index 78c4e42c077..7b7c40e2689 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 498d2aa2f2b..064bd457d98 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -46,16 +46,6 @@ limitations under the License. color: $alert; } -.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;