fix: greeting options hot reload, unsplash collection setting text missing

src/components/Form/Settings/Switch/Switch.jsx

@@ -20,6 +20,10 @@ class Switch extends PureComponent {
       checked: value,
     });
 
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+
     variables.stats.postEvent(
       'setting',
       `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,

src/features/background/options/BackgroundOptions.jsx

@@ -87,7 +87,6 @@ class BackgroundOptions extends PureComponent {
   }
 
   render() {
-
     const APISettings = (
       <>
         <Row final={this.state.backgroundAPI === 'mue'}>
@@ -149,17 +148,19 @@ class BackgroundOptions extends PureComponent {
         </Row>
         {this.state.backgroundAPI === 'unsplash' && (
           <Row final={true}>
-            <Action
+            <Content
               title={variables.getMessage(
                 'modals.main.settings.sections.background.unsplash.title',
               )}
-              subtitle={variables.getMessage('modals.main.settings.sections.background.subtitle')}
+              subtitle={variables.getMessage(
+                'modals.main.settings.sections.background.unsplash.subtitle',
+              )}
             />
             <Action>
               <Text
-                title={variables.getMessage('modals.main.settings.sections.background.id')}
+                title={variables.getMessage('modals.main.settings.sections.background.unsplash.id')}
                 subtitle={variables.getMessage(
-                  'modals.main.settings.sections.background.id_subtitle',
+                  'modals.main.settings.sections.background.unsplash.id_subtitle',
                 )}
                 placeholder="e.g. 123456, 654321"
                 name="unsplashCollections"

src/features/greeting/options/GreetingOptions.jsx

@@ -12,6 +12,8 @@ import {
 import { Checkbox, Switch, Text } from 'components/Form/Settings';
 import { TextareaAutosize } from '@mui/material';
 import { Button } from 'components/Elements';
+import { toast } from 'react-toastify';
+
 import defaultEvents from '../events.json';
 
 import { MdEventNote, MdAdd, MdCancel, MdRefresh } from 'react-icons/md';
@@ -27,11 +29,11 @@ const GreetingOptions = () => {
   );
 
   const [enableBirthday, setEnableBirthday] = useState(
-    localStorage.getItem('birthdayenabled') === 'true' ? '' : 'preferencesInactive'
+    localStorage.getItem('birthdayenabled') === 'true' ? 'preferences' : 'preferencesInactive'
   );
 
   const [enableCustomEvents, setEnableCustomEvents] = useState(
-    localStorage.getItem('events') === 'true' ? '' : 'preferencesInactive'
+    localStorage.getItem('events') === 'true' ? 'preferences' : 'preferencesInactive'
   );
 
   const changeDate = (e) => {
@@ -137,8 +139,9 @@ const GreetingOptions = () => {
             name="birthdayenabled"
             text={variables.getMessage('modals.main.settings.enabled')}
             category="greeting"
+            onChange={(value) => { setEnableBirthday(value ? 'preferences' : 'preferencesInactive'); }}
           />
-          <div class={enableBirthday}>
+          <div className={enableBirthday}>
             <Checkbox
               name="birthdayage"
               text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
@@ -161,7 +164,7 @@ const GreetingOptions = () => {
 
   const CustomEventsSection = () => {
     return (
-      <div class={enableCustomEvents}>
+      <div className={enableCustomEvents}>
         <Row final={true}>
           <Content title={variables.getMessage(`${GREETING_SECTION}.custom`)} />
           <Action>
@@ -303,6 +306,7 @@ const GreetingOptions = () => {
                 name="events"
                 text={variables.getMessage(`${GREETING_SECTION}.events`)}
                 category="greeting"
+                onChange={(value) => { setEnableCustomEvents(value ? 'preferences' : 'preferencesInactive'); }}
               />
             </Action>
           </Row>