From 45c2ac41d5958d407baa02d5abb71f6faf17c8a3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 2 May 2024 08:32:54 +1000
Subject: [PATCH] feat(ui): processor layout/styling

---
 .../components/ControlAndIPAdapter/ControlAdapter.tsx       | 4 ++--
 .../ControlAdapterProcessorTypeSelect.tsx                   | 2 +-
 .../ControlAndIPAdapter/processors/CannyProcessor.tsx       | 4 ++--
 .../ControlAndIPAdapter/processors/ColorMapProcessor.tsx    | 2 +-
 .../processors/ContentShuffleProcessor.tsx                  | 6 +++---
 .../ControlAndIPAdapter/processors/DWOpenposeProcessor.tsx  | 6 +++---
 .../processors/DepthAnythingProcessor.tsx                   | 2 +-
 .../ControlAndIPAdapter/processors/HedProcessor.tsx         | 2 +-
 .../ControlAndIPAdapter/processors/LineartProcessor.tsx     | 2 +-
 .../processors/MediapipeFaceProcessor.tsx                   | 4 ++--
 .../ControlAndIPAdapter/processors/MidasDepthProcessor.tsx  | 4 ++--
 .../ControlAndIPAdapter/processors/MlsdImageProcessor.tsx   | 4 ++--
 .../ControlAndIPAdapter/processors/PidiProcessor.tsx        | 4 ++--
 .../ControlAndIPAdapter/processors/ProcessorWrapper.tsx     | 2 +-
 14 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
index ecdfa46ef6..986e9a6373 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
@@ -95,13 +95,13 @@ export const ControlAdapter = memo(
           </Flex>
         </Flex>
         {isExpanded && (
-          <>
+          <Flex flexDir="column" gap={3} w="full">
             <ControlAdapterProcessorTypeSelect
               config={controlAdapter.processorConfig}
               onChange={onChangeProcessorConfig}
             />
             <ControlAdapterProcessorConfig config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} />
-          </>
+          </Flex>
         )}
       </Flex>
     );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterProcessorTypeSelect.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterProcessorTypeSelect.tsx
index b6bba6301f..8041f7f6ba 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterProcessorTypeSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterProcessorTypeSelect.tsx
@@ -51,7 +51,7 @@ export const ControlAdapterProcessorTypeSelect = memo(({ config, onChange }: Pro
     <Flex gap={2}>
       <FormControl>
         <InformationalPopover feature="controlNetProcessor">
-          <FormLabel>{t('controlnet.processor')}</FormLabel>
+          <FormLabel m={0}>{t('controlnet.processor')}</FormLabel>
         </InformationalPopover>
         <Combobox value={value} options={options} onChange={_onChange} isSearchable={false} isClearable={false} />
       </FormControl>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/CannyProcessor.tsx
index c4d6031912..999c8c7764 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/CannyProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/CannyProcessor.tsx
@@ -27,7 +27,7 @@ export const CannyProcessor = ({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.lowThreshold')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.lowThreshold')}</FormLabel>
         <CompositeSlider
           value={config.low_threshold}
           onChange={handleLowThresholdChanged}
@@ -44,7 +44,7 @@ export const CannyProcessor = ({ onChange, config }: Props) => {
         />
       </FormControl>
       <FormControl>
-        <FormLabel>{t('controlnet.highThreshold')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.highThreshold')}</FormLabel>
         <CompositeSlider
           value={config.high_threshold}
           onChange={handleHighThresholdChanged}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ColorMapProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ColorMapProcessor.tsx
index 90c88a071b..bf2d0d5d6d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ColorMapProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ColorMapProcessor.tsx
@@ -21,7 +21,7 @@ export const ColorMapProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.colorMapTileSize')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.colorMapTileSize')}</FormLabel>
         <CompositeSlider
           value={config.color_map_tile_size}
           defaultValue={DEFAULTS.color_map_tile_size}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ContentShuffleProcessor.tsx
index 9e27d7052a..041ab0ac9a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ContentShuffleProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ContentShuffleProcessor.tsx
@@ -37,7 +37,7 @@ export const ContentShuffleProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.w')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.w')}</FormLabel>
         <CompositeSlider
           value={config.w}
           defaultValue={DEFAULTS.w}
@@ -49,7 +49,7 @@ export const ContentShuffleProcessor = memo(({ onChange, config }: Props) => {
         <CompositeNumberInput value={config.w} defaultValue={DEFAULTS.w} onChange={handleWChanged} min={0} max={4096} />
       </FormControl>
       <FormControl>
-        <FormLabel>{t('controlnet.h')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.h')}</FormLabel>
         <CompositeSlider
           value={config.h}
           defaultValue={DEFAULTS.h}
@@ -61,7 +61,7 @@ export const ContentShuffleProcessor = memo(({ onChange, config }: Props) => {
         <CompositeNumberInput value={config.h} defaultValue={DEFAULTS.h} onChange={handleHChanged} min={0} max={4096} />
       </FormControl>
       <FormControl>
-        <FormLabel>{t('controlnet.f')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.f')}</FormLabel>
         <CompositeSlider
           value={config.f}
           defaultValue={DEFAULTS.f}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DWOpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DWOpenposeProcessor.tsx
index 5f21b4b8f6..70d608f7a9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DWOpenposeProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DWOpenposeProcessor.tsx
@@ -39,15 +39,15 @@ export const DWOpenposeProcessor = memo(({ onChange, config }: Props) => {
     <ProcessorWrapper>
       <Flex sx={{ flexDir: 'row', gap: 6 }}>
         <FormControl w="max-content">
-          <FormLabel>{t('controlnet.body')}</FormLabel>
+          <FormLabel m={0}>{t('controlnet.body')}</FormLabel>
           <Switch defaultChecked={DEFAULTS.draw_body} isChecked={config.draw_body} onChange={handleDrawBodyChanged} />
         </FormControl>
         <FormControl w="max-content">
-          <FormLabel>{t('controlnet.face')}</FormLabel>
+          <FormLabel m={0}>{t('controlnet.face')}</FormLabel>
           <Switch defaultChecked={DEFAULTS.draw_face} isChecked={config.draw_face} onChange={handleDrawFaceChanged} />
         </FormControl>
         <FormControl w="max-content">
-          <FormLabel>{t('controlnet.hands')}</FormLabel>
+          <FormLabel m={0}>{t('controlnet.hands')}</FormLabel>
           <Switch
             defaultChecked={DEFAULTS.draw_hands}
             isChecked={config.draw_hands}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx
index b56c331741..d2e14a17f9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx
@@ -37,7 +37,7 @@ export const DepthAnythingProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.modelSize')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.modelSize')}</FormLabel>
         <Combobox
           value={value}
           defaultInputValue={DEFAULTS.model_size}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/HedProcessor.tsx
index 83cd015fe4..1ca75eae2f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/HedProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/HedProcessor.tsx
@@ -22,7 +22,7 @@ export const HedProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.scribble')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.scribble')}</FormLabel>
         <Switch isChecked={config.scribble} onChange={handleScribbleChanged} />
       </FormControl>
     </ProcessorWrapper>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/LineartProcessor.tsx
index d882543af4..aeb4121a36 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/LineartProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/LineartProcessor.tsx
@@ -22,7 +22,7 @@ export const LineartProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.coarse')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.coarse')}</FormLabel>
         <Switch isChecked={config.coarse} onChange={handleCoarseChanged} />
       </FormControl>
     </ProcessorWrapper>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MediapipeFaceProcessor.tsx
index a3c2936916..72f0d52dc5 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MediapipeFaceProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MediapipeFaceProcessor.tsx
@@ -29,7 +29,7 @@ export const MediapipeFaceProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.maxFaces')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.maxFaces')}</FormLabel>
         <CompositeSlider
           value={config.max_faces}
           onChange={handleMaxFacesChanged}
@@ -47,7 +47,7 @@ export const MediapipeFaceProcessor = memo(({ onChange, config }: Props) => {
         />
       </FormControl>
       <FormControl>
-        <FormLabel>{t('controlnet.minConfidence')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.minConfidence')}</FormLabel>
         <CompositeSlider
           value={config.min_confidence}
           onChange={handleMinConfidenceChanged}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MidasDepthProcessor.tsx
index f12619caac..9078d14a53 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MidasDepthProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MidasDepthProcessor.tsx
@@ -30,7 +30,7 @@ export const MidasDepthProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.amult')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.amult')}</FormLabel>
         <CompositeSlider
           value={config.a_mult}
           onChange={handleAMultChanged}
@@ -50,7 +50,7 @@ export const MidasDepthProcessor = memo(({ onChange, config }: Props) => {
         />
       </FormControl>
       <FormControl>
-        <FormLabel>{t('controlnet.bgth')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.bgth')}</FormLabel>
         <CompositeSlider
           value={config.bg_th}
           onChange={handleBgThChanged}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MlsdImageProcessor.tsx
index a0e02ef17a..5fc0c21ecd 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MlsdImageProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/MlsdImageProcessor.tsx
@@ -30,7 +30,7 @@ export const MlsdImageProcessor = memo(({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.w')} </FormLabel>
+        <FormLabel m={0}>{t('controlnet.w')} </FormLabel>
         <CompositeSlider
           value={config.thr_d}
           onChange={handleThrDChanged}
@@ -50,7 +50,7 @@ export const MlsdImageProcessor = memo(({ onChange, config }: Props) => {
         />
       </FormControl>
       <FormControl>
-        <FormLabel>{t('controlnet.h')} </FormLabel>
+        <FormLabel m={0}>{t('controlnet.h')} </FormLabel>
         <CompositeSlider
           value={config.thr_v}
           onChange={handleThrVChanged}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/PidiProcessor.tsx
index 4885d16e6f..e7d559a1b4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/PidiProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/PidiProcessor.tsx
@@ -29,11 +29,11 @@ export const PidiProcessor = ({ onChange, config }: Props) => {
   return (
     <ProcessorWrapper>
       <FormControl>
-        <FormLabel>{t('controlnet.scribble')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.scribble')}</FormLabel>
         <Switch isChecked={config.scribble} onChange={handleScribbleChanged} />
       </FormControl>
       <FormControl>
-        <FormLabel>{t('controlnet.safe')}</FormLabel>
+        <FormLabel m={0}>{t('controlnet.safe')}</FormLabel>
         <Switch isChecked={config.safe} onChange={handleSafeChanged} />
       </FormControl>
     </ProcessorWrapper>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ProcessorWrapper.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ProcessorWrapper.tsx
index 0b99887b53..2b2468703b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ProcessorWrapper.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/ProcessorWrapper.tsx
@@ -6,7 +6,7 @@ type Props = PropsWithChildren;
 
 const ProcessorWrapper = (props: Props) => {
   return (
-    <Flex flexDir="column" gap={4}>
+    <Flex flexDir="column" gap={3}>
       {props.children}
     </Flex>
   );