From ff74de7a608446cfb8217a4c49ac71d2344725b8 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sun, 16 Jul 2023 00:25:26 +1200
Subject: [PATCH] fix: Minor UI tweak to Control Net enable button

---
 .../ParamControlNetFeatureToggle.tsx          |  3 ++
 .../ControlNet/ParamControlNetCollapse.tsx    | 39 ++++++++++++++-----
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx
index 3a7eea2fbf..8eed90ce16 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetFeatureToggle.tsx
@@ -29,6 +29,9 @@ const ParamControlNetFeatureToggle = () => {
       label="Enable ControlNet"
       isChecked={isEnabled}
       onChange={handleChange}
+      formControlProps={{
+        width: '100%',
+      }}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
index 999bfd0de9..7f62c8b6c8 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
@@ -2,8 +2,8 @@ import { Divider, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIButton from 'common/components/IAIButton';
 import IAICollapse from 'common/components/IAICollapse';
+import IAIIconButton from 'common/components/IAIIconButton';
 import ControlNet from 'features/controlNet/components/ControlNet';
 import ParamControlNetFeatureToggle from 'features/controlNet/components/parameters/ParamControlNetFeatureToggle';
 import {
@@ -16,6 +16,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { map } from 'lodash-es';
 import { Fragment, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FaPlus } from 'react-icons/fa';
 import { useGetControlNetModelsQuery } from 'services/api/endpoints/models';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -66,15 +67,33 @@ const ParamControlNetCollapse = () => {
   return (
     <IAICollapse label="ControlNet" activeLabel={activeLabel}>
       <Flex sx={{ flexDir: 'column', gap: 3 }}>
-        <ParamControlNetFeatureToggle />
-        <IAIButton
-          isDisabled={!firstModel}
-          flexGrow={1}
-          size="sm"
-          onClick={handleClickedAddControlNet}
-        >
-          Add ControlNet
-        </IAIButton>
+        <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>
+          <IAIIconButton
+            tooltip="Add ControlNet"
+            aria-label="Add ControlNet"
+            icon={<FaPlus />}
+            isDisabled={!firstModel}
+            flexGrow={1}
+            size="md"
+            onClick={handleClickedAddControlNet}
+          />
+        </Flex>
         {controlNetsArray.map((c, i) => (
           <Fragment key={c.controlNetId}>
             {i > 0 && <Divider />}