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/components/MenuItem.tsx

@@ -22,6 +22,7 @@ export const MenuItem: FunctionComponent<Props> = ({
     }}
   >
     <Icon className="icon" type={iconType} />
+    <div className="min-w-1" />
     {label}
   </div>
 );

app/assets/javascripts/preferences/components/PreferencesPane.tsx

@@ -4,17 +4,14 @@ import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
   index,
   length,
-}) =>
-  index < length - 1 ? (
-    <HorizontalSeparator />
-  ) : null;
+}) => (index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null);
 
 export const PreferencesSegment: FunctionComponent = ({ children }) => (
   <div className="flex flex-col">{children}</div>
 );
 
 export const PreferencesGroup: FunctionComponent = ({ children }) => (
-  <div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col gap-2">
+  <div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col">
     {Array.isArray(children)
       ? children
           .filter(
@@ -33,7 +30,16 @@ export const PreferencesGroup: FunctionComponent = ({ children }) => (
 export const PreferencesPane: FunctionComponent = ({ children }) => (
   <div className="color-black flex-grow flex flex-row overflow-y-auto min-h-0">
     <div className="flex-grow flex flex-col py-6 items-center">
-      <div className="w-125 max-w-125 flex flex-col gap-3">{children}</div>
+      <div className="w-125 max-w-125 flex flex-col">
+        {children != undefined && Array.isArray(children)
+          ? children.map((child, idx, arr) => (
+              <>
+                {child}
+                {idx < arr.length - 1 ? <div className="min-h-3" /> : undefined}
+              </>
+            ))
+          : children}
+      </div>
     </div>
     <div className="flex-basis-55 flex-shrink" />
   </div>