Dark Mode: Fix QR display (#14312)

ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js

@@ -43,7 +43,9 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
         alignItems={ALIGN_ITEMS.CENTER}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >
-        <QRCode value={currentQRCode.toUpperCase()} size={250} />
+        <div style={{ border: '20px solid var(--qr-code-white-background)' }}>
+          <QRCode value={currentQRCode.toUpperCase()} size={250} />
+        </div>
       </Box>
       <Box paddingBottom={4} paddingLeft={4} paddingRight={4}>
         <Typography align={TEXT_ALIGN.CENTER}>

ui/css/utilities/colors.scss

@@ -8,4 +8,8 @@
   --goerli: #3099f2;
   --localhost: #29b6af;
   --flask-purple: #8b45b6;
+
+  // DO NOT CHANGE
+  // Required for the QR reader to work properly
+  --qr-code-white-background: '#fff';
 }