SoapboxConfig: improve layout

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

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,11 +180,11 @@ 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'>
+          <HStack space={2}>
-              <div className='fields-row__column fields-row__column-6'>
+            <Stack space={2} className='w-1/2'>
               <ColorWithPicker
                 buttonId='brand_color'
                 label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
@@ -207,17 +208,17 @@ const SoapboxConfig: React.FC = () => {
                   /> */}
                 </div>
               </div>
-              </div>
+            </Stack>
-              <div className='fields-row__column fields-group fields-row__column-6'>
+
+            <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'])}
               />
-              </div>
+            </Stack>
-            </div>
+          </HStack>
-          </FieldsGroup>
 
           <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' />}

app/styles/forms.scss

@@ -36,10 +36,6 @@ code {
 
 .simple_form {
   .input {
-    + .input {
-      margin-top: 20px;
-    }
-
     &.hidden {
       margin: 0;
     }