1
- import { Box , Button , Flex , Grid , Heading , Icon , Text } from '@invoke-ai/ui-library' ;
1
+ import { Button , Flex , Grid , Heading , Icon , Text } from '@invoke-ai/ui-library' ;
2
2
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent' ;
3
3
import { useStarterBundleInstall } from 'features/modelManagerV2/hooks/useStarterBundleInstall' ;
4
4
import { setInstallModelsTabByName } from 'features/modelManagerV2/store/installModelsStore' ;
@@ -63,20 +63,14 @@ export const LaunchpadForm = memo(() => {
63
63
< ScrollableContent >
64
64
< Flex flexDir = "column" gap = { 6 } p = { 3 } >
65
65
{ /* Welcome Section */ }
66
- < Box >
67
- < Heading size = "md" mb = { 1 } >
68
- { t ( 'modelManager.launchpad.welcome' ) }
69
- </ Heading >
70
- < Text color = "base.300" fontSize = "sm" >
71
- { t ( 'modelManager.launchpad.description' ) }
72
- </ Text >
73
- </ Box >
66
+ < Flex flexDir = "column" gap = { 2 } alignItems = "flex-start" >
67
+ < Heading size = "md" > { t ( 'modelManager.launchpad.welcome' ) } </ Heading >
68
+ < Text color = "base.300" > { t ( 'modelManager.launchpad.description' ) } </ Text >
69
+ </ Flex >
74
70
{ /* Manual Installation Options */ }
75
- < Box >
76
- < Heading size = "sm" mb = { 2 } >
77
- { t ( 'modelManager.launchpad.manualInstall' ) }
78
- </ Heading >
79
- < Grid templateColumns = "repeat(auto-fit, minmax(280px, 1fr))" gap = { 3 } >
71
+ < Flex flexDir = "column" gap = { 2 } alignItems = "flex-start" >
72
+ < Heading size = "sm" > { t ( 'modelManager.launchpad.manualInstall' ) } </ Heading >
73
+ < Grid templateColumns = "repeat(auto-fit, minmax(280px, 1fr))" gap = { 3 } w = "full" >
80
74
< Button
81
75
onClick = { navigateToUrlTab }
82
76
variant = "outline"
@@ -92,7 +86,7 @@ export const LaunchpadForm = memo(() => {
92
86
{ t ( 'modelManager.urlOrLocalPath' ) }
93
87
</ Heading >
94
88
</ Flex >
95
- < Text fontSize = "sm" lineHeight = "1.4" flex = "1" whiteSpace = "normal" wordBreak = "break-word" >
89
+ < Text lineHeight = "1.4" flex = "1" whiteSpace = "normal" wordBreak = "break-word" >
96
90
{ t ( 'modelManager.launchpad.urlDescription' ) }
97
91
</ Text >
98
92
</ Button >
@@ -149,53 +143,34 @@ export const LaunchpadForm = memo(() => {
149
143
</ Text >
150
144
</ Button >
151
145
</ Grid >
152
- </ Box >
146
+ </ Flex >
153
147
{ /* Recommended Section */ }
154
- < Box >
155
- < Heading size = "sm" mb = { 2 } >
156
- { t ( 'modelManager.launchpad.recommendedModels' ) }
157
- </ Heading >
158
- < Flex flexDir = "column" gap = { 2 } >
159
- { /* Starter Model Bundles - More Prominent */ }
160
- < Box >
161
- < Heading size = "xs" color = "base.100" mb = { 1 } >
162
- { t ( 'modelManager.launchpad.quickStart' ) }
163
- </ Heading >
164
- < Text fontSize = "xs" color = "base.300" mb = { 2 } >
165
- { t ( 'modelManager.launchpad.bundleDescription' ) }
166
- </ Text >
167
- < Grid templateColumns = "repeat(auto-fit, minmax(180px, 1fr))" gap = { 2 } >
168
- < Button onClick = { handleSD15BundleClick } variant = "outline" p = { 6 } >
169
- { t ( 'modelManager.launchpad.stableDiffusion15' ) }
170
- </ Button >
171
- < Button onClick = { handleSDXLBundleClick } variant = "outline" p = { 6 } >
172
- { t ( 'modelManager.launchpad.sdxl' ) }
173
- </ Button >
174
- < Button onClick = { handleFluxBundleClick } variant = "outline" p = { 6 } >
175
- { t ( 'modelManager.launchpad.fluxDev' ) }
176
- </ Button >
177
- </ Grid >
178
- </ Box >
179
- { /* Browse All - Simple Link */ }
180
- < Box pt = { 1 } borderTop = "1px solid" borderColor = "base.700" >
181
- < Text fontSize = "xs" color = "base.400" mb = { 1 } >
182
- { t ( 'modelManager.launchpad.browseAll' ) }
183
- </ Text >
184
- < Button
185
- onClick = { navigateToStarterModelsTab }
186
- variant = "link"
187
- color = "invokeBlue.300"
188
- fontSize = "sm"
189
- fontWeight = "medium"
190
- p = { 0 }
191
- h = "auto"
192
- leftIcon = { < PiStarBold size = { 16 } /> }
193
- >
194
- { t ( 'modelManager.launchpad.exploreStarter' ) }
195
- </ Button >
196
- </ Box >
197
- </ Flex >
198
- </ Box >
148
+ < Flex flexDir = "column" gap = { 2 } alignItems = "flex-start" >
149
+ < Heading size = "sm" > { t ( 'modelManager.launchpad.recommendedModels' ) } </ Heading >
150
+ { /* Starter Model Bundles - More Prominent */ }
151
+ < Text color = "base.300" > { t ( 'modelManager.launchpad.bundleDescription' ) } </ Text >
152
+ < Grid templateColumns = "repeat(auto-fit, minmax(180px, 1fr))" gap = { 2 } w = "full" >
153
+ < Button onClick = { handleSD15BundleClick } variant = "outline" p = { 6 } >
154
+ { t ( 'modelManager.launchpad.stableDiffusion15' ) }
155
+ </ Button >
156
+ < Button onClick = { handleSDXLBundleClick } variant = "outline" p = { 6 } >
157
+ { t ( 'modelManager.launchpad.sdxl' ) }
158
+ </ Button >
159
+ < Button onClick = { handleFluxBundleClick } variant = "outline" p = { 6 } >
160
+ { t ( 'modelManager.launchpad.fluxDev' ) }
161
+ </ Button >
162
+ </ Grid >
163
+ { /* Browse All - Simple Link */ }
164
+ < Button
165
+ onClick = { navigateToStarterModelsTab }
166
+ variant = "link"
167
+ size = "sm"
168
+ leftIcon = { < PiStarBold /> }
169
+ colorScheme = "invokeBlue"
170
+ >
171
+ { t ( 'modelManager.launchpad.exploreStarter' ) }
172
+ </ Button >
173
+ </ Flex >
199
174
</ Flex >
200
175
</ ScrollableContent >
201
176
</ Flex >
0 commit comments