From 3473669458837d9db2e89d08027ae35d04532a65 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sun, 9 Oct 2022 06:35:32 +1300
Subject: [PATCH] WebUI Bug Fixes & Tweaks

---
 .../src/common/components/IAIIconButton.tsx   | 18 ++++-
 .../src/features/gallery/ImageGallery.tsx     |  9 ++-
 .../src/features/gallery/InvokePopover.scss   |  4 +-
 frontend/src/features/system/Console.tsx      |  4 +-
 frontend/src/features/system/SiteHeader.tsx   | 74 ++++++++++---------
 frontend/src/features/tabs/InvokeTabs.tsx     |  1 +
 frontend/src/styles/_Animations.scss          | 12 +++
 7 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/frontend/src/common/components/IAIIconButton.tsx b/frontend/src/common/components/IAIIconButton.tsx
index 9c5c7c5b8e..97efe145a2 100644
--- a/frontend/src/common/components/IAIIconButton.tsx
+++ b/frontend/src/common/components/IAIIconButton.tsx
@@ -1,7 +1,13 @@
-import { IconButtonProps, IconButton, Tooltip } from '@chakra-ui/react';
+import {
+  IconButtonProps,
+  IconButton,
+  Tooltip,
+  PlacementWithLogical,
+} from '@chakra-ui/react';
 
 interface Props extends IconButtonProps {
   tooltip?: string;
+  tooltipPlacement?: PlacementWithLogical | undefined;
 }
 
 /**
@@ -10,10 +16,14 @@ interface Props extends IconButtonProps {
  * TODO: Get rid of this.
  */
 const IAIIconButton = (props: Props) => {
-  const { tooltip = '', onClick, ...rest } = props;
+  const { tooltip = '', tooltipPlacement = 'bottom', onClick, ...rest } = props;
   return (
-    <Tooltip label={tooltip}>
-      <IconButton {...rest} cursor={onClick ? 'pointer' : 'unset'} onClick={onClick}/>
+    <Tooltip label={tooltip} hasArrow placement={tooltipPlacement}>
+      <IconButton
+        {...rest}
+        cursor={onClick ? 'pointer' : 'unset'}
+        onClick={onClick}
+      />
     </Tooltip>
   );
 };
diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx
index bd29542160..bfb4486565 100644
--- a/frontend/src/features/gallery/ImageGallery.tsx
+++ b/frontend/src/features/gallery/ImageGallery.tsx
@@ -5,6 +5,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { MdClear, MdPhotoLibrary } from 'react-icons/md';
 import { requestImages } from '../../app/socketio/actions';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
+import IAIIconButton from '../../common/components/IAIIconButton';
 import {
   selectNextImage,
   selectPrevImage,
@@ -61,13 +62,15 @@ export default function ImageGallery() {
   return (
     <div className="image-gallery-area">
       {!shouldShowGallery && (
-        <Button
-          colorScheme="teal"
+        <IAIIconButton
+          tooltip="Show Gallery"
+          tooltipPlacement="top"
+          aria-label="Show Gallery"
           onClick={handleShowGalleryToggle}
           className="image-gallery-popup-btn"
         >
           <MdPhotoLibrary />
-        </Button>
+        </IAIIconButton>
       )}
 
       {shouldShowGallery && (
diff --git a/frontend/src/features/gallery/InvokePopover.scss b/frontend/src/features/gallery/InvokePopover.scss
index a4579c0eda..f9bc0a5f61 100644
--- a/frontend/src/features/gallery/InvokePopover.scss
+++ b/frontend/src/features/gallery/InvokePopover.scss
@@ -15,9 +15,9 @@
   background: var(--tab-panel-bg);
   border-radius: 0 0 0.4rem 0.4rem;
   border: 2px solid var(--tab-hover-color);
-  padding: .75rem 1rem .75rem 1rem;
+  padding: 0.75rem 1rem 0.75rem 1rem;
   display: grid;
-  grid-template-rows: repeat(auto-fill, 1fr);
+  grid-auto-rows: max-content;
   grid-row-gap: 0.5rem;
   justify-content: space-between;
 }
diff --git a/frontend/src/features/system/Console.tsx b/frontend/src/features/system/Console.tsx
index 22a6632936..d9620790b3 100644
--- a/frontend/src/features/system/Console.tsx
+++ b/frontend/src/features/system/Console.tsx
@@ -100,7 +100,7 @@ const Console = () => {
         </Resizable>
       )}
       {shouldShowLogViewer && (
-        <Tooltip label={shouldAutoscroll ? 'Autoscroll On' : 'Autoscroll Off'}>
+        <Tooltip hasArrow label={shouldAutoscroll ? 'Autoscroll On' : 'Autoscroll Off'}>
           <IconButton
             className={`console-autoscroll-icon-button ${
               shouldAutoscroll && 'autoscroll-enabled'
@@ -113,7 +113,7 @@ const Console = () => {
           />
         </Tooltip>
       )}
-      <Tooltip label={shouldShowLogViewer ? 'Hide Console' : 'Show Console'}>
+      <Tooltip hasArrow label={shouldShowLogViewer ? 'Hide Console' : 'Show Console'}>
         <IconButton
           className={`console-toggle-icon-button ${
             (hasError || !wasErrorSeen) && 'error-seen'
diff --git a/frontend/src/features/system/SiteHeader.tsx b/frontend/src/features/system/SiteHeader.tsx
index 61ed996cec..761bc176b5 100644
--- a/frontend/src/features/system/SiteHeader.tsx
+++ b/frontend/src/features/system/SiteHeader.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Link, useColorMode } from '@chakra-ui/react';
+import { IconButton, Link, Tooltip, useColorMode } from '@chakra-ui/react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { FaSun, FaMoon, FaGithub } from 'react-icons/fa';
@@ -61,41 +61,47 @@ const SiteHeader = () => {
           />
         </HotkeysModal>
 
-        <IconButton
-          aria-label="Link to Github Issues"
-          variant="link"
-          fontSize={23}
-          size={'sm'}
-          icon={
-            <Link
-              isExternal
-              href="http://github.com/lstein/stable-diffusion/issues"
-            >
-              <MdHelp />
-            </Link>
-          }
-        />
+        <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/lstein/stable-diffusion/issues"
+              >
+                <MdHelp />
+              </Link>
+            }
+          />
+        </Tooltip>
 
-        <IconButton
-          aria-label="Link to Github Repo"
-          variant="link"
-          fontSize={20}
-          size={'sm'}
-          icon={
-            <Link isExternal href="http://github.com/lstein/stable-diffusion">
-              <FaGithub />
-            </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/lstein/stable-diffusion">
+                <FaGithub />
+              </Link>
+            }
+          />
+        </Tooltip>
 
-        <IconButton
-          aria-label="Toggle Dark Mode"
-          onClick={toggleColorMode}
-          variant="link"
-          size={'sm'}
-          fontSize={colorModeIconFontSize}
-          icon={colorModeIcon}
-        />
+        <Tooltip hasArrow label="Theme" placement={'bottom'}>
+          <IconButton
+            aria-label="Toggle Dark Mode"
+            onClick={toggleColorMode}
+            variant="link"
+            size={'sm'}
+            fontSize={colorModeIconFontSize}
+            icon={colorModeIcon}
+          />
+        </Tooltip>
       </div>
     </div>
   );
diff --git a/frontend/src/features/tabs/InvokeTabs.tsx b/frontend/src/features/tabs/InvokeTabs.tsx
index 1797fcf260..d6c1d99d31 100644
--- a/frontend/src/features/tabs/InvokeTabs.tsx
+++ b/frontend/src/features/tabs/InvokeTabs.tsx
@@ -88,6 +88,7 @@ export default function InvokeTabs() {
       tabsToRender.push(
         <Tooltip
           key={key}
+          hasArrow
           label={tab_dict[key as keyof typeof tab_dict].tooltip}
           placement={'right'}
         >
diff --git a/frontend/src/styles/_Animations.scss b/frontend/src/styles/_Animations.scss
index 0794183a05..48fbbc8425 100644
--- a/frontend/src/styles/_Animations.scss
+++ b/frontend/src/styles/_Animations.scss
@@ -6,3 +6,15 @@
     transform: translateX(0);
   }
 }
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}