Merge branch 'soapbox-config' into 'develop'

Overhaul SoapboxConfig See merge request soapbox-pub/soapbox-fe!1315
2022-05-06 14:02:59 +00:00 · 2022-05-06 14:02:59 +00:00 · e734c7c967
commit e734c7c967
--- 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>
  );
--- 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. */
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@ -12,13 +12,19 @@ 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[],
  /** 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. */
@ -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,
 }
@ -34,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,
@ -55,26 +61,28 @@ 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>
-        {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
--- 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,
        })}
      />
    );
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@ -11,8 +11,10 @@ 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 Streamfield from '../../components/ui/streamfield/streamfield';
+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';

@ -147,12 +149,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> => {
@ -399,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' />}
@ -453,12 +450,12 @@ const EditProfile: React.FC = () => {
              onChange={handleCheckboxChange('accepts_email_list')}
            />
          )}
-        </div>
+        </Stack>

        {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}
--- 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} />
 );

--- a/app/soapbox/features/soapbox_config/components/color-picker.tsx
+++ 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;
--- a/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
@ -0,0 +1,58 @@
+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,
+  value: string,
+  onChange: ColorChangeHandler,
+}
+
+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);
+
+  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>
+      <div
+        ref={node}
+        id={buttonId}
+        className='w-8 h-8 rounded-md'
+        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;
--- a/app/soapbox/features/soapbox_config/components/crypto-address-input.tsx
+++ 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;
--- a/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
@ -0,0 +1,43 @@
+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'
+        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')}
+      />
+    </HStack>
+  );
+};
+
+export default PromoPanelInput;
--- a/app/soapbox/features/soapbox_config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/icon-picker.tsx
@ -0,0 +1,18 @@
+import React from 'react';
+
+import IconPickerDropdown from './icon_picker_dropdown';
+
+interface IIconPicker {
+  value: string,
+  onChange: React.ChangeEventHandler,
+}
+
+const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
+  return (
+    <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>
+  );
+};
+
+export default IconPicker;
--- 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>

--- a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
@ -0,0 +1,55 @@
+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} alignItems='center' grow>
+      <IconPicker
+        value={value.icon}
+        onChange={handleIconChange}
+      />
+
+      <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')}
+      />
+    </HStack>
+  );
+};
+
+export default PromoPanelInput;
--- a/app/soapbox/features/soapbox_config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@ -0,0 +1,53 @@
+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';
+
+interface ISitePreview {
+  /** Raw Soapbox configuration. */
+  soapbox: any,
+}
+
+/** 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 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>
+      <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>
+  );
+
+};
+
+export default SitePreview;
--- a/app/soapbox/features/soapbox_config/components/site_preview.js
+++ b/app/soapbox/features/soapbox_config/components/site_preview.js
@ -1,56 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import { defaultSettings } from 'soapbox/actions/settings';
-import { generateThemeCss } from 'soapbox/utils/theme';
-
-export default function SitePreview({ soapbox }) {
-
-  const settings = defaultSettings.mergeDeep(soapbox.get('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'),
-  });
-
-  return (
-    <div className={bodyClass}>
-      <style>{`.site-preview {${generateThemeCss(soapbox)}}`}</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={soapbox.get('logo')} />
-                    <span>Home</span>
-                  </a>
-                  <a className='tabs-bar__link' href='#'>
-                    <i role='img' alt='home' className='fa fa-home' />
-                    <span>Home</span>
-                  </a>
-                  <a className='tabs-bar__link' href='#'>
-                    <i role='img' alt='bell' className='fa fa-bell' />
-                    <span>Notifications</span>
-                  </a>
-                </div>
-              </div>
-            </nav>
-            <div className='page'>
-              <span className='spoiler-button__overlay__label'>Site Preview</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-}
-
-SitePreview.propTypes = {
-  soapbox: ImmutablePropTypes.record.isRequired,
-};
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@ -1,581 +0,0 @@
-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';
-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 { isMobile } from 'soapbox/is_mobile';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-
-import Accordion from '../ui/components/accordion';
-
-import IconPickerDropdown from './components/icon_picker_dropdown';
-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 listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-
-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>
-    );
-  }
-
-}
-
-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>
-    );
-  }
-
-}
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@ -0,0 +1,386 @@
+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,
+  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';
+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 FooterLinkInput from './components/footer-link-input';
+import PromoPanelInput from './components/promo-panel-input';
+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' },
+  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>;
+type ThemeChangeHandler = (theme: string) => void;
+
+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 handleThemeChange = (path: ConfigPath): ThemeChangeHandler => {
+    return theme => {
+      setConfig(path, theme);
+    };
+  };
+
+  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 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) => {
+      const newData = data.deleteIn([...path, i]);
+      setData(newData);
+    };
+  };
+
+  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)}>
+      <Form onSubmit={handleSubmit}>
+        <fieldset className='space-y-6' disabled={isLoading}>
+          <SitePreview soapbox={soapbox} />
+
+          <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>
+
+          <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
+                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='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='accentColor'
+                value={soapbox.accentColor}
+                onChange={handleColorChange(['accentColor'], (color) => color.hex)}
+              />
+            </ListItem>
+          </List>
+
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.options' defaultMessage='Options' />} />
+          </CardHeader>
+
+          <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)}
+            >
+              <Toggle
+                checked={soapbox.authenticatedProfile === true}
+                onChange={handleChange(['authenticatedProfile'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
+            <ListItem
+              label={intl.formatMessage(messages.singleUserModeLabel)}
+              hint={intl.formatMessage(messages.singleUserModeHint)}
+            >
+              <Toggle
+                checked={soapbox.singleUserMode === true}
+                onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
+            {soapbox.get('singleUserMode') && (
+              <ListItem label={intl.formatMessage(messages.singleUserModeProfileLabel)}>
+                <Input
+                  type='text'
+                  placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
+                  value={soapbox.singleUserModeProfile}
+                  onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
+                />
+              </ListItem>
+            )}
+          </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.' />}
+            component={PromoPanelInput}
+            values={soapbox.promoPanel.items.toArray()}
+            onChange={handleStreamItemChange(['promoPanel', 'items'])}
+            onAddItem={addStreamItem(['promoPanel', 'items'], templates.promoPanel)}
+            onRemoveItem={deleteStreamItem(['promoPanel', 'items'])}
+          />
+
+          <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'])}
+          />
+
+          <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.' />}
+            component={CryptoAddressInput}
+            values={soapbox.cryptoAddresses.toArray()}
+            onChange={handleStreamItemChange(['cryptoAddresses'])}
+            onAddItem={addStreamItem(['cryptoAddresses'], templates.cryptoAddress)}
+            onRemoveItem={deleteStreamItem(['cryptoAddresses'])}
+          />
+
+          <FormGroup labelText={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}>
+            <Input
+              type='number'
+              min={0}
+              pattern='[0-9]+'
+              placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
+              value={soapbox.cryptoDonatePanel.get('limit')}
+              onChange={handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
+            />
+          </FormGroup>
+
+          <CardHeader>
+            <CardTitle title={<FormattedMessage id='soapbox_config.headings.advanced' defaultMessage='Advanced' />} />
+          </CardHeader>
+
+          <Accordion
+            headline={intl.formatMessage(messages.rawJSONLabel)}
+            expanded={jsonEditorExpanded}
+            onToggle={toggleJSONEditor}
+          >
+            <FormGroup hintText={intl.formatMessage(messages.rawJSONHint)}>
+              <Textarea
+                value={rawJSON}
+                onChange={handleEditJSON}
+                hasError={!jsonValid}
+                isCodeEditor
+                rows={12}
+              />
+            </FormGroup>
+          </Accordion>
+        </fieldset>
+
+        <FormActions>
+          <Button type='submit'>
+            <FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
+          </Button>
+        </FormActions>
+      </Form>
+    </Column>
+  );
+};
+
+export default SoapboxConfig;
--- 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>
--- 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>
          )}
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ 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
+          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'
+        >
+          <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;
--- 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}
+    />
  );
 };

--- 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(),
@ -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);
    }),
--- 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;
+  }
+}
--- 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;
    }
@ -546,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;
    }
@ -802,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;
--- 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;
--- 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",
--- 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"