From 5a159ef99196768b252dcec37c731a93bc4dc4ca Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 1 Apr 2022 14:53:14 -0500
Subject: [PATCH] Dark Mode: Fix QR display (#14312)

---
 .../qr-hardware-popover/qr-hardware-sign-request/player.js    | 4 +++-
 ui/css/utilities/colors.scss                                  | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
index c79dec547..ea55f6b09 100644
--- a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
+++ b/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}>
diff --git a/ui/css/utilities/colors.scss b/ui/css/utilities/colors.scss
index fc3bdcd43..2d99683d9 100644
--- a/ui/css/utilities/colors.scss
+++ b/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';
 }