From ca5d4d88a275c93aff94158ae8b6836acd1f08e6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 27 Jan 2020 17:17:05 +0000
Subject: [PATCH] Style the QR code

---
 res/css/views/right_panel/_UserInfo.scss      |  5 +++++
 .../views/right_panel/_VerificationPanel.scss | 16 ++++++++++++++
 .../elements/crypto/VerificationQRCode.js     |  2 +-
 .../views/right_panel/VerificationPanel.js    | 21 ++++++++++---------
 src/i18n/strings/en_EN.json                   |  2 +-
 5 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 9db636ae6b..30c71146bf 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/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
+    }
 }
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 84a82c9a5c..75b469cef9 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/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;
+        }
+    }
 }
diff --git a/src/components/views/elements/crypto/VerificationQRCode.js b/src/components/views/elements/crypto/VerificationQRCode.js
index 1cb5647317..630a06a07c 100644
--- a/src/components/views/elements/crypto/VerificationQRCode.js
+++ b/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")} />;
     }
 }
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index b911824b4e..c1e84afc22 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -48,22 +48,23 @@ 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>
 
-                <VerificationQRCode
-                    keyholderUserId={MatrixClientPeg.get().getUserId()}
-                    requestEventId={request.requestEvent.getId()}
-                    otherUserKey={crossSigningInfo.getId("master")}
-                    secret={request.encodedSharedSecret}
-                    keys={qrCodeKeys}
-                />
+                <div className="mx_VerificationPanel_qrCode">
+                    <VerificationQRCode
+                        keyholderUserId={MatrixClientPeg.get().getUserId()}
+                        requestEventId={request.requestEvent.getId()}
+                        otherUserKey={crossSigningInfo.getId("master")}
+                        secret={request.encodedSharedSecret}
+                        keys={qrCodeKeys}
+                    />
+                </div>
             </div>
 
             <div className="mx_UserInfo_container">
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 6297270540..d4512d785d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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!",