From 1bd81a2f0f33351921c7c595a8d6231e88130a48 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 13:08:45 -0500
Subject: [PATCH 01/29] SoapboxConfig: break extraneous components out into
 their own files

---
 .../components/color-picker.tsx               |  49 +++++++
 .../components/color-with-picker.tsx          |  61 +++++++++
 .../soapbox_config/components/icon-picker.tsx |  24 ++++
 app/soapbox/features/soapbox_config/index.js  | 127 +-----------------
 package.json                                  |   1 +
 yarn.lock                                     |  15 +++
 6 files changed, 152 insertions(+), 125 deletions(-)
 create mode 100644 app/soapbox/features/soapbox_config/components/color-picker.tsx
 create mode 100644 app/soapbox/features/soapbox_config/components/color-with-picker.tsx
 create mode 100644 app/soapbox/features/soapbox_config/components/icon-picker.tsx

diff --git a/app/soapbox/features/soapbox_config/components/color-picker.tsx b/app/soapbox/features/soapbox_config/components/color-picker.tsx
new file mode 100644
index 000000000..8b203a901
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/color-picker.tsx
@@ -0,0 +1,49 @@
+import { supportsPassiveEvents } from 'detect-passive-events';
+import React, { useEffect, useRef } from 'react';
+import { SketchPicker, ColorChangeHandler } from 'react-color';
+
+import { isMobile } from 'soapbox/is_mobile';
+
+const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
+
+interface IColorPicker {
+  style?: React.CSSProperties,
+  value: string,
+  onChange: ColorChangeHandler,
+  onClose: () => void,
+}
+
+const ColorPicker: React.FC<IColorPicker> = ({ style, value, onClose, onChange }) => {
+  const node = useRef<HTMLDivElement>(null);
+
+  const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
+    if (node.current && !node.current.contains(e.target as HTMLElement)) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleDocumentClick, false);
+    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, false);
+      document.removeEventListener('touchend', handleDocumentClick);
+    };
+  });
+
+  const pickerStyle: React.CSSProperties = {
+    ...style,
+    marginLeft: isMobile(window.innerWidth) ? '20px' : '12px',
+    position: 'absolute',
+    zIndex: 1000,
+  };
+
+  return (
+    <div id='SketchPickerContainer' ref={node} style={pickerStyle}>
+      <SketchPicker color={value} disableAlpha onChange={onChange} />
+    </div>
+  );
+};
+
+export default ColorPicker;
diff --git a/app/soapbox/features/soapbox_config/components/color-with-picker.tsx b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
new file mode 100644
index 000000000..6178140e6
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
@@ -0,0 +1,61 @@
+import React, { useState, useRef } from 'react';
+// @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
+import Overlay from 'react-overlays/lib/Overlay';
+
+import { isMobile } from 'soapbox/is_mobile';
+
+import ColorPicker from './color-picker';
+
+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 node = useRef<HTMLDivElement>(null);
+  const [active, setActive] = useState(false);
+  const [placement, setPlacement] = useState<string | null>(null);
+
+  const hidePicker = () => {
+    setActive(false);
+  };
+
+  const showPicker = () => {
+    setActive(true);
+    setPlacement(isMobile(window.innerWidth) ? 'bottom' : 'right');
+  };
+
+  const onToggle: React.MouseEventHandler = () => {
+    if (active) {
+      hidePicker();
+    } else {
+      showPicker();
+    }
+  };
+
+  return (
+    <div className='label_input__color'>
+      <label>{label}</label>
+
+      <div
+        ref={node}
+        id={buttonId}
+        className='color-swatch'
+        role='presentation'
+        style={{ background: value }}
+        title={value}
+        onClick={onToggle}
+      />
+
+      <Overlay show={active} placement={placement} target={node.current}>
+        <ColorPicker value={value} onChange={onChange} onClose={hidePicker} />
+      </Overlay>
+    </div>
+  );
+};
+
+export default ColorWithPicker;
diff --git a/app/soapbox/features/soapbox_config/components/icon-picker.tsx b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
new file mode 100644
index 000000000..bb0c18eff
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import IconPickerDropdown from './icon_picker_dropdown';
+
+interface IIconPicker {
+  label: React.ReactNode,
+  value: string,
+  onChange: React.ChangeEventHandler,
+}
+
+const IconPicker: React.FC<IIconPicker> = ({ onChange, value, label }) => {
+  return (
+    <div className='input with_label font_icon_picker'>
+      <div className='label_input__font_icon_picker'>
+        {label && (<label>{label}</label>)}
+        <div className='label_input_wrapper'>
+          <IconPickerDropdown value={value} onPickEmoji={onChange} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IconPicker;
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index 44317a1b7..b6fe7f17f 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -1,12 +1,9 @@
-import { supportsPassiveEvents } from 'detect-passive-events';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { SketchPicker } from 'react-color';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Overlay from 'react-overlays/lib/Overlay';
 import { connect } from 'react-redux';
 
 import { updateConfig } from 'soapbox/actions/admin';
@@ -24,12 +21,12 @@ import {
   Checkbox,
 } from 'soapbox/features/forms';
 import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
-import { isMobile } from 'soapbox/is_mobile';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
 import Accordion from '../ui/components/accordion';
 
-import IconPickerDropdown from './components/icon_picker_dropdown';
+import ColorWithPicker from './components/color-with-picker';
+import IconPicker from './components/icon-picker';
 import SitePreview from './components/site_preview';
 
 const messages = defineMessages({
@@ -60,8 +57,6 @@ const messages = defineMessages({
   singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
 });
 
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-
 const templates = {
   promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
   footerItem: ImmutableMap({ title: '', url: '' }),
@@ -461,121 +456,3 @@ class SoapboxConfig extends ImmutablePureComponent {
   }
 
 }
-
-class ColorPicker extends React.PureComponent {
-
-  static propTypes = {
-    style: PropTypes.object,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onClose: PropTypes.func,
-  }
-
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
-    }
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  render() {
-    const { style, value, onChange } = this.props;
-    const margin_left_picker = isMobile(window.innerWidth) ? '20px' : '12px';
-
-    return (
-      <div id='SketchPickerContainer' ref={this.setRef} style={{ ...style, marginLeft: margin_left_picker, position: 'absolute', zIndex: 1000 }}>
-        <SketchPicker color={value} disableAlpha onChange={onChange} />
-      </div>
-    );
-  }
-
-}
-
-class ColorWithPicker extends ImmutablePureComponent {
-
-  static propTypes = {
-    buttonId: PropTypes.string.isRequired,
-    label: PropTypes.node,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  onToggle = (e) => {
-    if (!e.key || e.key === 'Enter') {
-      if (this.state.active) {
-        this.onHidePicker();
-      } else {
-        this.onShowPicker(e);
-      }
-    }
-  }
-
-  state = {
-    active: false,
-    placement: null,
-  }
-
-  onHidePicker = () => {
-    this.setState({ active: false });
-  }
-
-  onShowPicker = ({ target }) => {
-    this.setState({ active: true });
-    this.setState({ placement: isMobile(window.innerWidth) ? 'bottom' : 'right' });
-  }
-
-  render() {
-    const { buttonId, label, value, onChange } = this.props;
-    const { active, placement } = this.state;
-
-    return (
-      <div className='label_input__color'>
-        <label>{label}</label>
-        <div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} title={value} value={value} onClick={this.onToggle} />
-        <Overlay show={active} placement={placement} target={this}>
-          <ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} />
-        </Overlay>
-      </div>
-    );
-  }
-
-}
-
-export class IconPicker extends ImmutablePureComponent {
-
-  static propTypes = {
-    icons: PropTypes.object,
-    label: PropTypes.node,
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  render() {
-    const { onChange, value, label } = this.props;
-
-    return (
-      <div className='input with_label font_icon_picker'>
-        <div className='label_input__font_icon_picker'>
-          {label && (<label>{label}</label>)}
-          <div className='label_input_wrapper'>
-            <IconPickerDropdown value={value} onPickEmoji={onChange} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/package.json b/package.json
index 5eed7b932..5d19be83b 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "@types/object-assign": "^4.0.30",
     "@types/object-fit-images": "^3.2.3",
     "@types/qrcode.react": "^1.0.2",
+    "@types/react-color": "^3.0.6",
     "@types/react-datepicker": "^4.4.0",
     "@types/react-helmet": "^6.1.5",
     "@types/react-motion": "^0.0.32",
diff --git a/yarn.lock b/yarn.lock
index 39d12627f..9445a64a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2184,6 +2184,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-color@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
+  integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
+  dependencies:
+    "@types/react" "*"
+    "@types/reactcss" "*"
+
 "@types/react-datepicker@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.4.0.tgz#0072e18536ad305fd57786f9b6f9e499eed2b475"
@@ -2272,6 +2280,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/reactcss@*":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
+  integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/redux-mock-store@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb"

From 748d1f6c21771f05308de3d72a0ee5fc5845b63e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 13:23:25 -0500
Subject: [PATCH 02/29] SitePreview: convert to tsx

---
 .../{site_preview.js => site-preview.tsx}     | 28 +++++++++++--------
 app/soapbox/features/soapbox_config/index.js  |  2 +-
 .../normalizers/soapbox/soapbox_config.ts     |  2 +-
 3 files changed, 18 insertions(+), 14 deletions(-)
 rename app/soapbox/features/soapbox_config/components/{site_preview.js => site-preview.tsx} (64%)

diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site-preview.tsx
similarity index 64%
rename from app/soapbox/features/soapbox_config/components/site_preview.js
rename to app/soapbox/features/soapbox_config/components/site-preview.tsx
index 3d52d7200..87706f3d8 100644
--- a/app/soapbox/features/soapbox_config/components/site_preview.js
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@@ -1,13 +1,19 @@
 import classNames from 'classnames';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import React, { useMemo } from 'react';
 
 import { defaultSettings } from 'soapbox/actions/settings';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 import { generateThemeCss } from 'soapbox/utils/theme';
 
-export default function SitePreview({ soapbox }) {
+interface ISitePreview {
+  /** Raw Soapbox configuration. */
+  soapbox: any,
+}
 
-  const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
+/** Renders a preview of the website's style with the configuration applied. */
+const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
+  const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]);
+  const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings);
 
   const bodyClass = classNames('site-preview', `theme-mode-${settings.get('themeMode')}`, {
     'no-reduce-motion': !settings.get('reduceMotion'),
@@ -18,7 +24,7 @@ export default function SitePreview({ soapbox }) {
 
   return (
     <div className={bodyClass}>
-      <style>{`.site-preview {${generateThemeCss(soapbox)}}`}</style>
+      <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
       <div className='app-holder'>
         <div>
           <div className='ui'>
@@ -26,15 +32,15 @@ export default function SitePreview({ soapbox }) {
               <div className='tabs-bar__container'>
                 <div className='tabs-bar__split tabs-bar__split--left'>
                   <a className='tabs-bar__link--logo' href='#'>
-                    <img alt='Logo' src={soapbox.get('logo')} />
+                    <img alt='Logo' src={soapboxConfig.logo} />
                     <span>Home</span>
                   </a>
                   <a className='tabs-bar__link' href='#'>
-                    <i role='img' alt='home' className='fa fa-home' />
+                    <i role='img' className='fa fa-home' />
                     <span>Home</span>
                   </a>
                   <a className='tabs-bar__link' href='#'>
-                    <i role='img' alt='bell' className='fa fa-bell' />
+                    <i role='img' className='fa fa-bell' />
                     <span>Notifications</span>
                   </a>
                 </div>
@@ -49,8 +55,6 @@ export default function SitePreview({ soapbox }) {
     </div>
   );
 
-}
-
-SitePreview.propTypes = {
-  soapbox: ImmutablePropTypes.record.isRequired,
 };
+
+export default SitePreview;
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index b6fe7f17f..da108e92d 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -27,7 +27,7 @@ import Accordion from '../ui/components/accordion';
 
 import ColorWithPicker from './components/color-with-picker';
 import IconPicker from './components/icon-picker';
-import SitePreview from './components/site_preview';
+import SitePreview from './components/site-preview';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index e37a4faad..07fd5aff3 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -89,7 +89,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
   colors: ImmutableMap(),
   copyright: `♥${new Date().getFullYear()}. Copying is an act of love. Please copy and share.`,
   customCss: ImmutableList<string>(),
-  defaultSettings: ImmutableMap(),
+  defaultSettings: ImmutableMap<string, any>(),
   extensions: ImmutableMap(),
   greentext: false,
   promoPanel: PromoPanelRecord(),

From eaeeed29c0d11b5e28833aa80331f6e7f1f191db Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 14:25:57 -0500
Subject: [PATCH 03/29] SoapboxConfig: convert to TSX

---
 app/soapbox/features/forms/index.tsx          |  23 +-
 app/soapbox/features/soapbox_config/index.js  | 458 -----------------
 app/soapbox/features/soapbox_config/index.tsx | 464 ++++++++++++++++++
 3 files changed, 486 insertions(+), 459 deletions(-)
 delete mode 100644 app/soapbox/features/soapbox_config/index.js
 create mode 100644 app/soapbox/features/soapbox_config/index.tsx

diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index b7886c0b1..79495c6cf 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -79,6 +79,12 @@ interface ISimpleInput {
   hint?: React.ReactNode,
   error?: boolean,
   onChange?: React.ChangeEventHandler,
+  min?: number,
+  max?: number,
+  pattern?: string,
+  name?: string,
+  placeholder?: string,
+  value?: string | number,
 }
 
 export const SimpleInput: React.FC<ISimpleInput> = (props) => {
@@ -95,6 +101,9 @@ export const SimpleInput: React.FC<ISimpleInput> = (props) => {
 interface ISimpleTextarea {
   label?: React.ReactNode,
   hint?: React.ReactNode,
+  value?: string,
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,
+  rows?: number,
 }
 
 export const SimpleTextarea: React.FC<ISimpleTextarea> = (props) => {
@@ -149,6 +158,7 @@ export const FieldsGroup: React.FC = ({ children }) => (
 interface ICheckbox {
   label?: React.ReactNode,
   hint?: React.ReactNode,
+  name?: string,
   checked?: boolean,
   onChange?: React.ChangeEventHandler<HTMLInputElement>,
 }
@@ -227,8 +237,11 @@ export const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
 };
 
 interface ITextInput {
+  name?: string,
   onChange?: React.ChangeEventHandler,
+  label?: React.ReactNode,
   placeholder?: string,
+  value?: string,
 }
 
 export const TextInput: React.FC<ITextInput> = props => (
@@ -243,7 +256,15 @@ FileChooser.defaultProps = {
   accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
 };
 
-export const FileChooserLogo: React.FC = props => (
+interface IFileChooserLogo {
+  label?: React.ReactNode,
+  hint?: React.ReactNode,
+  name?: string,
+  accept?: string[],
+  onChange: React.ChangeEventHandler<HTMLInputElement>,
+}
+
+export const FileChooserLogo: React.FC<IFileChooserLogo> = props => (
   <SimpleInput type='file' {...props} />
 );
 
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
deleted file mode 100644
index da108e92d..000000000
--- a/app/soapbox/features/soapbox_config/index.js
+++ /dev/null
@@ -1,458 +0,0 @@
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { updateConfig } from 'soapbox/actions/admin';
-import { uploadMedia } from 'soapbox/actions/media';
-import snackbar from 'soapbox/actions/snackbar';
-import Icon from 'soapbox/components/icon';
-import { Column } from 'soapbox/components/ui';
-import {
-  SimpleForm,
-  FieldsGroup,
-  TextInput,
-  SimpleInput,
-  SimpleTextarea,
-  FileChooserLogo,
-  Checkbox,
-} from 'soapbox/features/forms';
-import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-
-import Accordion from '../ui/components/accordion';
-
-import ColorWithPicker from './components/color-with-picker';
-import IconPicker from './components/icon-picker';
-import SitePreview from './components/site-preview';
-
-const messages = defineMessages({
-  heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
-  saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
-  copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
-  promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
-  promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
-  promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
-  homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
-  homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
-  cryptoAdressItemTicker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
-  cryptoAdressItemAddress: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' },
-  cryptoAdressItemNote: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' },
-  cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
-  customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
-  rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
-  rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
-  verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
-  displayFqnLabel: { id: 'soapbox_config.display_fqn_label', defaultMessage: 'Display domain (eg @user@domain) for local accounts.' },
-  greentextLabel: { id: 'soapbox_config.greentext_label', defaultMessage: 'Enable greentext support' },
-  promoPanelIconsLink: { id: 'soapbox_config.hints.promo_panel_icons.link', defaultMessage: 'Soapbox Icons List' },
-  authenticatedProfileLabel: { id: 'soapbox_config.authenticated_profile_label', defaultMessage: 'Profiles require authentication' },
-  authenticatedProfileHint: { id: 'soapbox_config.authenticated_profile_hint', defaultMessage: 'Users must be logged-in to view replies and media on user profiles.' },
-  singleUserModeLabel: { id: 'soapbox_config.single_user_mode_label', defaultMessage: 'Single user mode' },
-  singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
-  singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
-  singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
-});
-
-const templates = {
-  promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
-  footerItem: ImmutableMap({ title: '', url: '' }),
-  cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
-};
-
-const mapStateToProps = state => {
-  return {
-    initialData: state.soapbox,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class SoapboxConfig extends ImmutablePureComponent {
-
-  static propTypes = {
-    initialData: ImmutablePropTypes.map.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  state = {
-    isLoading: false,
-    data: this.props.initialData,
-    jsonEditorExpanded: false,
-    rawJSON: JSON.stringify(this.props.soapbox, null, 2),
-    jsonValid: true,
-  }
-
-  setConfig = (path, value) => {
-    const { data } = this.state;
-    const newData = data.setIn(path, value);
-    this.setState({ data: newData, jsonValid: true });
-  };
-
-  putConfig = data => {
-    this.setState({ data, jsonValid: true });
-  };
-
-  getParams = () => {
-    const { data } = this.state;
-    return [{
-      group: ':pleroma',
-      key: ':frontend_configurations',
-      value: [{
-        tuple: [':soapbox_fe', data.toJS()],
-      }],
-    }];
-  }
-
-  handleSubmit = (event) => {
-    const { dispatch, intl } = this.props;
-    dispatch(updateConfig(this.getParams())).then(() => {
-      this.setState({ isLoading: false });
-      dispatch(snackbar.success(intl.formatMessage(messages.saved)));
-    }).catch((error) => {
-      this.setState({ isLoading: false });
-    });
-    this.setState({ isLoading: true });
-    event.preventDefault();
-  }
-
-  handleChange = (path, getValue) => {
-    return e => {
-      this.setConfig(path, getValue(e));
-    };
-  };
-
-  handleFileChange = path => {
-    return e => {
-      const data = new FormData();
-      data.append('file', e.target.files[0]);
-      this.props.dispatch(uploadMedia(data)).then(({ data }) => {
-        this.handleChange(path, e => data.url)(e);
-      }).catch(() => {});
-    };
-  };
-
-  handleAddItem = (path, template) => {
-    return e => {
-      this.setConfig(
-        path,
-        this.getSoapboxConfig().getIn(path, ImmutableList()).push(template),
-      );
-    };
-  };
-
-  handleDeleteItem = path => {
-    return e => {
-      const data = this.state.data.deleteIn(path);
-      this.setState({ data });
-    };
-  };
-
-  handleItemChange = (path, key, field, template, getValue = e => e.target.value) => {
-    return this.handleChange(
-      path, (e) =>
-        template
-          .merge(field)
-          .set(key, getValue(e)),
-    );
-  };
-
-  handlePromoItemChange = (index, key, field, getValue) => {
-    return this.handleItemChange(
-      ['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
-    );
-  };
-
-  handleHomeFooterItemChange = (index, key, field, getValue) => {
-    return this.handleItemChange(
-      ['navlinks', 'homeFooter', index], key, field, templates.footerItem, getValue,
-    );
-  };
-
-  handleCryptoAdressItemChange = (index, key, field, getValue) => {
-    return this.handleItemChange(
-      ['cryptoAddresses', index], key, field, templates.cryptoAddress, getValue,
-    );
-  };
-
-  handleEditJSON = e => {
-    this.setState({ rawJSON: e.target.value });
-  }
-
-  getSoapboxConfig = () => {
-    return normalizeSoapboxConfig(this.state.data);
-  }
-
-  toggleJSONEditor = (value) => this.setState({ jsonEditorExpanded: value });
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.initialData !== this.props.initialData) {
-      this.putConfig(this.props.initialData);
-    }
-
-    if (prevState.data !== this.state.data) {
-      this.setState({ rawJSON: JSON.stringify(this.state.data, null, 2) });
-    }
-
-    if (prevState.rawJSON !== this.state.rawJSON) {
-      try {
-        const data = fromJS(JSON.parse(this.state.rawJSON));
-        this.putConfig(data);
-      } catch {
-        this.setState({ jsonValid: false });
-      }
-    }
-  }
-
-  render() {
-    const { intl } = this.props;
-    const soapbox = this.getSoapboxConfig();
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)}>
-        <SimpleForm onSubmit={this.handleSubmit}>
-          <fieldset disabled={this.state.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.get('brandColor')}
-                    onChange={this.handleChange(['brandColor'], (e) => e.hex)}
-                  />
-                  <ColorWithPicker
-                    buttonId='accent_color'
-                    label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
-                    value={soapbox.get('accentColor')}
-                    onChange={this.handleChange(['accentColor'], (e) => e.hex)}
-                  />
-                  <div className='input with_label toggle'>
-                    <div className='label_input'>
-                      <label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
-                      <ThemeToggle
-                        onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
-                        themeMode={soapbox.getIn(['defaultSettings', 'themeMode'])}
-                        intl={intl}
-                      />
-                    </div>
-                  </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={this.handleFileChange(['logo'])}
-                  />
-                </div>
-              </div>
-            </FieldsGroup>
-            <FieldsGroup>
-              <TextInput
-                name='copyright'
-                label={intl.formatMessage(messages.copyrightFooterLabel)}
-                placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
-                value={soapbox.get('copyright')}
-                onChange={this.handleChange(['copyright'], (e) => e.target.value)}
-              />
-            </FieldsGroup>
-            <FieldsGroup>
-              <Checkbox
-                name='verifiedCanEditName'
-                label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
-                checked={soapbox.get('verifiedCanEditName') === true}
-                onChange={this.handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
-              />
-              <Checkbox
-                name='displayFqn'
-                label={intl.formatMessage(messages.displayFqnLabel)}
-                checked={soapbox.get('displayFqn') === true}
-                onChange={this.handleChange(['displayFqn'], (e) => e.target.checked)}
-              />
-              <Checkbox
-                name='greentext'
-                label={intl.formatMessage(messages.greentextLabel)}
-                checked={soapbox.get('greentext') === true}
-                onChange={this.handleChange(['greentext'], (e) => e.target.checked)}
-              />
-              <Checkbox
-                name='authenticatedProfile'
-                label={intl.formatMessage(messages.authenticatedProfileLabel)}
-                hint={intl.formatMessage(messages.authenticatedProfileHint)}
-                checked={soapbox.get('authenticatedProfile') === true}
-                onChange={this.handleChange(['authenticatedProfile'], (e) => e.target.checked)}
-              />
-              <Checkbox
-                name='singleUserMode'
-                label={intl.formatMessage(messages.singleUserModeLabel)}
-                hint={intl.formatMessage(messages.singleUserModeHint)}
-                checked={soapbox.get('singleUserMode') === true}
-                onChange={this.handleChange(['singleUserMode'], (e) => e.target.checked)}
-              />
-              {soapbox.get('singleUserMode') && (
-                <TextInput
-                  name='singleUserModeProfile'
-                  label={intl.formatMessage(messages.singleUserModeProfileLabel)}
-                  placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
-                  value={soapbox.get('singleUserModeProfile')}
-                  onChange={this.handleChange(['singleUserModeProfile'], (e) => e.target.value)}
-                />
-              )}
-            </FieldsGroup>
-            <FieldsGroup>
-              <div className='input with_block_label popup'>
-                <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
-                <span className='hint'>
-                  <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />
-                </span>
-                <span className='hint'>
-                  <FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://icons8.com/line-awesome'>{intl.formatMessage(messages.promoPanelIconsLink)}</a> }} />
-                </span>
-                {
-                  soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
-                    <div className='row' key={i}>
-                      <IconPicker
-                        label={intl.formatMessage(messages.promoItemIcon)}
-                        value={field.get('icon')}
-                        onChange={this.handlePromoItemChange(i, 'icon', field, val => val.id)}
-                      />
-                      <TextInput
-                        label={intl.formatMessage(messages.promoItemLabel)}
-                        placeholder={intl.formatMessage(messages.promoItemLabel)}
-                        value={field.get('text')}
-                        onChange={this.handlePromoItemChange(i, 'text', field)}
-                      />
-                      <TextInput
-                        label={intl.formatMessage(messages.promoItemURL)}
-                        placeholder={intl.formatMessage(messages.promoItemURL)}
-                        value={field.get('url')}
-                        onChange={this.handlePromoItemChange(i, 'url', field)}
-                      />
-                      <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
-                    </div>
-                  ))
-                }
-                <div className='actions add-row'>
-                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
-                    <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
-                    <FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
-                  </div>
-                </div>
-              </div>
-            </FieldsGroup>
-            <FieldsGroup>
-              <div className='input with_block_label'>
-                <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
-                <span className='hint'>
-                  <FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
-                </span>
-                {
-                  soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
-                    <div className='row' key={i}>
-                      <TextInput
-                        label={intl.formatMessage(messages.homeFooterItemLabel)}
-                        placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
-                        value={field.get('title')}
-                        onChange={this.handleHomeFooterItemChange(i, 'title', field)}
-                      />
-                      <TextInput
-                        label={intl.formatMessage(messages.homeFooterItemURL)}
-                        placeholder={intl.formatMessage(messages.homeFooterItemURL)}
-                        value={field.get('url')}
-                        onChange={this.handleHomeFooterItemChange(i, 'url', field)}
-                      />
-                      <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
-                    </div>
-                  ))
-                }
-                <div className='actions add-row'>
-                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
-                    <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
-                    <FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
-                  </div>
-                </div>
-              </div>
-            </FieldsGroup>
-            <FieldsGroup>
-              <div className='input with_block_label'>
-                <label><FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' /></label>
-                <span className='hint'>
-                  <FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />
-                </span>
-                {
-                  soapbox.get('cryptoAddresses').map((address, i) => (
-                    <div className='row' key={i}>
-                      <TextInput
-                        label={intl.formatMessage(messages.cryptoAdressItemTicker)}
-                        placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
-                        value={address.get('ticker')}
-                        onChange={this.handleCryptoAdressItemChange(i, 'ticker', address)}
-                      />
-                      <TextInput
-                        label={intl.formatMessage(messages.cryptoAdressItemAddress)}
-                        placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
-                        value={address.get('address')}
-                        onChange={this.handleCryptoAdressItemChange(i, 'address', address)}
-                      />
-                      <TextInput
-                        label={intl.formatMessage(messages.cryptoAdressItemNote)}
-                        placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
-                        value={address.get('note')}
-                        onChange={this.handleCryptoAdressItemChange(i, 'note', address)}
-                      />
-                      <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['cryptoAddresses', i])} />
-                    </div>
-                  ))
-                }
-                <div className='actions add-row'>
-                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['cryptoAddresses'], templates.cryptoAddress)}>
-                    <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
-                    <FormattedMessage id='soapbox_config.fields.crypto_address.add' defaultMessage='Add new crypto address' />
-                  </div>
-                </div>
-              </div>
-            </FieldsGroup>
-            <FieldsGroup>
-              <SimpleInput
-                type='number'
-                min={0}
-                pattern='[0-9]+'
-                name='cryptoDonatePanelLimit'
-                label={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
-                placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
-                value={soapbox.getIn(['cryptoDonatePanel', 'limit'])}
-                onChange={this.handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
-              />
-            </FieldsGroup>
-            <Accordion
-              headline={intl.formatMessage(messages.rawJSONLabel)}
-              expanded={this.state.jsonEditorExpanded}
-              onToggle={this.toggleJSONEditor}
-            >
-              <div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
-                <SimpleTextarea
-                  hint={intl.formatMessage(messages.rawJSONHint)}
-                  value={this.state.rawJSON}
-                  onChange={this.handleEditJSON}
-                  rows={12}
-                />
-              </div>
-            </Accordion>
-          </fieldset>
-          <div className='actions'>
-            <button name='button' type='submit' className='btn button button-primary'>
-              <FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
-            </button>
-          </div>
-        </SimpleForm>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
new file mode 100644
index 000000000..10ee37e5b
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -0,0 +1,464 @@
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import React, { useState, useEffect, useMemo } from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import { updateConfig } from 'soapbox/actions/admin';
+import { uploadMedia } from 'soapbox/actions/media';
+import snackbar from 'soapbox/actions/snackbar';
+import Icon from 'soapbox/components/icon';
+import { Column } from 'soapbox/components/ui';
+import {
+  SimpleForm,
+  FieldsGroup,
+  TextInput,
+  SimpleInput,
+  SimpleTextarea,
+  FileChooserLogo,
+  Checkbox,
+} from 'soapbox/features/forms';
+import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers';
+
+import Accordion from '../ui/components/accordion';
+
+import ColorWithPicker from './components/color-with-picker';
+import IconPicker from './components/icon-picker';
+import SitePreview from './components/site-preview';
+
+import type { ColorChangeHandler, ColorResult } from 'react-color';
+
+const messages = defineMessages({
+  heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
+  saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
+  copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
+  promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
+  promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
+  promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
+  homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
+  homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
+  cryptoAdressItemTicker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
+  cryptoAdressItemAddress: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' },
+  cryptoAdressItemNote: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' },
+  cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
+  customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
+  rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
+  rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
+  verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
+  displayFqnLabel: { id: 'soapbox_config.display_fqn_label', defaultMessage: 'Display domain (eg @user@domain) for local accounts.' },
+  greentextLabel: { id: 'soapbox_config.greentext_label', defaultMessage: 'Enable greentext support' },
+  promoPanelIconsLink: { id: 'soapbox_config.hints.promo_panel_icons.link', defaultMessage: 'Soapbox Icons List' },
+  authenticatedProfileLabel: { id: 'soapbox_config.authenticated_profile_label', defaultMessage: 'Profiles require authentication' },
+  authenticatedProfileHint: { id: 'soapbox_config.authenticated_profile_hint', defaultMessage: 'Users must be logged-in to view replies and media on user profiles.' },
+  singleUserModeLabel: { id: 'soapbox_config.single_user_mode_label', defaultMessage: 'Single user mode' },
+  singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
+  singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
+  singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
+});
+
+type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
+type ColorValueGetter = (color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => any;
+type Template = ImmutableMap<string, any>;
+type ConfigPath = Array<string | number>;
+
+const templates: Record<string, Template> = {
+  promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
+  footerItem: ImmutableMap({ title: '', url: '' }),
+  cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
+};
+
+const SoapboxConfig: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const initialData = useAppSelector(state => state.soapbox);
+
+  const [isLoading, setLoading] = useState(false);
+  const [data, setData] = useState(initialData);
+  const [jsonEditorExpanded, setJsonEditorExpanded] = useState(false);
+  const [rawJSON, setRawJSON] = useState<string>(JSON.stringify(initialData, null, 2));
+  const [jsonValid, setJsonValid] = useState(true);
+
+  const soapbox = useMemo(() => {
+    return normalizeSoapboxConfig(data);
+  }, [data]);
+
+  const setConfig = (path: ConfigPath, value: any) => {
+    const newData = data.setIn(path, value);
+    setData(newData);
+    setJsonValid(true);
+  };
+
+  const putConfig = (newData: any) => {
+    setData(newData);
+    setJsonValid(true);
+  };
+
+  const getParams = () => {
+    return [{
+      group: ':pleroma',
+      key: ':frontend_configurations',
+      value: [{
+        tuple: [':soapbox_fe', data.toJS()],
+      }],
+    }];
+  };
+
+  const handleSubmit: React.FormEventHandler = (e) => {
+    dispatch(updateConfig(getParams())).then(() => {
+      setLoading(false);
+      dispatch(snackbar.success(intl.formatMessage(messages.saved)));
+    }).catch(() => {
+      setLoading(false);
+    });
+    setLoading(true);
+    e.preventDefault();
+  };
+
+  const handleChange = (path: ConfigPath, getValue: ValueGetter<any>): React.ChangeEventHandler => {
+    return e => {
+      setConfig(path, getValue(e));
+    };
+  };
+
+  const handleColorChange = (path: ConfigPath, getValue: ColorValueGetter): ColorChangeHandler => {
+    return (color, event) => {
+      setConfig(path, getValue(color, event));
+    };
+  };
+
+  const handleFileChange = (path: ConfigPath): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      const data = new FormData();
+      const file = e.target.files?.item(0);
+
+      if (file) {
+        data.append('file', file);
+
+        dispatch(uploadMedia(data)).then(({ data }: any) => {
+          handleChange(path, () => data.url)(e);
+        }).catch(console.error);
+      }
+    };
+  };
+
+  const handleAddItem = (path: ConfigPath, template: ImmutableMap<string, any>) => {
+    const value = (soapbox.getIn(path) || ImmutableList()) as ImmutableList<any>;
+
+    return () => {
+      setConfig(
+        path,
+        value.push(template),
+      );
+    };
+  };
+
+  const handleDeleteItem = (path: ConfigPath) => {
+    return () => {
+      const newData = data.deleteIn(path);
+      setData(newData);
+    };
+  };
+
+  const handleItemChange = (
+    path: Array<string | number>,
+    key: string,
+    field: ImmutableMap<string, any>,
+    template: Template,
+    getValue: ValueGetter<HTMLInputElement> = e => e.target.value,
+  ) => {
+    return handleChange(
+      path, (e) =>
+        template
+          .merge(field)
+          .set(key, getValue(e)),
+    );
+  };
+
+  const handlePromoItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
+    return handleItemChange(
+      ['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
+    );
+  };
+
+  const handleHomeFooterItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
+    return handleItemChange(
+      ['navlinks', 'homeFooter', index], key, field, templates.footerItem, getValue,
+    );
+  };
+
+  const handleCryptoAdressItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
+    return handleItemChange(
+      ['cryptoAddresses', index], key, field, templates.cryptoAddress, getValue,
+    );
+  };
+
+  const handleEditJSON: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
+    setRawJSON(e.target.value);
+  };
+
+  const toggleJSONEditor = (expanded: boolean) => setJsonEditorExpanded(expanded);
+
+  useEffect(() => {
+    putConfig(initialData);
+  }, [initialData]);
+
+  useEffect(() => {
+    setRawJSON(JSON.stringify(data, null, 2));
+  }, [data]);
+
+  useEffect(() => {
+    try {
+      const data = fromJS(JSON.parse(rawJSON));
+      putConfig(data);
+    } catch {
+      setJsonValid(false);
+    }
+  }, [rawJSON]);
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <SimpleForm onSubmit={handleSubmit}>
+        <fieldset 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>
+                </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>
+          <FieldsGroup>
+            <TextInput
+              name='copyright'
+              label={intl.formatMessage(messages.copyrightFooterLabel)}
+              placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
+              value={soapbox.copyright}
+              onChange={handleChange(['copyright'], (e) => e.target.value)}
+            />
+          </FieldsGroup>
+          <FieldsGroup>
+            <Checkbox
+              name='verifiedCanEditName'
+              label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
+              checked={soapbox.verifiedCanEditName === true}
+              onChange={handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
+            />
+            <Checkbox
+              name='displayFqn'
+              label={intl.formatMessage(messages.displayFqnLabel)}
+              checked={soapbox.displayFqn === true}
+              onChange={handleChange(['displayFqn'], (e) => e.target.checked)}
+            />
+            <Checkbox
+              name='greentext'
+              label={intl.formatMessage(messages.greentextLabel)}
+              checked={soapbox.greentext === true}
+              onChange={handleChange(['greentext'], (e) => e.target.checked)}
+            />
+            <Checkbox
+              name='authenticatedProfile'
+              label={intl.formatMessage(messages.authenticatedProfileLabel)}
+              hint={intl.formatMessage(messages.authenticatedProfileHint)}
+              checked={soapbox.authenticatedProfile === true}
+              onChange={handleChange(['authenticatedProfile'], (e) => e.target.checked)}
+            />
+            <Checkbox
+              name='singleUserMode'
+              label={intl.formatMessage(messages.singleUserModeLabel)}
+              hint={intl.formatMessage(messages.singleUserModeHint)}
+              checked={soapbox.singleUserMode === true}
+              onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
+            />
+            {soapbox.get('singleUserMode') && (
+              <TextInput
+                name='singleUserModeProfile'
+                label={intl.formatMessage(messages.singleUserModeProfileLabel)}
+                placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
+                value={soapbox.singleUserModeProfile}
+                onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
+              />
+            )}
+          </FieldsGroup>
+          <FieldsGroup>
+            <div className='input with_block_label popup'>
+              <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
+              <span className='hint'>
+                <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />
+              </span>
+              <span className='hint'>
+                <FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://icons8.com/line-awesome'>{intl.formatMessage(messages.promoPanelIconsLink)}</a> }} />
+              </span>
+              {
+                soapbox.promoPanel.items.map((field, i) => (
+                  <div className='row' key={i}>
+                    <IconPicker
+                      label={intl.formatMessage(messages.promoItemIcon)}
+                      value={field.icon}
+                      // @ts-ignore
+                      onChange={handlePromoItemChange(i, 'icon', field, val => val.id)}
+                    />
+                    <TextInput
+                      label={intl.formatMessage(messages.promoItemLabel)}
+                      placeholder={intl.formatMessage(messages.promoItemLabel)}
+                      value={field.text}
+                      onChange={handlePromoItemChange(i, 'text', field)}
+                    />
+                    <TextInput
+                      label={intl.formatMessage(messages.promoItemURL)}
+                      placeholder={intl.formatMessage(messages.promoItemURL)}
+                      value={field.url}
+                      onChange={handlePromoItemChange(i, 'url', field)}
+                    />
+                    <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['promoPanel', 'items', i])} />
+                  </div>
+                ))
+              }
+              <div className='actions add-row'>
+                <div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
+                  <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
+                  <FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
+                </div>
+              </div>
+            </div>
+          </FieldsGroup>
+          <FieldsGroup>
+            <div className='input with_block_label'>
+              <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
+              <span className='hint'>
+                <FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
+              </span>
+              {
+                soapbox.navlinks.get('homeFooter')?.map((field, i) => (
+                  <div className='row' key={i}>
+                    <TextInput
+                      label={intl.formatMessage(messages.homeFooterItemLabel)}
+                      placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
+                      value={field.title}
+                      onChange={handleHomeFooterItemChange(i, 'title', field)}
+                    />
+                    <TextInput
+                      label={intl.formatMessage(messages.homeFooterItemURL)}
+                      placeholder={intl.formatMessage(messages.homeFooterItemURL)}
+                      value={field.url}
+                      onChange={handleHomeFooterItemChange(i, 'url', field)}
+                    />
+                    <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['navlinks', 'homeFooter', i])} />
+                  </div>
+                ))
+              }
+              <div className='actions add-row'>
+                <div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
+                  <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
+                  <FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
+                </div>
+              </div>
+            </div>
+          </FieldsGroup>
+          <FieldsGroup>
+            <div className='input with_block_label'>
+              <label><FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' /></label>
+              <span className='hint'>
+                <FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />
+              </span>
+              {
+                soapbox.cryptoAddresses.map((address, i) => (
+                  <div className='row' key={i}>
+                    <TextInput
+                      label={intl.formatMessage(messages.cryptoAdressItemTicker)}
+                      placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
+                      value={address.ticker}
+                      onChange={handleCryptoAdressItemChange(i, 'ticker', address)}
+                    />
+                    <TextInput
+                      label={intl.formatMessage(messages.cryptoAdressItemAddress)}
+                      placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
+                      value={address.address}
+                      onChange={handleCryptoAdressItemChange(i, 'address', address)}
+                    />
+                    <TextInput
+                      label={intl.formatMessage(messages.cryptoAdressItemNote)}
+                      placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
+                      value={address.note}
+                      onChange={handleCryptoAdressItemChange(i, 'note', address)}
+                    />
+                    <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['cryptoAddresses', i])} />
+                  </div>
+                ))
+              }
+              <div className='actions add-row'>
+                <div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['cryptoAddresses'], templates.cryptoAddress)}>
+                  <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
+                  <FormattedMessage id='soapbox_config.fields.crypto_address.add' defaultMessage='Add new crypto address' />
+                </div>
+              </div>
+            </div>
+          </FieldsGroup>
+          <FieldsGroup>
+            <SimpleInput
+              type='number'
+              min={0}
+              pattern='[0-9]+'
+              name='cryptoDonatePanelLimit'
+              label={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
+              placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
+              value={soapbox.cryptoDonatePanel.get('limit')}
+              onChange={handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
+            />
+          </FieldsGroup>
+          <Accordion
+            headline={intl.formatMessage(messages.rawJSONLabel)}
+            expanded={jsonEditorExpanded}
+            onToggle={toggleJSONEditor}
+          >
+            <div className={jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
+              <SimpleTextarea
+                hint={intl.formatMessage(messages.rawJSONHint)}
+                value={rawJSON}
+                onChange={handleEditJSON}
+                rows={12}
+              />
+            </div>
+          </Accordion>
+        </fieldset>
+        <div className='actions'>
+          <button name='button' type='submit' className='btn button button-primary'>
+            <FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
+          </button>
+        </div>
+      </SimpleForm>
+    </Column>
+  );
+};
+
+export default SoapboxConfig;

From 0f341eee6e8f93f94e38f8303a142e4c1bea467d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 14:41:35 -0500
Subject: [PATCH 04/29] Streamfield: export generic StreamfieldComponent<T>
 type

---
 app/soapbox/components/ui/streamfield/streamfield.tsx | 8 +++++++-
 app/soapbox/features/edit_profile/index.tsx           | 9 ++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 90651fb78..ff4f619f8 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -12,6 +12,12 @@ const messages = defineMessages({
   remove: { id: 'streamfield.remove', defaultMessage: 'Remove' },
 });
 
+/** Type of the inner Streamfield input component. */
+export type StreamfieldComponent<T> = React.ComponentType<{
+  value: T,
+  onChange: (value: T) => void,
+}>;
+
 interface IStreamfield {
   /** Array of values for the streamfield. */
   values: any[],
@@ -26,7 +32,7 @@ interface IStreamfield {
   /** Callback when values are changed. */
   onChange: (values: any[]) => void,
   /** Input to render for each value. */
-  component: React.ComponentType<{ onChange: (value: any) => void, value: any }>,
+  component: StreamfieldComponent<any>,
   /** Maximum number of allowed inputs. */
   maxItems?: number,
 }
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 6a174a022..b2e0df172 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -12,7 +12,7 @@ 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 Streamfield from '../../components/ui/streamfield/streamfield';
+import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
 
 import ProfilePreview from './components/profile-preview';
 
@@ -147,12 +147,7 @@ const accountToCredentials = (account: Account): AccountCredentials => {
   };
 };
 
-interface IProfileField {
-  value: AccountCredentialsField,
-  onChange: (field: AccountCredentialsField) => void,
-}
-
-const ProfileField: React.FC<IProfileField> = ({ value, onChange }) => {
+const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ value, onChange }) => {
   const intl = useIntl();
 
   const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {

From 9bd18b13bd8c44007e328ae54994516c72ffd7a2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 14:57:19 -0500
Subject: [PATCH 05/29] Streamfield: labelText, hintText --> label, hint

---
 .../components/ui/streamfield/streamfield.tsx        | 12 ++++++------
 app/soapbox/features/edit_profile/index.tsx          |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index ff4f619f8..48e8d43ba 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -22,9 +22,9 @@ interface IStreamfield {
   /** Array of values for the streamfield. */
   values: any[],
   /** Input label message. */
-  labelText?: React.ReactNode,
+  label?: React.ReactNode,
   /** Input hint message. */
-  hintText?: React.ReactNode,
+  hint?: React.ReactNode,
   /** Callback to add an item. */
   onAddItem?: () => void,
   /** Callback to remove an item by index. */
@@ -40,8 +40,8 @@ interface IStreamfield {
 /** List of inputs that can be added or removed. */
 const Streamfield: React.FC<IStreamfield> = ({
   values,
-  labelText,
-  hintText,
+  label,
+  hint,
   onAddItem,
   onRemoveItem,
   onChange,
@@ -61,8 +61,8 @@ const Streamfield: React.FC<IStreamfield> = ({
   return (
     <Stack space={4}>
       <Stack>
-        {labelText && <Text size='sm' weight='medium'>{labelText}</Text>}
-        {hintText && <Text size='xs' theme='muted'>{hintText}</Text>}
+        {label && <Text size='sm' weight='medium'>{label}</Text>}
+        {hint && <Text size='xs' theme='muted'>{hint}</Text>}
       </Stack>
 
       <Stack>
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index b2e0df172..e7c607a6a 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -452,8 +452,8 @@ const EditProfile: React.FC = () => {
 
         {features.profileFields && (
           <Streamfield
-            labelText={<FormattedMessage id='edit_profile.fields.meta_fields_label' defaultMessage='Profile fields' />}
-            hintText={<FormattedMessage id='edit_profile.hints.meta_fields' defaultMessage='You can have up to {count, plural, one {# custom field} other {# custom fields}} displayed on your profile.' values={{ count: maxFields }} />}
+            label={<FormattedMessage id='edit_profile.fields.meta_fields_label' defaultMessage='Profile fields' />}
+            hint={<FormattedMessage id='edit_profile.hints.meta_fields' defaultMessage='You can have up to {count, plural, one {# custom field} other {# custom fields}} displayed on your profile.' values={{ count: maxFields }} />}
             values={data.fields_attributes || []}
             onChange={handleFieldsChange}
             onAddItem={handleAddField}

From 2588bdd4ffa652ce661cdaacf43c44f6b4040167 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 15:06:52 -0500
Subject: [PATCH 06/29] SoapboxConfig: use Streamfield for cryptoAddresses

---
 app/soapbox/features/soapbox_config/index.tsx | 106 ++++++++++--------
 1 file changed, 62 insertions(+), 44 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 10ee37e5b..d6e2b4615 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -6,7 +6,8 @@ import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import Icon from 'soapbox/components/icon';
-import { Column } from 'soapbox/components/ui';
+import { Column, HStack, Input } from 'soapbox/components/ui';
+import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import {
   SimpleForm,
   FieldsGroup,
@@ -27,6 +28,7 @@ import IconPicker from './components/icon-picker';
 import SitePreview from './components/site-preview';
 
 import type { ColorChangeHandler, ColorResult } from 'react-color';
+import type { CryptoAddress } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@@ -67,6 +69,42 @@ const templates: Record<string, Template> = {
   cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
 };
 
+const CryptoAddressInput: StreamfieldComponent<CryptoAddress> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange = (key: 'ticker' | 'address' | 'note'): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange(value.set(key, e.currentTarget.value));
+    };
+  };
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        outerClassName='w-1/6 flex-grow'
+        value={value.ticker}
+        onChange={handleChange('ticker')}
+        placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
+      />
+      <Input
+        type='text'
+        outerClassName='w-3/6 flex-grow'
+        value={value.address}
+        onChange={handleChange('address')}
+        placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
+      />
+      <Input
+        type='text'
+        outerClassName='w-2/6 flex-grow'
+        value={value.note}
+        onChange={handleChange('note')}
+        placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
+      />
+    </HStack>
+  );
+};
+
 const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -187,10 +225,18 @@ const SoapboxConfig: React.FC = () => {
     );
   };
 
-  const handleCryptoAdressItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
-    return handleItemChange(
-      ['cryptoAddresses', index], key, field, templates.cryptoAddress, getValue,
-    );
+  const handleCryptoAdressChange = (values: CryptoAddress[]) => {
+    setConfig(['cryptoAddresses'], ImmutableList(values));
+  };
+
+  const addCryptoAddress = () => {
+    const cryptoAddresses = data.get('cryptoAddresses');
+    setConfig(['cryptoAddresses'], cryptoAddresses.push(templates.cryptoAddress));
+  };
+
+  const removeCryptoAddress = (i: number) => {
+    const cryptoAddresses = data.get('cryptoAddresses');
+    setConfig(['cryptoAddresses'], cryptoAddresses.delete(i));
   };
 
   const handleEditJSON: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
@@ -385,45 +431,17 @@ const SoapboxConfig: React.FC = () => {
               </div>
             </div>
           </FieldsGroup>
-          <FieldsGroup>
-            <div className='input with_block_label'>
-              <label><FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' /></label>
-              <span className='hint'>
-                <FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />
-              </span>
-              {
-                soapbox.cryptoAddresses.map((address, i) => (
-                  <div className='row' key={i}>
-                    <TextInput
-                      label={intl.formatMessage(messages.cryptoAdressItemTicker)}
-                      placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
-                      value={address.ticker}
-                      onChange={handleCryptoAdressItemChange(i, 'ticker', address)}
-                    />
-                    <TextInput
-                      label={intl.formatMessage(messages.cryptoAdressItemAddress)}
-                      placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
-                      value={address.address}
-                      onChange={handleCryptoAdressItemChange(i, 'address', address)}
-                    />
-                    <TextInput
-                      label={intl.formatMessage(messages.cryptoAdressItemNote)}
-                      placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
-                      value={address.note}
-                      onChange={handleCryptoAdressItemChange(i, 'note', address)}
-                    />
-                    <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['cryptoAddresses', i])} />
-                  </div>
-                ))
-              }
-              <div className='actions add-row'>
-                <div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['cryptoAddresses'], templates.cryptoAddress)}>
-                  <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
-                  <FormattedMessage id='soapbox_config.fields.crypto_address.add' defaultMessage='Add new crypto address' />
-                </div>
-              </div>
-            </div>
-          </FieldsGroup>
+
+          <Streamfield
+            label={<FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' />}
+            hint={<FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />}
+            component={CryptoAddressInput}
+            values={soapbox.cryptoAddresses.toArray()}
+            onChange={handleCryptoAdressChange}
+            onAddItem={addCryptoAddress}
+            onRemoveItem={removeCryptoAddress}
+          />
+
           <FieldsGroup>
             <SimpleInput
               type='number'

From 3be558cf4104874eed0aa5c0b3c45821406eaa0f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 15:12:38 -0500
Subject: [PATCH 07/29] Move CryptoAddressInput into its own file

---
 .../components/crypto-address-input.tsx       | 51 +++++++++++++++++++
 app/soapbox/features/soapbox_config/index.tsx | 40 +--------------
 2 files changed, 52 insertions(+), 39 deletions(-)
 create mode 100644 app/soapbox/features/soapbox_config/components/crypto-address-input.tsx

diff --git a/app/soapbox/features/soapbox_config/components/crypto-address-input.tsx b/app/soapbox/features/soapbox_config/components/crypto-address-input.tsx
new file mode 100644
index 000000000..75ffec27c
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/crypto-address-input.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+
+import { HStack, Input } from 'soapbox/components/ui';
+import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+
+import type { CryptoAddress } from 'soapbox/types/soapbox';
+
+const messages = defineMessages({
+  ticker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
+  address: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' },
+  note: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' },
+});
+
+const CryptoAddressInput: StreamfieldComponent<CryptoAddress> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange = (key: 'ticker' | 'address' | 'note'): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange(value.set(key, e.currentTarget.value));
+    };
+  };
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        outerClassName='w-1/6 flex-grow'
+        value={value.ticker}
+        onChange={handleChange('ticker')}
+        placeholder={intl.formatMessage(messages.ticker)}
+      />
+      <Input
+        type='text'
+        outerClassName='w-3/6 flex-grow'
+        value={value.address}
+        onChange={handleChange('address')}
+        placeholder={intl.formatMessage(messages.address)}
+      />
+      <Input
+        type='text'
+        outerClassName='w-2/6 flex-grow'
+        value={value.note}
+        onChange={handleChange('note')}
+        placeholder={intl.formatMessage(messages.note)}
+      />
+    </HStack>
+  );
+};
+
+export default CryptoAddressInput;
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index d6e2b4615..c3ca22147 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -24,6 +24,7 @@ import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 import Accordion from '../ui/components/accordion';
 
 import ColorWithPicker from './components/color-with-picker';
+import CryptoAddressInput from './components/crypto-address-input';
 import IconPicker from './components/icon-picker';
 import SitePreview from './components/site-preview';
 
@@ -39,9 +40,6 @@ const messages = defineMessages({
   promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
   homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
   homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
-  cryptoAdressItemTicker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
-  cryptoAdressItemAddress: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' },
-  cryptoAdressItemNote: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' },
   cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
   customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
   rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
@@ -69,42 +67,6 @@ const templates: Record<string, Template> = {
   cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
 };
 
-const CryptoAddressInput: StreamfieldComponent<CryptoAddress> = ({ value, onChange }) => {
-  const intl = useIntl();
-
-  const handleChange = (key: 'ticker' | 'address' | 'note'): React.ChangeEventHandler<HTMLInputElement> => {
-    return e => {
-      onChange(value.set(key, e.currentTarget.value));
-    };
-  };
-
-  return (
-    <HStack space={2} grow>
-      <Input
-        type='text'
-        outerClassName='w-1/6 flex-grow'
-        value={value.ticker}
-        onChange={handleChange('ticker')}
-        placeholder={intl.formatMessage(messages.cryptoAdressItemTicker)}
-      />
-      <Input
-        type='text'
-        outerClassName='w-3/6 flex-grow'
-        value={value.address}
-        onChange={handleChange('address')}
-        placeholder={intl.formatMessage(messages.cryptoAdressItemAddress)}
-      />
-      <Input
-        type='text'
-        outerClassName='w-2/6 flex-grow'
-        value={value.note}
-        onChange={handleChange('note')}
-        placeholder={intl.formatMessage(messages.cryptoAdressItemNote)}
-      />
-    </HStack>
-  );
-};
-
 const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();

From 91c52cdde704869c6e89f70df924bee06295f22b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 15:52:25 -0500
Subject: [PATCH 08/29] SoapboxConfig: use Streamfield for PromoPanelInput,
 refactor getter/setters

---
 app/soapbox/features/soapbox_config/index.tsx | 158 +++++++++---------
 1 file changed, 81 insertions(+), 77 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index c3ca22147..676656e5c 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -6,10 +6,9 @@ import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import Icon from 'soapbox/components/icon';
-import { Column, HStack, Input } from 'soapbox/components/ui';
+import { Column, Form, FormActions, Button, HStack, Input } from 'soapbox/components/ui';
 import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import {
-  SimpleForm,
   FieldsGroup,
   TextInput,
   SimpleInput,
@@ -29,7 +28,7 @@ import IconPicker from './components/icon-picker';
 import SitePreview from './components/site-preview';
 
 import type { ColorChangeHandler, ColorResult } from 'react-color';
-import type { CryptoAddress } from 'soapbox/types/soapbox';
+import type { CryptoAddress, PromoPanelItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@@ -67,6 +66,43 @@ const templates: Record<string, Template> = {
   cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
 };
 
+const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleIconChange = (icon: any) => {
+    onChange(value.set('icon', icon.id));
+  };
+
+  const handleChange = (key: 'text' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange(value.set(key, e.currentTarget.value));
+    };
+  };
+
+  return (
+    <HStack space={2} grow>
+      <IconPicker
+        label={intl.formatMessage(messages.promoItemIcon)}
+        value={value.icon}
+        onChange={handleIconChange}
+      />
+
+      <Input
+        type='text'
+        placeholder={intl.formatMessage(messages.promoItemLabel)}
+        value={value.text}
+        onChange={handleChange('text')}
+      />
+      <Input
+        type='text'
+        placeholder={intl.formatMessage(messages.promoItemURL)}
+        value={value.url}
+        onChange={handleChange('url')}
+      />
+    </HStack>
+  );
+};
+
 const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -153,13 +189,13 @@ const SoapboxConfig: React.FC = () => {
     };
   };
 
-  const handleDeleteItem = (path: ConfigPath) => {
-    return () => {
-      const newData = data.deleteIn(path);
-      setData(newData);
-    };
+  const deleteItem = (path: ConfigPath) => {
+    const newData = data.deleteIn(path);
+    setData(newData);
   };
 
+  const handleDeleteItem = (path: ConfigPath) => () => deleteItem(path);
+
   const handleItemChange = (
     path: Array<string | number>,
     key: string,
@@ -175,10 +211,23 @@ const SoapboxConfig: React.FC = () => {
     );
   };
 
-  const handlePromoItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
-    return handleItemChange(
-      ['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
-    );
+  const handleStreamItemChange = (path: ConfigPath) => {
+    return (values: any[]) => {
+      setConfig(path, ImmutableList(values));
+    };
+  };
+
+  const addStreamItem = (path: ConfigPath, template: Template) => {
+    return () => {
+      const items = data.getIn(path);
+      setConfig(path, items.push(template));
+    };
+  };
+
+  const deleteStreamItem = (path: ConfigPath) => {
+    return (i: number) => {
+      deleteItem([...path, i]);
+    };
   };
 
   const handleHomeFooterItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
@@ -187,20 +236,6 @@ const SoapboxConfig: React.FC = () => {
     );
   };
 
-  const handleCryptoAdressChange = (values: CryptoAddress[]) => {
-    setConfig(['cryptoAddresses'], ImmutableList(values));
-  };
-
-  const addCryptoAddress = () => {
-    const cryptoAddresses = data.get('cryptoAddresses');
-    setConfig(['cryptoAddresses'], cryptoAddresses.push(templates.cryptoAddress));
-  };
-
-  const removeCryptoAddress = (i: number) => {
-    const cryptoAddresses = data.get('cryptoAddresses');
-    setConfig(['cryptoAddresses'], cryptoAddresses.delete(i));
-  };
-
   const handleEditJSON: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
     setRawJSON(e.target.value);
   };
@@ -226,7 +261,7 @@ const SoapboxConfig: React.FC = () => {
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <SimpleForm onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit} className='simple_form'>
         <fieldset disabled={isLoading}>
           <SitePreview soapbox={soapbox} />
           <FieldsGroup>
@@ -318,48 +353,17 @@ const SoapboxConfig: React.FC = () => {
               />
             )}
           </FieldsGroup>
-          <FieldsGroup>
-            <div className='input with_block_label popup'>
-              <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
-              <span className='hint'>
-                <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />
-              </span>
-              <span className='hint'>
-                <FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://icons8.com/line-awesome'>{intl.formatMessage(messages.promoPanelIconsLink)}</a> }} />
-              </span>
-              {
-                soapbox.promoPanel.items.map((field, i) => (
-                  <div className='row' key={i}>
-                    <IconPicker
-                      label={intl.formatMessage(messages.promoItemIcon)}
-                      value={field.icon}
-                      // @ts-ignore
-                      onChange={handlePromoItemChange(i, 'icon', field, val => val.id)}
-                    />
-                    <TextInput
-                      label={intl.formatMessage(messages.promoItemLabel)}
-                      placeholder={intl.formatMessage(messages.promoItemLabel)}
-                      value={field.text}
-                      onChange={handlePromoItemChange(i, 'text', field)}
-                    />
-                    <TextInput
-                      label={intl.formatMessage(messages.promoItemURL)}
-                      placeholder={intl.formatMessage(messages.promoItemURL)}
-                      value={field.url}
-                      onChange={handlePromoItemChange(i, 'url', field)}
-                    />
-                    <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['promoPanel', 'items', i])} />
-                  </div>
-                ))
-              }
-              <div className='actions add-row'>
-                <div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
-                  <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
-                  <FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
-                </div>
-              </div>
-            </div>
-          </FieldsGroup>
+
+          <Streamfield
+            label={<FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' />}
+            hint={<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />}
+            component={PromoPanelInput}
+            values={soapbox.promoPanel.items.toArray()}
+            onChange={handleStreamItemChange(['promoPanel', 'items'])}
+            onAddItem={addStreamItem(['promoPanel', 'items'], templates.promoPanel)}
+            onRemoveItem={deleteStreamItem(['promoPanel', 'items'])}
+          />
+
           <FieldsGroup>
             <div className='input with_block_label'>
               <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
@@ -399,9 +403,9 @@ const SoapboxConfig: React.FC = () => {
             hint={<FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />}
             component={CryptoAddressInput}
             values={soapbox.cryptoAddresses.toArray()}
-            onChange={handleCryptoAdressChange}
-            onAddItem={addCryptoAddress}
-            onRemoveItem={removeCryptoAddress}
+            onChange={handleStreamItemChange(['cryptoAddresses'])}
+            onAddItem={addStreamItem(['cryptoAddresses'], templates.cryptoAddress)}
+            onRemoveItem={deleteStreamItem(['cryptoAddresses'])}
           />
 
           <FieldsGroup>
@@ -431,12 +435,12 @@ const SoapboxConfig: React.FC = () => {
             </div>
           </Accordion>
         </fieldset>
-        <div className='actions'>
-          <button name='button' type='submit' className='btn button button-primary'>
+        <FormActions>
+          <Button type='submit'>
             <FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
-          </button>
-        </div>
-      </SimpleForm>
+          </Button>
+        </FormActions>
+      </Form>
     </Column>
   );
 };

From af61ae9d354ff7eee5c9906203c67037e9a2f846 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 15:54:06 -0500
Subject: [PATCH 09/29] PromoPanelInput: remove icon label

---
 app/soapbox/features/soapbox_config/components/icon-picker.tsx | 2 +-
 app/soapbox/features/soapbox_config/index.tsx                  | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/components/icon-picker.tsx b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
index bb0c18eff..7fa060b54 100644
--- a/app/soapbox/features/soapbox_config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import IconPickerDropdown from './icon_picker_dropdown';
 
 interface IIconPicker {
-  label: React.ReactNode,
+  label?: React.ReactNode,
   value: string,
   onChange: React.ChangeEventHandler,
 }
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 676656e5c..673e4f018 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -82,7 +82,6 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
   return (
     <HStack space={2} grow>
       <IconPicker
-        label={intl.formatMessage(messages.promoItemIcon)}
         value={value.icon}
         onChange={handleIconChange}
       />

From 9abe924e92a47ada502a3d19aff21290ff07a054 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 15:57:30 -0500
Subject: [PATCH 10/29] SoapboxConfig: move PromoPanelInput into its own file

---
 .../components/promo-panel-input.tsx          | 53 +++++++++++++++++++
 app/soapbox/features/soapbox_config/index.tsx | 44 +--------------
 2 files changed, 55 insertions(+), 42 deletions(-)
 create mode 100644 app/soapbox/features/soapbox_config/components/promo-panel-input.tsx

diff --git a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
new file mode 100644
index 000000000..d48370e7a
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+
+import { HStack, Input } from 'soapbox/components/ui';
+import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+
+import IconPicker from './icon-picker';
+
+import type { PromoPanelItem } from 'soapbox/types/soapbox';
+
+const messages = defineMessages({
+  icon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
+  label: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
+  url: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
+});
+
+const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleIconChange = (icon: any) => {
+    onChange(value.set('icon', icon.id));
+  };
+
+  const handleChange = (key: 'text' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange(value.set(key, e.currentTarget.value));
+    };
+  };
+
+  return (
+    <HStack space={2} grow>
+      <IconPicker
+        value={value.icon}
+        onChange={handleIconChange}
+      />
+
+      <Input
+        type='text'
+        placeholder={intl.formatMessage(messages.label)}
+        value={value.text}
+        onChange={handleChange('text')}
+      />
+      <Input
+        type='text'
+        placeholder={intl.formatMessage(messages.url)}
+        value={value.url}
+        onChange={handleChange('url')}
+      />
+    </HStack>
+  );
+};
+
+export default PromoPanelInput;
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 673e4f018..c74e69d98 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -6,7 +6,7 @@ import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
 import Icon from 'soapbox/components/icon';
-import { Column, Form, FormActions, Button, HStack, Input } from 'soapbox/components/ui';
+import { Column, Form, FormActions, Button } from 'soapbox/components/ui';
 import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import {
   FieldsGroup,
@@ -24,19 +24,15 @@ import Accordion from '../ui/components/accordion';
 
 import ColorWithPicker from './components/color-with-picker';
 import CryptoAddressInput from './components/crypto-address-input';
-import IconPicker from './components/icon-picker';
+import PromoPanelInput from './components/promo-panel-input';
 import SitePreview from './components/site-preview';
 
 import type { ColorChangeHandler, ColorResult } from 'react-color';
-import type { CryptoAddress, PromoPanelItem } from 'soapbox/types/soapbox';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
   saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
   copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
-  promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
-  promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
-  promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
   homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
   homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
   cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
@@ -66,42 +62,6 @@ const templates: Record<string, Template> = {
   cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
 };
 
-const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange }) => {
-  const intl = useIntl();
-
-  const handleIconChange = (icon: any) => {
-    onChange(value.set('icon', icon.id));
-  };
-
-  const handleChange = (key: 'text' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {
-    return e => {
-      onChange(value.set(key, e.currentTarget.value));
-    };
-  };
-
-  return (
-    <HStack space={2} grow>
-      <IconPicker
-        value={value.icon}
-        onChange={handleIconChange}
-      />
-
-      <Input
-        type='text'
-        placeholder={intl.formatMessage(messages.promoItemLabel)}
-        value={value.text}
-        onChange={handleChange('text')}
-      />
-      <Input
-        type='text'
-        placeholder={intl.formatMessage(messages.promoItemURL)}
-        value={value.url}
-        onChange={handleChange('url')}
-      />
-    </HStack>
-  );
-};
-
 const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();

From b401af2950c891170110317cfcd35f75a75591c8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 15:59:36 -0500
Subject: [PATCH 11/29] Streamfield: don't render values container unless it
 has values

---
 .../components/ui/streamfield/streamfield.tsx | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index 48e8d43ba..902ae2873 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -65,22 +65,24 @@ const Streamfield: React.FC<IStreamfield> = ({
         {hint && <Text size='xs' theme='muted'>{hint}</Text>}
       </Stack>
 
-      <Stack>
-        {values.map((value, i) => (
-          <HStack space={2} alignItems='center'>
-            <Component key={i} onChange={handleChange(i)} value={value} />
-            {onRemoveItem && (
-              <IconButton
-                iconClassName='w-4 h-4'
-                className='bg-transparent text-gray-400 hover:text-gray-600'
-                src={require('@tabler/icons/icons/x.svg')}
-                onClick={() => onRemoveItem(i)}
-                title={intl.formatMessage(messages.remove)}
-              />
-            )}
-          </HStack>
-        ))}
-      </Stack>
+      {(values.length > 0) && (
+        <Stack>
+          {values.map((value, i) => (
+            <HStack space={2} alignItems='center'>
+              <Component key={i} onChange={handleChange(i)} value={value} />
+              {onRemoveItem && (
+                <IconButton
+                  iconClassName='w-4 h-4'
+                  className='bg-transparent text-gray-400 hover:text-gray-600'
+                  src={require('@tabler/icons/icons/x.svg')}
+                  onClick={() => onRemoveItem(i)}
+                  title={intl.formatMessage(messages.remove)}
+                />
+              )}
+            </HStack>
+          ))}
+        </Stack>
+      )}
 
       {onAddItem && (
         <Button

From f3e95bba51814089e09fa26d7db32d26a5e97be7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 16:18:43 -0500
Subject: [PATCH 12/29] SoapboxConfig: convert home footer links into
 Streamfield

---
 .../components/footer-link-input.tsx          | 41 +++++++++
 app/soapbox/features/soapbox_config/index.tsx | 90 +++----------------
 .../normalizers/soapbox/soapbox_config.ts     |  7 ++
 3 files changed, 61 insertions(+), 77 deletions(-)
 create mode 100644 app/soapbox/features/soapbox_config/components/footer-link-input.tsx

diff --git a/app/soapbox/features/soapbox_config/components/footer-link-input.tsx b/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
new file mode 100644
index 000000000..ac4accc19
--- /dev/null
+++ b/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+
+import { HStack, Input } from 'soapbox/components/ui';
+import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+
+import type { FooterItem } from 'soapbox/types/soapbox';
+
+const messages = defineMessages({
+  label: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
+  url: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
+});
+
+const PromoPanelInput: StreamfieldComponent<FooterItem> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange = (key: 'title' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {
+    return e => {
+      onChange(value.set(key, e.currentTarget.value));
+    };
+  };
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        placeholder={intl.formatMessage(messages.label)}
+        value={value.title}
+        onChange={handleChange('title')}
+      />
+      <Input
+        type='text'
+        placeholder={intl.formatMessage(messages.url)}
+        value={value.url}
+        onChange={handleChange('url')}
+      />
+    </HStack>
+  );
+};
+
+export default PromoPanelInput;
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index c74e69d98..6964f0f30 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -5,9 +5,8 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
-import Icon from 'soapbox/components/icon';
 import { Column, Form, FormActions, Button } from 'soapbox/components/ui';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import {
   FieldsGroup,
   TextInput,
@@ -24,6 +23,7 @@ import Accordion from '../ui/components/accordion';
 
 import ColorWithPicker from './components/color-with-picker';
 import CryptoAddressInput from './components/crypto-address-input';
+import FooterLinkInput from './components/footer-link-input';
 import PromoPanelInput from './components/promo-panel-input';
 import SitePreview from './components/site-preview';
 
@@ -33,8 +33,6 @@ const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
   saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
   copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
-  homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
-  homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
   cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
   customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
   rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
@@ -137,39 +135,6 @@ const SoapboxConfig: React.FC = () => {
     };
   };
 
-  const handleAddItem = (path: ConfigPath, template: ImmutableMap<string, any>) => {
-    const value = (soapbox.getIn(path) || ImmutableList()) as ImmutableList<any>;
-
-    return () => {
-      setConfig(
-        path,
-        value.push(template),
-      );
-    };
-  };
-
-  const deleteItem = (path: ConfigPath) => {
-    const newData = data.deleteIn(path);
-    setData(newData);
-  };
-
-  const handleDeleteItem = (path: ConfigPath) => () => deleteItem(path);
-
-  const handleItemChange = (
-    path: Array<string | number>,
-    key: string,
-    field: ImmutableMap<string, any>,
-    template: Template,
-    getValue: ValueGetter<HTMLInputElement> = e => e.target.value,
-  ) => {
-    return handleChange(
-      path, (e) =>
-        template
-          .merge(field)
-          .set(key, getValue(e)),
-    );
-  };
-
   const handleStreamItemChange = (path: ConfigPath) => {
     return (values: any[]) => {
       setConfig(path, ImmutableList(values));
@@ -185,16 +150,11 @@ const SoapboxConfig: React.FC = () => {
 
   const deleteStreamItem = (path: ConfigPath) => {
     return (i: number) => {
-      deleteItem([...path, i]);
+      const newData = data.deleteIn([...path, i]);
+      setData(newData);
     };
   };
 
-  const handleHomeFooterItemChange = (index: number, key: string, field: any, getValue?: ValueGetter) => {
-    return handleItemChange(
-      ['navlinks', 'homeFooter', index], key, field, templates.footerItem, getValue,
-    );
-  };
-
   const handleEditJSON: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
     setRawJSON(e.target.value);
   };
@@ -323,39 +283,15 @@ const SoapboxConfig: React.FC = () => {
             onRemoveItem={deleteStreamItem(['promoPanel', 'items'])}
           />
 
-          <FieldsGroup>
-            <div className='input with_block_label'>
-              <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
-              <span className='hint'>
-                <FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
-              </span>
-              {
-                soapbox.navlinks.get('homeFooter')?.map((field, i) => (
-                  <div className='row' key={i}>
-                    <TextInput
-                      label={intl.formatMessage(messages.homeFooterItemLabel)}
-                      placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
-                      value={field.title}
-                      onChange={handleHomeFooterItemChange(i, 'title', field)}
-                    />
-                    <TextInput
-                      label={intl.formatMessage(messages.homeFooterItemURL)}
-                      placeholder={intl.formatMessage(messages.homeFooterItemURL)}
-                      value={field.url}
-                      onChange={handleHomeFooterItemChange(i, 'url', field)}
-                    />
-                    <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={handleDeleteItem(['navlinks', 'homeFooter', i])} />
-                  </div>
-                ))
-              }
-              <div className='actions add-row'>
-                <div role='presentation' className='btn button button-secondary' onClick={handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
-                  <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
-                  <FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
-                </div>
-              </div>
-            </div>
-          </FieldsGroup>
+          <Streamfield
+            label={<FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' />}
+            hint={<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />}
+            component={FooterLinkInput}
+            values={soapbox.navlinks.get('homeFooter')?.toArray() || []}
+            onChange={handleStreamItemChange(['navlinks', 'homeFooter'])}
+            onAddItem={addStreamItem(['navlinks', 'homeFooter'], templates.footerItem)}
+            onRemoveItem={deleteStreamItem(['navlinks', 'homeFooter'])}
+          />
 
           <Streamfield
             label={<FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' />}
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index 07fd5aff3..aad2a13da 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -171,6 +171,12 @@ const normalizePromoPanel = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap
   return soapboxConfig.set('promoPanel', promoPanel.set('items', items));
 };
 
+const normalizeFooterLinks = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
+  const path = ['navlinks', 'homeFooter'];
+  const items = (soapboxConfig.getIn(path, ImmutableList()) as ImmutableList<any>).map(FooterItemRecord);
+  return soapboxConfig.setIn(path, items);
+};
+
 export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
   return SoapboxConfigRecord(
     ImmutableMap(fromJS(soapboxConfig)).withMutations(soapboxConfig => {
@@ -178,6 +184,7 @@ export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
       normalizeAccentColor(soapboxConfig);
       normalizeColors(soapboxConfig);
       normalizePromoPanel(soapboxConfig);
+      normalizeFooterLinks(soapboxConfig);
       maybeAddMissingColors(soapboxConfig);
       normalizeCryptoAddresses(soapboxConfig);
     }),

From 2fdf4413f5fa33145e468a67d33c4a59a789ba3a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 16:22:57 -0500
Subject: [PATCH 13/29] SoapboxConfig: improve spacing

---
 app/soapbox/features/soapbox_config/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 6964f0f30..e44e4cbfd 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -180,8 +180,8 @@ const SoapboxConfig: React.FC = () => {
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <Form onSubmit={handleSubmit} className='simple_form'>
-        <fieldset disabled={isLoading}>
+      <Form onSubmit={handleSubmit} className='simple_form space-y-4'>
+        <fieldset className='space-y-4' disabled={isLoading}>
           <SitePreview soapbox={soapbox} />
           <FieldsGroup>
             <div className='fields-row file-picker'>

From f5039b9877cda9942ecf226960a1037743e82bc4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 16:35:30 -0500
Subject: [PATCH 14/29] SoapboxConfig: refactor inputs

---
 app/soapbox/components/ui/input/input.tsx     |  6 +--
 app/soapbox/features/soapbox_config/index.tsx | 39 +++++++++----------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index cab86e10e..75ab74601 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -11,7 +11,7 @@ const messages = defineMessages({
   hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
 });
 
-interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly'> {
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */
@@ -27,11 +27,11 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   /** Text to display before a value is entered. */
   placeholder?: string,
   /** Text in the input. */
-  value?: string,
+  value?: string | number,
   /** Change event handler for the input. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
   /** HTML input type. */
-  type: 'text' | 'email' | 'tel' | 'password',
+  type: 'text' | 'number' | 'email' | 'tel' | 'password',
 }
 
 /** Form input element. */
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index e44e4cbfd..9411212cb 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -5,12 +5,10 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { updateConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
 import snackbar from 'soapbox/actions/snackbar';
-import { Column, Form, FormActions, Button } from 'soapbox/components/ui';
+import { Column, Form, FormActions, FormGroup, Input, Button } from 'soapbox/components/ui';
 import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import {
   FieldsGroup,
-  TextInput,
-  SimpleInput,
   SimpleTextarea,
   FileChooserLogo,
   Checkbox,
@@ -220,15 +218,16 @@ const SoapboxConfig: React.FC = () => {
               </div>
             </div>
           </FieldsGroup>
-          <FieldsGroup>
-            <TextInput
-              name='copyright'
-              label={intl.formatMessage(messages.copyrightFooterLabel)}
+
+          <FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
+            <Input
+              type='text'
               placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
               value={soapbox.copyright}
               onChange={handleChange(['copyright'], (e) => e.target.value)}
             />
-          </FieldsGroup>
+          </FormGroup>
+
           <FieldsGroup>
             <Checkbox
               name='verifiedCanEditName'
@@ -263,13 +262,14 @@ const SoapboxConfig: React.FC = () => {
               onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
             />
             {soapbox.get('singleUserMode') && (
-              <TextInput
-                name='singleUserModeProfile'
-                label={intl.formatMessage(messages.singleUserModeProfileLabel)}
-                placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
-                value={soapbox.singleUserModeProfile}
-                onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
-              />
+              <FormGroup labelText={intl.formatMessage(messages.singleUserModeProfileLabel)}>
+                <Input
+                  type='text'
+                  placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
+                  value={soapbox.singleUserModeProfile}
+                  onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
+                />
+              </FormGroup>
             )}
           </FieldsGroup>
 
@@ -303,18 +303,17 @@ const SoapboxConfig: React.FC = () => {
             onRemoveItem={deleteStreamItem(['cryptoAddresses'])}
           />
 
-          <FieldsGroup>
-            <SimpleInput
+          <FormGroup labelText={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}>
+            <Input
               type='number'
               min={0}
               pattern='[0-9]+'
-              name='cryptoDonatePanelLimit'
-              label={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
               placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
               value={soapbox.cryptoDonatePanel.get('limit')}
               onChange={handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
             />
-          </FieldsGroup>
+          </FormGroup>
+
           <Accordion
             headline={intl.formatMessage(messages.rawJSONLabel)}
             expanded={jsonEditorExpanded}

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 15/29] 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;
     }

From bec8f0fffe882c40616741926d4c9eb9773b7cf9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:07:54 -0500
Subject: [PATCH 16/29] Restore icon picker styles

---
 app/styles/emoji_picker.scss | 37 +++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index f1a3ea40d..7bef34d27 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -176,7 +176,7 @@
 }
 
 .emoji-mart-emoji-native {
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji", sans-serif;
 }
 
 .emoji-mart-no-results {
@@ -260,3 +260,38 @@
     height: 22px;
   }
 }
+
+.font-icon-picker {
+  .emoji-mart-search {
+    // Search doesn't work. Hide it for now.
+    display: none;
+    padding: 10px !important;
+  }
+
+  .emoji-mart-category-label > span {
+    padding: 9px 6px 5px;
+  }
+
+  .emoji-mart-scroll {
+    border-radius: 4px;
+  }
+
+  .emoji-mart-search-icon {
+    right: 18px;
+  }
+
+  .emoji-mart-bar {
+    display: none;
+  }
+
+  .fa {
+    font-size: 18px;
+    width: 22px;
+    height: 22px;
+    text-align: center;
+  }
+
+  .fa-hack {
+    margin: 0 auto;
+  }
+}

From 65beeedb5944ef082a45711e0ce81ca1dc034f8d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:29:24 -0500
Subject: [PATCH 17/29] SoapboxConfig: improve style of IconPicker

---
 .../soapbox_config/components/icon-picker.tsx | 12 +++-------
 .../components/icon_picker_dropdown.js        | 14 ++++++++++--
 .../components/promo-panel-input.tsx          |  2 +-
 app/styles/forms.scss                         | 22 -------------------
 4 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/components/icon-picker.tsx b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
index 7fa060b54..2531eca0a 100644
--- a/app/soapbox/features/soapbox_config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
@@ -3,20 +3,14 @@ import React from 'react';
 import IconPickerDropdown from './icon_picker_dropdown';
 
 interface IIconPicker {
-  label?: React.ReactNode,
   value: string,
   onChange: React.ChangeEventHandler,
 }
 
-const IconPicker: React.FC<IIconPicker> = ({ onChange, value, label }) => {
+const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
   return (
-    <div className='input with_label font_icon_picker'>
-      <div className='label_input__font_icon_picker'>
-        {label && (<label>{label}</label>)}
-        <div className='label_input_wrapper'>
-          <IconPickerDropdown value={value} onPickEmoji={onChange} />
-        </div>
-      </div>
+    <div className='mt-1 relative rounded-md shadow-sm dark:bg-slate-800 border border-solid border-gray-300 dark:border-gray-600 rounded-md'>
+      <IconPickerDropdown value={value} onPickEmoji={onChange} />
     </div>
   );
 };
diff --git a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
index 56258f5ad..8c2bdf473 100644
--- a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
+++ b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
@@ -215,8 +215,18 @@ class IconPickerDropdown extends React.PureComponent {
     const forkAwesomeIcons = require('../forkawesome.json');
 
     return (
-      <div className='font-icon-picker-dropdown' onKeyDown={this.handleKeyDown}>
-        <div ref={this.setTargetRef} className='font-icon-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
+      <div onKeyDown={this.handleKeyDown}>
+        <div
+          ref={this.setTargetRef}
+          className='h-[38px] w-[38px] text-lg flex items-center justify-center cursor-pointer'
+          title={title}
+          aria-label={title}
+          aria-expanded={active}
+          role='button'
+          onClick={this.onToggle}
+          onKeyDown={this.onToggle}
+          tabIndex={0}
+        >
           <Icon id={value} />
         </div>
 
diff --git a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
index d48370e7a..3bda1f1d8 100644
--- a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
@@ -28,7 +28,7 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
   };
 
   return (
-    <HStack space={2} grow>
+    <HStack space={2} alignItems='center' grow>
       <IconPicker
         value={value.icon}
         onChange={handleIconChange}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 901853323..6c0625572 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -542,28 +542,6 @@ code {
       }
     }
 
-    &__font_icon_picker {
-      font-size: 14px;
-
-      .font-icon-button {
-        padding: 9px;
-        border: 1px solid var(--highlight-text-color);
-        border-radius: 4px;
-        cursor: pointer;
-        outline: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 38px;
-        box-sizing: border-box;
-
-        .fa {
-          font-size: 18px;
-          color: var(--primary-text-color);
-        }
-      }
-    }
-
     &__wrapper {
       position: relative;
     }

From df714f1112e6fa087fa07d50e148e2163d2be701 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:37:25 -0500
Subject: [PATCH 18/29] SoapboxConfig: improve ColorPicker styles

---
 .../features/soapbox_config/components/color-with-picker.tsx  | 4 ++--
 app/soapbox/features/soapbox_config/index.tsx                 | 4 ++--
 2 files changed, 4 insertions(+), 4 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 6178140e6..711883807 100644
--- a/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
@@ -38,13 +38,13 @@ const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, label, value, o
   };
 
   return (
-    <div className='label_input__color'>
+    <div>
       <label>{label}</label>
 
       <div
         ref={node}
         id={buttonId}
-        className='color-swatch'
+        className='w-8 h-8 rounded-md'
         role='presentation'
         style={{ background: value }}
         title={value}
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 90d30e742..2ccdf144a 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -179,7 +179,7 @@ const SoapboxConfig: React.FC = () => {
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <Form onSubmit={handleSubmit} className='simple_form space-y-4'>
+      <Form onSubmit={handleSubmit}>
         <fieldset className='space-y-6' disabled={isLoading}>
           <SitePreview soapbox={soapbox} />
 
@@ -229,7 +229,7 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
-          <Stack space={2}>
+          <Stack space={2} className='simple_form'>
             <Checkbox
               name='verifiedCanEditName'
               label={intl.formatMessage(messages.verifiedCanEditNameLabel)}

From 874ae980e6cb6af2d1e65e74ceef8854fb660f8b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:45:32 -0500
Subject: [PATCH 19/29] SoapboxConfig: refactor Textarea

---
 .../components/ui/form-group/form-group.tsx   | 22 ++++++++++---------
 .../components/ui/textarea/textarea.tsx       |  7 ++++--
 app/soapbox/features/soapbox_config/index.tsx | 12 +++++-----
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index e70bc5836..e90448e8c 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 interface IFormGroup {
   /** Input label message. */
-  labelText: React.ReactNode,
+  labelText?: React.ReactNode,
   /** Input hint message. */
   hintText?: React.ReactNode,
   /** Input errors. */
@@ -26,13 +26,15 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
 
   return (
     <div>
-      <label
-        htmlFor={formFieldId}
-        data-testid='form-group-label'
-        className='block text-sm font-medium text-gray-700 dark:text-gray-400'
-      >
-        {labelText}
-      </label>
+      {labelText && (
+        <label
+          htmlFor={formFieldId}
+          data-testid='form-group-label'
+          className='block text-sm font-medium text-gray-700 dark:text-gray-400'
+        >
+          {labelText}
+        </label>
+      )}
 
       <div className='mt-1 dark:text-white'>
         {firstChild}
@@ -47,11 +49,11 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           </p>
         )}
 
-        {hintText ? (
+        {hintText && (
           <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-400'>
             {hintText}
           </p>
-        ) : null}
+        )}
       </div>
     </div>
   );
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index fbd8ba86f..b181fc848 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */
@@ -16,11 +16,13 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
   value?: string,
   /** Whether the device should autocomplete text in this textarea. */
   autoComplete?: string,
+  /** Whether to display the textarea in red. */
+  hasError?: boolean,
 }
 
 /** Textarea with custom styles. */
 const Textarea = React.forwardRef(
-  ({ isCodeEditor = false, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
+  ({ isCodeEditor = false, hasError = false, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
     return (
       <textarea
         {...props}
@@ -29,6 +31,7 @@ const Textarea = React.forwardRef(
           'dark:bg-slate-800 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md':
               true,
           'font-mono': isCodeEditor,
+          'text-red-600 border-red-600': hasError,
         })}
       />
     );
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 2ccdf144a..f9b04f78e 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -5,12 +5,11 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 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 { 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 {
-  SimpleTextarea,
   FileChooserLogo,
   Checkbox,
 } from 'soapbox/features/forms';
@@ -320,14 +319,15 @@ const SoapboxConfig: React.FC = () => {
             expanded={jsonEditorExpanded}
             onToggle={toggleJSONEditor}
           >
-            <div className={jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
-              <SimpleTextarea
-                hint={intl.formatMessage(messages.rawJSONHint)}
+            <FormGroup hintText={intl.formatMessage(messages.rawJSONHint)}>
+              <Textarea
                 value={rawJSON}
                 onChange={handleEditJSON}
+                hasError={!jsonValid}
+                isCodeEditor
                 rows={12}
               />
-            </div>
+            </FormGroup>
           </Accordion>
         </fieldset>
         <FormActions>

From 0bd43a3f2c9e290a54cc3285b27e53e281a2c8bc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:51:07 -0500
Subject: [PATCH 20/29] SoapboxConfig: improve style of file uploader

---
 app/soapbox/features/soapbox_config/index.tsx | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index f9b04f78e..fc1b79793 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -9,10 +9,7 @@ import { Column, Form, FormActions, FormGroup, Input, Textarea, Button } from 's
 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 {
-  FileChooserLogo,
-  Checkbox,
-} from 'soapbox/features/forms';
+import { Checkbox } from 'soapbox/features/forms';
 import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
@@ -210,12 +207,17 @@ const SoapboxConfig: React.FC = () => {
             </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'])}
-              />
+              <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>
 
@@ -330,6 +332,7 @@ const SoapboxConfig: React.FC = () => {
             </FormGroup>
           </Accordion>
         </fieldset>
+
         <FormActions>
           <Button type='submit'>
             <FormattedMessage id='soapbox_config.save' defaultMessage='Save' />

From db08a276571b247f3df713c69a1cb95d6b835330 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 18:12:08 -0500
Subject: [PATCH 21/29] SoapboxConfig: fix theme selector

---
 app/soapbox/features/soapbox_config/index.tsx | 19 +++---
 .../features/ui/components/theme-selector.tsx | 63 +++++++++++++++++++
 .../features/ui/components/theme-toggle.tsx   | 60 +++---------------
 3 files changed, 85 insertions(+), 57 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/theme-selector.tsx

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index fc1b79793..25e28ce5d 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -10,7 +10,7 @@ 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 { Checkbox } from 'soapbox/features/forms';
-import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
+import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
@@ -48,6 +48,7 @@ type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
 type ColorValueGetter = (color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => any;
 type Template = ImmutableMap<string, any>;
 type ConfigPath = Array<string | number>;
+type ThemeChangeHandler = (theme: string) => void;
 
 const templates: Record<string, Template> = {
   promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
@@ -109,6 +110,12 @@ const SoapboxConfig: React.FC = () => {
     };
   };
 
+  const handleThemeChange = (path: ConfigPath): ThemeChangeHandler => {
+    return theme => {
+      setConfig(path, theme);
+    };
+  };
+
   const handleColorChange = (path: ConfigPath, getValue: ColorValueGetter): ColorChangeHandler => {
     return (color, event) => {
       setConfig(path, getValue(color, event));
@@ -196,12 +203,10 @@ const SoapboxConfig: React.FC = () => {
               <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}
-                  /> */}
+                  <ThemeSelector
+                    value={soapbox.defaultSettings.get('themeMode')}
+                    onChange={handleThemeChange(['defaultSettings', 'themeMode'])}
+                  />
                 </div>
               </div>
             </Stack>
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
new file mode 100644
index 000000000..bc009ea7d
--- /dev/null
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Icon } from 'soapbox/components/ui';
+
+const messages = defineMessages({
+  light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
+  dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
+  system: { id: 'theme_toggle.system', defaultMessage: 'System' },
+});
+
+interface IThemeSelector {
+  value: string,
+  onChange: (value: string) => void,
+}
+
+/** Pure theme selector. */
+const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const themeIconSrc = useMemo(() => {
+    switch (value) {
+    case 'system':
+      return require('@tabler/icons/icons/device-desktop.svg');
+    case 'light':
+      return require('@tabler/icons/icons/sun.svg');
+    case 'dark':
+      return require('@tabler/icons/icons/moon.svg');
+    default:
+      return null;
+    }
+  }, [value]);
+
+  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = e => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <label>
+      <div className='relative rounded-md shadow-sm'>
+        <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
+          <Icon src={themeIconSrc} className='h-4 w-4 text-gray-400' />
+        </div>
+
+        <select
+          onBlur={handleChange}
+          defaultValue={value}
+          className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
+        >
+          <option value='system'>{intl.formatMessage(messages.system)}</option>
+          <option value='light'>{intl.formatMessage(messages.light)}</option>
+          <option value='dark'>{intl.formatMessage(messages.dark)}</option>
+        </select>
+
+        <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
+          <Icon src={require('@tabler/icons/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
+        </div>
+      </div>
+    </label>
+  );
+};
+
+export default ThemeSelector;
diff --git a/app/soapbox/features/ui/components/theme-toggle.tsx b/app/soapbox/features/ui/components/theme-toggle.tsx
index 3d69a4afa..3465190b9 100644
--- a/app/soapbox/features/ui/components/theme-toggle.tsx
+++ b/app/soapbox/features/ui/components/theme-toggle.tsx
@@ -1,65 +1,25 @@
-import React, { useMemo } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { changeSetting } from 'soapbox/actions/settings';
-import { Icon } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
-const messages = defineMessages({
-  light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
-  dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
-  system: { id: 'theme_toggle.system', defaultMessage: 'System' },
-});
+import ThemeSelector from './theme-selector';
 
-interface IThemeToggle {
-  showLabel?: boolean,
-}
-
-const ThemeToggle = ({ showLabel }: IThemeToggle) => {
-  const intl = useIntl();
+/** Stateful theme selector. */
+const ThemeToggle: React.FC = () => {
   const dispatch = useDispatch();
   const themeMode = useSettings().get('themeMode');
 
-  const onToggle = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    dispatch(changeSetting(['themeMode'], event.target.value));
+  const handleChange = (themeMode: string) => {
+    dispatch(changeSetting(['themeMode'], themeMode));
   };
 
-  const themeIconSrc = useMemo(() => {
-    switch (themeMode) {
-    case 'system':
-      return require('@tabler/icons/icons/device-desktop.svg');
-    case 'light':
-      return require('@tabler/icons/icons/sun.svg');
-    case 'dark':
-      return require('@tabler/icons/icons/moon.svg');
-    default:
-      return null;
-    }
-  }, [themeMode]);
-
   return (
-    <label>
-      <div className='relative rounded-md shadow-sm'>
-        <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
-          <Icon src={themeIconSrc} className='h-4 w-4 text-gray-400' />
-        </div>
-
-        <select
-          onChange={onToggle}
-          defaultValue={themeMode}
-          className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
-        >
-          <option value='system'>{intl.formatMessage(messages.system)}</option>
-          <option value='light'>{intl.formatMessage(messages.light)}</option>
-          <option value='dark'>{intl.formatMessage(messages.dark)}</option>
-        </select>
-
-        <div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
-          <Icon src={require('@tabler/icons/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
-        </div>
-      </div>
-    </label>
+    <ThemeSelector
+      value={themeMode}
+      onChange={handleChange}
+    />
   );
 };
 

From ab7e123c960b68f4791bace5db3dea202620c214 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 18:19:53 -0500
Subject: [PATCH 22/29] SoapboxConfig: expand input widths

---
 .../features/soapbox_config/components/footer-link-input.tsx    | 2 ++
 .../features/soapbox_config/components/promo-panel-input.tsx    | 2 ++
 app/soapbox/features/soapbox_config/index.tsx                   | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/app/soapbox/features/soapbox_config/components/footer-link-input.tsx b/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
index ac4accc19..bf2451240 100644
--- a/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
@@ -24,12 +24,14 @@ const PromoPanelInput: StreamfieldComponent<FooterItem> = ({ value, onChange })
     <HStack space={2} grow>
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.label)}
         value={value.title}
         onChange={handleChange('title')}
       />
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.url)}
         value={value.url}
         onChange={handleChange('url')}
diff --git a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
index 3bda1f1d8..616fddb82 100644
--- a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
@@ -36,12 +36,14 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
 
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.label)}
         value={value.text}
         onChange={handleChange('text')}
       />
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.url)}
         value={value.url}
         onChange={handleChange('url')}
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 25e28ce5d..9eb5ed28f 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -194,12 +194,14 @@ const SoapboxConfig: React.FC = () => {
                 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>

From 758b14fd68e87599e1f4352bf65f30e459e0cc97 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 18:30:25 -0500
Subject: [PATCH 23/29] SoapboxConfig: change checkboxes to Toggle list

---
 app/soapbox/features/soapbox_config/index.tsx | 77 +++++++++++--------
 1 file changed, 44 insertions(+), 33 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 9eb5ed28f..dabf4a830 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -1,15 +1,16 @@
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import React, { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import Toggle from 'react-toggle';
 
 import { updateConfig } from 'soapbox/actions/admin';
 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 { Checkbox } from 'soapbox/features/forms';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
@@ -237,50 +238,60 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
-          <Stack space={2} className='simple_form'>
-            <Checkbox
-              name='verifiedCanEditName'
-              label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
-              checked={soapbox.verifiedCanEditName === true}
-              onChange={handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
-            />
-            <Checkbox
-              name='displayFqn'
-              label={intl.formatMessage(messages.displayFqnLabel)}
-              checked={soapbox.displayFqn === true}
-              onChange={handleChange(['displayFqn'], (e) => e.target.checked)}
-            />
-            <Checkbox
-              name='greentext'
-              label={intl.formatMessage(messages.greentextLabel)}
-              checked={soapbox.greentext === true}
-              onChange={handleChange(['greentext'], (e) => e.target.checked)}
-            />
-            <Checkbox
-              name='authenticatedProfile'
+          <List>
+            <ListItem label={intl.formatMessage(messages.verifiedCanEditNameLabel)}>
+              <Toggle
+                checked={soapbox.verifiedCanEditName === true}
+                onChange={handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
+            <ListItem label={intl.formatMessage(messages.displayFqnLabel)}>
+              <Toggle
+                checked={soapbox.displayFqn === true}
+                onChange={handleChange(['displayFqn'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
+
+            <ListItem label={intl.formatMessage(messages.greentextLabel)}>
+              <Toggle
+                checked={soapbox.greentext === true}
+                onChange={handleChange(['greentext'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
+            <ListItem
               label={intl.formatMessage(messages.authenticatedProfileLabel)}
               hint={intl.formatMessage(messages.authenticatedProfileHint)}
-              checked={soapbox.authenticatedProfile === true}
-              onChange={handleChange(['authenticatedProfile'], (e) => e.target.checked)}
-            />
-            <Checkbox
-              name='singleUserMode'
+            >
+              <Toggle
+                checked={soapbox.authenticatedProfile === true}
+                onChange={handleChange(['authenticatedProfile'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
+            <ListItem
               label={intl.formatMessage(messages.singleUserModeLabel)}
               hint={intl.formatMessage(messages.singleUserModeHint)}
-              checked={soapbox.singleUserMode === true}
-              onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
-            />
+            >
+              <Toggle
+                checked={soapbox.singleUserMode === true}
+                onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
             {soapbox.get('singleUserMode') && (
-              <FormGroup labelText={intl.formatMessage(messages.singleUserModeProfileLabel)}>
+              <ListItem label={intl.formatMessage(messages.singleUserModeProfileLabel)}>
                 <Input
                   type='text'
                   placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
                   value={soapbox.singleUserModeProfile}
                   onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
                 />
-              </FormGroup>
+              </ListItem>
             )}
-          </Stack>
+          </List>
 
           <Streamfield
             label={<FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' />}

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 24/29] 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

From f7d274954c1860d4b34669a731fe398f2447ea85 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 18:46:16 -0500
Subject: [PATCH 25/29] SoapboxConfig: reorganize and add headings

---
 app/soapbox/features/soapbox_config/index.tsx | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 760616453..e734f1b87 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -7,7 +7,17 @@ import { updateConfig } from 'soapbox/actions/admin';
 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 {
+  Column,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormActions,
+  FormGroup,
+  Input,
+  Textarea,
+  Button,
+} from 'soapbox/components/ui';
 import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
@@ -197,6 +207,10 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.theme' defaultMessage='Theme' />} />
+          </CardHeader>
+
           <List>
             <ListItem label={<FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' />}>
               <ThemeSelector
@@ -222,14 +236,9 @@ const SoapboxConfig: React.FC = () => {
             </ListItem>
           </List>
 
-          <FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
-            <Input
-              type='text'
-              placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
-              value={soapbox.copyright}
-              onChange={handleChange(['copyright'], (e) => e.target.value)}
-            />
-          </FormGroup>
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.options' defaultMessage='Options' />} />
+          </CardHeader>
 
           <List>
             <ListItem label={intl.formatMessage(messages.verifiedCanEditNameLabel)}>
@@ -246,7 +255,6 @@ const SoapboxConfig: React.FC = () => {
               />
             </ListItem>
 
-
             <ListItem label={intl.formatMessage(messages.greentextLabel)}>
               <Toggle
                 checked={soapbox.greentext === true}
@@ -286,6 +294,10 @@ const SoapboxConfig: React.FC = () => {
             )}
           </List>
 
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.navigation' defaultMessage='Navigation' />} />
+          </CardHeader>
+
           <Streamfield
             label={<FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' />}
             hint={<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />}
@@ -306,6 +318,19 @@ const SoapboxConfig: React.FC = () => {
             onRemoveItem={deleteStreamItem(['navlinks', 'homeFooter'])}
           />
 
+          <FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
+            <Input
+              type='text'
+              placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
+              value={soapbox.copyright}
+              onChange={handleChange(['copyright'], (e) => e.target.value)}
+            />
+          </FormGroup>
+
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.cryptocurrency' defaultMessage='Cryptocurrency' />} />
+          </CardHeader>
+
           <Streamfield
             label={<FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' />}
             hint={<FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />}
@@ -327,6 +352,10 @@ const SoapboxConfig: React.FC = () => {
             />
           </FormGroup>
 
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.advanced' defaultMessage='Advanced' />} />
+          </CardHeader>
+
           <Accordion
             headline={intl.formatMessage(messages.rawJSONLabel)}
             expanded={jsonEditorExpanded}

From ea8c33beed3a966b11e4edc533180a938a658a6f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 18:52:24 -0500
Subject: [PATCH 26/29] SitePreview: clean up links

---
 .../features/soapbox_config/components/site-preview.tsx  | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx
index 87706f3d8..36cbe5ca8 100644
--- a/app/soapbox/features/soapbox_config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@@ -33,15 +33,6 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
                 <div className='tabs-bar__split tabs-bar__split--left'>
                   <a className='tabs-bar__link--logo' href='#'>
                     <img alt='Logo' src={soapboxConfig.logo} />
-                    <span>Home</span>
-                  </a>
-                  <a className='tabs-bar__link' href='#'>
-                    <i role='img' className='fa fa-home' />
-                    <span>Home</span>
-                  </a>
-                  <a className='tabs-bar__link' href='#'>
-                    <i role='img' className='fa fa-bell' />
-                    <span>Notifications</span>
                   </a>
                 </div>
               </div>

From 40dda8b274bb95f4333daa53e0da1403d20dc983 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 20:22:34 -0500
Subject: [PATCH 27/29] LinkFooter: add /soapbox/config link back

---
 app/soapbox/features/ui/components/link_footer.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/soapbox/features/ui/components/link_footer.tsx b/app/soapbox/features/ui/components/link_footer.tsx
index 4c81c5539..a8444d046 100644
--- a/app/soapbox/features/ui/components/link_footer.tsx
+++ b/app/soapbox/features/ui/components/link_footer.tsx
@@ -50,6 +50,9 @@ const LinkFooter: React.FC = (): JSX.Element => {
           {features.federating && (
             <FooterLink to='/domain_blocks'><FormattedMessage id='navigation_bar.domain_blocks' defaultMessage='Domain blocks' /></FooterLink>
           )}
+          {account.admin && (
+            <FooterLink to='/soapbox/config'><FormattedMessage id='navigation_bar.soapbox_config' defaultMessage='Soapbox config' /></FooterLink>
+          )}
           {account.locked && (
             <FooterLink to='/follow_requests'><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></FooterLink>
           )}

From b62a2db8a589b0ec0662009e4ccc6525593780b1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 21:09:54 -0500
Subject: [PATCH 28/29] ThemeSelector: okay but definitely use onChange, not
 onBlur

---
 app/soapbox/features/ui/components/theme-selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index bc009ea7d..bd4f57ccd 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -43,7 +43,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         </div>
 
         <select
-          onBlur={handleChange}
+          onChange={handleChange}
           defaultValue={value}
           className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
         >

From 50f11318110d0ec5a36325e8c96787dd1729ad92 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 21:25:52 -0500
Subject: [PATCH 29/29] SitePreview: make it actually work

---
 .../components/site-preview.tsx               | 48 ++++++++++---------
 .../ui/components/background_shapes.tsx       | 10 +++-
 app/styles/forms.scss                         | 30 ------------
 app/styles/truth.scss                         |  7 ---
 4 files changed, 33 insertions(+), 62 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx
index 36cbe5ca8..12a5a1de3 100644
--- a/app/soapbox/features/soapbox_config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@@ -1,7 +1,9 @@
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { defaultSettings } from 'soapbox/actions/settings';
+import BackgroundShapes from 'soapbox/features/ui/components/background_shapes';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 import { generateThemeCss } from 'soapbox/utils/theme';
 
@@ -15,33 +17,33 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
   const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]);
   const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings);
 
-  const bodyClass = classNames('site-preview', `theme-mode-${settings.get('themeMode')}`, {
-    'no-reduce-motion': !settings.get('reduceMotion'),
-    'underline-links': settings.get('underlineLinks'),
-    'dyslexic': settings.get('dyslexicFont'),
-    'demetricator': settings.get('demetricator'),
-  });
+  const dark = settings.get('themeMode') === 'dark';
+
+  const bodyClass = classNames(
+    'site-preview',
+    'relative flex justify-center align-center text-base',
+    'border border-solid border-gray-200 dark:border-slate-600',
+    'h-40 rounded-lg overflow-hidden',
+    {
+      'bg-white': !dark,
+      'bg-slate-900': dark,
+    });
 
   return (
     <div className={bodyClass}>
       <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
-      <div className='app-holder'>
-        <div>
-          <div className='ui'>
-            <nav className='tabs-bar'>
-              <div className='tabs-bar__container'>
-                <div className='tabs-bar__split tabs-bar__split--left'>
-                  <a className='tabs-bar__link--logo' href='#'>
-                    <img alt='Logo' src={soapboxConfig.logo} />
-                  </a>
-                </div>
-              </div>
-            </nav>
-            <div className='page'>
-              <span className='spoiler-button__overlay__label'>Site Preview</span>
-            </div>
-          </div>
-        </div>
+      <BackgroundShapes position='absolute' />
+
+      <div className='absolute p-2 rounded-lg overflow-hidden bg-accent-500 text-white self-center z-20'>
+        <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
+      </div>
+
+      <div className={classNames('flex absolute inset-0 shadow z-10 h-12 lg:h-16', {
+        'bg-white': !dark,
+        'bg-slate-800': dark,
+      })}
+      >
+        <img alt='Logo' className='h-5 lg:h-6 self-center px-2' src={soapboxConfig.logo} />
       </div>
     </div>
   );
diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index 82809909b..bc4e3694c 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -1,8 +1,14 @@
+import classNames from 'classnames';
 import React from 'react';
 
+interface IBackgroundShapes {
+  /** Whether the shapes should be absolute positioned or fixed. */
+  position?: 'fixed' | 'absolute',
+}
+
 /** Gradient that appears in the background of the UI. */
-const BackgroundShapes: React.FC = () => (
-  <div className='fixed top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none'>
+const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
+  <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
     <div className='flex-none flex justify-center'>
       <svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
         <defs>
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 6c0625572..82bda6714 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -776,36 +776,6 @@ code {
   transform: translateY(7px);
 }
 
-.site-preview {
-  border-radius: 4px;
-  overflow: hidden;
-  height: 164px;
-  border: 1px solid;
-  margin-bottom: 40px;
-  background: var(--background-color);
-
-  * {
-    z-index: 0;
-  }
-
-  a {
-    cursor: default;
-  }
-
-  .ui {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    height: 100%;
-  }
-
-  .page {
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-}
-
 .input.with_label.toggle .label_input {
   display: flex;
   font-size: 14px;
diff --git a/app/styles/truth.scss b/app/styles/truth.scss
index 8b4eaf5a8..5c7e1770f 100644
--- a/app/styles/truth.scss
+++ b/app/styles/truth.scss
@@ -34,13 +34,6 @@
   background-color: var(--brand-color) !important;
 }
 
-body,
-.site-preview {
-  --accent-color_h: 345;
-  --accent-color_s: 100%;
-  --accent-color_l: 64%;
-}
-
 @media screen and (max-width: 450px) {
   .tabs-bar__link--logo {
     margin: 0 auto;