feat(ui): aspect ratio styling

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx

@@ -1,9 +1,8 @@
-import { Flex } from '@chakra-ui/react';
+import { ButtonGroup, Flex } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import { setAspectRatio } from 'features/ui/store/uiSlice';
-import { ReactNode } from 'react';
 
 const aspectRatios = [
   { name: 'Free', value: null },
@@ -12,10 +11,6 @@ const aspectRatios = [
   { name: '3:2', value: 3 / 2 },
 ];
 
-export const roundToEight = (number: number) => {
-  return Math.round(number / 8) * 8;
-};
-
 export default function ParamAspectRatio() {
   const aspectRatio = useAppSelector(
     (state: RootState) => state.ui.aspectRatio
@@ -23,27 +18,20 @@ export default function ParamAspectRatio() {
 
   const dispatch = useAppDispatch();
 
-  const renderAspectRatios = () => {
-    const aspectRatiosToRender: ReactNode[] = [];
-    aspectRatios.forEach((ratio) => {
-      aspectRatiosToRender.push(
-        <IAIButton
-          key={ratio.name}
-          size="sm"
-          width="max-content"
-          isChecked={aspectRatio === ratio.value}
-          onClick={() => dispatch(setAspectRatio(ratio.value))}
-        >
-          {ratio.name}
-        </IAIButton>
-      );
-    });
-    return aspectRatiosToRender;
-  };
-
   return (
-    <Flex gap={2} w="100%">
-      {renderAspectRatios()}
+    <Flex gap={2} flexGrow={1}>
+      <ButtonGroup isAttached>
+        {aspectRatios.map((ratio) => (
+          <IAIButton
+            key={ratio.name}
+            size="sm"
+            isChecked={aspectRatio === ratio.value}
+            onClick={() => dispatch(setAspectRatio(ratio.value))}
+          >
+            {ratio.name}
+          </IAIButton>
+        ))}
+      </ButtonGroup>
     </Flex>
   );
 }

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Flex, Spacer, Text } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useTranslation } from 'react-i18next';
@@ -13,17 +13,32 @@ export default function ParamSize() {
   );
   return (
     <Flex
-      gap={2}
-      bg="base.900"
-      p={4}
-      borderRadius={4}
-      flexDirection="column"
-      w="100%"
+      sx={{
+        gap: 2,
+        p: 4,
+        borderRadius: 4,
+        flexDirection: 'column',
+        w: 'full',
+        bg: 'base.150',
+        _dark: {
+          bg: 'base.750',
+        },
+      }}
     >
       <Flex alignItems="center" gap={2}>
-        <Text fontSize={14} width="full" color="base.300">
+        <Text
+          sx={{
+            fontSize: 'sm',
+            width: 'full',
+            color: 'base.700',
+            _dark: {
+              color: 'base.300',
+            },
+          }}
+        >
           {t('parameters.aspectRatio')}
         </Text>
+        <Spacer />
         <ParamAspectRatio />
       </Flex>
       <Flex gap={2} flexDirection="column">