Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: Minor updates to the visual look of the nodes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
View File

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

2
invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
View File

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

4
invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
View File

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

2
invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx
View File

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

4
invokeai/frontend/web/src/theme/theme.ts
View File

@ -13,13 +13,13 @@ import { popoverTheme } from './components/popover';
import { progressTheme } from './components/progress'; import { progressTheme } from './components/progress';
import { no_scrollbar } from './components/scrollbar'; import { no_scrollbar } from './components/scrollbar';
import { selectTheme } from './components/select'; import { selectTheme } from './components/select';
import { skeletonTheme } from './components/skeleton';
import { sliderTheme } from './components/slider'; import { sliderTheme } from './components/slider';
import { switchTheme } from './components/switch'; import { switchTheme } from './components/switch';
import { tabsTheme } from './components/tabs'; import { tabsTheme } from './components/tabs';
import { textTheme } from './components/text'; import { textTheme } from './components/text';
import { textareaTheme } from './components/textarea'; import { textareaTheme } from './components/textarea';
import { tooltipTheme } from './components/tooltip'; import { tooltipTheme } from './components/tooltip';
import { skeletonTheme } from './components/skeleton';
export const theme: ThemeOverride = { export const theme: ThemeOverride = {
config: { 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)', '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)', 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, colors: InvokeAIColors,
components: { components: {