feat: improve 2fa styles based on feedback (#635)

* feat: improve 2fa styles based on feedback

* fix: preferences panes and dialogs electron compatibility

* fix: no horizontal line when opening two factor activation

* feat: improve two factor activation styles

* feat: further 2fa style improvements

* feat: padding 2fa widgets

* feat: add padding between QR code and content

* feat: refresh 2fa after passcode confirmation

* feat: don't autocomplete passwords for DecoratedInput

app/assets/javascripts/preferences/panes/two-factor-auth/ScanQRCode.tsx

@@ -4,7 +4,6 @@ import { observer } from 'mobx-react-lite';
 import QRCode from 'qrcode.react';
 
 import { DecoratedInput } from '@/components/DecoratedInput';
-import { IconButton } from '@/components/IconButton';
 import { Button } from '@/components/Button';
 import { TwoFactorActivation } from './TwoFactorActivation';
 import { AuthAppInfoTooltip } from './AuthAppInfoPopup';
@@ -12,54 +11,49 @@ import {
   ModalDialog,
   ModalDialogButtons,
   ModalDialogDescription,
-  ModalDialogLabel
+  ModalDialogLabel,
 } from '@/components/shared/ModalDialog';
+import { CopyButton } from './CopyButton';
+import { Bullet } from './Bullet';
 
 export const ScanQRCode: FunctionComponent<{
   activation: TwoFactorActivation;
 }> = observer(({ activation: act }) => {
-  const copy = (
-    <IconButton
-      icon="copy"
-      onClick={() => {
-        navigator?.clipboard?.writeText(act.secretKey);
-      }}
-    />
-  );
   return (
     <ModalDialog>
-      <ModalDialogLabel
-        closeDialog={() => {
-          act.cancelActivation();
-        }}
-      >
+      <ModalDialogLabel closeDialog={act.cancelActivation}>
         Step 1 of 3 - Scan QR code
       </ModalDialogLabel>
-      <ModalDialogDescription>
-        <div className="flex flex-row gap-3 items-center">
-          <div className="w-25 h-25 flex items-center justify-center bg-info">
-            <QRCode value={act.qrCode} size={100} />
-          </div>
-          <div className="flex-grow flex flex-col gap-2">
-            <div className="flex flex-row gap-1 items-center">
-              <div className="text-sm">
-                ・Open your <b>authenticator app</b>.
-              </div>
-              <AuthAppInfoTooltip />
+      <ModalDialogDescription className="h-33">
+        <div className="w-25 h-25 flex items-center justify-center bg-info">
+          <QRCode value={act.qrCode} size={100} />
+        </div>
+        <div className="min-w-5" />
+        <div className="flex-grow flex flex-col">
+          <div className="flex flex-row items-center">
+            <Bullet />
+            <div className="min-w-1" />
+            <div className="text-sm">
+              Open your <b>authenticator app</b>.
             </div>
-            <div className="flex flex-row items-center">
-              <div className="text-sm flex-grow">
-                ・<b>Scan this QR code</b> or <b>add this secret key</b>:
-              </div>
-              <div className="w-56">
-                <DecoratedInput
-                  disabled={true}
-                  text={act.secretKey}
-                  right={[copy]}
-                />
-              </div>
+            <div className="min-w-2" />
+            <AuthAppInfoTooltip />
+          </div>
+          <div className="min-h-2" />
+          <div className="flex flex-row items-center">
+            <Bullet className="self-start mt-2" />
+            <div className="min-w-1" />
+            <div className="text-sm flex-grow">
+              <b>Scan this QR code</b> or <b>add this secret key</b>:
             </div>
           </div>
+          <div className="min-h-2" />
+          <DecoratedInput
+            className="ml-4 w-92"
+            disabled={true}
+            text={act.secretKey}
+            right={[<CopyButton copyValue={act.secretKey} />]}
+          />
         </div>
       </ModalDialogDescription>
       <ModalDialogButtons>