From c14c68cfce375f359e71874b0cad900cdac375ee Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 18:36:27 -0500
Subject: [PATCH] SoapboxConfig: put theme items into List

---
 .../components/color-with-picker.tsx          |  5 +-
 app/soapbox/features/soapbox_config/index.tsx | 61 ++++++++-----------
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/components/color-with-picker.tsx b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
index 711883807..3fac5b9d2 100644
--- a/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
@@ -10,12 +10,11 @@ import type { ColorChangeHandler } from 'react-color';
 
 interface IColorWithPicker {
   buttonId: string,
-  label: React.ReactNode,
   value: string,
   onChange: ColorChangeHandler,
 }
 
-const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, label, value, onChange }) => {
+const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, value, onChange }) => {
   const node = useRef<HTMLDivElement>(null);
   const [active, setActive] = useState(false);
   const [placement, setPlacement] = useState<string | null>(null);
@@ -39,8 +38,6 @@ const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, label, value, o
 
   return (
     <div>
-      <label>{label}</label>
-
       <div
         ref={node}
         id={buttonId}
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index dabf4a830..760616453 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -8,8 +8,6 @@ import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import List, { ListItem } from 'soapbox/components/list';
 import { Column, Form, FormActions, FormGroup, Input, Textarea, Button } from 'soapbox/components/ui';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import Stack from 'soapbox/components/ui/stack/stack';
 import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
@@ -187,47 +185,42 @@ const SoapboxConfig: React.FC = () => {
         <fieldset className='space-y-6' disabled={isLoading}>
           <SitePreview soapbox={soapbox} />
 
-          <HStack space={2}>
-            <Stack space={2} className='w-1/2'>
+          <FormGroup
+            labelText={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
+            hintText={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
+          >
+            <input
+              type='file'
+              onChange={handleFileChange(['logo'])}
+              className='text-sm'
+              accept='image/svg,image/png'
+            />
+          </FormGroup>
+
+          <List>
+            <ListItem label={<FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' />}>
+              <ThemeSelector
+                value={soapbox.defaultSettings.get('themeMode')}
+                onChange={handleThemeChange(['defaultSettings', 'themeMode'])}
+              />
+            </ListItem>
+
+            <ListItem label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}>
               <ColorWithPicker
-                buttonId='brand_color'
-                label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
+                buttonId='brandColor'
                 value={soapbox.brandColor}
                 onChange={handleColorChange(['brandColor'], (color) => color.hex)}
               />
+            </ListItem>
 
+            <ListItem label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}>
               <ColorWithPicker
-                buttonId='accent_color'
-                label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
+                buttonId='accentColor'
                 value={soapbox.accentColor}
                 onChange={handleColorChange(['accentColor'], (color) => color.hex)}
               />
-
-              <div className='input with_label toggle'>
-                <div className='label_input'>
-                  <label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
-                  <ThemeSelector
-                    value={soapbox.defaultSettings.get('themeMode')}
-                    onChange={handleThemeChange(['defaultSettings', 'themeMode'])}
-                  />
-                </div>
-              </div>
-            </Stack>
-
-            <Stack className='w-1/2'>
-              <FormGroup
-                labelText={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
-                hintText={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
-              >
-                <input
-                  type='file'
-                  onChange={handleFileChange(['logo'])}
-                  className='text-sm'
-                  accept='image/svg,image/png'
-                />
-              </FormGroup>
-            </Stack>
-          </HStack>
+            </ListItem>
+          </List>
 
           <FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
             <Input