diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss index a2b3cd35bfa..e90585122b5 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -20,13 +20,30 @@ limitations under the License. } .mx_SettingsSubsection_description { + margin-top: $spacing-8; +} + +.mx_SettingsSubsection_text { width: 100%; box-sizing: inherit; - line-height: $font-24px; - margin-bottom: $spacing-24; + font-size: $font-15px; color: $secondary-content; } .mx_SettingsSubsection_content { width: 100%; + display: grid; + grid-gap: $spacing-8; + grid-template-columns: 1fr; + justify-items: flex-start; + margin-top: $spacing-24; + + summary { + color: $accent; + } + details[open] { + summary { + margin-bottom: $spacing-8; + } + } } diff --git a/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss b/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss index e6d4bf4be7c..00bcb4abc21 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss @@ -17,7 +17,6 @@ limitations under the License. .mx_SettingsSubsectionHeading { display: flex; flex-direction: row; - padding-bottom: $spacing-8; gap: $spacing-8; } diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx index 0e78bf47505..8fcdf327a9a 100644 --- a/src/components/views/settings/shared/SettingsSubsection.tsx +++ b/src/components/views/settings/shared/SettingsSubsection.tsx @@ -24,10 +24,20 @@ export interface SettingsSubsectionProps extends HTMLAttributes children?: React.ReactNode; } -const SettingsSubsection: React.FC = ({ heading, description, children, ...rest }) => ( +export const SettingsSubsectionText: React.FC> = ({ children, ...rest }) => ( +
+ {children} +
+); + +export const SettingsSubsection: React.FC = ({ heading, description, children, ...rest }) => (
{typeof heading === "string" ? : <>{heading}} - {!!description &&
{description}
} + {!!description && ( +
+ {description} +
+ )}
{children}
); diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index af0525d6c55..68887ca6c68 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx @@ -31,6 +31,9 @@ import { Action } from "../../../../../dispatcher/actions"; import { UserTab } from "../../../dialogs/UserTab"; import dis from "../../../../../dispatcher/dispatcher"; import CopyableText from "../../../elements/CopyableText"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; +import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection"; import ExternalLink from "../../../elements/ExternalLink"; interface IProps { @@ -115,18 +118,15 @@ export default class HelpUserSettingsTab extends React.Component for (const tocEntry of tocLinks) { legalLinks.push(
- - {tocEntry.text} - + {tocEntry.text}
, ); } return ( -
- {_t("Legal")} -
{legalLinks}
-
+ + {legalLinks} + ); } @@ -134,116 +134,95 @@ export default class HelpUserSettingsTab extends React.Component // Note: This is not translated because it is legal text. // Also,   is ugly but necessary. return ( -
- {_t("Credits")} -
    -
  • - {_t( - "The default cover photo is © " + - "Jesús Roncero used under the terms of CC-BY-SA 4.0.", - {}, - { - photo: (sub) => ( - - {sub} - - ), - author: (sub) => ( - - {sub} - - ), - terms: (sub) => ( - - {sub} - - ), - }, - )} -
    • -
  • - {_t( - "The twemoji-colr font is © Mozilla Foundation " + - "used under the terms of Apache 2.0.", - {}, - { - colr: (sub) => ( - - {sub} - - ), - author: (sub) => ( - - {sub} - - ), - terms: (sub) => ( - - {sub} - - ), - }, - )} -
    • -
  • - {_t( - "The Twemoji emoji art is © " + - "Twitter, Inc and other contributors used under the terms of " + - "CC-BY 4.0.", - {}, - { - twemoji: (sub) => ( - - {sub} - - ), - author: (sub) => ( - - {sub} - - ), - terms: (sub) => ( - - {sub} - - ), - }, - )} -
    • -
-
+ + +
    +
  • + {_t( + "The default cover photo is © " + + "Jesús Roncero used under the terms of CC-BY-SA 4.0.", + {}, + { + photo: (sub) => ( + + {sub} + + ), + author: (sub) => ( + {sub} + ), + terms: (sub) => ( + + {sub} + + ), + }, + )} +
    • +
  • + {_t( + "The twemoji-colr font is © Mozilla Foundation " + + "used under the terms of Apache 2.0.", + {}, + { + colr: (sub) => ( + + {sub} + + ), + author: (sub) => {sub}, + terms: (sub) => ( + + {sub} + + ), + }, + )} +
    • +
  • + {_t( + "The Twemoji emoji art is © " + + "Twitter, Inc and other contributors used under the terms of " + + "CC-BY 4.0.", + {}, + { + twemoji: (sub) => ( + {sub} + ), + author: (sub) => ( + {sub} + ), + terms: (sub) => ( + + {sub} + + ), + }, + )} +
    • +
+ + ); } @@ -268,11 +247,7 @@ export default class HelpUserSettingsTab extends React.Component brand, }, { - a: (sub) => ( - - {sub} - - ), + a: (sub) => {sub}, }, ); if (SdkConfig.get("welcome_user_id") && getCurrentLanguage().startsWith("en")) { @@ -309,77 +284,73 @@ export default class HelpUserSettingsTab extends React.Component let bugReportingSection; if (SdkConfig.get().bug_report_endpoint_url) { bugReportingSection = ( -
- {_t("Bug reporting")} -
- {_t( - "If you've submitted a bug via GitHub, debug logs can help " + - "us track down the problem. ", - )} - {_t( - "Debug logs contain application " + - "usage data including your username, the IDs or aliases of " + - "the rooms you have visited, which UI elements you " + - "last interacted with, and the usernames of other users. " + - "They do not contain messages.", - )} -
+ + + {_t( + "If you've submitted a bug via GitHub, debug logs can help " + + "us track down the problem. ", + )} + + {_t( + "Debug logs contain application " + + "usage data including your username, the IDs or aliases of " + + "the rooms you have visited, which UI elements you " + + "last interacted with, and the usernames of other users. " + + "They do not contain messages.", + )} + + } + > {_t("Submit debug logs")} -
+ {_t( "To report a Matrix-related security issue, please read the Matrix.org " + "Security Disclosure Policy.", {}, { a: (sub) => ( - + {sub} ), }, )} -
-
+ + ); } const { appVersion, olmVersion } = this.getVersionInfo(); return ( -
-
{_t("Help & About")}
- {bugReportingSection} -
- {_t("FAQ")} -
{faqText}
- - {_t("Keyboard Shortcuts")} - -
-
- {_t("Versions")} -
- - {appVersion} -
- {olmVersion} -
- - {updateButton} -
-
- {this.renderLegal()} - {this.renderCredits()} -
- {_t("Advanced")} -
-
+ + + {bugReportingSection} + + + {_t("Keyboard Shortcuts")} + + + + + + {appVersion} +
+ {olmVersion} +
+ + {updateButton} + + + {this.renderLegal()} + {this.renderCredits()} + + {_t( "Homeserver is %(homeserverUrl)s", { @@ -389,10 +360,10 @@ export default class HelpUserSettingsTab extends React.Component code: (sub) => {sub}, }, )} -
-
- {MatrixClientPeg.get().getIdentityServerUrl() && - _t( + + {MatrixClientPeg.get().getIdentityServerUrl() && ( + + {_t( "Identity server is %(identityServerUrl)s", { identityServerUrl: MatrixClientPeg.get().getIdentityServerUrl(), @@ -401,25 +372,28 @@ export default class HelpUserSettingsTab extends React.Component code: (sub) => {sub}, }, )} -
-
- {_t("Access Token")} - - {_t( - "Your access token gives full access to your account." + - " Do not share it with anyone.", - )} - - MatrixClientPeg.get().getAccessToken()}> - {MatrixClientPeg.get().getAccessToken()} - -
+ + )} + +
+ {_t("Access Token")} + + {_t( + "Your access token gives full access to your account." + + " Do not share it with anyone.", + )} + + MatrixClientPeg.get().getAccessToken()}> + {MatrixClientPeg.get().getAccessToken()} + +
+ {_t("Clear cache and reload")} -
-
-
+ + + ); } } diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx index b5f04c7b787..5e610b87ba7 100644 --- a/test/components/views/dialogs/UserSettingsDialog-test.tsx +++ b/test/components/views/dialogs/UserSettingsDialog-test.tsx @@ -74,7 +74,9 @@ describe("", () => { const getActiveTabLabel = (container: Element) => container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent; - const getActiveTabHeading = (container: Element) => container.querySelector(".mx_SettingsTab_heading")?.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", () => { const { container } = render(getComponent()); diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap index 011d926b1dd..190fc3d2d05 100644 --- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap @@ -18,7 +18,11 @@ exports[` renders both cards when user has both unver
- Improve your account security by following these recommendations. +
+ Improve your account security by following these recommendations. +
renders inactive devices section when user
- Improve your account security by following these recommendations. +
+ Improve your account security by following these recommendations. +
renders unverified devices section when use
- Improve your account security by following these recommendations. +
+ Improve your account security by following these recommendations. +
renders with plain text description 1`] = `
- This describes the subsection +
+ This describes the subsection +
renders with react element description 1`] = `
-

- This describes the section - - link - -

+
+

+ This describes the section + + link + +

+