From a190a51d0b597370e66de96f7c94592debb7705c Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Tue, 14 Jun 2022 18:01:19 +0100
Subject: [PATCH] fix(qr): render the QR code consistently

---
 .../modals/components/MFAEnableTOTP.tsx       | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/context/modals/components/MFAEnableTOTP.tsx b/src/context/modals/components/MFAEnableTOTP.tsx
index 68e5ca84..0e18ef74 100644
--- a/src/context/modals/components/MFAEnableTOTP.tsx
+++ b/src/context/modals/components/MFAEnableTOTP.tsx
@@ -12,6 +12,17 @@ const Code = styled.code`
     user-select: all;
 `;
 
+const Qr = styled.div`
+    border-radius: 4px;
+    background: white;
+
+    width: 140px;
+    height: 140px;
+
+    display: grid;
+    place-items: center;
+`;
+
 /**
  * TOTP enable modal
  */
@@ -53,11 +64,13 @@ export default function MFAEnableTOTP({
             }}>
             <Column>
                 <Centred>
-                    <QRCodeSVG
-                        value={uri}
-                        bgColor="transparent"
-                        fgColor="var(--foreground)"
-                    />
+                    <Qr>
+                        <QRCodeSVG
+                            value={uri}
+                            bgColor="white"
+                            fgColor="black"
+                        />
+                    </Qr>
                 </Centred>
                 <Centred>
                     <Code>{secret}</Code>