Merge pull request #12857 from matrix-org/dbkr/email_phone_css_temporary_move

Move General user settings styles to more specific places

playwright/e2e/settings/preferences-user-settings-tab.spec.ts

@@ -36,12 +36,12 @@ test.describe("Preferences user settings tab", () => {
 
     test("should be able to change the app language", async ({ uut, user }) => {
         // Check language and region setting dropdown
-        const languageInput = uut.locator(".mx_GeneralUserSettingsTab_section_languageInput");
+        const languageInput = uut.getByRole("button", { name: "Language Dropdown" });
         await languageInput.scrollIntoViewIfNeeded();
         // Check the default value
         await expect(languageInput.getByText("English")).toBeVisible();
         // Click the button to display the dropdown menu
-        await languageInput.getByRole("button", { name: "Language Dropdown" }).click();
+        await languageInput.click();
         // Assert that the default option is rendered and highlighted
         languageInput.getByRole("option", { name: /Albanian/ });
         await expect(languageInput.getByRole("option", { name: /Albanian/ })).toHaveClass(
@@ -49,7 +49,7 @@ test.describe("Preferences user settings tab", () => {
         );
         await expect(languageInput.getByRole("option", { name: /Deutsch/ })).toBeVisible();
         // Click again to close the dropdown
-        await languageInput.getByRole("button", { name: "Language Dropdown" }).click();
+        await languageInput.click();
         // Assert that the default value is rendered again
         await expect(languageInput.getByText("English")).toBeVisible();
     });

res/css/_components.pcss

@@ -37,6 +37,7 @@
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
 @import "./components/views/pips/_WidgetPip.pcss";
 @import "./components/views/polls/_PollOption.pcss";
+@import "./components/views/settings/_EmailAddressesPhoneNumbers.pcss";
 @import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
 @import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";
@@ -356,10 +357,10 @@
 @import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
 @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";
 @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
-@import "./views/settings/tabs/user/_GeneralUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
 @import "./views/spaces/_SpaceBasicSettings.pcss";

res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2024 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,28 +15,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralUserSettingsTab_section--discovery_existing {
+/*
+ * These used to live in General User Settings. These components are horribly duplicative
+ * but share the same styles. For now I'm putting them here so I can renamed the general
+ * tab sensibly and before I can refactor these components.
+ */
+
+.mx_EmailAddressesPhoneNumbers_discovery_existing {
     display: flex;
     align-items: center;
 }
 
-.mx_GeneralUserSettingsTab_section--discovery_existing_address,
+.mx_EmailAddressesPhoneNumbers_discovery_existing_address,
-.mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
+.mx_EmailAddressesPhoneNumbers_discovery_existing_promptText {
     flex: 1;
     margin-right: 10px;
 }
 
-.mx_GeneralUserSettingsTab_section--discovery_existing_button {
+.mx_EmailAddressesPhoneNumbers_discovery_existing_button {
     margin-left: 5px;
 }
-
-.mx_GeneralUserSettingsTab_warningIcon {
-    vertical-align: middle;
-    margin-right: $spacing-8;
-    margin-bottom: 2px;
-}
-
-.mx_GeneralUserSettingsTab_section_hint {
-    font: var(--cpd-font-body-sm-regular);
-    color: var(--cpd-color-text-secondary);
-}

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

@@ -0,0 +1,21 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_PreferencesUserSettingsTab_section_hint {
+    font: var(--cpd-font-body-sm-regular);
+    color: var(--cpd-color-text-secondary);
+}

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

@@ -97,21 +97,21 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
     public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
-                <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
-                    <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
+                    <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_promptText">
                         {_t("settings|general|remove_email_prompt", { email: this.props.email.address })}
                     </span>
                     <AccessibleButton
                         onClick={this.onActuallyRemove}
                         kind="danger_sm"
-                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                        className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     >
                         {_t("action|remove")}
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.onDontRemove}
                         kind="link_sm"
-                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                        className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     >
                         {_t("action|cancel")}
                     </AccessibleButton>
@@ -120,8 +120,8 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
                     {this.props.email.address}
                 </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>

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

@@ -93,21 +93,21 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
     public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
-                <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+                <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
-                    <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
+                    <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_promptText">
                         {_t("settings|general|remove_msisdn_prompt", { phone: this.props.msisdn.address })}
                     </span>
                     <AccessibleButton
                         onClick={this.onActuallyRemove}
                         kind="danger_sm"
-                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                        className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     >
                         {_t("action|remove")}
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.onDontRemove}
                         kind="link_sm"
-                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                        className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     >
                         {_t("action|cancel")}
                     </AccessibleButton>
@@ -116,8 +116,8 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
                     +{this.props.msisdn.address}
                 </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>

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

@@ -178,7 +178,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
                 <span>
                     {_t("settings|general|discovery_email_verification_instructions")}
                     <AccessibleButton
-                        className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                        className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                         kind="primary_sm"
                         onClick={this.onContinueClick}
                         disabled={this.state.continueDisabled}
@@ -190,7 +190,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
         } else if (bound) {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                    className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     kind="danger_sm"
                     onClick={this.onRevokeClick}
                     disabled={this.props.disabled}
@@ -201,7 +201,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
         } else {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                    className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     kind="primary_sm"
                     onClick={this.onShareClick}
                     disabled={this.props.disabled}
@@ -212,8 +212,8 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">{address}</span>
                 {status}
             </div>
         );

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

@@ -179,7 +179,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         let status;
         if (verifying) {
             status = (
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_verification">
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_verification">
                     <span>
                         {_t("settings|general|msisdn_verification_instructions")}
                         <br />
@@ -200,7 +200,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         } else if (bound) {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                    className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     kind="danger_sm"
                     onClick={this.onRevokeClick}
                     disabled={this.props.disabled}
@@ -211,7 +211,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         } else {
             status = (
                 <AccessibleButton
-                    className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
+                    className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
                     kind="primary_sm"
                     onClick={this.onShareClick}
                     disabled={this.props.disabled}
@@ -222,8 +222,8 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         }
 
         return (
-            <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">+{address}</span>
                 {status}
             </div>
         );

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

@@ -70,12 +70,8 @@ const LanguageSection: React.FC = () => {
     return (
         <div className="mx_SettingsSubsection_contentStretch">
             {_t("settings|general|application_language")}
-            <LanguageDropdown
+            <LanguageDropdown onOptionChange={onLanguageChange} value={language} />
-                className="mx_GeneralUserSettingsTab_section_languageInput"
+            <div className="mx_PreferencesUserSettingsTab_section_hint">
-                onOptionChange={onLanguageChange}
-                value={language}
-            />
-            <div className="mx_GeneralUserSettingsTab_section_hint">
                 {_t("settings|general|application_language_reload_hint")}
             </div>
         </div>

test/components/views/settings/discovery/__snapshots__/EmailAddresses-test.tsx.snap

@@ -76,15 +76,15 @@ exports[`<EmailAddresses /> should render email addresses 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
     >
       <div
-        class="mx_GeneralUserSettingsTab_section--discovery_existing"
+        class="mx_EmailAddressesPhoneNumbers_discovery_existing"
       >
         <span
-          class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
+          class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
         >
           foo@bar.com
         </span>
         <div
-          class="mx_AccessibleButton mx_GeneralUserSettingsTab_section--discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
+          class="mx_AccessibleButton mx_EmailAddressesPhoneNumbers_discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
           role="button"
           tabindex="0"
         >

test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap

@@ -19,15 +19,15 @@ exports[`<PhoneNumbers /> should allow binding msisdn 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
     >
       <div
-        class="mx_GeneralUserSettingsTab_section--discovery_existing"
+        class="mx_EmailAddressesPhoneNumbers_discovery_existing"
       >
         <span
-          class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
+          class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
         >
           +441111111111
         </span>
         <span
-          class="mx_GeneralUserSettingsTab_section--discovery_existing_verification"
+          class="mx_EmailAddressesPhoneNumbers_discovery_existing_verification"
         >
           <span>
             Please enter verification code sent via text.
@@ -141,16 +141,16 @@ exports[`<PhoneNumbers /> should render phone numbers 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
     >
       <div
-        class="mx_GeneralUserSettingsTab_section--discovery_existing"
+        class="mx_EmailAddressesPhoneNumbers_discovery_existing"
       >
         <span
-          class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
+          class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
         >
           +
           441111111111
         </span>
         <div
-          class="mx_AccessibleButton mx_GeneralUserSettingsTab_section--discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
+          class="mx_AccessibleButton mx_EmailAddressesPhoneNumbers_discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
           role="button"
           tabindex="0"
         >

test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap

@@ -18,10 +18,10 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
     class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
   >
     <div
-      class="mx_GeneralUserSettingsTab_section--discovery_existing"
+      class="mx_EmailAddressesPhoneNumbers_discovery_existing"
     >
       <span
-        class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
+        class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
       >
         test@test.io
       </span>
@@ -84,10 +84,10 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
     class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
   >
     <div
-      class="mx_GeneralUserSettingsTab_section--discovery_existing"
+      class="mx_EmailAddressesPhoneNumbers_discovery_existing"
     >
       <span
-        class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
+        class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
       >
         +
         123456789

test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -46,7 +46,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   />
                 </div>
                 <div
-                  class="mx_GeneralUserSettingsTab_section_hint"
+                  class="mx_PreferencesUserSettingsTab_section_hint"
                 >
                   The app will reload after selecting another language
                 </div>