From ac206f476778a19898bc2a48fc4137cfd8cdd70b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 6 Jun 2025 20:35:14 +1000
Subject: [PATCH] feat(ui): make main panel styling and title consistent
---
.../AdvancedSession/AdvancedSession.tsx | 3 +-
.../components/SimpleSession/InitialState.tsx | 58 ++++++++++---------
.../SimpleSession/StagingAreaHeader.tsx | 6 +-
.../components/Tool/ToolBrushWidth.tsx | 4 --
.../components/Tool/ToolEraserWidth.tsx | 4 --
.../components/Toolbar/CanvasToolbar.tsx | 9 +--
6 files changed, 41 insertions(+), 43 deletions(-)
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx
index 0155f52c06..88fc045919 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx
@@ -1,6 +1,6 @@
/* eslint-disable i18next/no-literal-string */
import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { ContextMenu, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { ContextMenu, Divider, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
@@ -77,6 +77,7 @@ export const AdvancedSession = memo(({ id }: { id: string | null }) => {
+
renderMenu={renderMenu} withLongPress={false}>
{(ref) => (
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx
index 31dc291cda..25bace52b6 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx
@@ -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 (
-
- Choose a starting method.
-
- Drag an image onto a card or click the upload icon.
-
+
+
+ Get Started
+
+
+
+ Choose a starting method.
+
+ Drag an image onto a card or click the upload icon.
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- or{' '}
-
-
+
+ or{' '}
+
+
+
);
});
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
index bb50398eb9..b048d7dd59 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
@@ -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 (
-
- Staging Area
-
+ Review Session
Auto-switch
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx
index 6d14493d50..a1d827ca36 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx
@@ -1,7 +1,6 @@
import {
CompositeSlider,
FormControl,
- FormLabel,
IconButton,
NumberInput,
NumberInputField,
@@ -20,7 +19,6 @@ import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/us
import { clamp } from 'lodash-es';
import type { KeyboardEvent } from 'react';
import { memo, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
import { PiCaretDownBold } from 'react-icons/pi';
const selectBrushWidth = createSelector(selectCanvasSettingsSlice, (settings) => settings.brushWidth);
@@ -67,7 +65,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
export const ToolBrushWidth = memo(() => {
const dispatch = useAppDispatch();
- const { t } = useTranslation();
const isSelected = useToolIsSelected('brush');
const width = useAppSelector(selectBrushWidth);
const [localValue, setLocalValue] = useState(width);
@@ -145,7 +142,6 @@ export const ToolBrushWidth = memo(() => {
return (
- {t('controlLayers.width')}
settings.eraserWidth);
@@ -70,7 +68,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
export const ToolEraserWidth = memo(() => {
const dispatch = useAppDispatch();
- const { t } = useTranslation();
const isSelected = useToolIsSelected('eraser');
const width = useAppSelector(selectEraserWidth);
const [localValue, setLocalValue] = useState(width);
@@ -148,7 +145,6 @@ export const ToolEraserWidth = memo(() => {
return (
- {t('controlLayers.width')}
{
useCanvasFilterHotkey();
return (
-
+
+ Canvas
+
-
-
+