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