SoapboxConfig: link to theme editor

app/soapbox/features/soapbox-config/index.tsx

@@ -1,6 +1,7 @@
 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 { useHistory } from 'react-router-dom';
 
 import { updateSoapboxConfig } from 'soapbox/actions/admin';
 import { uploadMedia } from 'soapbox/actions/media';
@@ -25,14 +26,11 @@ import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
 import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 
-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!' },
@@ -59,7 +57,6 @@ const messages = defineMessages({
 });
 
 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;
@@ -72,6 +69,7 @@ const templates: Record<string, Template> = {
 
 const SoapboxConfig: React.FC = () => {
   const intl = useIntl();
+  const history = useHistory();
   const dispatch = useAppDispatch();
 
   const features = useFeatures();
@@ -84,6 +82,8 @@ const SoapboxConfig: React.FC = () => {
   const [rawJSON, setRawJSON] = useState<string>(JSON.stringify(initialData, null, 2));
   const [jsonValid, setJsonValid] = useState(true);
 
+  const navigateToThemeEditor = () => history.push('/soapbox/admin/theme');
+
   const soapbox = useMemo(() => {
     return normalizeSoapboxConfig(data);
   }, [data]);
@@ -122,12 +122,6 @@ const SoapboxConfig: React.FC = () => {
     };
   };
 
-  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();
@@ -214,21 +208,10 @@ const SoapboxConfig: React.FC = () => {
               />
             </ListItem>
 
-            <ListItem label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}>
-              <ColorWithPicker
-                className='w-8 h-8 rounded-md overflow-hidden'
-                value={soapbox.brandColor}
-                onChange={handleColorChange(['brandColor'], (color) => color.hex)}
-              />
-            </ListItem>
-
-            <ListItem label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}>
-              <ColorWithPicker
-                className='w-8 h-8 rounded-md overflow-hidden'
-                value={soapbox.accentColor}
-                onChange={handleColorChange(['accentColor'], (color) => color.hex)}
-              />
-            </ListItem>
+            <ListItem
+              label={<FormattedMessage id='soapbox_config.fields.edit_theme_label' defaultMessage='Edit theme' />}
+              onClick={navigateToThemeEditor}
+            />
           </List>
 
           <CardHeader>