feat: individual widget zoom, hot reload for font and custom js/css etc

src/components/modals/main/settings/Slider.jsx

@@ -9,8 +9,8 @@ export default class Slider extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      value: localStorage.getItem(this.props.name) || '',
-      numberWidth: ((localStorage.getItem(this.props.name).length + 1) * ((this.props.toast === true) ? 7.75 : 7))
+      value: localStorage.getItem(this.props.name) || this.props.default,
+      numberWidth: localStorage.getItem(this.props.name) ? ((localStorage.getItem(this.props.name).length + 1) * ((this.props.toast === true) ? 7.75 : 7)) : 32
     };
     this.language = window.language.modals.main.settings;
     this.widthCalculation = (this.props.toast === true) ? 7.75 : 7;

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

@@ -46,8 +46,8 @@ export default class AdvancedSettings extends React.PureComponent {
 
         <h3>{advanced.customisation}</h3>
         <Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
-        <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.custom_js} name='customjs' textarea={true} category='other'/>
+        <Text title={advanced.custom_css} name='customcss' textarea={true} category='other'/>
 
         <h3>{this.language.sections.experimental.title}</h3>
         <p style={{ 'maxWidth': '75%'}}>{advanced.experimental_warning}</p>

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

@@ -36,10 +36,10 @@ export default function AppearanceSettings() {
       <Checkbox name='refresh' text={appearance.navbar.refresh} element='.other' />
 
       <h3>{appearance.font.title}</h3>
-      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} element='.other' />
+      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />
       <br/>
-      <Checkbox name='fontGoogle' text={appearance.font.google} element='.other' />
-      <Dropdown label={appearance.font.weight.title} name='fontweight' element='.other'>
+      <Checkbox name='fontGoogle' text={appearance.font.google} category='other' />
+      <Dropdown label={appearance.font.weight.title} name='fontweight' category='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' element='.other'>
+      <Dropdown label={appearance.font.style.title} name='fontstyle' category='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/Greeting.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
+import Slider from '../Slider';
 
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import 'react-day-picker/lib/style.css';
@@ -34,6 +35,7 @@ export default class GreetingSettings extends React.PureComponent {
         <Checkbox name='events' text={greeting.events} category='greeting' element='.greeting'/>
         <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.greeting'/>
         <Text title={greeting.name} name='greetingName' category='greeting' element='.greeting'/>
+        <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' element='.greeting' />
 
         <h3>{greeting.birthday}</h3>
         <Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.greeting'/>

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

@@ -3,6 +3,7 @@ import React from 'react';
 import Checkbox from '../Checkbox';
 import Text from '../Text';
 import Switch from '../Switch';
+import Slider from '../Slider';
 
 export default function QuoteSettings() {
   const { quote } = window.language.modals.main.settings.sections;
@@ -14,6 +15,7 @@ export default function QuoteSettings() {
       <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'/>
+      <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
 
       <h3>{quote.buttons.title}</h3>
       <Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>

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

@@ -78,10 +78,6 @@ export default class SearchSettings extends React.PureComponent {
         <h2>{search.title}</h2>
         <Switch name='searchBar' text={language.enabled} category='widgets' />
         {isChrome ? <Checkbox name='voiceSearch' text={search.voice_search} /> : null}
-        <Checkbox name='autocomplete' text={search.autocomplete} category='search'/>
-        <Radio title={search.autocomplete_provider} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
-        <br/>
-
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
           {searchEngines.map((engine) => (
             <option key={engine.name} value={engine.settingsName}>{engine.name}</option>
@@ -89,11 +85,14 @@ export default class SearchSettings extends React.PureComponent {
           <option value='custom'>{search.custom.split(' ')[0]}</option>
         </Dropdown>
 
-        <br/><br/>
         <ul style={{ display: this.state.customDisplay }}>
+          <br/>
           <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
           <input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
         </ul>
+        <br/>
+        <Checkbox name='autocomplete' text={search.autocomplete} category='search' element='.other'/>
+        <Radio title={search.autocomplete_provider} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
       </>
     );
   }

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

@@ -4,6 +4,7 @@ import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Switch from '../Switch';
 import Radio from '../Radio';
+import Slider from '../Slider';
 
 export default class TimeSettings extends React.PureComponent {
   constructor() {
@@ -101,6 +102,7 @@ export default class TimeSettings extends React.PureComponent {
           <option value='percentageComplete'>{time.percentage_complete}</option>
         </Dropdown>
         {timeSettings}
+        <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomClock' min='10' max='400' default='100' display='%' category='clock' element='.clock-container' />
 
         <h3>{time.date.title}</h3>
         <Switch name='date' text={this.language.enabled} category='date' element='.date'/>
@@ -112,6 +114,7 @@ export default class TimeSettings extends React.PureComponent {
         <Checkbox name='datezero' text={time.digital.zero} category='date' element='.date' />
         <Checkbox name='weeknumber' text={time.date.week_number} category='date' element='.date'/>
         {dateSettings}
+        <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomDate' min='10' max='400' default='100' display='%' category='date' element='.date' />
       </>
     );
   }

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

@@ -73,7 +73,7 @@ export default class TimeSettings extends React.PureComponent {
         <Radio name='tempformat' title={language.temp_format.title} options={tempFormat} category='weather'/>
         <h3>{language.extra_info.title}</h3>
         <Checkbox name='showlocation' text={language.extra_info.show_location} category='weather'/>
-        <Checkbox name='showtext' text={language.extra_info.show_text} category='weather'/>
+        <Checkbox name='weatherdescription' text={language.extra_info.show_description} category='weather'/>
         <Checkbox name='cloudiness' text={language.extra_info.cloudiness} category='weather'/>
         <Checkbox name='humidity' text={language.extra_info.humidity} category='weather'/>
         <Checkbox name='visibility' text={language.extra_info.visibility} category='weather'/>