From 176d41d624466b58d40bd6a3995f5e61caf5146c Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 30 Aug 2023 05:05:54 +1200
Subject: [PATCH] ui: Add SubParametersWrapper

---
 .../ParamCompositingSettingsCollapse.tsx      | 40 ++++---------------
 .../ParamInfillAndScalingCollapse.tsx         | 18 ++++++---
 .../Parameters/SubParametersWrapper.tsx       | 39 ++++++++++++++++++
 3 files changed, 58 insertions(+), 39 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx

diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx
index a13fa01220..c3c978e8a1 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx
@@ -1,7 +1,8 @@
-import { Divider, Flex, Text } from '@chakra-ui/react';
+import { Divider, Flex } from '@chakra-ui/react';
 import IAICollapse from 'common/components/IAICollapse';
-import { PropsWithChildren, memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import SubParametersWrapper from '../../SubParametersWrapper';
 import ParamCanvasCoherenceSteps from './CoherencePass/ParamCanvasCoherenceSteps';
 import ParamCanvasCoherenceStrength from './CoherencePass/ParamCanvasCoherenceStrength';
 import ParamMaskBlur from './MaskAdjustment/ParamMaskBlur';
@@ -13,45 +14,18 @@ const ParamCompositingSettingsCollapse = () => {
   return (
     <IAICollapse label={t('parameters.compositingSettingsHeader')}>
       <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-        <CompositingSettingsWrapper>
-          <Text fontSize="sm" fontWeight="bold">
-            {t('parameters.maskAdjustmentsHeader')}
-          </Text>
+        <SubParametersWrapper label={t('parameters.maskAdjustmentsHeader')}>
           <ParamMaskBlur />
           <ParamMaskBlurMethod />
-        </CompositingSettingsWrapper>
+        </SubParametersWrapper>
         <Divider />
-        <CompositingSettingsWrapper>
-          <Text fontSize="sm" fontWeight="bold">
-            {t('parameters.coherencePassHeader')}
-          </Text>
+        <SubParametersWrapper label={t('parameters.coherencePassHeader')}>
           <ParamCanvasCoherenceSteps />
           <ParamCanvasCoherenceStrength />
-        </CompositingSettingsWrapper>
+        </SubParametersWrapper>
       </Flex>
     </IAICollapse>
   );
 };
 
-const CompositingSettingsWrapper = memo((props: PropsWithChildren) => (
-  <Flex
-    sx={{
-      flexDir: 'column',
-      gap: 2,
-      bg: 'base.100',
-      px: 4,
-      pt: 2,
-      pb: 4,
-      borderRadius: 'base',
-      _dark: {
-        bg: 'base.750',
-      },
-    }}
-  >
-    {props.children}
-  </Flex>
-));
-
-CompositingSettingsWrapper.displayName = 'CompositingSettingsWrapper';
-
 export default memo(ParamCompositingSettingsCollapse);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx
index 2951a7dee3..f2da288e59 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx
@@ -1,8 +1,9 @@
-import { Flex } from '@chakra-ui/react';
+import { Divider, Flex } from '@chakra-ui/react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import IAICollapse from 'common/components/IAICollapse';
+import SubParametersWrapper from '../../SubParametersWrapper';
 import ParamInfillMethod from './ParamInfillMethod';
 import ParamInfillTilesize from './ParamInfillTilesize';
 import ParamScaleBeforeProcessing from './ParamScaleBeforeProcessing';
@@ -15,11 +16,16 @@ const ParamInfillCollapse = () => {
   return (
     <IAICollapse label={t('parameters.infillScalingHeader')}>
       <Flex sx={{ gap: 2, flexDirection: 'column', pb: 2 }}>
-        <ParamInfillMethod />
-        <ParamInfillTilesize />
-        <ParamScaleBeforeProcessing />
-        <ParamScaledWidth />
-        <ParamScaledHeight />
+        <SubParametersWrapper>
+          <ParamInfillMethod />
+          <ParamInfillTilesize />
+        </SubParametersWrapper>
+        <Divider />
+        <SubParametersWrapper>
+          <ParamScaleBeforeProcessing />
+          <ParamScaledWidth />
+          <ParamScaledHeight />
+        </SubParametersWrapper>
       </Flex>
     </IAICollapse>
   );
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx
new file mode 100644
index 0000000000..e03b80bc8f
--- /dev/null
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx
@@ -0,0 +1,39 @@
+import { Flex, Text } from '@chakra-ui/react';
+import { ReactNode, memo } from 'react';
+
+type SubParameterWrapperProps = {
+  children: ReactNode[];
+  label?: string;
+};
+
+const SubParametersWrapper = (props: SubParameterWrapperProps) => (
+  <Flex
+    sx={{
+      flexDir: 'column',
+      gap: 2,
+      bg: 'base.100',
+      px: 4,
+      pt: 2,
+      pb: 4,
+      borderRadius: 'base',
+      _dark: {
+        bg: 'base.750',
+      },
+    }}
+  >
+    {props.label && (
+      <Text
+        fontSize="sm"
+        fontWeight="bold"
+        sx={{ color: 'base.600', _dark: { color: 'base.300' } }}
+      >
+        {props.label}
+      </Text>
+    )}
+    {props.children}
+  </Flex>
+);
+
+SubParametersWrapper.displayName = 'SubSettingsWrapper';
+
+export default memo(SubParametersWrapper);