From b72b61b790815fb3bda1c02b6cf3ca8ce2380e3a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 20 Nov 2022 19:35:32 +1100
Subject: [PATCH] Styling updates

---
 .../src/features/canvas/components/IAICanvasGrid.tsx     | 9 +++++++--
 .../src/features/gallery/components/HoverableImage.tsx   | 1 +
 .../src/features/tabs/components/FloatingButton.scss     | 3 +++
 .../src/features/tabs/components/InvokeOptionsPanel.tsx  | 5 +++++
 frontend/src/styles/Themes/_Colors_Dark.scss             | 2 +-
 frontend/src/styles/Themes/_Colors_Green.scss            | 2 +-
 frontend/src/styles/Themes/_Colors_Light.scss            | 2 +-
 7 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/canvas/components/IAICanvasGrid.tsx b/frontend/src/features/canvas/components/IAICanvasGrid.tsx
index 0b09b38868..7495f0ee7d 100644
--- a/frontend/src/features/canvas/components/IAICanvasGrid.tsx
+++ b/frontend/src/features/canvas/components/IAICanvasGrid.tsx
@@ -21,6 +21,12 @@ const selector = createSelector(
   }
 );
 
+const gridLinesColor = {
+  dark: 'rgba(255, 255, 255, 0.2)',
+  green: 'rgba(255, 255, 255, 0.2)',
+  light: 'rgba(0, 0, 0, 0.2)',
+};
+
 const IAICanvasGrid = () => {
   const { colorMode } = useColorMode();
   const { stageScale, stageCoordinates, stageDimensions } =
@@ -35,8 +41,7 @@ const IAICanvasGrid = () => {
   );
 
   useLayoutEffect(() => {
-    const gridLineColor =
-      colorMode === 'light' ? 'rgba(136, 136, 136, 1)' : 'rgba(84, 84, 84, 1)';
+    const gridLineColor = gridLinesColor[colorMode];
 
     const { width, height } = stageDimensions;
     const { x, y } = stageCoordinates;
diff --git a/frontend/src/features/gallery/components/HoverableImage.tsx b/frontend/src/features/gallery/components/HoverableImage.tsx
index a93965ace0..5748b51aab 100644
--- a/frontend/src/features/gallery/components/HoverableImage.tsx
+++ b/frontend/src/features/gallery/components/HoverableImage.tsx
@@ -167,6 +167,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
           className="hoverable-image"
           onMouseOver={handleMouseOver}
           onMouseOut={handleMouseOut}
+          userSelect={'none'}
         >
           <Image
             className="hoverable-image-image"
diff --git a/frontend/src/features/tabs/components/FloatingButton.scss b/frontend/src/features/tabs/components/FloatingButton.scss
index 19a68f8718..01ef13a377 100644
--- a/frontend/src/features/tabs/components/FloatingButton.scss
+++ b/frontend/src/features/tabs/components/FloatingButton.scss
@@ -48,5 +48,8 @@
 }
 
 .show-hide-button-gallery {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   background-color: var(--background-color) !important;
+  filter: drop-shadow(0.5rem 0px 1rem var(--floating-button-drop-shadow-color));
 }
diff --git a/frontend/src/features/tabs/components/InvokeOptionsPanel.tsx b/frontend/src/features/tabs/components/InvokeOptionsPanel.tsx
index f8b7ce98dd..0656ae717b 100644
--- a/frontend/src/features/tabs/components/InvokeOptionsPanel.tsx
+++ b/frontend/src/features/tabs/components/InvokeOptionsPanel.tsx
@@ -155,6 +155,11 @@ const InvokeOptionsPanel = (props: Props) => {
         onMouseOver={
           !shouldPinOptionsPanel ? cancelCloseOptionsPanelTimer : undefined
         }
+        style={{
+          borderRight: !shouldPinOptionsPanel
+            ? '0.3rem solid var(--tab-list-text-inactive)'
+            : '',
+        }}
       >
         <div className="options-panel-margin">
           <div
diff --git a/frontend/src/styles/Themes/_Colors_Dark.scss b/frontend/src/styles/Themes/_Colors_Dark.scss
index 9f3e4f7671..64186bd260 100644
--- a/frontend/src/styles/Themes/_Colors_Dark.scss
+++ b/frontend/src/styles/Themes/_Colors_Dark.scss
@@ -119,7 +119,7 @@
   --context-menu-bg-color-hover: rgb(30, 32, 42);
 
   // Shadows
-  --floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, 0.5));
+  --floating-button-drop-shadow-color: var(--accent-color);
 
   // Canvas
   --inpainting-alerts-bg: rgba(20, 20, 26, 0.75);
diff --git a/frontend/src/styles/Themes/_Colors_Green.scss b/frontend/src/styles/Themes/_Colors_Green.scss
index 4f49423a66..0e2ffa7ed4 100644
--- a/frontend/src/styles/Themes/_Colors_Green.scss
+++ b/frontend/src/styles/Themes/_Colors_Green.scss
@@ -117,7 +117,7 @@
   --context-menu-bg-color-hover: rgb(30, 32, 42);
 
   // Shadows
-  --floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, 0.5));
+  --floating-button-drop-shadow-color: var(--accent-color);
 
   // Canvas
   --inpainting-alerts-bg: rgba(20, 20, 26, 0.75);
diff --git a/frontend/src/styles/Themes/_Colors_Light.scss b/frontend/src/styles/Themes/_Colors_Light.scss
index 5138704c79..0d95044aeb 100644
--- a/frontend/src/styles/Themes/_Colors_Light.scss
+++ b/frontend/src/styles/Themes/_Colors_Light.scss
@@ -114,7 +114,7 @@
   --context-menu-bg-color-hover: var(--background-color-secondary);
 
   // Shadows
-  --floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3));
+  --floating-button-drop-shadow-color: rgba(0, 0, 0, 0.7);
 
   // Canvas
   --inpainting-alerts-bg: rgba(220, 222, 224, 0.75);