Conform the style rules of GeneralUserSettingsTab.tsx to the style …

…guide (#10595)

* Nesting: `mx_GeneralUserSettingsTab_changePassword`

* Nesting: `mx_Spinner`

* Conform the style rules to the naming policy

For elements inside "mx_GeneralUserSettingsTab_accountSection" and "mx_GeneralUserSettingsTab_discovery"

* Conform `mx_GeneralUserSettingsTab_discovery_existing*` to the naming policy

cypress/e2e/settings/general-user-settings-tab.spec.ts

@@ -83,12 +83,12 @@ describe("General user settings tab", () => {
                 });
 
             // Wait until spinners disappear
-            cy.get(".mx_GeneralUserSettingsTab_accountSection .mx_Spinner").should("not.exist");
-            cy.get(".mx_GeneralUserSettingsTab_discovery .mx_Spinner").should("not.exist");
+            cy.get(".mx_GeneralUserSettingsTab_section--account .mx_Spinner").should("not.exist");
+            cy.get(".mx_GeneralUserSettingsTab_section--discovery .mx_Spinner").should("not.exist");
 
-            cy.get(".mx_GeneralUserSettingsTab_accountSection").within(() => {
+            cy.get(".mx_GeneralUserSettingsTab_section--account").within(() => {
                 // Assert that input areas for changing a password exists
-                cy.get("form.mx_GeneralUserSettingsTab_changePassword")
+                cy.get("form.mx_GeneralUserSettingsTab_section--account_changePassword")
                     .scrollIntoView()
                     .within(() => {
                         cy.findByLabelText("Current password").should("be.visible");
@@ -120,7 +120,7 @@ describe("General user settings tab", () => {
             });
 
             // Check language and region setting dropdown
-            cy.get(".mx_GeneralUserSettingsTab_languageInput")
+            cy.get(".mx_GeneralUserSettingsTab_section_languageInput")
                 .scrollIntoView()
                 .within(() => {
                     // Check the default value

res/css/views/settings/_PhoneNumbers.pcss

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralUserSettingsTab_discovery_existing_verification {
+.mx_GeneralUserSettingsTab_section--discovery_existing_verification {
     display: inline-flex;
     align-items: center;
 

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss

@@ -14,54 +14,58 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralUserSettingsTab_changePassword .mx_Field {
-    margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
-}
+.mx_GeneralUserSettingsTab_section--account_changePassword {
+    .mx_Field {
+        margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
 
-.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
-    margin-top: 0;
+        &:first-child {
+            margin-top: 0;
+        }
+    }
 }
 
 /* TODO: Make this selector less painful */
-.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n + 1),
-.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n + 2),
+.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_accountSection .mx_Spinner,
-.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
-    /* Move the spinner to the left side of the container (default center) */
-    justify-content: left;
+.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_accountSection .mx_EmailAddresses,
-.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
-.mx_GeneralUserSettingsTab_discovery .mx_GeneralUserSettingsTab_discovery_existing,
-.mx_GeneralUserSettingsTab_languageInput {
+.mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
+.mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
+.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing,
+.mx_GeneralUserSettingsTab_section_languageInput {
     margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
 }
 
-.mx_GeneralUserSettingsTab_discovery_existing {
+.mx_GeneralUserSettingsTab_section--discovery_existing {
     display: flex;
     align-items: center;
     margin-bottom: 5px;
 }
 
-.mx_GeneralUserSettingsTab_discovery_existing_address,
-.mx_GeneralUserSettingsTab_discovery_existing_promptText {
+.mx_GeneralUserSettingsTab_section--discovery_existing_address,
+.mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
     flex: 1;
     margin-right: 10px;
 }
 
-.mx_GeneralUserSettingsTab_discovery_existing_button {
+.mx_GeneralUserSettingsTab_section--discovery_existing_button {
     margin-left: 5px;
 }
 
-.mx_GeneralUserSettingsTab_warningIcon {
-    vertical-align: middle;
+.mx_GeneralUserSettingsTab_section--spellcheck .mx_ToggleSwitch {
+    float: right;
 }
 
-.mx_SettingsTab_section_spellcheck .mx_ToggleSwitch {
-    float: right;
+.mx_GeneralUserSettingsTab_heading_warningIcon {
+    vertical-align: middle;
 }

src/components/views/settings/account/EmailAddresses.tsx

@@ -94,21 +94,21 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
     public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
-                <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                    <span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
+                <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                    <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
                         {_t("Remove %(email)s?", { email: this.props.email.address })}
                     </span>
                     <AccessibleButton
                         onClick={this.onActuallyRemove}
                         kind="danger_sm"
-                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     >
                         {_t("Remove")}
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.onDontRemove}
                         kind="link_sm"
-                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     >
                         {_t("Cancel")}
                     </AccessibleButton>
@@ -117,8 +117,10 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">{this.props.email.address}</span>
+            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+                    {this.props.email.address}
+                </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm">
                     {_t("Remove")}
                 </AccessibleButton>

src/components/views/settings/account/PhoneNumbers.tsx

@@ -89,21 +89,21 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
     public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
-                <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                    <span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
+                <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                    <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
                         {_t("Remove %(phone)s?", { phone: this.props.msisdn.address })}
                     </span>
                     <AccessibleButton
                         onClick={this.onActuallyRemove}
                         kind="danger_sm"
-                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     >
                         {_t("Remove")}
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.onDontRemove}
                         kind="link_sm"
-                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     >
                         {_t("Cancel")}
                     </AccessibleButton>
@@ -112,8 +112,8 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">
+            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
                     +{this.props.msisdn.address}
                 </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm">

src/components/views/settings/discovery/EmailAddresses.tsx

@@ -217,7 +217,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
                 <span>
                     {_t("Verify the link in your inbox")}
                     <AccessibleButton
-                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                         kind="primary_sm"
                         onClick={this.onContinueClick}
                         disabled={this.state.continueDisabled}
@@ -229,7 +229,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
         } else if (bound) {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="danger_sm"
                     onClick={this.onRevokeClick}
                 >
@@ -239,7 +239,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
         } else {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="primary_sm"
                     onClick={this.onShareClick}
                 >
@@ -249,8 +249,8 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">{address}</span>
+            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
                 {status}
             </div>
         );

src/components/views/settings/discovery/PhoneNumbers.tsx

@@ -222,7 +222,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         let status;
         if (verifying) {
             status = (
-                <span className="mx_GeneralUserSettingsTab_discovery_existing_verification">
+                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_verification">
                     <span>
                         {_t("Please enter verification code sent via text.")}
                         <br />
@@ -243,7 +243,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         } else if (bound) {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="danger_sm"
                     onClick={this.onRevokeClick}
                 >
@@ -253,7 +253,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         } else {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_discovery_existing_button"
+                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
                     kind="primary_sm"
                     onClick={this.onShareClick}
                 >
@@ -263,8 +263,8 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">+{address}</span>
+            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
                 {status}
             </div>
         );

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -324,7 +324,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     private renderAccountSection(): JSX.Element {
         let passwordChangeForm: ReactNode = (
             <ChangePassword
-                className="mx_GeneralUserSettingsTab_changePassword"
+                className="mx_GeneralUserSettingsTab_section--account_changePassword"
                 rowClassName=""
                 buttonKind="primary"
                 onError={this.onPasswordChangeError}
@@ -401,7 +401,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             );
         }
         return (
-            <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_accountSection">
+            <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>
@@ -417,7 +417,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
                 <LanguageDropdown
-                    className="mx_GeneralUserSettingsTab_languageInput"
+                    className="mx_GeneralUserSettingsTab_section_languageInput"
                     onOptionChange={this.onLanguageChange}
                     value={this.state.language}
                 />
@@ -427,7 +427,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
     private renderSpellCheckSection(): JSX.Element {
         return (
-            <div className="mx_SettingsTab_section mx_SettingsTab_section_spellcheck">
+            <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--spellcheck">
                 <span className="mx_SettingsTab_subheading">
                     {_t("Spell check")}
                     <ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
@@ -471,17 +471,17 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         const msisdns = this.state.loading3pids ? <Spinner /> : <DiscoveryPhoneNumbers msisdns={this.state.msisdns} />;
 
         const threepidSection = this.state.haveIdServer ? (
-            <div className="mx_GeneralUserSettingsTab_discovery">
+            <>
                 <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
                 {emails}
 
                 <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
                 {msisdns}
-            </div>
+            </>
         ) : null;
 
         return (
-            <div className="mx_SettingsTab_section">
+            <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--discovery">
                 {threepidSection}
                 {/* has its own heading as it includes the current identity server */}
                 <SetIdServer missingTerms={false} />
@@ -521,7 +521,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         const discoWarning = this.state.requiredPolicyInfo.hasTerms ? (
             <img
-                className="mx_GeneralUserSettingsTab_warningIcon"
+                className="mx_GeneralUserSettingsTab_heading_warningIcon"
                 src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default}
                 width="18"
                 height="18"