From 78bcaec4da62852ffb985c06ff7c50a4dcae9fd3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 7 Jul 2023 23:14:31 +1000
Subject: [PATCH] feat(ui): improve embed button styles

---
 .../embedding/components/AddEmbeddingButton.tsx | 17 +++++++++++++----
 .../Core/ParamPositiveConditioning.tsx          | 17 +++++++++--------
 .../ui/components/PinParametersPanelButton.tsx  | 13 +++++++++++--
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/invokeai/frontend/web/src/features/embedding/components/AddEmbeddingButton.tsx b/invokeai/frontend/web/src/features/embedding/components/AddEmbeddingButton.tsx
index 1dae6f56e6..94ddc08315 100644
--- a/invokeai/frontend/web/src/features/embedding/components/AddEmbeddingButton.tsx
+++ b/invokeai/frontend/web/src/features/embedding/components/AddEmbeddingButton.tsx
@@ -1,6 +1,6 @@
 import IAIIconButton from 'common/components/IAIIconButton';
 import { memo } from 'react';
-import { BiCode } from 'react-icons/bi';
+import { FaCode } from 'react-icons/fa';
 
 type Props = {
   onClick: () => void;
@@ -13,15 +13,24 @@ const AddEmbeddingButton = (props: Props) => {
       size="sm"
       aria-label="Add Embedding"
       tooltip="Add Embedding"
-      icon={<BiCode />}
+      icon={<FaCode />}
       sx={{
         p: 2,
-        color: 'base.700',
+        color: 'base.500',
         _hover: {
-          color: 'base.550',
+          color: 'base.600',
         },
         _active: {
+          color: 'base.700',
+        },
+        _dark: {
           color: 'base.500',
+          _hover: {
+            color: 'base.400',
+          },
+          _active: {
+            color: 'base.300',
+          },
         },
       }}
       variant="link"
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
index cbff29e89c..77f4c6af79 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
@@ -1,11 +1,10 @@
 import { Box, FormControl, useDisclosure } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { ChangeEvent, KeyboardEvent, useCallback, useRef } from 'react';
 
 import { createSelector } from '@reduxjs/toolkit';
 import {
-  GenerationState,
   clampSymmetrySteps,
   setPositivePrompt,
 } from 'features/parameters/store/generationSlice';
@@ -22,10 +21,11 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 const promptInputSelector = createSelector(
-  [(state: RootState) => state.generation, activeTabNameSelector],
-  (parameters: GenerationState, activeTabName) => {
+  [stateSelector, activeTabNameSelector],
+  ({ generation, ui }, activeTabName) => {
     return {
-      prompt: parameters.positivePrompt,
+      shouldPinParametersPanel: ui.shouldPinParametersPanel,
+      prompt: generation.positivePrompt,
       activeTabName,
     };
   },
@@ -41,7 +41,8 @@ const promptInputSelector = createSelector(
  */
 const ParamPositiveConditioning = () => {
   const dispatch = useAppDispatch();
-  const { prompt, activeTabName } = useAppSelector(promptInputSelector);
+  const { prompt, shouldPinParametersPanel, activeTabName } =
+    useAppSelector(promptInputSelector);
   const isReady = useIsReadyToInvoke();
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
@@ -120,7 +121,7 @@ const ParamPositiveConditioning = () => {
   // };
 
   return (
-    <Box>
+    <Box position="relative">
       <FormControl>
         <ParamEmbeddingPopover
           isOpen={isOpen}
@@ -144,7 +145,7 @@ const ParamPositiveConditioning = () => {
         <Box
           sx={{
             position: 'absolute',
-            top: 6,
+            top: shouldPinParametersPanel ? 6 : 0,
             insetInlineEnd: 0,
           }}
         >
diff --git a/invokeai/frontend/web/src/features/ui/components/PinParametersPanelButton.tsx b/invokeai/frontend/web/src/features/ui/components/PinParametersPanelButton.tsx
index 30cc1d2158..5d4cc4b9d7 100644
--- a/invokeai/frontend/web/src/features/ui/components/PinParametersPanelButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/PinParametersPanelButton.tsx
@@ -33,12 +33,21 @@ const PinParametersPanelButton = (props: PinParametersPanelButtonProps) => {
       variant="ghost"
       size="sm"
       sx={{
-        color: 'base.700',
+        color: 'base.500',
         _hover: {
-          color: 'base.550',
+          color: 'base.600',
         },
         _active: {
+          color: 'base.700',
+        },
+        _dark: {
           color: 'base.500',
+          _hover: {
+            color: 'base.400',
+          },
+          _active: {
+            color: 'base.300',
+          },
         },
         ...sx,
       }}