fix(ui): fix IAICollapse styling

invokeai/frontend/web/src/common/components/IAICollapse.tsx

@@ -34,14 +34,10 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
           gap: 2,
           borderTopRadius: 'base',
           borderBottomRadius: isOpen ? 0 : 'base',
-          bg: isOpen
-            ? mode('base.200', 'base.750')(colorMode)
-            : mode('base.150', 'base.800')(colorMode),
+          bg: mode('base.250', 'base.750')(colorMode),
           color: mode('base.900', 'base.100')(colorMode),
           _hover: {
-            bg: isOpen
-              ? mode('base.250', 'base.700')(colorMode)
-              : mode('base.200', 'base.750')(colorMode),
+            bg: mode('base.300', 'base.700')(colorMode),
           },
           fontSize: 'sm',
           fontWeight: 600,
@@ -90,9 +86,10 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
       <Collapse in={isOpen} animateOpacity style={{ overflow: 'unset' }}>
         <Box
           sx={{
-            p: 4,
+            p: 2,
+            pt: 3,
             borderBottomRadius: 'base',
-            bg: 'base.100',
+            bg: 'base.150',
             _dark: {
               bg: 'base.800',
             },

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -126,7 +126,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     ? {}
     : {
         cursor: 'pointer',
-        bg: mode('base.200', 'base.800')(colorMode),
+        bg: mode('base.200', 'base.700')(colorMode),
         _hover: {
           bg: mode('base.300', 'base.650')(colorMode),
           color: mode('base.500', 'base.300')(colorMode),

invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx

@@ -80,9 +80,13 @@ const ControlNet = (props: ControlNetProps) => {
       sx={{
         flexDir: 'column',
         gap: 3,
-        p: 3,
+        p: 2,
         borderRadius: 'base',
         position: 'relative',
+        bg: 'base.250',
+        _dark: {
+          bg: 'base.750',
+        },
       }}
     >
       <Flex sx={{ gap: 2, alignItems: 'center' }}>
@@ -190,7 +194,7 @@ const ControlNet = (props: ControlNetProps) => {
                 aspectRatio: '1/1',
               }}
             >
-              <ControlNetImagePreview controlNet={controlNet} height={28} />
+              <ControlNetImagePreview controlNet={controlNet} isSmall />
             </Flex>
           )}
         </Flex>
@@ -203,7 +207,7 @@ const ControlNet = (props: ControlNetProps) => {
 
       {isExpanded && (
         <>
-          <ControlNetImagePreview controlNet={controlNet} height="392px" />
+          <ControlNetImagePreview controlNet={controlNet} />
           <ParamControlNetShouldAutoConfig controlNet={controlNet} />
           <ControlNetProcessorComponent controlNet={controlNet} />
         </>

invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx

@@ -1,14 +1,14 @@
-import { Box, Flex, Spinner, SystemStyleObject } from '@chakra-ui/react';
+import { Box, Flex, Spinner } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
-import {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'features/dnd/types';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDndImage from 'common/components/IAIDndImage';
+import {
+  TypesafeDraggableData,
+  TypesafeDroppableData,
+} from 'features/dnd/types';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { FaUndo } from 'react-icons/fa';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
@@ -21,7 +21,7 @@ import {
 
 type Props = {
   controlNet: ControlNetConfig;
-  height: SystemStyleObject['h'];
+  isSmall?: boolean;
 };
 
 const selector = createSelector(
@@ -36,15 +36,14 @@ const selector = createSelector(
   defaultSelectorOptions
 );
 
-const ControlNetImagePreview = (props: Props) => {
-  const { height } = props;
+const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
   const {
     controlImage: controlImageName,
     processedControlImage: processedControlImageName,
     processorType,
     isEnabled,
     controlNetId,
-  } = props.controlNet;
+  } = controlNet;
 
   const dispatch = useAppDispatch();
 
@@ -109,7 +108,7 @@ const ControlNetImagePreview = (props: Props) => {
       sx={{
         position: 'relative',
         w: 'full',
-        h: height,
+        h: isSmall ? 28 : 366, // magic no touch
         alignItems: 'center',
         justifyContent: 'center',
         pointerEvents: isEnabled ? 'auto' : 'none',

invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx

@@ -69,31 +69,29 @@ const ParamControlNetCollapse = () => {
 
   return (
     <IAICollapse label="ControlNet" activeLabel={activeLabel}>
-      <Flex sx={{ flexDir: 'column', gap: 3 }}>
-        <Flex gap={2} alignItems="center">
-          <Flex
-            sx={{
-              flexDirection: 'column',
-              w: '100%',
-              gap: 2,
-              px: 4,
-              py: 2,
-              borderRadius: 4,
-              bg: 'base.200',
-              _dark: {
-                bg: 'base.850',
-              },
-            }}
-          >
-            <ParamControlNetFeatureToggle />
-          </Flex>
+      <Flex sx={{ flexDir: 'column', gap: 2 }}>
+        <Flex
+          sx={{
+            w: '100%',
+            gap: 2,
+            p: 2,
+            ps: 3,
+            borderRadius: 'base',
+            alignItems: 'center',
+            bg: 'base.250',
+            _dark: {
+              bg: 'base.750',
+            },
+          }}
+        >
+          <ParamControlNetFeatureToggle />
           <IAIIconButton
             tooltip="Add ControlNet"
             aria-label="Add ControlNet"
             icon={<FaPlus />}
             isDisabled={!firstModel}
             flexGrow={1}
-            size="md"
+            size="sm"
             onClick={handleClickedAddControlNet}
           />
         </Flex>