Style the QR code

res/css/views/right_panel/_UserInfo.scss

@@ -111,6 +111,7 @@ limitations under the License.
         // override the calculated sizes so that the letter isn't HUGE
         font-size: 56px !important;
         width: 100% !important;
+        transition: font-size 1s;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
@@ -270,4 +271,8 @@ limitations under the License.
         max-width: 72px;
         margin: 0 auto;
     }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+        font-size: 40px !important; // override the other override because here the avatar is smaller
+    }
 }

res/css/views/right_panel/_VerificationPanel.scss

@@ -18,4 +18,20 @@ limitations under the License.
     .mx_VerificationPanel_verified_section .mx_E2EIcon {
         margin: 0 auto;
     }
+
+    .mx_VerificationPanel_qrCode {
+        padding: 4px 4px 0 4px;
+        background: white;
+        border-radius: 4px;
+        width: max-content;
+        max-width: 100%;
+        margin: 0 auto;
+
+        canvas {
+            // override height and width which are set on the element directly
+            height: auto !important;
+            width: 100% !important;
+            max-width: 240px;
+        }
+    }
 }

src/components/views/elements/crypto/VerificationQRCode.js

@@ -51,6 +51,6 @@ export default class VerificationQRCode extends React.PureComponent {
 
         const uri = `https://matrix.to/#/${this.props.keyholderUserId}?${qs.stringify(query)}`;
 
-        return <QRCode value={uri} size={256} logoWidth={48} logo={require("../../../../../res/img/matrix-m.svg")} />;
+        return <QRCode value={uri} size={512} logoWidth={64} logo={require("../../../../../res/img/matrix-m.svg")} />;
     }
 }

src/components/views/right_panel/VerificationPanel.js

@@ -48,15 +48,15 @@ export default class VerificationPanel extends React.PureComponent {
             [myKeyId, myKeyId],
         ];
 
+        // TODO: add way to open camera to scan a QR code
         return <React.Fragment>
             <div className="mx_UserInfo_container">
                 <h3>Verify by scanning</h3>
-                <p>{_t("Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:", {
+                <p>{_t("Ask %(displayName)s to scan your code:", {
                     displayName: member.displayName || member.name || member.userId,
-                }, {
-                    a: t => <a>{ t }</a>,
                 })}</p>
 
+                <div className="mx_VerificationPanel_qrCode">
                     <VerificationQRCode
                         keyholderUserId={MatrixClientPeg.get().getUserId()}
                         requestEventId={request.requestEvent.getId()}
@@ -65,6 +65,7 @@ export default class VerificationPanel extends React.PureComponent {
                         keys={qrCodeKeys}
                     />
                 </div>
+            </div>
 
             <div className="mx_UserInfo_container">
                 <h3>Verify by emoji</h3>

src/i18n/strings/en_EN.json

@@ -1156,7 +1156,7 @@
     "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.",
     "Security": "Security",
-    "Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:": "Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:",
+    "Ask %(displayName)s to scan your code:": "Ask %(displayName)s to scan your code:",
     "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 emoji": "Verify by emoji",
     "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!",