From a08189d45702fe1cf5f6919448f6f9a7b59df037 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 26 Apr 2023 22:53:40 +1200
Subject: [PATCH] ui: Match styling of img2img to the rest of the accordions

---
 .../ImageToImage/ImageToImageToggle.tsx       | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle.tsx
index dbaaf327c4..07d100be96 100644
--- a/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle.tsx
@@ -1,3 +1,4 @@
+import { Flex } from '@chakra-ui/react';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISwitch from 'common/components/IAISwitch';
@@ -18,11 +19,18 @@ export default function ImageToImageToggle() {
     dispatch(isImageToImageEnabledChanged(e.target.checked));
 
   return (
-    <IAISwitch
-      label={t('common.img2img')}
-      isChecked={isImageToImageEnabled}
-      width="auto"
-      onChange={handleChange}
-    />
+    <Flex background="base.800" py={1.5} px={4} borderRadius={4}>
+      <IAISwitch
+        label={t('common.img2img')}
+        isChecked={isImageToImageEnabled}
+        width="full"
+        onChange={handleChange}
+        justifyContent="space-between"
+        formLabelProps={{
+          fontWeight: 'bold',
+          color: 'base.200',
+        }}
+      />
+    </Flex>
   );
 }