From b1af21956e8665f4b3149183fc8466ee36890827 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 13 Jan 2023 12:45:03 -0600
Subject: [PATCH] Upgrade qrcode.react, add white border Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1321

---
 CHANGELOG.md                                      |  1 +
 .../components/detailed-crypto-address.tsx        |  2 +-
 .../features/security/mfa/otp-confirm-form.tsx    |  2 +-
 package.json                                      |  3 +--
 yarn.lock                                         | 15 ++++-----------
 5 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a483424b..0fe4f9ed3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: let unauthenticated users to translate posts if allowed by backend.
 - Chats: fix jumpy scrollbar.
 - Composer: fix alignment of icon in submit button.
+- Login: add a border around QR codes.
 
 ## [3.0.0] - 2022-12-25
 
diff --git a/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx b/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx
index c0ab30bf9..180e3d116 100644
--- a/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -36,7 +36,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
       </div>
       {note && <div className='crypto-address__note'>{note}</div>}
       <div className='crypto-address__qrcode'>
-        <QRCode value={address} />
+        <QRCode className='rounded-lg' value={address} includeMargin />
       </div>
 
       <CopyableInput value={address} />
diff --git a/app/soapbox/features/security/mfa/otp-confirm-form.tsx b/app/soapbox/features/security/mfa/otp-confirm-form.tsx
index 5912ff82c..77b09e425 100644
--- a/app/soapbox/features/security/mfa/otp-confirm-form.tsx
+++ b/app/soapbox/features/security/mfa/otp-confirm-form.tsx
@@ -75,7 +75,7 @@ const OtpConfirmForm: React.FC = () => {
           </Text>
         </Stack>
 
-        <QRCode value={state.qrCodeURI} />
+        <QRCode className='rounded-lg' value={state.qrCodeURI} includeMargin />
         {state.confirmKey}
 
         <Text weight='semibold' size='lg'>
diff --git a/package.json b/package.json
index e44b64607..6e34fa696 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,6 @@
     "@types/leaflet": "^1.8.0",
     "@types/lodash": "^4.14.180",
     "@types/object-assign": "^4.0.30",
-    "@types/qrcode.react": "^1.0.2",
     "@types/react": "^18.0.26",
     "@types/react-color": "^3.0.6",
     "@types/react-datepicker": "^4.4.2",
@@ -144,7 +143,7 @@
     "postcss-loader": "^7.0.0",
     "process": "^0.11.10",
     "punycode": "^2.1.1",
-    "qrcode.react": "^3.0.2",
+    "qrcode.react": "^3.1.0",
     "react": "^18.0.0",
     "react-color": "^2.19.3",
     "react-datepicker": "^4.8.0",
diff --git a/yarn.lock b/yarn.lock
index 63d97277c..53bb0c5d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2815,13 +2815,6 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/qrcode.react@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-1.0.2.tgz#f892432cc41b5dac52e3ca8873b717c8bfea6002"
-  integrity sha512-I9Oq5Cjlkgy3Tw7krCnCXLw2/zMhizkTere49OOcta23tkvH0xBTP0yInimTh0gstLRtb8Ki9NZVujE5UI6ffQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -9266,10 +9259,10 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qrcode.react@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.0.2.tgz#7ceaea165aa7066253ef670a25bf238eaec4eb9e"
-  integrity sha512-8F3SGxSkNb3fMIHdlseqjFjLbsPrF3WvF/1MOboSUUHytT537W8f/FtbdA3XFIHDrc+TrRBjTI/QLmwhAIGWWw==
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
 
 qs@6.10.3:
   version "6.10.3"