Add appearance customization options for time, quotes, and greetings; migrate old font settings to new structure

src/features/greeting/options/GreetingOptions.jsx

@@ -9,14 +9,15 @@ import {
   PreferencesWrapper,
   Section,
 } from 'components/Layout/Settings';
-import { Checkbox, Switch, Text } from 'components/Form/Settings';
+import { Checkbox, Switch, Text, Dropdown } from 'components/Form/Settings';
 import { DatePicker } from 'components/Form/Settings/DatePicker';
 import { Button } from 'components/Elements';
 import { toast } from 'react-toastify';
 
 import defaultEvents from '../events.json';
+import googleFonts from 'config/googleFonts.json';
 
-import { MdEventNote, MdAdd, MdCancel, MdRefresh } from 'react-icons/md';
+import { MdEventNote, MdAdd, MdCancel, MdRefresh, MdPalette } from 'react-icons/md';
 
 const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName }) => {
   const t = useT();
@@ -228,7 +229,115 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
     );
   };
 
+  const AppearanceSection = () => {
+    const [greetingColor, setGreetingColor] = useState(
+      localStorage.getItem('greetingColor') || '#ffffff',
+    );
+
+    const fontWeight = `${GREETING_SECTION}.appearance.font_weight`;
+
+    const updateColor = (event) => {
+      const color = event.target.value;
+      setGreetingColor(color);
+      localStorage.setItem('greetingColor', color);
+    };
+
+    return (
+      <>
+        <Row>
+          <Content
+            title={t(`${GREETING_SECTION}.appearance.font.title`)}
+            subtitle={t(`${GREETING_SECTION}.appearance.font.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${GREETING_SECTION}.appearance.font.custom`)}
+              name="greetingFont"
+              category="greeting"
+              searchable={true}
+              items={googleFonts.map((font) => ({
+                value: font,
+                text: font,
+              }))}
+            />
+          </Action>
+        </Row>
+        <Row>
+          <Content
+            title={t(`${GREETING_SECTION}.appearance.font_weight.title`)}
+            subtitle={t(`${GREETING_SECTION}.appearance.font_weight.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${GREETING_SECTION}.appearance.font_weight.title`)}
+              name="greetingFontWeight"
+              category="greeting"
+              items={[
+                { value: '400', text: t(fontWeight + '.normal') },
+                { value: '100', text: t(fontWeight + '.thin') },
+                { value: '200', text: t(fontWeight + '.extra_light') },
+                { value: '300', text: t(fontWeight + '.light') },
+                { value: '500', text: t(fontWeight + '.medium') },
+                { value: '600', text: t(fontWeight + '.semi_bold') },
+                { value: '700', text: t(fontWeight + '.bold') },
+                { value: '800', text: t(fontWeight + '.extra_bold') },
+              ]}
+            />
+          </Action>
+        </Row>
+        <Row>
+          <Content
+            title={t(`${GREETING_SECTION}.appearance.font_style.title`)}
+            subtitle={t(`${GREETING_SECTION}.appearance.font_style.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${GREETING_SECTION}.appearance.font_style.title`)}
+              name="greetingFontStyle"
+              category="greeting"
+              items={[
+                { value: 'normal', text: t(`${GREETING_SECTION}.appearance.font_style.normal`) },
+                { value: 'italic', text: t(`${GREETING_SECTION}.appearance.font_style.italic`) },
+                { value: 'oblique', text: t(`${GREETING_SECTION}.appearance.font_style.oblique`) },
+              ]}
+            />
+          </Action>
+        </Row>
+        <Row final={true}>
+          <Content
+            title={t(`${GREETING_SECTION}.appearance.color.title`)}
+            subtitle={t(`${GREETING_SECTION}.appearance.color.description`)}
+          />
+          <Action>
+            <div className="colourInput">
+              <input
+                type="color"
+                name="greetingColor"
+                onChange={updateColor}
+                value={greetingColor}
+              />
+              <label htmlFor="greetingColor" className="customBackgroundHex">
+                {greetingColor}
+              </label>
+            </div>
+            <span
+              className="link"
+              onClick={() => {
+                localStorage.setItem('greetingColor', '#ffffff');
+                setGreetingColor('#ffffff');
+              }}
+            >
+              <MdRefresh />
+              {t('modals.main.settings.buttons.reset')}
+            </span>
+          </Action>
+        </Row>
+      </>
+    );
+  };
+
   const isEventsSection = currentSubSection === 'events';
+  const isAppearanceSection = currentSubSection === 'appearance';
 
   let header;
   if (isEventsSection) {
@@ -240,6 +349,15 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
         report={false}
       />
     );
+  } else if (isAppearanceSection) {
+    header = (
+      <Header
+        title={t(`${GREETING_SECTION}.title`)}
+        secondaryTitle={t(`${GREETING_SECTION}.appearance.title`)}
+        goBack={() => onSubSectionChange(null, sectionName)}
+        report={false}
+      />
+    );
   } else {
     header = (
       <Header
@@ -277,6 +395,8 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
           {BirthdayOptions()}
           {CustomEventsSection()}
         </>
+      ) : isAppearanceSection ? (
+        <AppearanceSection />
       ) : (
         <PreferencesWrapper
           setting="greeting"
@@ -285,6 +405,12 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
           visibilityToggle={true}
         >
           <AdditionalOptions />
+          <Section
+            title={t(`${GREETING_SECTION}.appearance.title`)}
+            subtitle={t(`${GREETING_SECTION}.appearance.description`)}
+            onClick={() => onSubSectionChange('appearance', sectionName)}
+            icon={<MdPalette />}
+          />
           <Section
             title={t(`${GREETING_SECTION}.events`)}
             subtitle={t(`${GREETING_SECTION}.events_description`)}

src/features/misc/sections/Appearance.jsx

@@ -43,18 +43,18 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
     );
   };
 
-  const FontOptions = () => {
-    const fontWeight = 'modals.main.settings.sections.appearance.font.weight';
+  const WidgetFontOptions = () => {
+    const fontWeight = 'modals.main.settings.sections.appearance.widget_font.weight';
     return (
       <Row>
         <Content
-          title={t('modals.main.settings.sections.appearance.font.title')}
-          subtitle={t('modals.main.settings.sections.appearance.font.description')}
+          title={t('modals.main.settings.sections.appearance.widget_font.title')}
+          subtitle={t('modals.main.settings.sections.appearance.widget_font.description')}
         />
         <Action>
           <Dropdown
-            label={t('modals.main.settings.sections.appearance.font.custom')}
-            name="font"
+            label={t('modals.main.settings.sections.appearance.widget_font.custom')}
+            name="widgetFont"
             category="other"
             searchable={true}
             items={googleFonts.map((font) => ({
@@ -62,10 +62,9 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
               text: font,
             }))}
           />
-          {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
           <Dropdown
-            label={t('modals.main.settings.sections.appearance.font.weight.title')}
-            name="fontweight"
+            label={t('modals.main.settings.sections.appearance.widget_font.weight.title')}
+            name="widgetFontWeight"
             category="other"
             items={[
               {
@@ -103,21 +102,103 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
             ]}
           />
           <Dropdown
-            label={t('modals.main.settings.sections.appearance.font.style.title')}
-            name="fontstyle"
+            label={t('modals.main.settings.sections.appearance.widget_font.style.title')}
+            name="widgetFontStyle"
             category="other"
             items={[
               {
                 value: 'normal',
-                text: t('modals.main.settings.sections.appearance.font.style.normal'),
+                text: t('modals.main.settings.sections.appearance.widget_font.style.normal'),
               },
               {
                 value: 'italic',
-                text: t('modals.main.settings.sections.appearance.font.style.italic'),
+                text: t('modals.main.settings.sections.appearance.widget_font.style.italic'),
               },
               {
                 value: 'oblique',
-                text: t('modals.main.settings.sections.appearance.font.style.oblique'),
+                text: t('modals.main.settings.sections.appearance.widget_font.style.oblique'),
+              },
+            ]}
+          />
+        </Action>
+      </Row>
+    );
+  };
+
+  const SettingsFontOptions = () => {
+    const fontWeight = 'modals.main.settings.sections.appearance.settings_font.weight';
+    return (
+      <Row>
+        <Content
+          title={t('modals.main.settings.sections.appearance.settings_font.title')}
+          subtitle={t('modals.main.settings.sections.appearance.settings_font.description')}
+        />
+        <Action>
+          <Dropdown
+            label={t('modals.main.settings.sections.appearance.settings_font.custom')}
+            name="settingsFont"
+            category="other"
+            searchable={true}
+            items={googleFonts.map((font) => ({
+              value: font,
+              text: font,
+            }))}
+          />
+          <Dropdown
+            label={t('modals.main.settings.sections.appearance.settings_font.weight.title')}
+            name="settingsFontWeight"
+            category="other"
+            items={[
+              {
+                value: '400',
+                text: t(fontWeight + '.normal'),
+              },
+              {
+                value: '100',
+                text: t(fontWeight + '.thin'),
+              },
+              {
+                value: '200',
+                text: t(fontWeight + '.extra_light'),
+              },
+              {
+                value: '300',
+                text: t(fontWeight + '.light'),
+              },
+              {
+                value: '500',
+                text: t(fontWeight + '.medium'),
+              },
+              {
+                value: '600',
+                text: t(fontWeight + '.semi_bold'),
+              },
+              {
+                value: '700',
+                text: t(fontWeight + '.bold'),
+              },
+              {
+                value: '800',
+                text: t(fontWeight + '.extra_bold'),
+              },
+            ]}
+          />
+          <Dropdown
+            label={t('modals.main.settings.sections.appearance.settings_font.style.title')}
+            name="settingsFontStyle"
+            category="other"
+            items={[
+              {
+                value: 'normal',
+                text: t('modals.main.settings.sections.appearance.settings_font.style.normal'),
+              },
+              {
+                value: 'italic',
+                text: t('modals.main.settings.sections.appearance.settings_font.style.italic'),
+              },
+              {
+                value: 'oblique',
+                text: t('modals.main.settings.sections.appearance.settings_font.style.oblique'),
               },
             ]}
           />
@@ -230,7 +311,8 @@ function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName
             onClick={() => onSubSectionChange('accessibility', sectionName)}
           />
           <ThemeSelection />
-          <FontOptions />
+          <WidgetFontOptions />
+          <SettingsFontOptions />
           <WidgetStyle />
         </>
       )}

src/features/quote/options/QuoteOptions.jsx

@@ -1,7 +1,16 @@
 import { useT } from 'contexts';
 import variables from 'config/variables';
 import React, { useState, useEffect } from 'react';
-import { MdCancel, MdAdd, MdSource, MdOutlineFormatQuote, MdExplore } from 'react-icons/md';
+import {
+  MdCancel,
+  MdAdd,
+  MdSource,
+  MdOutlineFormatQuote,
+  MdExplore,
+  MdPalette,
+  MdRefresh,
+} from 'react-icons/md';
+import googleFonts from 'config/googleFonts.json';
 import { toast } from 'react-toastify';
 
 import {
@@ -182,7 +191,107 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     );
   };
 
+  const AppearanceSection = () => {
+    const [quoteColor, setQuoteColor] = useState(localStorage.getItem('quoteColor') || '#ffffff');
+    const fontWeight = `${QUOTE_SECTION}.appearance.font_weight`;
+
+    const updateColor = (event) => {
+      const color = event.target.value;
+      setQuoteColor(color);
+      localStorage.setItem('quoteColor', color);
+    };
+
+    return (
+      <>
+        <Row>
+          <Content
+            title={t(`${QUOTE_SECTION}.appearance.font.title`)}
+            subtitle={t(`${QUOTE_SECTION}.appearance.font.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${QUOTE_SECTION}.appearance.font.custom`)}
+              name="quoteFont"
+              category="quote"
+              searchable={true}
+              items={googleFonts.map((font) => ({
+                value: font,
+                text: font,
+              }))}
+            />
+          </Action>
+        </Row>
+        <Row>
+          <Content
+            title={t(`${QUOTE_SECTION}.appearance.font_weight.title`)}
+            subtitle={t(`${QUOTE_SECTION}.appearance.font_weight.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${QUOTE_SECTION}.appearance.font_weight.title`)}
+              name="quoteFontWeight"
+              category="quote"
+              items={[
+                { value: '400', text: t(fontWeight + '.normal') },
+                { value: '100', text: t(fontWeight + '.thin') },
+                { value: '200', text: t(fontWeight + '.extra_light') },
+                { value: '300', text: t(fontWeight + '.light') },
+                { value: '500', text: t(fontWeight + '.medium') },
+                { value: '600', text: t(fontWeight + '.semi_bold') },
+                { value: '700', text: t(fontWeight + '.bold') },
+                { value: '800', text: t(fontWeight + '.extra_bold') },
+              ]}
+            />
+          </Action>
+        </Row>
+        <Row>
+          <Content
+            title={t(`${QUOTE_SECTION}.appearance.font_style.title`)}
+            subtitle={t(`${QUOTE_SECTION}.appearance.font_style.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${QUOTE_SECTION}.appearance.font_style.title`)}
+              name="quoteFontStyle"
+              category="quote"
+              items={[
+                { value: 'normal', text: t(`${QUOTE_SECTION}.appearance.font_style.normal`) },
+                { value: 'italic', text: t(`${QUOTE_SECTION}.appearance.font_style.italic`) },
+                { value: 'oblique', text: t(`${QUOTE_SECTION}.appearance.font_style.oblique`) },
+              ]}
+            />
+          </Action>
+        </Row>
+        <Row final={true}>
+          <Content
+            title={t(`${QUOTE_SECTION}.appearance.color.title`)}
+            subtitle={t(`${QUOTE_SECTION}.appearance.color.description`)}
+          />
+          <Action>
+            <div className="colourInput">
+              <input type="color" name="quoteColor" onChange={updateColor} value={quoteColor} />
+              <label htmlFor="quoteColor" className="customBackgroundHex">
+                {quoteColor}
+              </label>
+            </div>
+            <span
+              className="link"
+              onClick={() => {
+                localStorage.setItem('quoteColor', '#ffffff');
+                setQuoteColor('#ffffff');
+              }}
+            >
+              <MdRefresh />
+              {t('modals.main.settings.buttons.reset')}
+            </span>
+          </Action>
+        </Row>
+      </>
+    );
+  };
+
   const isSourceSection = currentSubSection === 'source';
+  const isAppearanceSection = currentSubSection === 'appearance';
 
   const getInstalledQuotePacks = () => {
     try {
@@ -365,43 +474,69 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     customSettings = <></>;
   }
 
+  let header;
+  if (isSourceSection) {
+    header = (
+      <Header
+        title={t(`${QUOTE_SECTION}.title`)}
+        secondaryTitle={t('modals.main.settings.sections.background.source.title')}
+        goBack={() => onSubSectionChange(null, sectionName)}
+        report={false}
+      />
+    );
+  } else if (isAppearanceSection) {
+    header = (
+      <Header
+        title={t(`${QUOTE_SECTION}.title`)}
+        secondaryTitle={t(`${QUOTE_SECTION}.appearance.title`)}
+        goBack={() => onSubSectionChange(null, sectionName)}
+        report={false}
+      />
+    );
+  } else {
+    header = (
+      <Header
+        title={t(`${QUOTE_SECTION}.title`)}
+        setting="quote"
+        category="quote"
+        element=".quotediv"
+        zoomSetting="zoomQuote"
+        visibilityToggle={true}
+      />
+    );
+  }
+
   return (
     <>
-      {isSourceSection ? (
-        <Header
-          title={t(`${QUOTE_SECTION}.title`)}
-          secondaryTitle={t('modals.main.settings.sections.background.source.title')}
-          goBack={() => onSubSectionChange(null, sectionName)}
-          report={false}
-        />
-      ) : (
-        <Header
-          title={t(`${QUOTE_SECTION}.title`)}
-          setting="quote"
-          category="quote"
-          element=".quotediv"
-          zoomSetting="zoomQuote"
-          visibilityToggle={true}
-        />
-      )}
+      {header}
       {isSourceSection && (
-        <Row final={true}>
-          <Content
-            title={t('modals.main.settings.sections.background.source.title')}
-            subtitle={t(`${QUOTE_SECTION}.source_subtitle`)}
-          />
-          <Action>
-            <SourceDropdown />
-          </Action>
-        </Row>
+        <>
+          <Row final={true}>
+            <Content
+              title={t('modals.main.settings.sections.background.source.title')}
+              subtitle={t(`${QUOTE_SECTION}.source_subtitle`)}
+            />
+            <Action>
+              <SourceDropdown />
+            </Action>
+          </Row>
+          {customSettings}
+        </>
       )}
-      {!isSourceSection && (
+      {isAppearanceSection && <AppearanceSection />}
+      {!isSourceSection && !isAppearanceSection && (
         <PreferencesWrapper
           setting="quote"
           zoomSetting="zoomQuote"
           category="quote"
           visibilityToggle={true}
         >
+          <Section
+            icon={<MdPalette />}
+            title={t(`${QUOTE_SECTION}.appearance.title`)}
+            subtitle={t(`${QUOTE_SECTION}.appearance.description`)}
+            onClick={() => onSubSectionChange('appearance', sectionName)}
+          />
           <Section
             icon={<MdSource />}
             title={t('modals.main.settings.sections.background.source.title')}
@@ -415,7 +550,6 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
           <AdditionalOptions />
         </PreferencesWrapper>
       )}
-      {customSettings}
     </>
   );
 };

src/features/time/options/TimeOptions.jsx

@@ -1,12 +1,13 @@
 import { useT } from 'contexts';
 import React, { useState } from 'react';
 
-import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { Header, Row, Content, Action, PreferencesWrapper, Section } from 'components/Layout/Settings';
 import { Checkbox, Dropdown, Radio } from 'components/Form/Settings';
+import googleFonts from 'config/googleFonts.json';
 
-import { MdRefresh } from 'react-icons/md';
+import { MdRefresh, MdPalette } from 'react-icons/md';
 
-const TimeOptions = () => {
+const TimeOptions = ({ currentSubSection, onSubSectionChange, sectionName }) => {
   const t = useT();
   const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || 'digital');
   const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || '#ffffff');
@@ -16,6 +17,7 @@ const TimeOptions = () => {
   const [secondColour, setSecondColour] = useState(
     localStorage.getItem('secondColour') || '#ffffff',
   );
+  const [clockColor, setClockColor] = useState(localStorage.getItem('clockColor') || '#ffffff');
   const TIME_SECTION = 'modals.main.settings.sections.time';
 
   const updateColour = (type, event) => {
@@ -211,8 +213,118 @@ const TimeOptions = () => {
     }
   };
 
-  return (
-    <>
+  const AppearanceSection = () => {
+    const fontWeight = `${TIME_SECTION}.appearance.font_weight`;
+
+    const updateClockColor = (event) => {
+      const color = event.target.value;
+      setClockColor(color);
+      localStorage.setItem('clockColor', color);
+    };
+
+    return (
+      <>
+        <Row>
+          <Content
+            title={t(`${TIME_SECTION}.appearance.font.title`)}
+            subtitle={t(`${TIME_SECTION}.appearance.font.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${TIME_SECTION}.appearance.font.custom`)}
+              name="clockFont"
+              category="clock"
+              searchable={true}
+              items={googleFonts.map((font) => ({
+                value: font,
+                text: font,
+              }))}
+            />
+          </Action>
+        </Row>
+        <Row>
+          <Content
+            title={t(`${TIME_SECTION}.appearance.font_weight.title`)}
+            subtitle={t(`${TIME_SECTION}.appearance.font_weight.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${TIME_SECTION}.appearance.font_weight.title`)}
+              name="clockFontWeight"
+              category="clock"
+              items={[
+                { value: '400', text: t(fontWeight + '.normal') },
+                { value: '100', text: t(fontWeight + '.thin') },
+                { value: '200', text: t(fontWeight + '.extra_light') },
+                { value: '300', text: t(fontWeight + '.light') },
+                { value: '500', text: t(fontWeight + '.medium') },
+                { value: '600', text: t(fontWeight + '.semi_bold') },
+                { value: '700', text: t(fontWeight + '.bold') },
+                { value: '800', text: t(fontWeight + '.extra_bold') },
+              ]}
+            />
+          </Action>
+        </Row>
+        <Row>
+          <Content
+            title={t(`${TIME_SECTION}.appearance.font_style.title`)}
+            subtitle={t(`${TIME_SECTION}.appearance.font_style.description`)}
+          />
+          <Action>
+            <Dropdown
+              label={t(`${TIME_SECTION}.appearance.font_style.title`)}
+              name="clockFontStyle"
+              category="clock"
+              items={[
+                { value: 'normal', text: t(`${TIME_SECTION}.appearance.font_style.normal`) },
+                { value: 'italic', text: t(`${TIME_SECTION}.appearance.font_style.italic`) },
+                { value: 'oblique', text: t(`${TIME_SECTION}.appearance.font_style.oblique`) },
+              ]}
+            />
+          </Action>
+        </Row>
+        <Row final={true}>
+          <Content
+            title={t(`${TIME_SECTION}.appearance.color.title`)}
+            subtitle={t(`${TIME_SECTION}.appearance.color.description`)}
+          />
+          <Action>
+            <div className="colourInput">
+              <input type="color" name="clockColor" onChange={updateClockColor} value={clockColor} />
+              <label htmlFor="clockColor" className="customBackgroundHex">
+                {clockColor}
+              </label>
+            </div>
+            <span
+              className="link"
+              onClick={() => {
+                localStorage.setItem('clockColor', '#ffffff');
+                setClockColor('#ffffff');
+              }}
+            >
+              <MdRefresh />
+              {t('modals.main.settings.buttons.reset')}
+            </span>
+          </Action>
+        </Row>
+      </>
+    );
+  };
+
+  const isAppearanceSection = currentSubSection === 'appearance';
+
+  let header;
+  if (isAppearanceSection) {
+    header = (
+      <Header
+        title={t(`${TIME_SECTION}.title`)}
+        secondaryTitle={t(`${TIME_SECTION}.appearance.title`)}
+        goBack={() => onSubSectionChange(null, sectionName)}
+        report={false}
+      />
+    );
+  } else {
+    header = (
       <Header
         title={t(`${TIME_SECTION}.title`)}
         setting="time"
@@ -221,15 +333,31 @@ const TimeOptions = () => {
         zoomSetting="zoomClock"
         visibilityToggle={true}
       />
-      <PreferencesWrapper
-        setting="time"
-        zoomSetting="zoomClock"
-        category="clock"
-        visibilityToggle={true}
-      >
-        <WidgetType />
-        {getTimeSettings()}
-      </PreferencesWrapper>
+    );
+  }
+
+  return (
+    <>
+      {header}
+      {isAppearanceSection ? (
+        <AppearanceSection />
+      ) : (
+        <PreferencesWrapper
+          setting="time"
+          zoomSetting="zoomClock"
+          category="clock"
+          visibilityToggle={true}
+        >
+          <Section
+            title={t(`${TIME_SECTION}.appearance.title`)}
+            subtitle={t(`${TIME_SECTION}.appearance.description`)}
+            onClick={() => onSubSectionChange('appearance', sectionName)}
+            icon={<MdPalette />}
+          />
+          <WidgetType />
+          {getTimeSettings()}
+        </PreferencesWrapper>
+      )}
     </>
   );
 };