From 2d32cf4eeb1f3b8b6ab664a2785f3b3ef0b66d63 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 30 Oct 2022 19:32:14 +1100
Subject: [PATCH] Styling improvements

---
 frontend/src/app/App.scss                     |  2 +-
 .../src/features/gallery/ImageGallery.tsx     |  6 ++---
 frontend/src/features/system/SiteHeader.scss  |  8 -------
 .../src/features/tabs/InvokeOptionsPanel.scss | 24 +++++++++++++++++--
 frontend/src/features/tabs/InvokeTabs.scss    |  2 +-
 frontend/src/styles/Mixins/_Variables.scss    |  2 +-
 6 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
index 51a5090d1d..84c76fd065 100644
--- a/frontend/src/app/App.scss
+++ b/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;
diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx
index 513cbe6e0f..1d828d7726 100644
--- a/frontend/src/features/gallery/ImageGallery.tsx
+++ b/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>
diff --git a/frontend/src/features/system/SiteHeader.scss b/frontend/src/features/system/SiteHeader.scss
index 549f370265..f9b40912c0 100644
--- a/frontend/src/features/system/SiteHeader.scss
+++ b/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 {
-  }
-}
diff --git a/frontend/src/features/tabs/InvokeOptionsPanel.scss b/frontend/src/features/tabs/InvokeOptionsPanel.scss
index b43e0895e1..2ac3ceb57b 100644
--- a/frontend/src/features/tabs/InvokeOptionsPanel.scss
+++ b/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;
+    }
+  }
 }
diff --git a/frontend/src/features/tabs/InvokeTabs.scss b/frontend/src/features/tabs/InvokeTabs.scss
index f50a292ffc..d4d27e6d30 100644
--- a/frontend/src/features/tabs/InvokeTabs.scss
+++ b/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%;
 }
 
diff --git a/frontend/src/styles/Mixins/_Variables.scss b/frontend/src/styles/Mixins/_Variables.scss
index 865966386c..58e0f9e417 100644
--- a/frontend/src/styles/Mixins/_Variables.scss
+++ b/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);