From 93af6cfd8d01cc028a956505cc13289059af25f2 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 19 Aug 2019 15:37:12 +0100
Subject: [PATCH] Fix up remove threepid confirmation UX

Probably still not the best design but hopefully break fewer UX rules:

1. Use red to confirm delete rather than cancel and green to cancel
2. Show the action you're about to perform in the confirmation
3. Label confirmation button with the action rather than yes/no.
---
 .../views/settings/account/EmailAddresses.js           | 10 +++++-----
 src/components/views/settings/account/PhoneNumbers.js  | 10 +++++-----
 src/i18n/strings/en_EN.json                            |  8 +++++---
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/views/settings/account/EmailAddresses.js b/src/components/views/settings/account/EmailAddresses.js
index c13d2b4e0f..eb60d4a322 100644
--- a/src/components/views/settings/account/EmailAddresses.js
+++ b/src/components/views/settings/account/EmailAddresses.js
@@ -87,15 +87,15 @@ export class ExistingEmailAddress extends React.Component {
             return (
                 <div className="mx_ExistingEmailAddress">
                     <span className="mx_ExistingEmailAddress_promptText">
-                        {_t("Are you sure?")}
+                        {_t("Remove %(email)s?", {email: this.props.email.address} )}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
+                    <AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
                                       className="mx_ExistingEmailAddress_confirmBtn">
-                        {_t("Yes")}
+                        {_t("Remove")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
+                    <AccessibleButton onClick={this._onDontRemove} kind="link_sm"
                                       className="mx_ExistingEmailAddress_confirmBtn">
-                        {_t("No")}
+                        {_t("Cancel")}
                     </AccessibleButton>
                 </div>
             );
diff --git a/src/components/views/settings/account/PhoneNumbers.js b/src/components/views/settings/account/PhoneNumbers.js
index 236a4e7587..fbb5b7e561 100644
--- a/src/components/views/settings/account/PhoneNumbers.js
+++ b/src/components/views/settings/account/PhoneNumbers.js
@@ -82,15 +82,15 @@ export class ExistingPhoneNumber extends React.Component {
             return (
                 <div className="mx_ExistingPhoneNumber">
                     <span className="mx_ExistingPhoneNumber_promptText">
-                        {_t("Are you sure?")}
+                        {_t("Remove %(phone)s?", {phone: this.props.msisdn.address})}
                     </span>
-                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
+                    <AccessibleButton onClick={this._onActuallyRemove} kind="danger_sm"
                                       className="mx_ExistingPhoneNumber_confirmBtn">
-                        {_t("Yes")}
+                        {_t("Remove")}
                     </AccessibleButton>
-                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
+                    <AccessibleButton onClick={this._onDontRemove} kind="link_sm"
                                       className="mx_ExistingPhoneNumber_confirmBtn">
-                        {_t("No")}
+                        {_t("Cancel")}
                     </AccessibleButton>
                 </div>
             );
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 89d9026fcf..b93d1e1ee2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -721,9 +721,7 @@
     "Verification code": "Verification code",
     "Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
     "Unable to remove contact information": "Unable to remove contact information",
-    "Are you sure?": "Are you sure?",
-    "Yes": "Yes",
-    "No": "No",
+    "Remove %(email)s?": "Remove %(email)s?",
     "Remove": "Remove",
     "Invalid Email Address": "Invalid Email Address",
     "This doesn't appear to be a valid email address": "This doesn't appear to be a valid email address",
@@ -731,6 +729,7 @@
     "Add": "Add",
     "We've sent you an email to verify your address. Please follow the instructions there and then click the button below.": "We've sent you an email to verify your address. Please follow the instructions there and then click the button below.",
     "Email Address": "Email Address",
+    "Remove %(phone)s?": "Remove %(phone)s?",
     "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.": "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.",
     "Phone Number": "Phone Number",
     "Cannot add any more widgets": "Cannot add any more widgets",
@@ -777,6 +776,7 @@
     "Failed to toggle moderator status": "Failed to toggle moderator status",
     "Failed to change power level": "Failed to change power level",
     "You will not be able to undo this change as you are promoting the user to have the same power level as yourself.": "You will not be able to undo this change as you are promoting the user to have the same power level as yourself.",
+    "Are you sure?": "Are you sure?",
     "No devices with registered encryption keys": "No devices with registered encryption keys",
     "Ignore": "Ignore",
     "Jump to read receipt": "Jump to read receipt",
@@ -1069,6 +1069,8 @@
     "Verify...": "Verify...",
     "Join": "Join",
     "No results": "No results",
+    "Yes": "Yes",
+    "No": "No",
     "Communities": "Communities",
     "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
     "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",