Styling improvements

frontend/src/app/App.scss

@@ -9,7 +9,7 @@
 
 .app-content {
   display: grid;
-  row-gap: 0.5rem;
+  row-gap: 1rem;
   padding: $app-padding;
   grid-auto-rows: min-content auto;
   width: $app-width;

frontend/src/features/gallery/ImageGallery.tsx

@@ -4,7 +4,7 @@ import { NumberSize, Resizable, Size } from 're-resizable';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { MdClear, MdPhotoLibrary } from 'react-icons/md';
-import { BsPinAngleFill } from 'react-icons/bs';
+import { BsPin, BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
 import { requestImages } from '../../app/socketio/actions';
 import { useAppDispatch, useAppSelector } from '../../app/store';
 import IAIIconButton from '../../common/components/IAIIconButton';
@@ -441,11 +441,11 @@ export default function ImageGallery() {
 
               <IAIIconButton
                 size={'sm'}
+                className={'image-gallery-icon-btn'}
                 aria-label={'Pin Gallery'}
                 tooltip={'Pin Gallery (Shift+P)'}
                 onClick={handleSetShouldPinGallery}
-                icon={<BsPinAngleFill />}
-                data-selected={shouldPinGallery}
+                icon={shouldPinGallery ? <BsPinAngleFill /> : <BsPinAngle />}
               />
             </div>
           </div>

frontend/src/features/system/SiteHeader.scss

@@ -24,11 +24,3 @@
   align-items: center;
   column-gap: 0.5rem;
 }
-
-// Overrides
-
-.process-buttons {
-  padding-left: 0.5rem;
-  button {
-  }
-}

frontend/src/features/tabs/InvokeOptionsPanel.scss

@@ -19,16 +19,17 @@
 }
 
 .options-panel-wrapper {
-  z-index: 20;
   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;
 
   .options-panel {
-    display: grid;
+    display: flex;
+    flex-direction: column;
     row-gap: 1rem;
     height: 100%;
     overflow-y: scroll;
@@ -36,6 +37,8 @@
   }
 
   &[data-pinned='false'] {
+    z-index: 20;
+
     position: fixed;
     top: 0;
     left: 0;
@@ -48,4 +51,21 @@
       padding: 1rem;
     }
   }
+
+  .options-panel-pin-button {
+    position: absolute;
+    cursor: pointer;
+    padding: 0.5rem;
+    top: 1rem;
+    right: 1rem;
+    z-index: 25;
+
+    &[data-selected='true'] {
+      top: 0;
+      right: 0;
+    }
+    svg {
+      opacity: 0.5;
+    }
+  }
 }

frontend/src/features/tabs/InvokeTabs.scss

@@ -3,7 +3,7 @@
 .app-tabs {
   display: grid !important;
   grid-template-columns: min-content auto;
-  column-gap: 0.5rem;
+  column-gap: 1rem;
   // height: 100%;
 }
 

frontend/src/styles/Mixins/_Variables.scss

@@ -4,7 +4,7 @@ $app-content-height-cutoff: 4rem; // default: 7rem
 
 // Usage Variables
 // app
-$app-padding: 0.5rem;
+$app-padding: 1rem;
 $progress-bar-thickness: 0.3rem;
 $app-width: calc(100vw - $app-cutoff);
 $app-height: calc(100vh - $progress-bar-thickness);