feat: add reset button for greeting, quote, and time options to restore default settings

This commit is contained in:
alexsparkes
2026-02-05 23:01:12 +00:00
parent a0517acd53
commit 0d25fbca6d
4 changed files with 103 additions and 7 deletions

View File

@@ -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>
);

View File

@@ -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`)}

View File

@@ -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')}

View File

@@ -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>