From ba3c58457a718aef7cae2a949842d63e3ddaa96a Mon Sep 17 00:00:00 2001
From: Johnny A <5891646+johnny243@users.noreply.github.com>
Date: Wed, 24 Nov 2021 20:35:51 -0400
Subject: [PATCH] fix: add border to generated 2fa QR code (#749)

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>
---
 .../preferences/panes/two-factor-auth/ScanQRCode.tsx      | 2 +-
 app/assets/stylesheets/_sn.scss                           | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx b/app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx
index 4390afd2d..f2ef66595 100644
--- a/app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx
+++ b/app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx
@@ -26,7 +26,7 @@ export const ScanQRCode: FunctionComponent<{
       </ModalDialogLabel>
       <ModalDialogDescription className="h-33">
         <div className="w-25 h-25 flex items-center justify-center bg-info">
-          <QRCode value={act.qrCode} size={100} />
+          <QRCode className="border-neutral-contrast-bg border-solid border-2" value={act.qrCode} size={100} />
         </div>
         <div className="min-w-5" />
         <div className="flex-grow flex flex-col">
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 8d827f80e..8f6fbcf43 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -395,6 +395,14 @@
   border-color: var(--sn-stylekit-danger-color);
 }
 
+.border-neutral-contrast-bg {
+  border-color: var(--sn-stylekit-neutral-contrast-color);
+}
+
+.border-2 {
+  border-width: 0.5rem;
+}
+
 .bg-inverted-default {
   background-color: var(--sn-stylekit-contrast-foreground-color);
 }