Replace Verify button in UserInfo verification with "Learn more"

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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
     }
 }

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

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>
         );
     }

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>

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

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.",