feat(ui): update settings modal

invokeai/frontend/web/public/locales/en.json

@@ -532,7 +532,9 @@
         "resetWebUIDesc2": "If images aren't showing up in the gallery or something else isn't working, please try resetting before submitting an issue on GitHub.",
         "resetComplete": "Web UI has been reset. Refresh the page to reload.",
         "consoleLogLevel": "Log Level",
-        "shouldLogToConsole": "Console Logging"
+        "shouldLogToConsole": "Console Logging",
+        "developer": "Developer",
+        "general": "General"
     },
     "toast": {
         "serverError": "Server Error",

invokeai/frontend/web/src/common/components/IAISelect.tsx

@@ -16,13 +16,23 @@ type IAISelectProps = SelectProps & {
   validValues:
     | Array<number | string>
     | Array<{ key: string; value: string | number }>;
+  horizontal?: boolean;
+  spaceEvenly?: boolean;
 };
 /**
  * Customized Chakra FormControl + Select multi-part component.
  */
 const IAISelect = (props: IAISelectProps) => {
-  const { label, isDisabled, validValues, tooltip, tooltipProps, ...rest } =
-    props;
+  const {
+    label,
+    isDisabled,
+    validValues,
+    tooltip,
+    tooltipProps,
+    horizontal,
+    spaceEvenly,
+    ...rest
+  } = props;
   return (
     <FormControl
       isDisabled={isDisabled}
@@ -32,10 +42,28 @@ const IAISelect = (props: IAISelectProps) => {
         e.nativeEvent.stopPropagation();
         e.nativeEvent.cancelBubble = true;
       }}
+      sx={
+        horizontal
+          ? {
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 4,
+            }
+          : {}
+      }
     >
-      {label && <FormLabel>{label}</FormLabel>}
+      {label && (
+        <FormLabel sx={spaceEvenly ? { flexBasis: 0, flexGrow: 1 } : {}}>
+          {label}
+        </FormLabel>
+      )}
       <Tooltip label={tooltip} {...tooltipProps}>
-        <Select {...rest}>
+        <Select
+          {...rest}
+          rootProps={{ sx: spaceEvenly ? { flexBasis: 0, flexGrow: 1 } : {} }}
+        >
           {validValues.map((opt) => {
             return typeof opt === 'string' || typeof opt === 'number' ? (
               <IAIOption key={opt} value={opt}>

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -86,6 +86,7 @@ const modalSectionStyles: ChakraProps['sx'] = {
   gap: 2,
   p: 4,
   bg: 'base.900',
+  borderRadius: 'base',
 };
 
 type SettingsModalProps = {
@@ -170,15 +171,20 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
         isOpen={isSettingsModalOpen}
         onClose={onSettingsModalClose}
         size="xl"
+        isCentered
       >
         <ModalOverlay />
         <ModalContent paddingInlineEnd={4}>
           <ModalHeader>{t('common.settingsLabel')}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <Grid gap={4}>
+            <Flex sx={{ gap: 4, flexDirection: 'column' }}>
               <Flex sx={modalSectionStyles}>
+                <Heading size="sm">{t('settings.general')}</Heading>
+
                 <IAISelect
+                  horizontal
+                  spaceEvenly
                   label={t('settings.displayInProgress')}
                   validValues={IN_PROGRESS_IMAGE_TYPES}
                   value={shouldDisplayInProgressType}
@@ -233,15 +239,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
               </Flex>
 
               <Flex sx={modalSectionStyles}>
-                <Heading size="sm" style={{ fontWeight: 'bold' }}>
-                  Developer
-                </Heading>
+                <Heading size="sm">{t('settings.developer')}</Heading>
                 <IAISwitch
                   label={t('settings.shouldLogToConsole')}
                   isChecked={shouldLogToConsole}
                   onChange={handleLogToConsoleChanged}
                 />
                 <IAISelect
+                  horizontal
+                  spaceEvenly
                   isDisabled={!shouldLogToConsole}
                   label={t('settings.consoleLogLevel')}
                   onChange={handleLogLevelChanged}
@@ -265,7 +271,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                 <Text>{t('settings.resetWebUIDesc1')}</Text>
                 <Text>{t('settings.resetWebUIDesc2')}</Text>
               </Flex>
-            </Grid>
+            </Flex>
           </ModalBody>
 
           <ModalFooter>