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

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

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">

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);
 }