From 16c8b23b347792d7811cff66a27d350fe5d0d62c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 2 Nov 2022 11:32:07 +1100
Subject: [PATCH] Changes Report Bug icon to a bug

---
 .../src/common/components/IAIIconButton.scss  |  10 +-
 .../src/common/components/IAIIconButton.tsx   |   1 +
 frontend/src/features/system/SiteHeader.tsx   | 118 ++++++++----------
 3 files changed, 63 insertions(+), 66 deletions(-)

diff --git a/frontend/src/common/components/IAIIconButton.scss b/frontend/src/common/components/IAIIconButton.scss
index d123f1597f..935bb056cf 100644
--- a/frontend/src/common/components/IAIIconButton.scss
+++ b/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;
+    }
+  }
 }
diff --git a/frontend/src/common/components/IAIIconButton.tsx b/frontend/src/common/components/IAIIconButton.tsx
index de8765c395..d86d4cddea 100644
--- a/frontend/src/common/components/IAIIconButton.tsx
+++ b/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}
diff --git a/frontend/src/features/system/SiteHeader.tsx b/frontend/src/features/system/SiteHeader.tsx
index abe22f1fa6..29eef3333a 100644
--- a/frontend/src/features/system/SiteHeader.tsx
+++ b/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,64 +45,55 @@ const SiteHeader = () => {
         <StatusIndicator />
 
         <HotkeysModal>
-          <div>
-            <Tooltip hasArrow label="Hotkeys" placement={'bottom'}>
-              <IconButton
-                aria-label="Hotkeys"
-                variant="link"
-                fontSize={24}
-                size={'sm'}
-                icon={<MdKeyboard />}
-              />
-            </Tooltip>
-          </div>
+          <IAIIconButton
+            aria-label="Hotkeys"
+            tooltip="Hotkeys"
+            fontSize={24}
+            size={'sm'}
+            variant="link"
+            icon={<MdKeyboard />}
+          />
         </HotkeysModal>
 
-        <Tooltip hasArrow label="Theme" placement={'bottom'}>
-          <IconButton
-            aria-label="Toggle Dark Mode"
-            onClick={toggleColorMode}
-            variant="link"
-            size={'sm'}
-            fontSize={colorModeIconFontSize}
-            icon={colorModeIcon}
-          />
-        </Tooltip>
+        <IAIIconButton
+          aria-label="Toggle Dark Mode"
+          tooltip="Dark Mode"
+          onClick={toggleColorMode}
+          variant="link"
+          size={'sm'}
+          fontSize={colorModeIconFontSize}
+          icon={colorModeIcon}
+        />
 
-        <Tooltip hasArrow label="Report Bug" placement={'bottom'}>
-          <IconButton
-            aria-label="Link to Github Issues"
-            variant="link"
-            fontSize={23}
-            size={'sm'}
-            icon={
-              <Link
-                isExternal
-                href="http://github.com/invoke-ai/InvokeAI/issues"
-              >
-                <MdHelp />
-              </Link>
-            }
-          />
-        </Tooltip>
+        <IAIIconButton
+          aria-label="Report Bug"
+          tooltip="Report Bug"
+          variant="link"
+          fontSize={19}
+          size={'sm'}
+          icon={
+            <Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
+              <FaBug />
+            </Link>
+          }
+        />
 
-        <Tooltip hasArrow label="Github" placement={'bottom'}>
-          <IconButton
-            aria-label="Link to Github Repo"
-            variant="link"
-            fontSize={20}
-            size={'sm'}
-            icon={
-              <Link isExternal href="http://github.com/invoke-ai/InvokeAI">
-                <FaGithub />
-              </Link>
-            }
-          />
-        </Tooltip>
+        <IAIIconButton
+          aria-label="Link to Github Repo"
+          tooltip="Github"
+          variant="link"
+          fontSize={20}
+          size={'sm'}
+          icon={
+            <Link isExternal href="http://github.com/invoke-ai/InvokeAI">
+              <FaGithub />
+            </Link>
+          }
+        />
 
-        <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
-                aria-label="Settings"
-                variant="link"
-                fontSize={24}
-                size={'sm'}
-                icon={<MdSettings />}
-              />
-            </Tooltip>
-          </div>
+          <IAIIconButton
+            aria-label="Settings"
+            tooltip="Settings"
+            variant="link"
+            fontSize={24}
+            size={'sm'}
+            icon={<MdSettings />}
+          />
         </SettingsModal>
       </div>
     </div>