From 0d25fbca6d48bed89360b85d73844e0b20652bee Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Thu, 5 Feb 2026 23:01:12 +0000
Subject: [PATCH] feat: add reset button for greeting, quote, and time options
 to restore default settings

---
 .../Layout/Settings/Section/Section.jsx       |  3 +-
 .../greeting/options/GreetingOptions.jsx      | 33 ++++++++++++++-
 src/features/quote/options/QuoteOptions.jsx   | 33 ++++++++++++++-
 src/features/time/options/TimeOptions.jsx     | 41 ++++++++++++++++++-
 4 files changed, 103 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout/Settings/Section/Section.jsx b/src/components/Layout/Settings/Section/Section.jsx
index e73b03d1..3364cf29 100644
--- a/src/components/Layout/Settings/Section/Section.jsx
+++ b/src/components/Layout/Settings/Section/Section.jsx
@@ -12,7 +12,8 @@ function Section({ title, subtitle, icon, onClick, children }) {
         </div>
       </div>
       <div className="action">
-        {React.Children.count(children) === 0 ? <MdOutlineKeyboardArrowRight /> : children}
+        {children}
+        <MdOutlineKeyboardArrowRight />
       </div>
     </div>
   );
diff --git a/src/features/greeting/options/GreetingOptions.jsx b/src/features/greeting/options/GreetingOptions.jsx
index 814c1421..ca3ea843 100644
--- a/src/features/greeting/options/GreetingOptions.jsx
+++ b/src/features/greeting/options/GreetingOptions.jsx
@@ -358,7 +358,21 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
         secondaryTitle={t(`${GREETING_SECTION}.appearance.title`)}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
-      />
+      >
+        <Button
+          type="settings"
+          onClick={() => {
+            localStorage.removeItem('greetingFont');
+            localStorage.removeItem('greetingFontWeight');
+            localStorage.removeItem('greetingFontStyle');
+            localStorage.setItem('greetingColor', '#ffffff');
+            EventBus.emit('refresh', 'greeting');
+            toast(t('toasts.reset'));
+          }}
+          icon={<MdRefresh />}
+          label={t('modals.main.settings.buttons.reset')}
+        />
+      </Header>
     );
   } else {
     header = (
@@ -412,7 +426,22 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
             subtitle={t(`${GREETING_SECTION}.appearance.description`)}
             onClick={() => onSubSectionChange('appearance', sectionName)}
             icon={<MdPalette />}
-          />
+          >
+            <Button
+              type="settings"
+              onClick={(e) => {
+                e.stopPropagation();
+                localStorage.removeItem('greetingFont');
+                localStorage.removeItem('greetingFontWeight');
+                localStorage.removeItem('greetingFontStyle');
+                localStorage.setItem('greetingColor', '#ffffff');
+                EventBus.emit('refresh', 'greeting');
+                toast(t('toasts.reset'));
+              }}
+              icon={<MdRefresh />}
+              label={t('modals.main.settings.buttons.reset')}
+            />
+          </Section>
           <Section
             title={t(`${GREETING_SECTION}.events`)}
             subtitle={t(`${GREETING_SECTION}.events_description`)}
diff --git a/src/features/quote/options/QuoteOptions.jsx b/src/features/quote/options/QuoteOptions.jsx
index fdef3931..e153bbeb 100644
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/src/features/quote/options/QuoteOptions.jsx
@@ -493,7 +493,21 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
         secondaryTitle={t(`${QUOTE_SECTION}.appearance.title`)}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
-      />
+      >
+        <Button
+          type="settings"
+          onClick={() => {
+            localStorage.removeItem('quoteFont');
+            localStorage.removeItem('quoteFontWeight');
+            localStorage.removeItem('quoteFontStyle');
+            localStorage.setItem('quoteColor', '#ffffff');
+            EventBus.emit('refresh', 'quote');
+            toast(t('toasts.reset'));
+          }}
+          icon={<MdRefresh />}
+          label={t('modals.main.settings.buttons.reset')}
+        />
+      </Header>
     );
   } else {
     header = (
@@ -538,7 +552,22 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
             title={t(`${QUOTE_SECTION}.appearance.title`)}
             subtitle={t(`${QUOTE_SECTION}.appearance.description`)}
             onClick={() => onSubSectionChange('appearance', sectionName)}
-          />
+          >
+            <Button
+              type="settings"
+              onClick={(e) => {
+                e.stopPropagation();
+                localStorage.removeItem('quoteFont');
+                localStorage.removeItem('quoteFontWeight');
+                localStorage.removeItem('quoteFontStyle');
+                localStorage.setItem('quoteColor', '#ffffff');
+                EventBus.emit('refresh', 'quote');
+                toast(t('toasts.reset'));
+              }}
+              icon={<MdRefresh />}
+              label={t('modals.main.settings.buttons.reset')}
+            />
+          </Section>
           <Section
             icon={<MdSource />}
             title={t('modals.main.settings.sections.background.source.title')}
diff --git a/src/features/time/options/TimeOptions.jsx b/src/features/time/options/TimeOptions.jsx
index 563d2c2b..c7cf5b1c 100644
--- a/src/features/time/options/TimeOptions.jsx
+++ b/src/features/time/options/TimeOptions.jsx
@@ -7,6 +7,8 @@ import { Checkbox, Dropdown, Radio } from 'components/Form/Settings';
 import googleFonts from 'config/googleFonts.json';
 
 import { MdRefresh, MdPalette } from 'react-icons/md';
+import { toast } from 'react-toastify';
+import { Button } from 'components/Elements';
 
 const TimeOptions = ({ currentSubSection, onSubSectionChange, sectionName }) => {
   const t = useT();
@@ -324,7 +326,24 @@ const TimeOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
         secondaryTitle={t(`${TIME_SECTION}.appearance.title`)}
         goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
-      />
+      >
+        <Button
+          type="settings"
+          onClick={() => {
+            localStorage.removeItem('clockFont');
+            localStorage.removeItem('clockFontWeight');
+            localStorage.removeItem('clockFontStyle');
+            localStorage.setItem('clockColor', '#ffffff');
+            localStorage.setItem('hourColour', '#ffffff');
+            localStorage.setItem('minuteColour', '#ffffff');
+            localStorage.setItem('secondColour', '#ffffff');
+            EventBus.emit('refresh', 'clock');
+            toast(t('toasts.reset'));
+          }}
+          icon={<MdRefresh />}
+          label={t('modals.main.settings.buttons.reset')}
+        />
+      </Header>
     );
   } else {
     header = (
@@ -356,7 +375,25 @@ const TimeOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
             subtitle={t(`${TIME_SECTION}.appearance.description`)}
             onClick={() => onSubSectionChange('appearance', sectionName)}
             icon={<MdPalette />}
-          />
+          >
+            <Button
+              type="settings"
+              onClick={(e) => {
+                e.stopPropagation();
+                localStorage.removeItem('clockFont');
+                localStorage.removeItem('clockFontWeight');
+                localStorage.removeItem('clockFontStyle');
+                localStorage.setItem('clockColor', '#ffffff');
+                localStorage.setItem('hourColour', '#ffffff');
+                localStorage.setItem('minuteColour', '#ffffff');
+                localStorage.setItem('secondColour', '#ffffff');
+                EventBus.emit('refresh', 'clock');
+                toast(t('toasts.reset'));
+              }}
+              icon={<MdRefresh />}
+              label={t('modals.main.settings.buttons.reset')}
+            />
+          </Section>
           <WidgetType />
           {getTimeSettings()}
         </PreferencesWrapper>