From 11f2b4320d7c1cf4ed852e74f26e7cb110b38ef4 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 5 Aug 2019 16:34:04 +0100
Subject: [PATCH] Update existing 3PID management UX

This tweaks the appearance of the existing 3PID management UX to use a different
style for the remove button. This styling will more closely match the soon to be
added 3PID discovery settings.

Part of https://github.com/vector-im/riot-web/issues/10159
---
 res/css/views/settings/_EmailAddresses.scss     | 10 +++++-----
 res/css/views/settings/_PhoneNumbers.scss       | 10 +++++-----
 src/components/views/settings/EmailAddresses.js |  5 +++--
 src/components/views/settings/PhoneNumbers.js   |  5 +++--
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/res/css/views/settings/_EmailAddresses.scss b/res/css/views/settings/_EmailAddresses.scss
index 4f9541af2ce..d7606ecea94 100644
--- a/res/css/views/settings/_EmailAddresses.scss
+++ b/res/css/views/settings/_EmailAddresses.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_ExistingEmailAddress {
+    display: flex;
+    align-items: center;
     margin-bottom: 5px;
 }
 
@@ -24,14 +26,12 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_ExistingEmailAddress_email {
-    vertical-align: middle;
-}
-
+.mx_ExistingEmailAddress_email,
 .mx_ExistingEmailAddress_promptText {
+    flex: 1;
     margin-right: 10px;
 }
 
 .mx_ExistingEmailAddress_confirmBtn {
-    margin-right: 5px;
+    margin-left: 5px;
 }
diff --git a/res/css/views/settings/_PhoneNumbers.scss b/res/css/views/settings/_PhoneNumbers.scss
index a3891882c28..7aaef2a56b8 100644
--- a/res/css/views/settings/_PhoneNumbers.scss
+++ b/res/css/views/settings/_PhoneNumbers.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_ExistingPhoneNumber {
+    display: flex;
+    align-items: center;
     margin-bottom: 5px;
 }
 
@@ -24,16 +26,14 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_ExistingPhoneNumber_address {
-    vertical-align: middle;
-}
-
+.mx_ExistingPhoneNumber_address,
 .mx_ExistingPhoneNumber_promptText {
+    flex: 1;
     margin-right: 10px;
 }
 
 .mx_ExistingPhoneNumber_confirmBtn {
-    margin-right: 5px;
+    margin-left: 5px;
 }
 
 .mx_PhoneNumbers_input {
diff --git a/src/components/views/settings/EmailAddresses.js b/src/components/views/settings/EmailAddresses.js
index b221f919019..1bb41ae8b59 100644
--- a/src/components/views/settings/EmailAddresses.js
+++ b/src/components/views/settings/EmailAddresses.js
@@ -102,9 +102,10 @@ export class ExistingEmailAddress extends React.Component {
 
         return (
             <div className="mx_ExistingEmailAddress">
-                <img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
-                     onClick={this._onRemove} className="mx_ExistingEmailAddress_delete" alt={_t("Remove")} />
                 <span className="mx_ExistingEmailAddress_email">{this.props.email.address}</span>
+                <AccessibleButton onClick={this._onRemove} kind="danger_sm">
+                    {_t("Remove")}
+                </AccessibleButton>
             </div>
         );
     }
diff --git a/src/components/views/settings/PhoneNumbers.js b/src/components/views/settings/PhoneNumbers.js
index 5d1d9b849f3..4ebc2a20a6f 100644
--- a/src/components/views/settings/PhoneNumbers.js
+++ b/src/components/views/settings/PhoneNumbers.js
@@ -97,9 +97,10 @@ export class ExistingPhoneNumber extends React.Component {
 
         return (
             <div className="mx_ExistingPhoneNumber">
-                <img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
-                     onClick={this._onRemove} className="mx_ExistingPhoneNumber_delete" alt={_t("Remove")} />
                 <span className="mx_ExistingPhoneNumber_address">+{this.props.msisdn.address}</span>
+                <AccessibleButton onClick={this._onRemove} kind="danger_sm">
+                    {_t("Remove")}
+                </AccessibleButton>
             </div>
         );
     }