feat: two factor authentication segment in preferences with mocked state (#600)

app/assets/javascripts/components/IconButton.tsx

@@ -1,53 +1,38 @@
 import { FunctionComponent } from 'preact';
 import { Icon, IconType } from './Icon';
 
-const ICON_BUTTON_TYPES: {
-  [type: string]: { className: string };
-} = {
-  normal: {
-    className: '',
-  },
-  primary: {
-    className: 'info',
-  },
-};
-
-export type IconButtonType = keyof typeof ICON_BUTTON_TYPES;
-
-interface IconButtonProps {
+interface Props {
   /**
    * onClick - preventDefault is handled within the component
    */
   onClick: () => void;
 
-  type: IconButtonType;
-
   className?: string;
 
-  iconType: IconType;
+  icon: IconType;
 }
 
 /**
- * CircleButton component with an icon for SPA
+ * IconButton component with an icon
  * preventDefault is already handled within the component
  */
-export const IconButton: FunctionComponent<IconButtonProps> = ({
+export const IconButton: FunctionComponent<Props> = ({
   onClick,
-  type,
   className,
-  iconType,
+  icon,
 }) => {
   const click = (e: MouseEvent) => {
     e.preventDefault();
     onClick();
   };
-  const typeProps = ICON_BUTTON_TYPES[type];
   return (
     <button
-      className={`sn-icon-button ${typeProps.className} ${className ?? ''}`}
+      className={`no-border bg-transparent hover:brightness-130 p-0 ${
+        className ?? ''
+      }`}
       onClick={click}
     >
-      <Icon type={iconType} />
+      <Icon type={icon} />
     </button>
   );
 };