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

@@ -10,6 +10,15 @@ interface Props {
   className?: string;
 
   icon: IconType;
+
+  iconClassName?: string;
+
+  /**
+   * Button tooltip
+   */
+  title: string;
+
+  focusable: boolean;
 }
 
 /**
@@ -18,18 +27,20 @@ interface Props {
  */
 export const IconButton: FunctionComponent<Props> = ({
   onClick,
-  className,
+  className = '',
   icon,
+  title,
+  focusable,
 }) => {
   const click = (e: MouseEvent) => {
     e.preventDefault();
     onClick();
   };
+  const focusableClass = focusable ? '' : 'focus:shadow-none';
   return (
     <button
-      className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
-        className ?? ''
-      }`}
+      title={title}
+      className={`no-border cursor-pointer bg-transparent flex flex-row items-center hover:brightness-130 p-0 ${focusableClass} ${className}`}
       onClick={click}
     >
       <Icon type={icon} />