fix: add border to generated 2fa QR code (#749)

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>
standardnotes · Nov 25, 2021 · ba3c584 · ba3c584
1 parent cf36647
commit ba3c584
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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);
 }