github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make main panel styling and title consistent

Browse Source
This commit is contained in:
psychedelicious
2025-06-06 20:35:14 +10:00
parent c316f07fb2
commit ac206f4767
6 changed files with 41 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable i18next/no-literal-string */
import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
import { Button, Divider, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { InitialStateAddAStyleReference } from 'features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference';
import { InitialStateCardGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateCardGridItem';
@@ -17,33 +17,39 @@ export const InitialState = memo(() => {
}, [dispatch]);
return (
<Flex flexDir="column" h="full" justifyContent="center" mx={16}>
<Heading mb={4}>Choose a starting method.</Heading>
<Text fontSize="md" fontStyle="italic" mb={6}>
Drag an image onto a card or click the upload icon.
</Text>
<Flex flexDir="column" h="full" w="full" gap={2}>
<Flex px={2} alignItems="center" minH="24px">
<Heading size="sm">Get Started</Heading>
</Flex>
<Divider />
<Flex flexDir="column" h="full" justifyContent="center" mx={16}>
<Heading mb={4}>Choose a starting method.</Heading>
<Text fontSize="md" fontStyle="italic" mb={6}>
Drag an image onto a card or click the upload icon.
</Text>
<Grid gridTemplateColumns="1fr 1fr" gridTemplateRows="1fr 1fr" gap={4}>
<InitialStateCardGridItem>
<InitialStateGenerateFromText />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateAddAStyleReference />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateUseALayoutImageCard />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateEditImageCard />
</InitialStateCardGridItem>
</Grid>
<Grid gridTemplateColumns="1fr 1fr" gridTemplateRows="1fr 1fr" gap={4}>
<InitialStateCardGridItem>
<InitialStateGenerateFromText />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateAddAStyleReference />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateUseALayoutImageCard />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateEditImageCard />
</InitialStateCardGridItem>
</Grid>
<Text fontSize="md" color="base.300" alignSelf="center" mt={6}>
or{' '}
<Button variant="link" onClick={newCanvasSession}>
start from a blank canvas.
</Button>
</Text>
<Text fontSize="md" color="base.300" alignSelf="center" mt={6}>
or{' '}
<Button variant="link" onClick={newCanvasSession}>
start from a blank canvas.
</Button>
</Text>
</Flex>
</Flex>
);
});

6
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable i18next/no-literal-string */
import { Divider, Flex, FormControl, FormLabel, Spacer, Switch, Text } from '@invoke-ai/ui-library';
import { Divider, Flex, FormControl, FormLabel, Heading, Spacer, Switch } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
import { StartOverButton } from 'features/controlLayers/components/StartOverButton';
@@ -19,9 +19,7 @@ export const StagingAreaHeader = memo(() => {
return (
<Flex gap={2} w="full" alignItems="center" px={2}>
<Text fontSize="lg" fontWeight="bold">
Staging Area
</Text>
<Heading size="sm">Review Session</Heading>
<Spacer />
<FormControl w="min-content" me={2}>
<FormLabel m={0}>Auto-switch</FormLabel>