From ccbbb417f9d956e7e380668cea88a109a7e51f92 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 29 Dec 2023 12:06:01 +1100
Subject: [PATCH] feat(ui): fix control adapters styling

---
 .../src/common/components/InvControl/theme.ts |  3 +-
 .../components/ControlAdapterConfig.tsx       | 43 +++++++++----------
 .../ControlAdapterShouldAutoConfig.tsx        | 11 ++++-
 .../ParamControlAdapterBeginEnd.tsx           |  1 +
 .../parameters/ParamControlAdapterWeight.tsx  |  1 +
 .../processors/common/ProcessorWrapper.tsx    |  2 +-
 6 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/InvControl/theme.ts b/invokeai/frontend/web/src/common/components/InvControl/theme.ts
index 8c8c4ceb9a..037bf06cbc 100644
--- a/invokeai/frontend/web/src/common/components/InvControl/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvControl/theme.ts
@@ -14,8 +14,7 @@ const formBaseStyle = definePartsStyle((props) => {
       display: 'flex',
       flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
       alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center',
-      gap: 4,
-      // h: props.orientation === 'vertical' ? 'unset' : 8,
+      gap: props.orientation === 'vertical' ? 2 : 4,
     },
   };
 });
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
index cc5379b50d..31e1c6378b 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@@ -2,6 +2,7 @@ import { ChevronUpIcon } from '@chakra-ui/icons';
 import { Box, Flex } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
+import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
@@ -29,6 +30,10 @@ import ParamControlAdapterProcessorSelect from './parameters/ParamControlAdapter
 import ParamControlAdapterResizeMode from './parameters/ParamControlAdapterResizeMode';
 import ParamControlAdapterWeight from './parameters/ParamControlAdapterWeight';
 
+const labelProps: InvLabelProps = {
+  flexGrow: 1,
+};
+
 const ControlAdapterConfig = (props: { id: string; number: number }) => {
   const { id, number } = props;
   const controlAdapterType = useControlAdapterType(id);
@@ -66,14 +71,17 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
   return (
     <Flex
       flexDir="column"
-      gap={3}
-      p={2}
+      gap={4}
+      p={4}
       borderRadius="base"
       position="relative"
       bg="base.750"
     >
       <Flex gap={2} alignItems="center" justifyContent="space-between">
-        <InvControl label={t(`controlnet.${controlAdapterType}`, { number })}>
+        <InvControl
+          label={t(`controlnet.${controlAdapterType}`, { number })}
+          labelProps={labelProps}
+        >
           <InvSwitch
             aria-label={t('controlnet.toggleControlNet')}
             isChecked={isEnabled}
@@ -81,7 +89,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
           />
         </InvControl>
       </Flex>
-      <Flex gap={2} alignItems="center">
+      <Flex gap={4} alignItems="center">
         <Box
           minW={0}
           w="full"
@@ -134,18 +142,9 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
         />
       </Flex>
 
-      <Flex w="full" flexDir="column" gap={3}>
+      <Flex w="full" flexDir="column" gap={4}>
         <Flex gap={4} w="full" alignItems="center">
-          <Flex
-            flexDir="column"
-            gap={3}
-            h={28}
-            w="full"
-            paddingInlineStart={1}
-            paddingInlineEnd={isExpanded ? 1 : 0}
-            pb={2}
-            justifyContent="space-between"
-          >
+          <Flex flexDir="column" gap={4} h={32} w="full">
             <ParamControlAdapterWeight id={id} />
             <ParamControlAdapterBeginEnd id={id} />
           </Flex>
@@ -153,23 +152,23 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
             <Flex
               alignItems="center"
               justifyContent="center"
-              h={28}
-              w={28}
+              h={32}
+              w={32}
               aspectRatio="1/1"
             >
               <ControlAdapterImagePreview id={id} isSmall />
             </Flex>
           )}
         </Flex>
-        <Flex gap={2}>
-          <ParamControlAdapterControlMode id={id} />
-          <ParamControlAdapterResizeMode id={id} />
-        </Flex>
-        <ParamControlAdapterProcessorSelect id={id} />
       </Flex>
 
       {isExpanded && (
         <>
+          <Flex gap={2}>
+            <ParamControlAdapterControlMode id={id} />
+            <ParamControlAdapterResizeMode id={id} />
+          </Flex>
+          <ParamControlAdapterProcessorSelect id={id} />
           <ControlAdapterImagePreview id={id} />
           <ControlAdapterShouldAutoConfig id={id} />
           <ControlAdapterProcessorComponent id={id} />
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
index 12c1fa01ae..07a13ba1c5 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx
@@ -1,5 +1,6 @@
 import { useAppDispatch } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
+import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterShouldAutoConfig } from 'features/controlAdapters/hooks/useControlAdapterShouldAutoConfig';
@@ -12,6 +13,10 @@ type Props = {
   id: string;
 };
 
+const labelProps: InvLabelProps = {
+  flexGrow: 1,
+};
+
 const ControlAdapterShouldAutoConfig = ({ id }: Props) => {
   const isEnabled = useControlAdapterIsEnabled(id);
   const shouldAutoConfig = useControlAdapterShouldAutoConfig(id);
@@ -27,7 +32,11 @@ const ControlAdapterShouldAutoConfig = ({ id }: Props) => {
   }
 
   return (
-    <InvControl label={t('controlnet.autoConfigure')} isDisabled={!isEnabled}>
+    <InvControl
+      label={t('controlnet.autoConfigure')}
+      isDisabled={!isEnabled}
+      labelProps={labelProps}
+    >
       <InvSwitch
         isChecked={shouldAutoConfig}
         onChange={handleShouldAutoConfigChanged}
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
index 8b870b891b..e3b002be2a 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx
@@ -64,6 +64,7 @@ export const ParamControlAdapterBeginEnd = memo(({ id }: Props) => {
       isDisabled={!isEnabled}
       label={t('controlnet.beginEndStepPercent')}
       feature="controlNetBeginEnd"
+      orientation="vertical"
     >
       <InvRangeSlider
         aria-label={['Begin Step %', 'End Step %']}
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
index 7263990147..f5fa3e6920 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
@@ -34,6 +34,7 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
       label={t('controlnet.weight')}
       isDisabled={!isEnabled}
       feature="controlNetWeight"
+      orientation="vertical"
     >
       <InvSlider
         value={weight}
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
index 6178b4f1c2..acb364ae91 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
@@ -5,7 +5,7 @@ type Props = PropsWithChildren;
 
 export default function ProcessorWrapper(props: Props) {
   return (
-    <Flex flexDir="column" gap={2} pb={2}>
+    <Flex flexDir="column" gap={4}>
       {props.children}
     </Flex>
   );