From 77062ac721e2dc04f8945b12f1c91ecf0e07852f Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 1 Aug 2024 16:45:56 +0100
Subject: [PATCH] Move General user settings styles to more specific places

This was w grab bag of styles for the email/phone components and
one for something now in preferences. Move them elsewhere so I can
rename the tab sensibly.
---
 res/css/_components.pcss                      |  3 ++-
 .../_EmailAddressesPhoneNumbers.pcss}         | 26 ++++++++-----------
 .../user/_PreferencesUserSettingsTab.pcss     | 21 +++++++++++++++
 .../views/settings/account/EmailAddresses.tsx | 12 ++++-----
 .../views/settings/account/PhoneNumbers.tsx   | 12 ++++-----
 .../settings/discovery/EmailAddresses.tsx     | 10 +++----
 .../views/settings/discovery/PhoneNumbers.tsx | 10 +++----
 7 files changed, 56 insertions(+), 38 deletions(-)
 rename res/css/{views/settings/tabs/user/_GeneralUserSettingsTab.pcss => components/views/settings/_EmailAddressesPhoneNumbers.pcss} (56%)
 create mode 100644 res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index f1509c58e6..f81ad2bd40 100644
--- a/res/css/_components.pcss
+++ b/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";
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss
similarity index 56%
rename from res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
rename to res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss
index a59f64b391..c991ab9315 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
+++ b/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 Generl User Settings. These components are horrily 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_GeneralUserSettingsTab_section--discovery_existing_promptText {
+.mx_EmailAddressesPhoneNumbers_discovery_existing_address,
+.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);
-}
diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
new file mode 100644
index 0000000000..f1021a1508
--- /dev/null
+++ b/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_EmailAddressesPhoneNumbers_section_hint {
+    font: var(--cpd-font-body-sm-regular);
+    color: var(--cpd-color-text-secondary);
+}
diff --git a/src/components/views/settings/account/EmailAddresses.tsx b/src/components/views/settings/account/EmailAddresses.tsx
index ef98707c1b..b18f3de61d 100644
--- a/src/components/views/settings/account/EmailAddresses.tsx
+++ b/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">
-                    <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
+                <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
+                    <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">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
                     {this.props.email.address}
                 </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>
diff --git a/src/components/views/settings/account/PhoneNumbers.tsx b/src/components/views/settings/account/PhoneNumbers.tsx
index b037643bc0..33c00c49b9 100644
--- a/src/components/views/settings/account/PhoneNumbers.tsx
+++ b/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">
-                    <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
+                <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
+                    <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">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
                     +{this.props.msisdn.address}
                 </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>
diff --git a/src/components/views/settings/discovery/EmailAddresses.tsx b/src/components/views/settings/discovery/EmailAddresses.tsx
index 58f1eaac7f..3f0568f544 100644
--- a/src/components/views/settings/discovery/EmailAddresses.tsx
+++ b/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">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">{address}</span>
                 {status}
             </div>
         );
diff --git a/src/components/views/settings/discovery/PhoneNumbers.tsx b/src/components/views/settings/discovery/PhoneNumbers.tsx
index a462273314..e7a3326be2 100644
--- a/src/components/views/settings/discovery/PhoneNumbers.tsx
+++ b/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">
-                <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
+            <div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
+                <span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">+{address}</span>
                 {status}
             </div>
         );