style: Minor updates to the visual look of the nodes

This commit is contained in:
blessedcoolant 2023-07-18 20:35:20 +12:00
parent e1b756658a
commit 4975b1a704
5 changed files with 9 additions and 9 deletions

View File

@ -20,8 +20,8 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
justifyContent: 'space-between',
px: 2,
py: 1,
bg: 'base.300',
_dark: { bg: 'base.700' },
bg: 'base.100',
_dark: { bg: 'base.900' },
}}
>
<Tooltip label={nodeId}>
@ -30,7 +30,7 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
sx={{
fontWeight: 600,
color: 'base.900',
_dark: { color: 'base.100' },
_dark: { color: 'base.200' },
}}
>
{title}

View File

@ -59,7 +59,7 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
flexDirection: 'column',
borderBottomRadius: 'md',
py: 2,
bg: 'base.200',
bg: 'base.150',
_dark: { bg: 'base.800' },
}}
>

View File

@ -1,9 +1,9 @@
import 'reactflow/dist/style.css';
import { Box } from '@chakra-ui/react';
import { ReactFlowProvider } from 'reactflow';
import 'reactflow/dist/style.css';
import { Flow } from './Flow';
import { memo } from 'react';
import { Flow } from './Flow';
const NodeEditor = () => {
return (

View File

@ -1,9 +1,9 @@
import { Box, useToken } from '@chakra-ui/react';
import { NODE_MIN_WIDTH } from 'app/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { PropsWithChildren } from 'react';
import { DRAG_HANDLE_CLASSNAME } from '../hooks/useBuildInvocation';
import { useAppSelector } from 'app/store/storeHooks';
type NodeWrapperProps = PropsWithChildren & {
selected: boolean;

View File

@ -13,13 +13,13 @@ import { popoverTheme } from './components/popover';
import { progressTheme } from './components/progress';
import { no_scrollbar } from './components/scrollbar';
import { selectTheme } from './components/select';
import { skeletonTheme } from './components/skeleton';
import { sliderTheme } from './components/slider';
import { switchTheme } from './components/switch';
import { tabsTheme } from './components/tabs';
import { textTheme } from './components/text';
import { textareaTheme } from './components/textarea';
import { tooltipTheme } from './components/tooltip';
import { skeletonTheme } from './components/skeleton';
export const theme: ThemeOverride = {
config: {
@ -74,7 +74,7 @@ export const theme: ThemeOverride = {
'0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 4px var(--invokeai-colors-accent-400)',
dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-400)',
},
nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-base-500)`,
nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-accent-450)`,
},
colors: InvokeAIColors,
components: {