Changes Report Bug icon to a bug

frontend/src/common/components/IAIIconButton.scss

@@ -8,7 +8,7 @@
     background-color: var(--btn-grey-hover);
   }
 
-  &[data-selected=true] {
+  &[data-selected='true'] {
     background-color: var(--accent-color);
     &:hover {
       background-color: var(--accent-color-hover);
@@ -17,4 +17,12 @@
   &[disabled] {
     cursor: not-allowed;
   }
+
+  &[data-variant='link'] {
+    background-color: none !important;
+    &:hover {
+      background-color: none !important;
+      background: none !important;
+    }
+  }
 }

frontend/src/common/components/IAIIconButton.tsx

@@ -28,6 +28,7 @@ const IAIIconButton = (props: Props) => {
     <Tooltip label={tooltip} hasArrow placement={tooltipPlacement}>
       <IconButton
         className={`icon-button ${styleClass}`}
+        data-variant={props.variant}
         {...rest}
         cursor={cursor ? cursor : onClick ? 'pointer' : 'unset'}
         onClick={onClick}

frontend/src/features/system/SiteHeader.tsx

@@ -2,10 +2,11 @@ import { IconButton, Link, Tooltip, useColorMode } from '@chakra-ui/react';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { FaSun, FaMoon, FaGithub, FaDiscord } from 'react-icons/fa';
+import { FaSun, FaMoon, FaGithub, FaDiscord, FaBug } from 'react-icons/fa';
 import { MdHelp, MdKeyboard, MdSettings } from 'react-icons/md';
 
 import InvokeAILogo from '../../assets/images/logo.png';
+import IAIIconButton from '../../common/components/IAIIconButton';
 
 import HotkeysModal from './HotkeysModal/HotkeysModal';
 
@@ -44,50 +45,42 @@ const SiteHeader = () => {
         <StatusIndicator />
 
         <HotkeysModal>
-          <div>
-            <Tooltip hasArrow label="Hotkeys" placement={'bottom'}>
-              <IconButton
+          <IAIIconButton
             aria-label="Hotkeys"
-                variant="link"
+            tooltip="Hotkeys"
             fontSize={24}
             size={'sm'}
+            variant="link"
             icon={<MdKeyboard />}
           />
-            </Tooltip>
-          </div>
         </HotkeysModal>
 
-        <Tooltip hasArrow label="Theme" placement={'bottom'}>
-          <IconButton
+        <IAIIconButton
           aria-label="Toggle Dark Mode"
+          tooltip="Dark Mode"
           onClick={toggleColorMode}
           variant="link"
           size={'sm'}
           fontSize={colorModeIconFontSize}
           icon={colorModeIcon}
         />
-        </Tooltip>
 
-        <Tooltip hasArrow label="Report Bug" placement={'bottom'}>
-          <IconButton
-            aria-label="Link to Github Issues"
+        <IAIIconButton
+          aria-label="Report Bug"
+          tooltip="Report Bug"
           variant="link"
-            fontSize={23}
+          fontSize={19}
           size={'sm'}
           icon={
-              <Link
-                isExternal
-                href="http://github.com/invoke-ai/InvokeAI/issues"
-              >
-                <MdHelp />
+            <Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
+              <FaBug />
             </Link>
           }
         />
-        </Tooltip>
 
-        <Tooltip hasArrow label="Github" placement={'bottom'}>
-          <IconButton
+        <IAIIconButton
           aria-label="Link to Github Repo"
+          tooltip="Github"
           variant="link"
           fontSize={20}
           size={'sm'}
@@ -97,11 +90,10 @@ const SiteHeader = () => {
             </Link>
           }
         />
-        </Tooltip>
 
-        <Tooltip hasArrow label="Discord" placement={'bottom'}>
-          <IconButton
+          <IAIIconButton
             aria-label="Link to Discord Server"
+            tooltip="Discord"
             variant="link"
             fontSize={20}
             size={'sm'}
@@ -111,20 +103,16 @@ const SiteHeader = () => {
               </Link>
             }
           />
-        </Tooltip>
 
         <SettingsModal>
-          <div>
-            <Tooltip label="Settings">
-              <IconButton
+          <IAIIconButton
             aria-label="Settings"
+            tooltip="Settings"
             variant="link"
             fontSize={24}
             size={'sm'}
             icon={<MdSettings />}
           />
-            </Tooltip>
-          </div>
         </SettingsModal>
       </div>
     </div>