From 4134f1831941f79d4ec9ac8f741e1c6b83afa1ec Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 29 Dec 2023 17:01:07 +1100
Subject: [PATCH] fix(ui): InvEditable, linear field view styling

---
 .../frontend/web/src/common/components/InvButton/theme.ts | 2 +-
 .../web/src/common/components/InvEditable/theme.ts        | 8 ++++++--
 .../flow/nodes/Invocation/fields/LinearViewField.tsx      | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/InvButton/theme.ts b/invokeai/frontend/web/src/common/components/InvButton/theme.ts
index eb1285ea3b..afd9aa4e98 100644
--- a/invokeai/frontend/web/src/common/components/InvButton/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvButton/theme.ts
@@ -54,7 +54,7 @@ const getColors = (
   const bgColorHover = c === 'invokeYellow' ? `${c}.300` : `${c}.300`;
 
   const notSolidFg = {
-    fg: c === 'base' ? 'base.100' : bgColor,
+    fg: c === 'base' ? 'base.300' : bgColor,
     fgHover: c === 'base' ? 'base.50' : bgColorHover,
     fgDisabled: 'base.600',
   };
diff --git a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts b/invokeai/frontend/web/src/common/components/InvEditable/theme.ts
index 15ace5ccbf..406f6a95a9 100644
--- a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvEditable/theme.ts
@@ -8,13 +8,17 @@ const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
 const baseStylePreview = defineStyle({
+  fontSize: 'md',
   borderRadius: 'md',
   py: '1',
   transitionProperty: 'common',
   transitionDuration: 'normal',
+  color: 'base.100'
 });
 
 const baseStyleInput = defineStyle(() => ({
+  color: 'base.100',
+  fontSize: 'md',
   borderRadius: 'md',
   py: '1',
   transitionProperty: 'common',
@@ -23,8 +27,8 @@ const baseStyleInput = defineStyle(() => ({
   _focusVisible: { boxShadow: 'none' },
   _placeholder: { opacity: 0.6 },
   '::selection': {
-    color: 'blue.50',
-    bg: 'blue.400',
+    color: 'blue.900',
+    bg: 'blue.300',
   },
 }));
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
index 56e3046d59..f45e26add2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
@@ -58,7 +58,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
           placement="top"
         >
           <Flex h="full" alignItems="center">
-            <Icon as={FaInfoCircle} />
+            <Icon fontSize="sm" color="base.300" as={FaInfoCircle} />
           </Flex>
         </InvTooltip>
         <InvIconButton