From b0e60bb60dd11f3fe182875ec882b2448792b904 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 16:56:34 -0500
Subject: [PATCH] SoapboxConfig: improve layout

---
 app/soapbox/features/edit_profile/index.tsx   |  8 +-
 app/soapbox/features/soapbox_config/index.tsx | 79 ++++++++++---------
 app/styles/forms.scss                         |  4 -
 3 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index e7c607a6a..647bb98e3 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -11,7 +11,9 @@ import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soap
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
 
-import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
+import { Button, Column, Form, FormActions, FormGroup, Input, Textarea } from '../../components/ui';
+import HStack from '../../components/ui/hstack/hstack';
+import Stack from '../../components/ui/stack/stack';
 import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
 
 import ProfilePreview from './components/profile-preview';
@@ -394,7 +396,7 @@ const EditProfile: React.FC = () => {
 
         {/* HACK: wrap these checkboxes in a .simple_form container so they get styled (for now) */}
         {/* Need a either move, replace, or refactor these checkboxes. */}
-        <div className='simple_form'>
+        <Stack space={2} className='simple_form'>
           {features.followRequests && (
             <Checkbox
               label={<FormattedMessage id='edit_profile.fields.locked_label' defaultMessage='Lock account' />}
@@ -448,7 +450,7 @@ const EditProfile: React.FC = () => {
               onChange={handleCheckboxChange('accepts_email_list')}
             />
           )}
-        </div>
+        </Stack>
 
         {features.profileFields && (
           <Streamfield
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 9411212cb..90d30e742 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -6,9 +6,10 @@ import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import { Column, Form, FormActions, FormGroup, Input, 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 {
-  FieldsGroup,
   SimpleTextarea,
   FileChooserLogo,
   Checkbox,
@@ -179,45 +180,45 @@ const SoapboxConfig: React.FC = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)}>
       <Form onSubmit={handleSubmit} className='simple_form space-y-4'>
-        <fieldset className='space-y-4' disabled={isLoading}>
+        <fieldset className='space-y-6' disabled={isLoading}>
           <SitePreview soapbox={soapbox} />
-          <FieldsGroup>
-            <div className='fields-row file-picker'>
-              <div className='fields-row__column fields-row__column-6'>
-                <ColorWithPicker
-                  buttonId='brand_color'
-                  label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
-                  value={soapbox.brandColor}
-                  onChange={handleColorChange(['brandColor'], (color) => color.hex)}
-                />
-                <ColorWithPicker
-                  buttonId='accent_color'
-                  label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
-                  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>
-                    <ThemeToggle />
-                    {/* <ThemeToggle
-                      onToggle={handleChange(['defaultSettings', 'themeMode'], value => value)}
-                      themeMode={soapbox.defaultSettings.get('themeMode')}
-                      intl={intl}
-                    /> */}
-                  </div>
+
+          <HStack space={2}>
+            <Stack space={2} className='w-1/2'>
+              <ColorWithPicker
+                buttonId='brand_color'
+                label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
+                value={soapbox.brandColor}
+                onChange={handleColorChange(['brandColor'], (color) => color.hex)}
+              />
+              <ColorWithPicker
+                buttonId='accent_color'
+                label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
+                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>
+                  <ThemeToggle />
+                  {/* <ThemeToggle
+                    onToggle={handleChange(['defaultSettings', 'themeMode'], value => value)}
+                    themeMode={soapbox.defaultSettings.get('themeMode')}
+                    intl={intl}
+                  /> */}
                 </div>
               </div>
-              <div className='fields-row__column fields-group fields-row__column-6'>
-                <FileChooserLogo
-                  label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
-                  name='logo'
-                  hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
-                  onChange={handleFileChange(['logo'])}
-                />
-              </div>
-            </div>
-          </FieldsGroup>
+            </Stack>
+
+            <Stack className='w-1/2'>
+              <FileChooserLogo
+                label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
+                name='logo'
+                hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
+                onChange={handleFileChange(['logo'])}
+              />
+            </Stack>
+          </HStack>
 
           <FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
             <Input
@@ -228,7 +229,7 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
-          <FieldsGroup>
+          <Stack space={2}>
             <Checkbox
               name='verifiedCanEditName'
               label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
@@ -271,7 +272,7 @@ const SoapboxConfig: React.FC = () => {
                 />
               </FormGroup>
             )}
-          </FieldsGroup>
+          </Stack>
 
           <Streamfield
             label={<FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' />}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 6c82a4739..901853323 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -36,10 +36,6 @@ code {
 
 .simple_form {
   .input {
-    + .input {
-      margin-top: 20px;
-    }
-
     &.hidden {
       margin: 0;
     }