From 0c1b0a43fa6627993a01dcc3c77ca949afe00148 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 23 May 2023 13:58:26 +1200
Subject: [PATCH 1/7] account password section

---
 .../tabs/user/_GeneralUserSettingsTab.pcss    | 10 -----
 .../tabs/user/GeneralUserSettingsTab.tsx      | 41 +++++++++----------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
index eed53cb6b9e..5902d7d130d 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
@@ -14,16 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralUserSettingsTab_section--account_changePassword {
-    .mx_Field {
-        margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
-
-        &:first-child {
-            margin-top: 0;
-        }
-    }
-}
-
 /* TODO: Make this selector less painful */
 .mx_GeneralUserSettingsTab_section--account .mx_SettingsTab_subheading:nth-child(n + 1),
 .mx_GeneralUserSettingsTab_section--discovery .mx_SettingsTab_subheading:nth-child(n + 2),
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index 5b4ea04d1a3..9b2c576d31e 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -56,7 +56,7 @@ import ToggleSwitch from "../../../elements/ToggleSwitch";
 import { IS_MAC } from "../../../../../Keyboard";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
-import SettingsSubsection from "../../shared/SettingsSubsection";
+import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
 
 interface IProps {
     closeSettingsFn: () => void;
@@ -325,15 +325,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     }
 
     private renderAccountSection(): JSX.Element {
-        let passwordChangeForm: ReactNode = (
-            <ChangePassword
-                className="mx_GeneralUserSettingsTab_section--account_changePassword"
-                rowClassName=""
-                buttonKind="primary"
-                onError={this.onPasswordChangeError}
-                onFinished={this.onPasswordChanged}
-            />
-        );
+        
 
         let threepidSection: ReactNode = null;
 
@@ -369,11 +361,18 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             threepidSection = <Spinner />;
         }
 
-        let passwordChangeText: ReactNode = _t("Set a new account password…");
-        if (!this.state.canChangePassword) {
-            // Just don't show anything if you can't do anything.
-            passwordChangeText = null;
-            passwordChangeForm = null;
+        let passwordChangeSection: ReactNode = null;
+        if (this.state.canChangePassword) {
+            passwordChangeSection = <>
+                <SettingsSubsectionText>{_t("Set a new account password…")}</SettingsSubsectionText>
+                <ChangePassword
+                    className="mx_GeneralUserSettingsTab_section--account_changePassword"
+                    rowClassName=""
+                    buttonKind="primary"
+                    onError={this.onPasswordChangeError}
+                    onFinished={this.onPasswordChanged}
+                />
+            </>
         }
 
         let externalAccountManagement: JSX.Element | undefined;
@@ -404,13 +403,13 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             );
         }
         return (
-            <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--account">
-                <span className="mx_SettingsTab_subheading">{_t("Account")}</span>
-                {externalAccountManagement}
-                <p className="mx_SettingsTab_subsectionText">{passwordChangeText}</p>
-                {passwordChangeForm}
+            <>
+                <SettingsSubsection heading={_t("Account")} stretchContent>
+                    {externalAccountManagement}
+                    {passwordChangeSection}
+                </SettingsSubsection>
                 {threepidSection}
-            </div>
+            </>
         );
     }
 

From fb3e965fd96dfe57b6252daed7893d04f5c2aea3 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 24 May 2023 15:47:23 +1200
Subject: [PATCH 2/7] account email and phone numbers

---
 .../general-user-settings-tab.spec.ts         |  4 +-
 res/css/views/elements/_TagComposer.pcss      |  8 +---
 res/css/views/settings/tabs/_SettingsTab.pcss | 18 +++++++++
 .../tabs/user/_GeneralUserSettingsTab.pcss    | 14 -------
 .../views/settings/account/EmailAddresses.tsx |  4 +-
 .../views/settings/account/PhoneNumbers.tsx   |  4 +-
 .../tabs/user/GeneralUserSettingsTab.tsx      | 39 ++++++++++---------
 7 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/cypress/e2e/settings/general-user-settings-tab.spec.ts b/cypress/e2e/settings/general-user-settings-tab.spec.ts
index b78fe390d99..35d80fc1ab3 100644
--- a/cypress/e2e/settings/general-user-settings-tab.spec.ts
+++ b/cypress/e2e/settings/general-user-settings-tab.spec.ts
@@ -97,7 +97,7 @@ describe("General user settings tab", () => {
                     });
 
                 // Check email addresses area
-                cy.get(".mx_EmailAddresses")
+                cy.findByTestId("mx_EmailAddresses")
                     .scrollIntoView()
                     .within(() => {
                         // Assert that an input area for a new email address is rendered
@@ -108,7 +108,7 @@ describe("General user settings tab", () => {
                     });
 
                 // Check phone numbers area
-                cy.get(".mx_PhoneNumbers")
+                cy.findByTestId("mx_PhoneNumbers")
                     .scrollIntoView()
                     .within(() => {
                         // Assert that an input area for a new phone number is rendered
diff --git a/res/css/views/elements/_TagComposer.pcss b/res/css/views/elements/_TagComposer.pcss
index 8c9b7b071ae..51d9749e2b0 100644
--- a/res/css/views/elements/_TagComposer.pcss
+++ b/res/css/views/elements/_TagComposer.pcss
@@ -17,16 +17,12 @@ limitations under the License.
 .mx_TagComposer {
     .mx_TagComposer_input {
         display: flex;
-
-        .mx_Field {
-            flex: 1;
-            margin: 0; /* override from field styles */
-        }
+        flex-direction: row;
 
         .mx_AccessibleButton {
             min-width: 70px;
             padding: 0 8px; /* override from button styles */
-            margin-left: 16px; /* distance from <Field> */
+            align-self: stretch; /* override default settingstab style */
         }
 
         .mx_Field,
diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index b060a025418..6ab44ec5b24 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -24,6 +24,24 @@ limitations under the License.
     a {
         color: $links;
     }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-8;
+        flex-grow: 1;
+    }
+    // never want full width buttons
+    // event when other content is 100% width
+    .mx_AccessibleButton {
+        align-self: flex-start;
+        justify-self: flex-start;
+    }
+
+    .mx_Field {
+        margin: 0;
+        flex: 1;
+    }
 }
 
 .mx_SettingsTab_warningText {
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
index dc9068d87c9..4c7d708415f 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
@@ -14,13 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* TODO: Make this selector less painful */
-.mx_GeneralUserSettingsTab_section--account .mx_SettingsTab_subheading:nth-child(n + 1),
-.mx_GeneralUserSettingsTab_section--discovery .mx_SettingsTab_subheading:nth-child(n + 2),
-.mx_SetIdServer .mx_SettingsTab_subheading {
-    margin-top: 24px;
-}
-
 .mx_GeneralUserSettingsTab_section--account,
 .mx_GeneralUserSettingsTab_section--discovery {
     .mx_Spinner {
@@ -29,16 +22,9 @@ limitations under the License.
     }
 }
 
-.mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
-.mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
-.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing {
-    margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
-}
-
 .mx_GeneralUserSettingsTab_section--discovery_existing {
     display: flex;
     align-items: center;
-    margin-bottom: 5px;
 }
 
 .mx_GeneralUserSettingsTab_section--discovery_existing_address,
diff --git a/src/components/views/settings/account/EmailAddresses.tsx b/src/components/views/settings/account/EmailAddresses.tsx
index e4071701165..37d8697d472 100644
--- a/src/components/views/settings/account/EmailAddresses.tsx
+++ b/src/components/views/settings/account/EmailAddresses.tsx
@@ -276,7 +276,7 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_EmailAddresses">
+            <>
                 {existingEmailElements}
                 <form onSubmit={this.onAddClick} autoComplete="off" noValidate={true}>
                     <Field
@@ -289,7 +289,7 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
                     />
                     {addButton}
                 </form>
-            </div>
+            </>
         );
     }
 }
diff --git a/src/components/views/settings/account/PhoneNumbers.tsx b/src/components/views/settings/account/PhoneNumbers.tsx
index 3d9f0709731..33225f17591 100644
--- a/src/components/views/settings/account/PhoneNumbers.tsx
+++ b/src/components/views/settings/account/PhoneNumbers.tsx
@@ -305,7 +305,7 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
         );
 
         return (
-            <div className="mx_PhoneNumbers">
+            <>
                 {existingPhoneElements}
                 <form onSubmit={this.onAddClick} autoComplete="off" noValidate={true} className="mx_PhoneNumbers_new">
                     <div className="mx_PhoneNumbers_input">
@@ -321,7 +321,7 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
                     </div>
                 </form>
                 {addVerifySection}
-            </div>
+            </>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index cbeec312bf7..80e7dc7bf6b 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -196,7 +196,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             );
             logger.warn(e);
         }
-
         this.setState({
             emails: threepids.filter((a) => a.medium === ThreepidMedium.Email),
             msisdns: threepids.filter((a) => a.medium === ThreepidMedium.Phone),
@@ -329,8 +328,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     }
 
     private renderAccountSection(): JSX.Element {
-        
-
         let threepidSection: ReactNode = null;
 
         // For older homeservers without separate 3PID add and bind methods (MSC2290),
@@ -353,13 +350,15 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
                 <AccountPhoneNumbers msisdns={this.state.msisdns} onMsisdnsChange={this.onMsisdnsChange} />
             );
             threepidSection = (
-                <div>
-                    <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
-                    {emails}
+                <>
+                    <SettingsSubsection heading={_t("Email addresses")} stretchContent data-testid="mx_EmailAddresses">
+                        {emails}
+                    </SettingsSubsection>
 
-                    <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
-                    {msisdns}
-                </div>
+                    <SettingsSubsection heading={_t("Phone numbers")} stretchContent data-testid="mx_PhoneNumber">
+                        {msisdns}
+                    </SettingsSubsection>
+                </>
             );
         } else if (this.state.serverSupportsSeparateAddAndBind === null) {
             threepidSection = <Spinner />;
@@ -367,16 +366,18 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         let passwordChangeSection: ReactNode = null;
         if (this.state.canChangePassword) {
-            passwordChangeSection = <>
-                <SettingsSubsectionText>{_t("Set a new account password…")}</SettingsSubsectionText>
-                <ChangePassword
-                    className="mx_GeneralUserSettingsTab_section--account_changePassword"
-                    rowClassName=""
-                    buttonKind="primary"
-                    onError={this.onPasswordChangeError}
-                    onFinished={this.onPasswordChanged}
-                />
-            </>
+            passwordChangeSection = (
+                <>
+                    <SettingsSubsectionText>{_t("Set a new account password…")}</SettingsSubsectionText>
+                    <ChangePassword
+                        className="mx_GeneralUserSettingsTab_section--account_changePassword"
+                        rowClassName=""
+                        buttonKind="primary"
+                        onError={this.onPasswordChangeError}
+                        onFinished={this.onPasswordChanged}
+                    />
+                </>
+            );
         }
 
         let externalAccountManagement: JSX.Element | undefined;

From c594adb90db2412947330e6471ec81a931bd5aa7 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 24 May 2023 16:19:18 +1200
Subject: [PATCH 3/7] update cypress selectors

---
 .../general-user-settings-tab.spec.ts         | 51 ++++++++++---------
 .../tabs/user/_GeneralUserSettingsTab.pcss    |  8 ---
 .../views/settings/discovery/PhoneNumbers.tsx |  2 +-
 .../tabs/user/GeneralUserSettingsTab.tsx      | 29 ++++++++---
 .../__snapshots__/PhoneNumbers-test.tsx.snap  |  6 +--
 5 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/cypress/e2e/settings/general-user-settings-tab.spec.ts b/cypress/e2e/settings/general-user-settings-tab.spec.ts
index 35d80fc1ab3..2c12f3cb75a 100644
--- a/cypress/e2e/settings/general-user-settings-tab.spec.ts
+++ b/cypress/e2e/settings/general-user-settings-tab.spec.ts
@@ -83,10 +83,14 @@ describe("General user settings tab", () => {
                 });
 
             // Wait until spinners disappear
-            cy.get(".mx_GeneralUserSettingsTab_section--account .mx_Spinner").should("not.exist");
-            cy.get(".mx_GeneralUserSettingsTab_section--discovery .mx_Spinner").should("not.exist");
+            cy.findByTestId("accountSection").within(() => {
+                cy.get(".mx_Spinner").should("not.exist");
+            });
+            cy.findByTestId("discoverySection").within(() => {
+                cy.get(".mx_Spinner").should("not.exist");
+            });
 
-            cy.get(".mx_GeneralUserSettingsTab_section--account").within(() => {
+            cy.findByTestId("accountSection").within(() => {
                 // Assert that input areas for changing a password exists
                 cy.get("form.mx_GeneralUserSettingsTab_section--account_changePassword")
                     .scrollIntoView()
@@ -95,29 +99,28 @@ describe("General user settings tab", () => {
                         cy.findByLabelText("New Password").should("be.visible");
                         cy.findByLabelText("Confirm password").should("be.visible");
                     });
+            });
+            // Check email addresses area
+            cy.findByTestId("mx_AccountEmailAddresses")
+                .scrollIntoView()
+                .within(() => {
+                    // Assert that an input area for a new email address is rendered
+                    cy.findByRole("textbox", { name: "Email Address" }).should("be.visible");
 
-                // Check email addresses area
-                cy.findByTestId("mx_EmailAddresses")
-                    .scrollIntoView()
-                    .within(() => {
-                        // Assert that an input area for a new email address is rendered
-                        cy.findByRole("textbox", { name: "Email Address" }).should("be.visible");
-
-                        // Assert the add button is visible
-                        cy.findByRole("button", { name: "Add" }).should("be.visible");
-                    });
+                    // Assert the add button is visible
+                    cy.findByRole("button", { name: "Add" }).should("be.visible");
+                });
 
-                // Check phone numbers area
-                cy.findByTestId("mx_PhoneNumbers")
-                    .scrollIntoView()
-                    .within(() => {
-                        // Assert that an input area for a new phone number is rendered
-                        cy.findByRole("textbox", { name: "Phone Number" }).should("be.visible");
+            // Check phone numbers area
+            cy.findByTestId("mx_AccountPhoneNumbers")
+                .scrollIntoView()
+                .within(() => {
+                    // Assert that an input area for a new phone number is rendered
+                    cy.findByRole("textbox", { name: "Phone Number" }).should("be.visible");
 
-                        // Assert that the add button is rendered
-                        cy.findByRole("button", { name: "Add" }).should("be.visible");
-                    });
-            });
+                    // Assert that the add button is rendered
+                    cy.findByRole("button", { name: "Add" }).should("be.visible");
+                });
 
             // Check language and region setting dropdown
             cy.get(".mx_GeneralUserSettingsTab_section_languageInput")
@@ -188,7 +191,7 @@ describe("General user settings tab", () => {
 
     it("should set a country calling code based on default_country_code", () => {
         // Check phone numbers area
-        cy.get(".mx_PhoneNumbers")
+        cy.findByTestId("mx_AccountPhoneNumbers")
             .scrollIntoView()
             .within(() => {
                 // Assert that an input area for a new phone number is rendered
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
index 4c7d708415f..76c5834fa83 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
@@ -14,14 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralUserSettingsTab_section--account,
-.mx_GeneralUserSettingsTab_section--discovery {
-    .mx_Spinner {
-        /* Move the spinner to the left side of the container (default center) */
-        justify-content: flex-start;
-    }
-}
-
 .mx_GeneralUserSettingsTab_section--discovery_existing {
     display: flex;
     align-items: center;
diff --git a/src/components/views/settings/discovery/PhoneNumbers.tsx b/src/components/views/settings/discovery/PhoneNumbers.tsx
index e9e67490d6a..408573790ad 100644
--- a/src/components/views/settings/discovery/PhoneNumbers.tsx
+++ b/src/components/views/settings/discovery/PhoneNumbers.tsx
@@ -294,7 +294,7 @@ export default class PhoneNumbers extends React.Component<IProps> {
 
         return (
             <SettingsSubsection
-                data-testid="mx_PhoneNumbers"
+                data-testid="mx_DiscoveryPhoneNumbers"
                 heading={_t("Phone numbers")}
                 description={description}
                 stretchContent
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index 80e7dc7bf6b..193b1482eb7 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -60,6 +60,7 @@ import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
 import { SettingsSubsectionHeading } from "../../shared/SettingsSubsectionHeading";
 import Heading from "../../../typography/Heading";
+import InlineSpinner from "../../../elements/InlineSpinner";
 
 interface IProps {
     closeSettingsFn: () => void;
@@ -340,22 +341,30 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             (this.state.haveIdServer || this.state.serverSupportsSeparateAddAndBind === true)
         ) {
             const emails = this.state.loading3pids ? (
-                <Spinner />
+                <InlineSpinner />
             ) : (
                 <AccountEmailAddresses emails={this.state.emails} onEmailsChange={this.onEmailsChange} />
             );
             const msisdns = this.state.loading3pids ? (
-                <Spinner />
+                <InlineSpinner />
             ) : (
                 <AccountPhoneNumbers msisdns={this.state.msisdns} onMsisdnsChange={this.onMsisdnsChange} />
             );
             threepidSection = (
                 <>
-                    <SettingsSubsection heading={_t("Email addresses")} stretchContent data-testid="mx_EmailAddresses">
+                    <SettingsSubsection
+                        heading={_t("Email addresses")}
+                        stretchContent
+                        data-testid="mx_AccountEmailAddresses"
+                    >
                         {emails}
                     </SettingsSubsection>
 
-                    <SettingsSubsection heading={_t("Phone numbers")} stretchContent data-testid="mx_PhoneNumber">
+                    <SettingsSubsection
+                        heading={_t("Phone numbers")}
+                        stretchContent
+                        data-testid="mx_AccountPhoneNumbers"
+                    >
                         {msisdns}
                     </SettingsSubsection>
                 </>
@@ -386,13 +395,13 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
             externalAccountManagement = (
                 <>
-                    <p className="mx_SettingsTab_subsectionText" data-testid="external-account-management-outer">
+                    <SettingsSubsectionText data-testid="external-account-management-outer">
                         {_t(
                             "Your account details are managed separately at <code>%(hostname)s</code>.",
                             { hostname },
                             { code: (sub) => <code>{sub}</code> },
                         )}
-                    </p>
+                    </SettingsSubsectionText>
                     <AccessibleButton
                         onClick={null}
                         element="a"
@@ -409,7 +418,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         }
         return (
             <>
-                <SettingsSubsection heading={_t("Account")} stretchContent>
+                <SettingsSubsection heading={_t("Account")} stretchContent data-testid="accountSection">
                     {externalAccountManagement}
                     {passwordChangeSection}
                 </SettingsSubsection>
@@ -540,7 +549,11 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
                     {_t("Discovery")}
                 </Heading>
             );
-            discoverySection = <SettingsSection heading={heading}>{this.renderDiscoverySection()}</SettingsSection>;
+            discoverySection = (
+                <SettingsSection heading={heading} data-testid="discoverySection">
+                    {this.renderDiscoverySection()}
+                </SettingsSection>
+            );
         }
 
         return (
diff --git a/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap b/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap
index ef9287b2b05..f63ad7ca62c 100644
--- a/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap
+++ b/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<PhoneNumbers /> should handle no numbers 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"
-    data-testid="mx_PhoneNumbers"
+    data-testid="mx_DiscoveryPhoneNumbers"
   >
     <div
       class="mx_SettingsSubsectionHeading"
@@ -32,7 +32,7 @@ exports[`<PhoneNumbers /> should render a loader while loading 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"
-    data-testid="mx_PhoneNumbers"
+    data-testid="mx_DiscoveryPhoneNumbers"
   >
     <div
       class="mx_SettingsSubsectionHeading"
@@ -64,7 +64,7 @@ exports[`<PhoneNumbers /> should render phone numbers 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"
-    data-testid="mx_PhoneNumbers"
+    data-testid="mx_DiscoveryPhoneNumbers"
   >
     <div
       class="mx_SettingsSubsectionHeading"

From f5bcf6339a8dc7fc23d206383470fab4bb3f17e0 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 24 May 2023 16:23:37 +1200
Subject: [PATCH 4/7] use settingsection for General section

---
 .../e2e/settings/general-user-settings-tab.spec.ts  |  2 +-
 .../settings/tabs/user/GeneralUserSettingsTab.tsx   | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/cypress/e2e/settings/general-user-settings-tab.spec.ts b/cypress/e2e/settings/general-user-settings-tab.spec.ts
index 2c12f3cb75a..2879d6d9301 100644
--- a/cypress/e2e/settings/general-user-settings-tab.spec.ts
+++ b/cypress/e2e/settings/general-user-settings-tab.spec.ts
@@ -53,7 +53,7 @@ describe("General user settings tab", () => {
 
         cy.findByTestId("mx_GeneralUserSettingsTab").within(() => {
             // Assert that the top heading is rendered
-            cy.findByTestId("general").should("have.text", "General").should("be.visible");
+            cy.findByText("General").should("be.visible");
 
             cy.get(".mx_ProfileSettings_profile")
                 .scrollIntoView()
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index 193b1482eb7..dc0d5cb5600 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -558,13 +558,12 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         return (
             <SettingsTab data-testid="mx_GeneralUserSettingsTab">
-                <div className="mx_SettingsTab_heading" data-testid="general">
-                    {_t("General")}
-                </div>
-                {this.renderProfileSection()}
-                {this.renderAccountSection()}
-                {this.renderLanguageSection()}
-                {supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
+                <SettingsSection heading={_t("General")}>
+                    {this.renderProfileSection()}
+                    {this.renderAccountSection()}
+                    {this.renderLanguageSection()}
+                    {supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
+                </SettingsSection>
                 {discoverySection}
                 {this.renderIntegrationManagerSection()}
                 {accountManagementSection}

From 3546013ed1eed85709dd224bf7e1ad3c21726218 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 24 May 2023 16:41:03 +1200
Subject: [PATCH 5/7] use semantic headings for profile settings

---
 res/css/views/settings/_ProfileSettings.pcss           |  5 ++---
 src/components/views/settings/ProfileSettings.tsx      |  3 ++-
 .../settings/tabs/user/GeneralUserSettingsTab.tsx      | 10 +---------
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss
index 86b6835dc81..8c888e75e4d 100644
--- a/res/css/views/settings/_ProfileSettings.pcss
+++ b/res/css/views/settings/_ProfileSettings.pcss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_ProfileSettings {
-    margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
     border-bottom: 1px solid $quinary-content;
 
     .mx_ProfileSettings_avatarUpload {
@@ -29,8 +28,8 @@ limitations under the License.
             flex-grow: 1;
             margin-inline-end: 54px;
 
-            .mx_Field:first-child {
-                margin-top: 0;
+            .mx_Field {
+                margin-top: $spacing-8;
             }
 
             .mx_ProfileSettings_profile_controls_topic {
diff --git a/src/components/views/settings/ProfileSettings.tsx b/src/components/views/settings/ProfileSettings.tsx
index 8f962ba38e0..529bb86a78e 100644
--- a/src/components/views/settings/ProfileSettings.tsx
+++ b/src/components/views/settings/ProfileSettings.tsx
@@ -29,6 +29,7 @@ import AvatarSetting from "./AvatarSetting";
 import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 import PosthogTrackers from "../../../PosthogTrackers";
+import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading";
 
 interface IState {
     originalDisplayName: string;
@@ -183,7 +184,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                 />
                 <div className="mx_ProfileSettings_profile">
                     <div className="mx_ProfileSettings_profile_controls">
-                        <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
+                        <SettingsSubsectionHeading heading={_t("Profile")} />
                         <Field
                             label={_t("Display Name")}
                             type="text"
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index dc0d5cb5600..3e17c8d6b86 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -320,14 +320,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         });
     };
 
-    private renderProfileSection(): JSX.Element {
-        return (
-            <div className="mx_SettingsTab_section">
-                <ProfileSettings />
-            </div>
-        );
-    }
-
     private renderAccountSection(): JSX.Element {
         let threepidSection: ReactNode = null;
 
@@ -559,7 +551,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         return (
             <SettingsTab data-testid="mx_GeneralUserSettingsTab">
                 <SettingsSection heading={_t("General")}>
-                    {this.renderProfileSection()}
+                    <ProfileSettings />
                     {this.renderAccountSection()}
                     {this.renderLanguageSection()}
                     {supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}

From 92df4b4885c182d0442d929a0f84738e023dbd1c Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 29 May 2023 10:11:19 +1200
Subject: [PATCH 6/7] fix show advanced spacing

---
 .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 14dbf48bd5b..135c0c4a65f 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -136,7 +136,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             );
         }
         return (
-            <SettingsSubsection heading={<></>}>
+            <SettingsSubsection>
                 {toggle}
                 {advanced}
             </SettingsSubsection>

From e7e00d6cb00e2ad3cc271a363bb8b0d5fce8e901 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Mon, 29 May 2023 12:49:55 +1200
Subject: [PATCH 7/7] udpate snapshot

---
 .../user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 8b5ced51ab5..85139cf1093 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -345,7 +345,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
             class="mx_SettingsSubsection"
           >
             <div
-              class="mx_SettingsSubsection_content"
+              class="mx_SettingsSubsection_content mx_SettingsSubsection_noHeading"
             >
               <div
                 aria-expanded="false"