more polish for self-verification

res/css/views/right_panel/_VerificationPanel.scss

@@ -13,6 +13,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+*
+
+.mx_VerificationPanel_verified_section,
+.mx_VerificationPanel_reciprocate_section {
+    // center the big shield icon
+    .mx_E2EIcon {
+        // Override general user info margin
+        margin: 20px auto !important;
+    }
+}
+
 
 .mx_UserInfo {
     .mx_EncryptionPanel_cancel {
@@ -30,15 +41,6 @@ limitations under the License.
         right: 14px;
     }
 
-    .mx_VerificationPanel_verified_section,
-    .mx_VerificationPanel_reciprocate_section {
-        .mx_E2EIcon {
-            // Override general user info margin
-            margin: 20px auto !important;
-        }
-    }
-
-
     .mx_VerificationPanel_qrCode {
         padding: 4px 4px 0 4px;
         background: white;
@@ -123,10 +125,6 @@ limitations under the License.
 
     // EncryptionPanel when verification is done
     .mx_VerificationPanel_verified_section {
-        // center the big shield icon
-        .mx_E2EIcon {
-            margin: 0 auto;
-        }
         // right align the "Got it" button
         .mx_AccessibleButton {
             float: right;
@@ -134,16 +132,15 @@ limitations under the License.
     }
 
     .mx_VerificationPanel_reciprocate_section {
-        .mx_FormButton {
-            margin: 0 10px;
-            padding: 10px;
-            flex: 1;
+        .mx_AccessibleButton {
+            margin-left: 10px;
+            padding: 7px 40px;
         }
 
-        // show Yes/No buttons next to each other
         .mx_VerificationPanel_reciprocateButtons {
             display: flex;
             flex-direction: row;
+            justify-content: flex-end;
         }
     }
 }

src/components/views/right_panel/VerificationPanel.js

@@ -18,6 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import * as sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 
@@ -154,29 +155,38 @@ export default class VerificationPanel extends React.PureComponent {
         this.state.reciprocateQREvent.cancel();
     };
 
+    get _isSelfVerification() {
+        return this.props.request.otherUserId === MatrixClientPeg.get().getUserId();
+    }
+
     renderQRReciprocatePhase() {
         const {member} = this.props;
-        const FormButton = sdk.getComponent("elements.FormButton");
-
+        let Button;
+        if (this.props.inDialog) {
+            Button = sdk.getComponent("elements.AccessibleButton");
+        } else {
+            Button = sdk.getComponent("elements.FormButton");
+        }
+        const description = this._isSelfVerification ?
+            _t("Almost there! Is your other session showing the same shield?") :
+            _t("Almost there! Is %(displayName)s showing the same shield?", {
+                displayName: member.displayName || member.name || member.userId,
+            });
         let body;
         if (this.state.reciprocateQREvent) {
             // riot web doesn't support scanning yet, so assume here we're the client being scanned.
             body = <React.Fragment>
-                <p>{_t("Almost there! Is %(displayName)s showing the same shield?", {
-                        displayName: member.displayName || member.name || member.userId,
-                    })}</p>
+                <p>{description}</p>
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
                 <div className="mx_VerificationPanel_reciprocateButtons">
-                    <FormButton
+                    <Button
                         label={_t("No")} kind="danger"
                         disabled={this.state.reciprocateButtonClicked}
-                        onClick={this._onReciprocateNoClick}
-                    />
-                    <FormButton
-                        label={_t("Yes")}
+                        onClick={this._onReciprocateNoClick}>{_t("No")}</Button>
+                    <Button
+                        label={_t("Yes")} kind="primary"
                         disabled={this.state.reciprocateButtonClicked}
-                        onClick={this._onReciprocateYesClick}
-                    />
+                        onClick={this._onReciprocateYesClick}>{_t("Yes")}</Button>
                 </div>
             </React.Fragment>;
         } else {

src/i18n/strings/en_EN.json

@@ -1252,6 +1252,7 @@
     "If you can't scan the code above, verify by comparing unique emoji.": "If you can't scan the code above, verify by comparing unique emoji.",
     "Verify by comparing unique emoji.": "Verify by comparing unique emoji.",
     "Verify by emoji": "Verify by emoji",
+    "Almost there! Is your other session showing the same shield?": "Almost there! Is your other session showing the same shield?",
     "Almost there! Is %(displayName)s showing the same shield?": "Almost there! Is %(displayName)s showing the same shield?",
     "No": "No",
     "Yes": "Yes",