From 19e7c768b6847b19c0e1f865749dd5077f1b45c5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 29 Jan 2020 14:11:50 +0000
Subject: [PATCH] Replace Verify button in UserInfo verification with "Learn
 more"

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/right_panel/_UserInfo.scss                 | 8 +++++++-
 src/components/views/right_panel/EncryptionInfo.js       | 2 +-
 src/components/views/right_panel/UserInfo.js             | 5 +++--
 src/components/views/right_panel/VerificationPanel.js    | 6 +++---
 src/components/views/verification/VerificationShowSas.js | 6 +++---
 src/i18n/strings/en_EN.json                              | 1 +
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index dc22de4713..27014d175a 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -261,10 +261,16 @@ limitations under the License.
     }
 
     .mx_UserInfo_verify {
+        padding-top: 0;
+        padding-left: 0;
+        font-weight: normal;
+    }
+
+    .mx_UserInfo_wideButton {
         display: block;
         margin: 16px 0;
     }
-    button.mx_UserInfo_verify {
+    button.mx_UserInfo_wideButton {
         width: 100%; // FIXME get rid of this once we get rid of DialogButtons here
     }
 }
diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.js
index 8868c30053..c3f6770d18 100644
--- a/src/components/views/right_panel/EncryptionInfo.js
+++ b/src/components/views/right_panel/EncryptionInfo.js
@@ -38,7 +38,7 @@ const EncryptionInfo = ({pending, member, onStartVerification}) => {
     } else {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         content = (
-            <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={onStartVerification}>
+            <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={onStartVerification}>
                 {_t("Start Verification")}
             </AccessibleButton>
         );
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index ee9884efe8..c48d9c9c37 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -1255,11 +1255,12 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
         userTrust.isCrossSigningVerified() :
         userTrust.isVerified();
     const isMe = member.userId === cli.getUserId();
+
     let verifyButton;
     if (isRoomEncrypted && !userVerified && !isMe) {
         verifyButton = (
-            <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={() => verifyUser(member)}>
-                {_t("Verify")}
+            <AccessibleButton kind="secondary" className="mx_UserInfo_verify" onClick={() => verifyUser(member)}>
+                {_t("Learn more")}
             </AccessibleButton>
         );
     }
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index 18a9024310..48f4320bee 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -63,7 +63,7 @@ export default class VerificationPanel extends React.PureComponent {
             button = <Spinner />;
         } else {
             button = (
-                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
+                <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
                     {_t("Verify by emoji")}
                 </AccessibleButton>
             );
@@ -128,7 +128,7 @@ export default class VerificationPanel extends React.PureComponent {
                 <E2EIcon isUser={true} status="verified" size={128} />
                 <p>Verify all users in a room to ensure it's secure.</p>
 
-                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this.props.onClose}>
+                <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
                     {_t("Got it")}
                 </AccessibleButton>
             </div>
@@ -156,7 +156,7 @@ export default class VerificationPanel extends React.PureComponent {
                 <h3>Verification cancelled</h3>
                 <p>{ text }</p>
 
-                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this.props.onClose}>
+                <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
                     {_t("Got it")}
                 </AccessibleButton>
             </div>
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index aee0f57cf8..26badb9826 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -80,7 +80,7 @@ export default class VerificationShowSas extends React.Component {
         } else {
             return <div>
                 {_t("Unable to find a supported verification method.")}
-                <AccessibleButton kind="primary" onClick={this.props.onCancel} className="mx_UserInfo_verify">
+                <AccessibleButton kind="primary" onClick={this.props.onCancel} className="mx_UserInfo_wideButton">
                     {_t('Cancel')}
                 </AccessibleButton>
             </div>;
@@ -96,10 +96,10 @@ export default class VerificationShowSas extends React.Component {
             confirm = <DialogButtons
                 primaryButton={_t("They match")}
                 onPrimaryButtonClick={this.onMatchClick}
-                primaryButtonClass="mx_UserInfo_verify"
+                primaryButtonClass="mx_UserInfo_wideButton"
                 cancelButton={_t("They don't match")}
                 onCancel={this.props.onCancel}
-                cancelButtonClass="mx_UserInfo_verify"
+                cancelButtonClass="mx_UserInfo_wideButton"
             />;
         }
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3ae0991f16..c529e8bf56 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1173,6 +1173,7 @@
     "<strong>%(role)s</strong> in %(roomName)s": "<strong>%(role)s</strong> in %(roomName)s",
     "This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.",
     "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.",
+    "Learn more": "Learn more",
     "Security": "Security",
     "Verify by emoji": "Verify by emoji",
     "Verify by comparing unique emoji.": "Verify by comparing unique emoji.",