Merge styles of _EmailAddresses.pcss and _PhoneNumbers.pcss (#10679)

* Rename: `mx_ExistingPhoneNumber_*` to `mx_PhoneNumber--existing_*` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename: `mx_ExistingEmailAddress_*` to `mx_EmailAddress--existing_*` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge styles for maitainability: `mx_GeneralUserSettingsTab_discovery_existing_*` `mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` adopt the same declarations, so maintaining them with common selectors should improve the maintainability. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com * Rename: `mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` to `mx_GeneralUserSettingsTab_discovery_existing_*` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove empty selectors Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a duplicate selector: `.mx_GeneralUserSettingsTab_discovery--existing` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename the button The button with the class name 'mx_GeneralUserSettingsTab_discovery_existing_button' is used for various types of action, so 'confirm' seems to be a bit misleading. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include: `mx_GeneralUserSettingsTab_discovery_existing_*` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Run prettier Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * lint Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Review Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com
matrix-org · May 3, 2023 · 9b7e786 · 9b7e786
1 parent d494b45
commit 9b7e786
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 74 deletions.
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
@@ -322,7 +322,6 @@
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";
 @import "./views/settings/_DevicesPanel.pcss";
-@import "./views/settings/_EmailAddresses.pcss";
 @import "./views/settings/_FontScalingPanel.pcss";
 @import "./views/settings/_ImageSizePanel.pcss";
 @import "./views/settings/_IntegrationManager.pcss";

diff --git a/res/css/views/settings/_EmailAddresses.pcss b/res/css/views/settings/_EmailAddresses.pcss
diff --git a/res/css/views/settings/_PhoneNumbers.pcss b/res/css/views/settings/_PhoneNumbers.pcss
@@ -15,23 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ExistingPhoneNumber {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-}
-
-.mx_ExistingPhoneNumber_address,
-.mx_ExistingPhoneNumber_promptText {
-    flex: 1;
-    margin-right: 10px;
-}
-
-.mx_ExistingPhoneNumber_confirmBtn {
-    margin-left: 5px;
-}
-
-.mx_ExistingPhoneNumber_verification {
+.mx_GeneralUserSettingsTab_discovery_existing_verification {
     display: inline-flex;
     align-items: center;
 

diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
@@ -37,12 +37,27 @@ limitations under the License.
 
 .mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
-.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,
-.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
+.mx_GeneralUserSettingsTab_discovery .mx_GeneralUserSettingsTab_discovery_existing,
 .mx_GeneralUserSettingsTab_languageInput {
     margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
 }
 
+.mx_GeneralUserSettingsTab_discovery_existing {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.mx_GeneralUserSettingsTab_discovery_existing_address,
+.mx_GeneralUserSettingsTab_discovery_existing_promptText {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.mx_GeneralUserSettingsTab_discovery_existing_button {
+    margin-left: 5px;
+}
+
 .mx_GeneralUserSettingsTab_warningIcon {
     vertical-align: middle;
 }

diff --git a/src/components/views/settings/account/EmailAddresses.tsx b/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_ExistingEmailAddress">
-                    <span className="mx_ExistingEmailAddress_promptText">
+                <div className="mx_GeneralUserSettingsTab_discovery_existing">
+                    <span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
                         {_t("Remove %(email)s?", { email: this.props.email.address })}
                     </span>
                     <AccessibleButton
                         onClick={this.onActuallyRemove}
                         kind="danger_sm"
-                        className="mx_ExistingEmailAddress_confirmBtn"
+                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
                     >
                         {_t("Remove")}
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.onDontRemove}
                         kind="link_sm"
-                        className="mx_ExistingEmailAddress_confirmBtn"
+                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
                     >
                         {_t("Cancel")}
                     </AccessibleButton>
@@ -117,8 +117,8 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
         }
 
         return (
-            <div className="mx_ExistingEmailAddress">
-                <span className="mx_ExistingEmailAddress_email">{this.props.email.address}</span>
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">{this.props.email.address}</span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm">
                     {_t("Remove")}
                 </AccessibleButton>

diff --git a/src/components/views/settings/account/PhoneNumbers.tsx b/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_ExistingPhoneNumber">
-                    <span className="mx_ExistingPhoneNumber_promptText">
+                <div className="mx_GeneralUserSettingsTab_discovery_existing">
+                    <span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
                         {_t("Remove %(phone)s?", { phone: this.props.msisdn.address })}
                     </span>
                     <AccessibleButton
                         onClick={this.onActuallyRemove}
                         kind="danger_sm"
-                        className="mx_ExistingPhoneNumber_confirmBtn"
+                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
                     >
                         {_t("Remove")}
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.onDontRemove}
                         kind="link_sm"
-                        className="mx_ExistingPhoneNumber_confirmBtn"
+                        className="mx_GeneralUserSettingsTab_discovery_existing_button"
                     >
                         {_t("Cancel")}
                     </AccessibleButton>
@@ -112,8 +112,10 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
         }
 
         return (
-            <div className="mx_ExistingPhoneNumber">
-                <span className="mx_ExistingPhoneNumber_address">+{this.props.msisdn.address}</span>
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">
+                    +{this.props.msisdn.address}
+                </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm">
                     {_t("Remove")}
                 </AccessibleButton>

diff --git a/src/components/views/settings/discovery/EmailAddresses.tsx b/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_ExistingEmailAddress_confirmBtn"
+                        className="mx_GeneralUserSettingsTab_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_ExistingEmailAddress_confirmBtn"
+                    className="mx_GeneralUserSettingsTab_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_ExistingEmailAddress_confirmBtn"
+                    className="mx_GeneralUserSettingsTab_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_ExistingEmailAddress">
-                <span className="mx_ExistingEmailAddress_email">{address}</span>
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_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
@@ -222,7 +222,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         let status;
         if (verifying) {
             status = (
-                <span className="mx_ExistingPhoneNumber_verification">
+                <span className="mx_GeneralUserSettingsTab_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_ExistingPhoneNumber_confirmBtn"
+                    className="mx_GeneralUserSettingsTab_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_ExistingPhoneNumber_confirmBtn"
+                    className="mx_GeneralUserSettingsTab_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_ExistingPhoneNumber">
-                <span className="mx_ExistingPhoneNumber_address">+{address}</span>
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
+                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">+{address}</span>
                 {status}
             </div>
         );