feat(ui): reworked layout (wip)

invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSettings.tsx

@@ -34,5 +34,5 @@ export const BboxSettings = memo(() => {
 BboxSettings.displayName = 'BboxSettings';
 
 const formLabelProps: FormLabelProps = {
-  minW: 14,
+  minW: 10,
 };

invokeai/frontend/web/src/features/parameters/components/Core/ParamDenoisingStrength.tsx

@@ -0,0 +1,53 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import { selectImg2imgStrength, setImg2imgStrength } from 'features/controlLayers/store/paramsSlice';
+import { selectImg2imgStrengthConfig } from 'features/system/store/configSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const marks = [0, 0.5, 1];
+
+export const ParamDenoisingStrength = memo(() => {
+  const img2imgStrength = useAppSelector(selectImg2imgStrength);
+  const dispatch = useAppDispatch();
+
+  const onChange = useCallback(
+    (v: number) => {
+      dispatch(setImg2imgStrength(v));
+    },
+    [dispatch]
+  );
+
+  const config = useAppSelector(selectImg2imgStrengthConfig);
+  const { t } = useTranslation();
+
+  return (
+    <FormControl>
+      <InformationalPopover feature="paramDenoisingStrength">
+        <FormLabel>{`${t('parameters.denoisingStrength')}`}</FormLabel>
+      </InformationalPopover>
+      <CompositeSlider
+        step={config.coarseStep}
+        fineStep={config.fineStep}
+        min={config.sliderMin}
+        max={config.sliderMax}
+        defaultValue={config.initial}
+        onChange={onChange}
+        value={img2imgStrength}
+        marks={marks}
+      />
+      <CompositeNumberInput
+        step={config.coarseStep}
+        fineStep={config.fineStep}
+        min={config.numberInputMin}
+        max={config.numberInputMax}
+        defaultValue={config.initial}
+        onChange={onChange}
+        value={img2imgStrength}
+      />
+    </FormControl>
+  );
+});
+
+ParamDenoisingStrength.displayName = 'ParamDenoisingStrength';

invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedRandomize.tsx

@@ -18,7 +18,7 @@ export const ParamSeedRandomize = memo(() => {
 
   return (
     <FormControl w="min-content">
-      <FormLabel>{t('common.random')}</FormLabel>
+      <FormLabel m={0}>{t('common.random')}</FormLabel>
       <Switch isChecked={shouldRandomizeSeed} onChange={handleChangeShouldRandomizeSeed} />
     </FormControl>
   );

invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx

@@ -1,4 +1,4 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Box, Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
@@ -40,16 +40,18 @@ const ParamVAEModelSelect = () => {
   return (
     <FormControl isDisabled={!options.length} isInvalid={!options.length}>
       <InformationalPopover feature="paramVAE">
-        <FormLabel>{t('modelManager.vae')}</FormLabel>
+        <FormLabel m={0}>{t('modelManager.vae')}</FormLabel>
       </InformationalPopover>
-      <Combobox
-        isClearable
-        value={value}
-        placeholder={value ? value.value : t('models.defaultVAE')}
-        options={options}
-        onChange={onChange}
-        noOptionsMessage={noOptionsMessage}
-      />
+      <Box w="full" minW={0}>
+        <Combobox
+          isClearable
+          value={value}
+          placeholder={value ? value.value : t('models.defaultVAE')}
+          options={options}
+          onChange={onChange}
+          noOptionsMessage={noOptionsMessage}
+        />
+      </Box>
     </FormControl>
   );
 };

invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEPrecision.tsx

@@ -12,7 +12,7 @@ const options = [
   { label: 'FP32', value: 'fp32' },
 ];
 
-const ParamVAEModelSelect = () => {
+const ParamVAEPrecision = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const vaePrecision = useAppSelector(selectVAEPrecision);
@@ -31,13 +31,13 @@ const ParamVAEModelSelect = () => {
   const value = useMemo(() => options.find((o) => o.value === vaePrecision), [vaePrecision]);
 
   return (
-    <FormControl w="14rem" flexShrink={0}>
+    <FormControl w={24}>
       <InformationalPopover feature="paramVAEPrecision">
-        <FormLabel>{t('modelManager.vaePrecision')}</FormLabel>
+        <FormLabel m={0}>{t('modelManager.vaePrecision')}</FormLabel>
       </InformationalPopover>
       <Combobox value={value} options={options} onChange={onChange} />
     </FormControl>
   );
 };
 
-export default memo(ParamVAEModelSelect);
+export default memo(ParamVAEPrecision);