ThemeEditor: allow editing colors (sort of)

app/soapbox/features/theme-editor/components/color.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import ColorWithPicker from 'soapbox/features/soapbox_config/components/color-with-picker';
+
+import type { ColorChangeHandler } from 'react-color';
+
+interface IColor {
+  color: string,
+  onChange: (color: string) => void,
+}
+
+/** Color input. */
+const Color: React.FC<IColor> = ({ color, onChange }) => {
+
+  const handleChange: ColorChangeHandler = (result) => {
+    onChange(result.hex);
+  };
+
+  return (
+    <ColorWithPicker
+      className='w-full h-full'
+      value={color}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default Color;

app/soapbox/features/theme-editor/components/palette.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import compareId from 'soapbox/compare_id';
 import { HStack } from 'soapbox/components/ui';
-import ColorWithPicker from 'soapbox/features/soapbox_config/components/color-with-picker';
+
+import Color from './color';
 
 interface ColorGroup {
   [tint: string]: string,
@@ -10,27 +11,27 @@ interface ColorGroup {
 
 interface IPalette {
   palette: ColorGroup,
+  onChange: (palette: ColorGroup) => void,
 }
 
 /** Editable color palette. */
-const Palette: React.FC<IPalette> = ({ palette }) => {
+const Palette: React.FC<IPalette> = ({ palette, onChange }) => {
   const tints = Object.keys(palette).sort(compareId);
 
-  const result = tints.map(tint => {
-    const hex = palette[tint];
-
-    return (
-      <ColorWithPicker
-        className='w-full h-full'
-        value={hex}
-        onChange={() => {}}
-      />
-    );
-  });
+  const handleChange = (tint: string) => {
+    return (color: string) => {
+      onChange({
+        ...palette,
+        [tint]: color,
+      });
+    };
+  };
 
   return (
     <HStack className='w-full h-8 rounded-md overflow-hidden'>
-      {result}
+      {tints.map(tint => (
+        <Color color={palette[tint]} onChange={handleChange(tint)} />
+      ))}
     </HStack>
   );
 };

app/soapbox/features/theme-editor/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list';
@@ -18,39 +18,58 @@ interface IThemeEditor {
 const ThemeEditor: React.FC<IThemeEditor> = () => {
   const intl = useIntl();
   const soapbox = useSoapboxConfig();
-  const colors = soapbox.colors.toJS();
+
+  const [colors, setColors] = useState(soapbox.colors.toJS() as any);
+
+  const updateColors = (key: string) => {
+    return (newColors: any) => {
+      setColors({
+        ...colors,
+        [key]: {
+          ...colors[key],
+          ...newColors,
+        },
+      });
+    };
+  };
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
       <List>
         <PaletteListItem
           label='Primary'
-          palette={colors.primary as any}
+          palette={colors.primary}
+          onChange={updateColors('primary')}
         />
 
         <PaletteListItem
           label='Secondary'
-          palette={colors.secondary as any}
+          palette={colors.secondary}
+          onChange={updateColors('secondary')}
         />
 
         <PaletteListItem
           label='Accent'
-          palette={colors.accent as any}
+          palette={colors.accent}
+          onChange={updateColors('accent')}
         />
 
         <PaletteListItem
           label='Gray'
-          palette={colors.gray as any}
+          palette={colors.gray}
+          onChange={updateColors('gray')}
         />
 
         <PaletteListItem
           label='Success'
-          palette={colors.success as any}
+          palette={colors.success}
+          onChange={updateColors('success')}
         />
 
         <PaletteListItem
           label='Danger'
-          palette={colors.danger as any}
+          palette={colors.danger}
+          onChange={updateColors('danger')}
         />
       </List>
     </Column>
@@ -60,13 +79,14 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
 interface IPaletteListItem {
   label: React.ReactNode,
   palette: ColorGroup,
+  onChange: (palette: ColorGroup) => void,
 }
 
 /** Palette editor inside a ListItem. */
-const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette }) => {
+const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange }) => {
   return (
     <ListItem label={<div className='w-20'>{label}</div>}>
-      <Palette palette={palette} />
+      <Palette palette={palette} onChange={onChange} />
     </ListItem>
   );
 };