Upgrade qrcode.react, add white border

Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1321

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
 

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

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

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

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"