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/CopyButton.tsx

@@ -0,0 +1,23 @@
+import { FunctionComponent } from 'preact';
+
+import { IconButton } from '../../../components/IconButton';
+
+import { useState } from 'preact/hooks';
+
+export const CopyButton: FunctionComponent<{ copyValue: string }> = ({
+  copyValue: secretKey,
+}) => {
+  const [isCopied, setCopied] = useState(false);
+  return (
+    <IconButton
+      focusable={false}
+      title="Copy to clipboard"
+      icon={isCopied ? 'check' : 'copy'}
+      className={isCopied ? 'success' : undefined}
+      onClick={() => {
+        navigator?.clipboard?.writeText(secretKey);
+        setCopied(() => true);
+      }}
+    />
+  );
+};