Styling & Hotkeys Update

frontend/src/common/components/IAIButton.tsx

@@ -3,16 +3,19 @@ import { Button, ButtonProps, Tooltip } from '@chakra-ui/react';
 export interface IAIButtonProps extends ButtonProps {
   label: string;
   tooltip?: string;
+  styleClass?: string;
 }
 
 /**
  * Reusable customized button component.
  */
 const IAIButton = (props: IAIButtonProps) => {
-  const { label, tooltip = '', ...rest } = props;
+  const { label, tooltip = '', styleClass, ...rest } = props;
   return (
     <Tooltip label={tooltip}>
-      <Button {...rest}>{label}</Button>
+      <Button className={styleClass ? styleClass : ''} {...rest}>
+        {label}
+      </Button>
     </Tooltip>
   );
 };

frontend/src/features/gallery/ImageGallery.scss

@@ -19,8 +19,8 @@
 }
 
 .image-gallery-wrapper {
-  z-index: 10;
-  
+  z-index: 100;
+
   &[data-pinned='false'] {
     position: fixed;
     height: 100vh;

frontend/src/features/gallery/ImageGallery.tsx

@@ -156,7 +156,7 @@ export default function ImageGallery() {
   });
 
   useHotkeys(
-    'shift+p',
+    'shift+g',
     () => {
       handleSetShouldPinGallery();
     },
@@ -443,7 +443,7 @@ export default function ImageGallery() {
                 size={'sm'}
                 className={'image-gallery-icon-btn'}
                 aria-label={'Pin Gallery'}
-                tooltip={'Pin Gallery (Shift+P)'}
+                tooltip={'Pin Gallery (Shift+G)'}
                 onClick={handleSetShouldPinGallery}
                 icon={shouldPinGallery ? <BsPinAngleFill /> : <BsPinAngle />}
               />

frontend/src/features/options/AdvancedOptions/Inpainting/InpaintingSettings.tsx

@@ -89,6 +89,7 @@ export default function InpaintingSettings() {
         onClick={handleClearBrushHistory}
         tooltip="Clears brush stroke history"
         disabled={futureLines.length > 0 || pastLines.length > 0 ? false : true}
+        styleClass="inpainting-options-btn"
       />
     </>
   );

frontend/src/features/system/HotkeysModal/HotkeysModal.tsx

@@ -39,6 +39,16 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
       desc: 'Focus the prompt input area',
       hotkey: 'Alt+A',
     },
+    {
+      title: 'Toggle Options',
+      desc: 'Open and close the options panel',
+      hotkey: 'O',
+    },
+    {
+      title: 'Pin Options',
+      desc: 'Pin the options panel',
+      hotkey: 'Shift+O',
+    },
     {
       title: 'Toggle Gallery',
       desc: 'Open and close the gallery drawer',
@@ -101,7 +111,7 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
     {
       title: 'Toggle Gallery Pin',
       desc: 'Pins and unpins the gallery to the UI',
-      hotkey: 'Shift+P',
+      hotkey: 'Shift+G',
     },
     {
       title: 'Increase Gallery Image Size',

frontend/src/features/tabs/FloatingShowHideButton.scss

@@ -7,17 +7,16 @@
   z-index: 20;
   padding: 0;
 
-  filter: var(--floating-button-drop-shadow);
-
-  svg {
-    fill: var(--tab-list-text);
-  }
-
   &.left {
     left: 0;
     border-radius: 0 0.5rem 0.5rem 0 !important;
   }
 
+  &.btn-options {
+    left: 73px;
+    border-radius: 0 0.5rem 0.5rem 0 !important;
+  }
+
   &.right {
     right: 0;
     border-radius: 0.5rem 0 0 0.5rem !important;

frontend/src/features/tabs/Inpainting/Inpainting.scss

@@ -83,6 +83,10 @@
   }
 }
 
+.inpainting-options-btn {
+  min-height: 2rem;
+}
+
 // Overrides
 .inpainting-workarea-overrides {
   .image-gallery-wrapper {

frontend/src/features/tabs/InvokeOptionsPanel.scss

@@ -19,14 +19,13 @@
 }
 
 .options-panel-wrapper {
-  background-color: var(--background-color);
+  grid-auto-rows: max-content;
   height: $app-content-height;
   width: $options-bar-max-width;
   max-width: $options-bar-max-width;
   flex-shrink: 0;
   position: relative;
-  overflow-y: scroll;
-  @include HideScrollbar;
+  z-index: 20;
 
   .options-panel {
     display: flex;
@@ -34,6 +33,8 @@
     row-gap: 1rem;
     height: 100%;
     @include HideScrollbar;
+    background-color: var(--background-color) !important;
+    border-right: 1px solid var(--border-color);
   }
 
   &[data-pinned='false'] {
@@ -58,7 +59,7 @@
     padding: 0.5rem;
     top: 1rem;
     right: 1rem;
-    z-index: 25;
+    z-index: 20;
 
     &[data-selected='true'] {
       top: 0;

frontend/src/features/tabs/InvokeOptionsPanel.tsx

@@ -1,16 +1,11 @@
 import { Tooltip } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import {
-  FocusEvent,
-  MouseEvent,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { MouseEvent, ReactNode, useCallback, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
 import { CSSTransition } from 'react-transition-group';
 import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
+
 import useClickOutsideWatcher from '../../common/hooks/useClickOutsideWatcher';
 import {
   OptionsState,
@@ -48,7 +43,6 @@ const InvokeOptionsPanel = (props: Props) => {
     shouldShowOptionsPanel,
     shouldHoldOptionsPanelOpen,
     shouldPinOptionsPanel,
-    optionsPanelScrollPosition,
   } = useAppSelector(optionsPanelSelector);
 
   const optionsPanelRef = useRef<HTMLDivElement>(null);
@@ -58,6 +52,24 @@ const InvokeOptionsPanel = (props: Props) => {
 
   const { children } = props;
 
+  // Hotkeys
+  useHotkeys(
+    'o',
+    () => {
+      dispatch(setShouldShowOptionsPanel(!shouldShowOptionsPanel));
+    },
+    [shouldShowOptionsPanel]
+  );
+
+  useHotkeys(
+    'shift+o',
+    () => {
+      handleClickPinOptionsPanel();
+    },
+    [shouldPinOptionsPanel]
+  );
+  //
+
   const handleCloseOptionsPanel = useCallback(() => {
     if (shouldPinOptionsPanel) return;
     dispatch(

frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx

@@ -15,7 +15,7 @@ const ShowHideOptionsPanelButton = () => {
       tooltip="Show Options Panel (G)"
       tooltipPlacement="top"
       aria-label="Show Options Panel"
-      styleClass="floating-show-hide-button left"
+      styleClass="floating-show-hide-button btn-options"
       onMouseOver={handleShowOptionsPanel}
     >
       <IoMdOptions />

frontend/src/styles/Mixins/_Variables.scss

@@ -1,6 +1,6 @@
 // Calc Values
 $app-cutoff: 0px;
-$app-content-height-cutoff: calc(70px + 1rem); // default: 7rem
+$app-content-height-cutoff: 5rem; // default: 7rem
 
 // Usage Variables
 // app