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

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";

res/css/views/settings/_EmailAddresses.pcss

@@ -1,32 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd
-Copyright 2019 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_ExistingEmailAddress {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-}
-
-.mx_ExistingEmailAddress_email,
-.mx_ExistingEmailAddress_promptText {
-    flex: 1;
-    margin-right: 10px;
-}
-
-.mx_ExistingEmailAddress_confirmBtn {
-    margin-left: 5px;
-}

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 {
+.mx_GeneralUserSettingsTab_discovery_existing_verification {
-    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 {
     display: inline-flex;
     align-items: center;
 

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_GeneralUserSettingsTab_discovery_existing,
-.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber,
 .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;
 }

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">
+                <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                    <span className="mx_ExistingEmailAddress_promptText">
+                    <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">
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_ExistingEmailAddress_email">{this.props.email.address}</span>
+                <span className="mx_GeneralUserSettingsTab_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_ExistingPhoneNumber">
+                <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                    <span className="mx_ExistingPhoneNumber_promptText">
+                    <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">
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_ExistingPhoneNumber_address">+{this.props.msisdn.address}</span>
+                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">
+                    +{this.props.msisdn.address}
+                </span>
                 <AccessibleButton onClick={this.onRemove} kind="danger_sm">
                     {_t("Remove")}
                 </AccessibleButton>

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">
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_ExistingEmailAddress_email">{address}</span>
+                <span className="mx_GeneralUserSettingsTab_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_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">
+            <div className="mx_GeneralUserSettingsTab_discovery_existing">
-                <span className="mx_ExistingPhoneNumber_address">+{address}</span>
+                <span className="mx_GeneralUserSettingsTab_discovery_existing_address">+{address}</span>
                 {status}
             </div>
         );