1
- import { Flex , Heading , Icon , Image , Link , Text } from '@invoke-ai/ui-library' ;
1
+ import { Flex , Heading , Icon , Link , Text } from '@invoke-ai/ui-library' ;
2
2
import { useAppDispatch } from 'app/store/storeHooks' ;
3
3
import { LaunchpadButton } from 'features/controlLayers/components/SimpleSession/LaunchpadButton' ;
4
4
import { useIsWorkflowUntouched } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher' ;
5
5
import { useWorkflowLibraryModal } from 'features/nodes/store/workflowLibraryModal' ;
6
6
import { workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice' ;
7
- import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg' ;
8
7
import { useCallback } from 'react' ;
9
8
import { Trans , useTranslation } from 'react-i18next' ;
10
9
import { PiFolderOpenBold , PiPlusBold } from 'react-icons/pi' ;
11
10
12
11
export const EmptyState = ( ) => {
13
12
const isWorkflowUntouched = useIsWorkflowUntouched ( ) ;
14
13
15
- return (
16
- < Flex w = "full" h = "full" userSelect = "none" justifyContent = "center" >
17
- < Flex
18
- alignItems = "center"
19
- justifyContent = "center"
20
- borderRadius = "base"
21
- flexDir = "column"
22
- gap = { 5 }
23
- maxW = "400px"
24
- pt = { 24 }
25
- px = { 4 }
26
- >
27
- < Image
28
- src = { InvokeLogoSVG }
29
- alt = "invoke-ai-logo"
30
- opacity = { 0.2 }
31
- mixBlendMode = "overlay"
32
- w = { 16 }
33
- h = { 16 }
34
- minW = { 16 }
35
- minH = { 16 }
36
- userSelect = "none"
37
- />
38
- { isWorkflowUntouched ? < CleanEditorContent /> : < DirtyEditorContent /> }
39
- </ Flex >
40
- </ Flex >
41
- ) ;
14
+ if ( isWorkflowUntouched ) {
15
+ return < CleanEditorContent /> ;
16
+ }
17
+
18
+ return < DirtyEditorContent /> ;
42
19
} ;
43
20
44
21
const CleanEditorContent = ( ) => {
@@ -51,31 +28,31 @@ const CleanEditorContent = () => {
51
28
} , [ dispatch ] ) ;
52
29
53
30
return (
54
- < >
55
- < Flex flexDir = "column" gap = { 4 } w = "full" >
56
- < LaunchpadButton onClick = { onClickNewWorkflow } gap = { 4 } >
31
+ < Flex flexDir = "column" h = "full" w = "full" alignItems = "center" >
32
+ < Flex flexDir = "column" gap = { 8 } w = "full" pt = "20vh" px = { 8 } maxW = { 768 } >
33
+ < LaunchpadButton onClick = { onClickNewWorkflow } gap = { 8 } >
57
34
< Icon as = { PiPlusBold } boxSize = { 6 } color = "base.500" />
58
- < Flex flexDir = "column" alignItems = "flex-start" gap = { 1 } >
35
+ < Flex flexDir = "column" alignItems = "flex-start" gap = { 2 } >
59
36
< Heading size = "sm" > { t ( 'nodes.newWorkflow' ) } </ Heading >
60
37
< Text color = "base.300" fontSize = "sm" >
61
38
Create a new workflow from scratch
62
39
</ Text >
63
40
</ Flex >
64
41
</ LaunchpadButton >
65
- < LaunchpadButton onClick = { workflowLibraryModal . open } gap = { 4 } >
42
+ < LaunchpadButton onClick = { workflowLibraryModal . open } gap = { 8 } >
66
43
< Icon as = { PiFolderOpenBold } boxSize = { 6 } color = "base.500" />
67
- < Flex flexDir = "column" alignItems = "flex-start" gap = { 1 } >
44
+ < Flex flexDir = "column" alignItems = "flex-start" gap = { 2 } >
68
45
< Heading size = "sm" > { t ( 'nodes.loadWorkflow' ) } </ Heading >
69
46
< Text color = "base.300" fontSize = "sm" >
70
47
Browse and load existing workflows
71
48
</ Text >
72
49
</ Flex >
73
50
</ LaunchpadButton >
51
+ < Text textAlign = "center" fontSize = "sm" color = "base.400" >
52
+ < Trans i18nKey = "nodes.workflowHelpText" size = "sm" components = { workflowHelpTextComponents } />
53
+ </ Text >
74
54
</ Flex >
75
- < Text textAlign = "center" fontSize = "sm" color = "base.400" mt = { 4 } >
76
- < Trans i18nKey = "nodes.workflowHelpText" size = "sm" components = { workflowHelpTextComponents } />
77
- </ Text >
78
- </ >
55
+ </ Flex >
79
56
) ;
80
57
} ;
81
58
@@ -88,29 +65,29 @@ const DirtyEditorContent = () => {
88
65
} , [ dispatch ] ) ;
89
66
90
67
return (
91
- < >
92
- < Text textAlign = "center" fontSize = "md" mb = { 4 } >
93
- { t ( 'nodes.noFieldsViewMode' ) }
94
- </ Text >
95
- < Flex flexDir = "column" gap = { 4 } w = "full" >
96
- < LaunchpadButton onClick = { onClick } gap = { 4 } >
68
+ < Flex flexDir = "column" h = "full" w = "full" alignItems = "center" >
69
+ < Flex flexDir = "column" gap = { 8 } w = "full" pt = "20vh" px = { 8 } maxW = { 768 } >
70
+ < Text textAlign = "center" fontSize = "sm" color = "base.300" >
71
+ { t ( 'nodes.noFieldsViewMode' ) }
72
+ </ Text >
73
+ < LaunchpadButton onClick = { onClick } gap = { 8 } >
97
74
< Icon as = { PiPlusBold } boxSize = { 6 } color = "base.500" />
98
- < Flex flexDir = "column" alignItems = "flex-start" gap = { 1 } >
75
+ < Flex flexDir = "column" alignItems = "flex-start" gap = { 2 } >
99
76
< Heading size = "sm" > { t ( 'nodes.edit' ) } </ Heading >
100
77
< Text color = "base.300" fontSize = "sm" >
101
78
Switch to edit mode to build workflows
102
79
</ Text >
103
80
</ Flex >
104
81
</ LaunchpadButton >
105
82
</ Flex >
106
- </ >
83
+ </ Flex >
107
84
) ;
108
85
} ;
109
86
110
87
const workflowHelpTextComponents = {
111
88
LinkComponent : (
112
89
< Link
113
- fontSize = "md "
90
+ fontSize = "sm "
114
91
fontWeight = "semibold"
115
92
href = "https://support.invoke.ai/support/solutions/articles/151000159663-example-workflows"
116
93
target = "_blank"
0 commit comments