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
2023-05-03 11:34:32 +00:00 · 2023-05-03 11:34:32 +00:00 · 9b7e7864c9
commit 9b7e7864c9
parent d494b45910
8 changed files with 42 additions and 74 deletions
--- 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>
--- 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>
--- 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>
        );
--- 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>
        );