Skip to content

Commit b26fb1f

Browse files
feat(ui): simplify markup for install models launchpad form
1 parent 05167df commit b26fb1f

File tree

1 file changed

+36
-61
lines changed
  • invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/LaunchpadForm

1 file changed

+36
-61
lines changed

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/LaunchpadForm/LaunchpadForm.tsx

Lines changed: 36 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
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';
22
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
33
import { useStarterBundleInstall } from 'features/modelManagerV2/hooks/useStarterBundleInstall';
44
import { setInstallModelsTabByName } from 'features/modelManagerV2/store/installModelsStore';
@@ -63,20 +63,14 @@ export const LaunchpadForm = memo(() => {
6363
<ScrollableContent>
6464
<Flex flexDir="column" gap={6} p={3}>
6565
{/* 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>
7470
{/* 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">
8074
<Button
8175
onClick={navigateToUrlTab}
8276
variant="outline"
@@ -92,7 +86,7 @@ export const LaunchpadForm = memo(() => {
9286
{t('modelManager.urlOrLocalPath')}
9387
</Heading>
9488
</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">
9690
{t('modelManager.launchpad.urlDescription')}
9791
</Text>
9892
</Button>
@@ -149,53 +143,34 @@ export const LaunchpadForm = memo(() => {
149143
</Text>
150144
</Button>
151145
</Grid>
152-
</Box>
146+
</Flex>
153147
{/* 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>
199174
</Flex>
200175
</ScrollableContent>
201176
</Flex>

0 commit comments

Comments
 (0)