Adds asCheckbox to IAIIconButton

Rough draft of this. Not happy with the styling but it's clearer than having them look just like buttons.

frontend/src/common/components/IAIIconButton.scss

@@ -1,6 +1,6 @@
 @use '../../styles/Mixins/' as *;
 
-.icon-button {
+.invokeai__icon-button {
   background-color: var(--btn-grey);
   cursor: pointer;
 
@@ -14,15 +14,33 @@
       background-color: var(--accent-color-hover);
     }
   }
+
   &[disabled] {
     cursor: not-allowed;
   }
 
   &[data-variant='link'] {
-    background-color: none !important;
-    &:hover {
-      background-color: none !important;
     background: none !important;
   }
+
+  &[data-as-checkbox='true'] {
+    border: 2px solid var(--switch-bg-color);
+    background: none !important;
+    svg {
+      fill: var(--input-checkbox-bg);
+    }
+    &:hover {
+      svg {
+        fill: var(--text-color-secondary);
+      }
+      border-color: var(--accent-color);
+    }
+
+    &[data-selected='true'] {
+      border-color: var(--accent-color);
+      &:hover {
+        border-color: var(--accent-color-hover);
+      }
+    }
   }
 }

frontend/src/common/components/IAIIconButton.tsx

@@ -2,36 +2,39 @@ import {
   IconButtonProps,
   IconButton,
   Tooltip,
-  PlacementWithLogical,
+  TooltipProps,
+  ResponsiveValue,
+  ThemingProps,
+  isChakraTheme,
 } from '@chakra-ui/react';
+import { Variant } from 'framer-motion';
 
 interface Props extends IconButtonProps {
-  tooltip?: string;
-  tooltipPlacement?: PlacementWithLogical | undefined;
   styleClass?: string;
+  tooltip?: string;
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  asCheckbox?: boolean;
+  isChecked?: boolean;
 }
 
-/**
- * Reusable customized button component. Originally was more customized - now probably unecessary.
- */
 const IAIIconButton = (props: Props) => {
   const {
     tooltip = '',
-    tooltipPlacement = 'bottom',
     styleClass,
-    onClick,
+    tooltipProps,
-    cursor,
+    asCheckbox,
+    isChecked,
     ...rest
   } = props;
 
   return (
-    <Tooltip label={tooltip} hasArrow placement={tooltipPlacement}>
+    <Tooltip label={tooltip} hasArrow {...tooltipProps}>
       <IconButton
-        className={`icon-button ${styleClass}`}
+        className={`invokeai__icon-button ${styleClass}`}
-        data-variant={props.variant}
+        data-as-checkbox={asCheckbox}
+        data-selected={isChecked !== undefined ? isChecked : undefined}
+        style={props.onClick ? { cursor: 'pointer' } : {}}
         {...rest}
-        cursor={cursor ? cursor : onClick ? 'pointer' : 'unset'}
-        onClick={onClick}
       />
     </Tooltip>
   );

frontend/src/features/options/ProcessButtons/InvokeButton.tsx

@@ -44,7 +44,7 @@ export default function InvokeButton(props: InvokeButton) {
       onClick={handleClickGenerate}
       className="invoke-btn invoke"
       tooltip="Invoke"
-      tooltipPlacement="bottom"
+      tooltipProps={{ placement: 'bottom' }}
       {...rest}
     />
   ) : (

frontend/src/features/options/ProcessButtons/Loopback.tsx

@@ -15,9 +15,10 @@ const LoopbackButton = () => {
 
   return (
     <IAIIconButton
-      aria-label="Loopback"
+      aria-label="Toggle Loopback"
-      tooltip="Loopback"
+      tooltip="Toggle Loopback"
-      data-selected={shouldLoopback}
+      asCheckbox={true}
+      isChecked={shouldLoopback}
       icon={<FaRecycle />}
       onClick={() => {
         dispatch(setShouldLoopback(!shouldLoopback));

frontend/src/features/tabs/FloatingGalleryButton.tsx

@@ -13,7 +13,7 @@ const FloatingGalleryButton = () => {
   return (
     <IAIIconButton
       tooltip="Show Gallery (G)"
-      tooltipPlacement="top"
+      tooltipProps={{ placement: 'top' }}
       aria-label="Show Gallery"
       styleClass="floating-show-hide-button right"
       onMouseOver={handleShowGallery}

frontend/src/features/tabs/FloatingOptionsPanelButtons.tsx

@@ -36,7 +36,7 @@ const FloatingOptionsPanelButtons = () => {
     <div className="show-hide-button-options">
       <IAIIconButton
         tooltip="Show Options Panel (O)"
-        tooltipPlacement="top"
+        tooltipProps={{ placement: 'top' }}
         aria-label="Show Options Panel"
         onClick={handleShowOptionsPanel}
       >