feat: add warning for things that dont support hot reload

src/components/modals/main/settings/sections/Advanced.jsx

@@ -44,13 +44,13 @@ export default class AdvancedSettings extends React.PureComponent {
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)}/>
 
         <h3>{advanced.customisation}</h3>
-        <Text title={advanced.custom_js} name='customjs' textarea={true}/>
-        <Text title={advanced.custom_css} name='customcss' textarea={true}/>
+        <Text title={advanced.custom_js} name='customjs' textarea={true} element='.other'/>
+        <Text title={advanced.custom_css} name='customcss' textarea={true} element='.other'/>
         <Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
 
         <h3>{this.language.sections.experimental.title}</h3>
         <p>{advanced.experimental_warning}</p>
-        <Checkbox name='experimental' text={this.language.enabled}/>
+        <Checkbox name='experimental' text={this.language.enabled} element='.other'/>
 
         <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay resetoverlay'} ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />

src/components/modals/main/settings/sections/Appearance.jsx

@@ -32,14 +32,14 @@ export default function AppearanceSettings() {
       <Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
 
       <h3>{appearance.navbar.title}</h3>
-      <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
-      <Checkbox name='refresh' text={appearance.navbar.refresh} />
+      <Checkbox name='notesEnabled' text={appearance.navbar.notes} element='.other' />
+      <Checkbox name='refresh' text={appearance.navbar.refresh} element='.other' />
 
       <h3>{appearance.font.title}</h3>
-      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
+      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} element='.other' />
       <br/>
-      <Checkbox name='fontGoogle' text={appearance.font.google} />
-      <Dropdown label={appearance.font.weight.title} name='fontweight'>
+      <Checkbox name='fontGoogle' text={appearance.font.google} element='.other' />
+      <Dropdown label={appearance.font.weight.title} name='fontweight' element='.other'>
         {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
         <option value='100'>{appearance.font.weight.thin}</option>
         <option value='200'>{appearance.font.weight.extra_light}</option>
@@ -51,7 +51,7 @@ export default function AppearanceSettings() {
         <option value='800'>{appearance.font.weight.extra_bold}</option>
       </Dropdown>
       <br/><br/>
-      <Dropdown label={appearance.font.style.title} name='fontstyle'>
+      <Dropdown label={appearance.font.style.title} name='fontstyle' element='.other'>
         <option value='normal'>{appearance.font.style.normal}</option>
         <option value='italic'>{appearance.font.style.italic}</option>
         <option value='oblique'>{appearance.font.style.oblique}</option>

src/components/modals/main/settings/sections/Experimental.jsx

@@ -11,10 +11,10 @@ export default function ExperimentalSettings() {
     <>
       <h2>{experimental.title}</h2>
       <p>{experimental.warning}</p>
-      <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations}/>
+      <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations} element='.other'/>
       <h3>{experimental.developer}</h3>
-      <Checkbox name='debug' text='Debug hotkey (Ctrl + #)'/>
-      <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' />
+      <Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
+      <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
       {/* <Checkbox name='beta' text='Beta Mode Override'/>
       <Text name='api_override' title='Version Override (format example: 5.0)'/>
       <Text name='api_override' title='API URL Override'/>

src/components/modals/main/settings/sections/Greeting.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import EventBus from '../../../../../modules/helpers/eventbus';
-
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
@@ -25,7 +23,8 @@ export default class GreetingSettings extends React.PureComponent {
       birthday: data
     });
 
-    EventBus.dispatch('refresh', 'greeting');
+    document.querySelector('.reminder-info').style.display = 'block';
+    localStorage.setItem('showReminder', true);
   }
 
   render() {
@@ -34,14 +33,14 @@ export default class GreetingSettings extends React.PureComponent {
     return (
       <>
         <h2>{greeting.title}</h2>
-        <Switch name='greeting' text={this.language.enabled} category='greeting'/>
-        <Checkbox name='events' text={greeting.events} category='greeting'/>
-        <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
-        <Text title={greeting.name} name='greetingName' category='greeting'/>
+        <Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
+        <Checkbox name='events' text={greeting.events} category='greeting' element='.other'/>
+        <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.other'/>
+        <Text title={greeting.name} name='greetingName' category='greeting' element='.other'/>
 
         <h3>{greeting.birthday}</h3>
-        <Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
-        <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
+        <Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.other'/>
+        <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.other'/>
         <p>{greeting.birthday_date}</p>
         <DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
       </>

src/components/modals/main/settings/sections/Language.jsx

@@ -11,7 +11,7 @@ export default function LanguageSettings() {
   return (
     <>
       <h2>{language.title}</h2>
-      <Radio name='language' options={languages} />
+      <Radio name='language' options={languages} element='.language' />
       <h3>{language.quote}</h3>
       <Radio name='quotelanguage' options={quote_languages} category='quote' />
     </>

src/components/modals/main/settings/sections/QuickLinks.jsx

@@ -9,7 +9,7 @@ export default function QuickLinks() {
   return (
     <>
       <h2>{language.title}</h2>
-      <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' />
+      <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container' />
       <Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
       <Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
     </>

src/components/modals/main/settings/sections/Quote.jsx

@@ -10,10 +10,10 @@ export default function QuoteSettings() {
   return (
     <>
       <h2>{quote.title}</h2>
-      <Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' />
-      <Checkbox name='authorLink' text={quote.author_link} category='quote' />
-      <Text title={quote.custom} name='customQuote' category='quote' />
-      <Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
+      <Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
+      <Checkbox name='authorLink' text={quote.author_link} element='.other' />
+      <Text title={quote.custom} name='customQuote' element='.other' />
+      <Text title={quote.custom_author} name='customQuoteAuthor' element='.other'/>
 
       <h3>{quote.buttons.title}</h3>
       <Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>

src/components/modals/main/settings/sections/Time.jsx

@@ -94,7 +94,7 @@ export default class TimeSettings extends React.PureComponent {
     return (
       <>
         <h2>{time.title}</h2>
-        <Switch name='time' text={this.language.enabled} category='clock' />
+        <Switch name='time' text={this.language.enabled} category='clock' element='.clock' />
         <Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
           <option value='digital'>{time.digital.title}</option>
           <option value='analogue'>{time.analogue.title}</option>

src/components/modals/main/settings/sections/background/Colour.jsx

@@ -8,6 +8,7 @@ import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
 import { toast } from 'react-toastify';
 
 import 'react-color-gradient-picker/dist/index.css';
+import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
 
 export default class ColourSettings extends React.PureComponent {
   DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': '#ffb032', 'stop': 0 }], 'type': 'linear' };