Skip to content

Commit e9c3787

Browse files
psychedeliciouspsychedelicious
committed
feat(ui): make main panel styling and title consistent
1 parent 0fefdcf commit e9c3787

File tree

6 files changed

+41
-43
lines changed

6 files changed

+41
-43
lines changed

‎invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable i18next/no-literal-string */
22
import type { SystemStyleObject } from '@invoke-ai/ui-library';
3-
import { ContextMenu, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
3+
import { ContextMenu, Divider, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
44
import { useAppSelector } from 'app/store/storeHooks';
55
import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
66
import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
@@ -77,6 +77,7 @@ export const AdvancedSession = memo(({ id }: { id: string | null }) => {
7777
<CanvasManagerProviderGate>
7878
<CanvasToolbar />
7979
</CanvasManagerProviderGate>
80+
<Divider />
8081
<ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
8182
{(ref) => (
8283
<Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>

‎invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable i18next/no-literal-string */
22

3-
import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
3+
import { Button, Divider, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
44
import { useAppDispatch } from 'app/store/storeHooks';
55
import { InitialStateAddAStyleReference } from 'features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference';
66
import { InitialStateCardGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateCardGridItem';
@@ -17,33 +17,39 @@ export const InitialState = memo(() => {
1717
}, [dispatch]);
1818

1919
return (
20-
<Flex flexDir="column" h="full" justifyContent="center" mx={16}>
21-
<Heading mb={4}>Choose a starting method.</Heading>
22-
<Text fontSize="md" fontStyle="italic" mb={6}>
23-
Drag an image onto a card or click the upload icon.
24-
</Text>
20+
<Flex flexDir="column" h="full" w="full" gap={2}>
21+
<Flex px={2} alignItems="center" minH="24px">
22+
<Heading size="sm">Get Started</Heading>
23+
</Flex>
24+
<Divider />
25+
<Flex flexDir="column" h="full" justifyContent="center" mx={16}>
26+
<Heading mb={4}>Choose a starting method.</Heading>
27+
<Text fontSize="md" fontStyle="italic" mb={6}>
28+
Drag an image onto a card or click the upload icon.
29+
</Text>
2530

26-
<Grid gridTemplateColumns="1fr 1fr" gridTemplateRows="1fr 1fr" gap={4}>
27-
<InitialStateCardGridItem>
28-
<InitialStateGenerateFromText />
29-
</InitialStateCardGridItem>
30-
<InitialStateCardGridItem>
31-
<InitialStateAddAStyleReference />
32-
</InitialStateCardGridItem>
33-
<InitialStateCardGridItem>
34-
<InitialStateUseALayoutImageCard />
35-
</InitialStateCardGridItem>
36-
<InitialStateCardGridItem>
37-
<InitialStateEditImageCard />
38-
</InitialStateCardGridItem>
39-
</Grid>
31+
<Grid gridTemplateColumns="1fr 1fr" gridTemplateRows="1fr 1fr" gap={4}>
32+
<InitialStateCardGridItem>
33+
<InitialStateGenerateFromText />
34+
</InitialStateCardGridItem>
35+
<InitialStateCardGridItem>
36+
<InitialStateAddAStyleReference />
37+
</InitialStateCardGridItem>
38+
<InitialStateCardGridItem>
39+
<InitialStateUseALayoutImageCard />
40+
</InitialStateCardGridItem>
41+
<InitialStateCardGridItem>
42+
<InitialStateEditImageCard />
43+
</InitialStateCardGridItem>
44+
</Grid>
4045

41-
<Text fontSize="md" color="base.300" alignSelf="center" mt={6}>
42-
or{' '}
43-
<Button variant="link" onClick={newCanvasSession}>
44-
start from a blank canvas.
45-
</Button>
46-
</Text>
46+
<Text fontSize="md" color="base.300" alignSelf="center" mt={6}>
47+
or{' '}
48+
<Button variant="link" onClick={newCanvasSession}>
49+
start from a blank canvas.
50+
</Button>
51+
</Text>
52+
</Flex>
4753
</Flex>
4854
);
4955
});

‎invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable i18next/no-literal-string */
2-
import { Divider, Flex, FormControl, FormLabel, Spacer, Switch, Text } from '@invoke-ai/ui-library';
2+
import { Divider, Flex, FormControl, FormLabel, Heading, Spacer, Switch } from '@invoke-ai/ui-library';
33
import { useStore } from '@nanostores/react';
44
import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
55
import { StartOverButton } from 'features/controlLayers/components/StartOverButton';
@@ -19,9 +19,7 @@ export const StagingAreaHeader = memo(() => {
1919

2020
return (
2121
<Flex gap={2} w="full" alignItems="center" px={2}>
22-
<Text fontSize="lg" fontWeight="bold">
23-
Staging Area
24-
</Text>
22+
<Heading size="sm">Review Session</Heading>
2523
<Spacer />
2624
<FormControl w="min-content" me={2}>
2725
<FormLabel m={0}>Auto-switch</FormLabel>

‎invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
CompositeSlider,
33
FormControl,
4-
FormLabel,
54
IconButton,
65
NumberInput,
76
NumberInputField,
@@ -20,7 +19,6 @@ import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/us
2019
import { clamp } from 'lodash-es';
2120
import type { KeyboardEvent } from 'react';
2221
import { memo, useCallback, useEffect, useState } from 'react';
23-
import { useTranslation } from 'react-i18next';
2422
import { PiCaretDownBold } from 'react-icons/pi';
2523

2624
const selectBrushWidth = createSelector(selectCanvasSettingsSlice, (settings) => settings.brushWidth);
@@ -67,7 +65,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
6765

6866
export const ToolBrushWidth = memo(() => {
6967
const dispatch = useAppDispatch();
70-
const { t } = useTranslation();
7168
const isSelected = useToolIsSelected('brush');
7269
const width = useAppSelector(selectBrushWidth);
7370
const [localValue, setLocalValue] = useState(width);
@@ -145,7 +142,6 @@ export const ToolBrushWidth = memo(() => {
145142
return (
146143
<Popover>
147144
<FormControl w="min-content" gap={2}>
148-
<FormLabel m={0}>{t('controlLayers.width')}</FormLabel>
149145
<PopoverAnchor>
150146
<NumberInput
151147
variant="outline"

‎invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
CompositeSlider,
33
FormControl,
4-
FormLabel,
54
IconButton,
65
NumberInput,
76
NumberInputField,
@@ -23,7 +22,6 @@ import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/us
2322
import { clamp } from 'lodash-es';
2423
import type { KeyboardEvent } from 'react';
2524
import { memo, useCallback, useEffect, useState } from 'react';
26-
import { useTranslation } from 'react-i18next';
2725
import { PiCaretDownBold } from 'react-icons/pi';
2826

2927
const selectEraserWidth = createSelector(selectCanvasSettingsSlice, (settings) => settings.eraserWidth);
@@ -70,7 +68,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
7068

7169
export const ToolEraserWidth = memo(() => {
7270
const dispatch = useAppDispatch();
73-
const { t } = useTranslation();
7471
const isSelected = useToolIsSelected('eraser');
7572
const width = useAppSelector(selectEraserWidth);
7673
const [localValue, setLocalValue] = useState(width);
@@ -148,7 +145,6 @@ export const ToolEraserWidth = memo(() => {
148145
return (
149146
<Popover>
150147
<FormControl w="min-content" gap={2}>
151-
<FormLabel m={0}>{t('controlLayers.width')}</FormLabel>
152148
<PopoverAnchor>
153149
<NumberInput
154150
variant="outline"

‎invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable i18next/no-literal-string */
2-
import { Divider, Flex, Spacer } from '@invoke-ai/ui-library';
2+
import { Divider, Flex, Heading } from '@invoke-ai/ui-library';
33
import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
44
import { StartOverButton } from 'features/controlLayers/components/StartOverButton';
55
import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
@@ -30,11 +30,12 @@ export const CanvasToolbar = memo(() => {
3030
useCanvasFilterHotkey();
3131

3232
return (
33-
<Flex w="full" gap={2} alignItems="center" pe={2}>
33+
<Flex w="full" gap={2} alignItems="center" px={2}>
34+
<Heading size="sm" me={2}>Canvas</Heading>
35+
<Divider orientation="vertical" />
3436
<ToolColorPicker />
3537
<ToolSettings />
36-
<Spacer />
37-
<Flex alignItems="center" h="full">
38+
<Flex alignItems="center" h="full" flexGrow={1} justifyContent="flex-end">
3839
<CanvasToolbarScale />
3940
<CanvasToolbarResetViewButton />
4041
<CanvasToolbarFitBboxToLayersButton />

0 commit comments

Comments
 (0)