From 69a9748b3d49a532f4a56b591271614e1043a0aa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 17 Dec 2022 19:39:54 -0600
Subject: [PATCH] ThemeEditor: allow resetting the theme (that was harder than
 I expected)

---
 .../theme-editor/components/palette.tsx       |  7 +++++-
 app/soapbox/features/theme-editor/index.tsx   | 22 +++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/theme-editor/components/palette.tsx b/app/soapbox/features/theme-editor/components/palette.tsx
index 1d8060a5c..95eb20e50 100644
--- a/app/soapbox/features/theme-editor/components/palette.tsx
+++ b/app/soapbox/features/theme-editor/components/palette.tsx
@@ -14,10 +14,11 @@ interface ColorGroup {
 interface IPalette {
   palette: ColorGroup,
   onChange: (palette: ColorGroup) => void,
+  resetKey?: string,
 }
 
 /** Editable color palette. */
-const Palette: React.FC<IPalette> = ({ palette, onChange }) => {
+const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
   const tints = Object.keys(palette).sort(compareId);
 
   const [hue, setHue] = useState(0);
@@ -43,6 +44,10 @@ const Palette: React.FC<IPalette> = ({ palette, onChange }) => {
     onChange(adjusted);
   }, [hue]);
 
+  useEffect(() => {
+    setHue(0);
+  }, [resetKey]);
+
   return (
     <Stack className='w-full'>
       <HStack className='h-8 rounded-md overflow-hidden'>
diff --git a/app/soapbox/features/theme-editor/index.tsx b/app/soapbox/features/theme-editor/index.tsx
index c1b8c97a1..efedfce3d 100644
--- a/app/soapbox/features/theme-editor/index.tsx
+++ b/app/soapbox/features/theme-editor/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { v4 as uuidv4 } from 'uuid';
 
 import { updateSoapboxConfig } from 'soapbox/actions/admin';
 import { getHost } from 'soapbox/actions/instance';
@@ -30,6 +31,7 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
 
   const [colors, setColors] = useState(soapbox.colors.toJS() as any);
   const [submitting, setSubmitting] = useState(false);
+  const [resetKey, setResetKey] = useState(uuidv4());
 
   const updateColors = (key: string) => {
     return (newColors: ColorGroup) => {
@@ -43,6 +45,11 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
     };
   };
 
+  const resetTheme = () => {
+    setResetKey(uuidv4());
+    setTimeout(() => setColors(soapbox.colors.toJS() as any));
+  };
+
   const updateTheme = async () => {
     const params = rawConfig.set('colors', colors).toJS();
     await dispatch(updateSoapboxConfig(params));
@@ -69,40 +76,50 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
             label='Primary'
             palette={colors.primary}
             onChange={updateColors('primary')}
+            resetKey={resetKey}
           />
 
           <PaletteListItem
             label='Secondary'
             palette={colors.secondary}
             onChange={updateColors('secondary')}
+            resetKey={resetKey}
           />
 
           <PaletteListItem
             label='Accent'
             palette={colors.accent}
             onChange={updateColors('accent')}
+            resetKey={resetKey}
           />
 
           <PaletteListItem
             label='Gray'
             palette={colors.gray}
             onChange={updateColors('gray')}
+            resetKey={resetKey}
           />
 
           <PaletteListItem
             label='Success'
             palette={colors.success}
             onChange={updateColors('success')}
+            resetKey={resetKey}
           />
 
           <PaletteListItem
             label='Danger'
             palette={colors.danger}
             onChange={updateColors('danger')}
+            resetKey={resetKey}
           />
         </List>
 
         <FormActions>
+          <Button theme='secondary' onClick={resetTheme}>
+            <FormattedMessage id='theme_editor.Reset' defaultMessage='Reset' />
+          </Button>
+
           <Button type='submit' theme='primary' disabled={submitting}>
             <FormattedMessage id='theme_editor.save' defaultMessage='Save theme' />
           </Button>
@@ -116,13 +133,14 @@ interface IPaletteListItem {
   label: React.ReactNode,
   palette: ColorGroup,
   onChange: (palette: ColorGroup) => void,
+  resetKey?: string,
 }
 
 /** Palette editor inside a ListItem. */
-const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange }) => {
+const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey }) => {
   return (
     <ListItem label={<div className='w-20'>{label}</div>}>
-      <Palette palette={palette} onChange={onChange} />
+      <Palette palette={palette} onChange={onChange} resetKey={resetKey} />
     </ListItem>
   );
 };