Styling updates

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 =
+    const gridLineColor = gridLinesColor[colorMode];
-      colorMode === 'light' ? 'rgba(136, 136, 136, 1)' : 'rgba(84, 84, 84, 1)';
 
     const { width, height } = stageDimensions;
     const { x, y } = stageCoordinates;

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"

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));
 }

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

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);

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);

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);