Cleanup, refactor and new features

src/components/modals/settings/Checkbox.jsx

@@ -19,6 +19,7 @@ export default class Checkbox extends React.PureComponent {
   render() {
     let text = this.props.text;
     if (this.props.newFeature) text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+    else if (this.props.betaFeature) text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
 
     return (
       <React.Fragment>

src/components/modals/settings/Section.jsx

@@ -12,7 +12,7 @@ export default class Section extends React.PureComponent {
   }
 
   toggleSection() {
-    const display = (this.state.display === 'none') ? 'block': 'none';
+    const display = (this.state.display === 'none') ? 'block' : 'none';
 
     this.setState({
       display: display,
@@ -26,7 +26,11 @@ export default class Section extends React.PureComponent {
     let extraHTML, expandMore, slider, noDropdown;
 
     if (this.props.children) {
-        extraHTML = <li className='extraSettings'>{this.props.children}</li>
+        extraHTML = (
+          <div style={{ display: this.state.display }}>
+            <li className='extraSettings'>{this.props.children}</li>
+          </div>
+        );
         expandMore = (
           <ExpandMore
             style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
@@ -35,16 +39,14 @@ export default class Section extends React.PureComponent {
         );
     }
     if (this.props.slider !== false) slider = <Slider name={this.props.name} />;
-    if (this.props.noDropdown) noDropdown = 'nodropdown';
+    if (this.props.dropdown === false) noDropdown = 'nodropdown';
 
     return (
         <div className='section'>
             <h4 className={noDropdown} onClick={() => this.toggleSection()}>{this.props.title}</h4>
             {expandMore}
             {slider}
-            <div style={{ display: this.state.display }}>
-              {extraHTML}
-            </div>
+            {extraHTML}
         </div>
     );
   }

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -194,6 +194,7 @@ export default class BackgroundSettings extends React.PureComponent {
             <Checkbox name='view' text={this.props.language.background.view} />
             <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
             <Checkbox name='refresh' text={this.props.language.background.refresh} />
+            <Checkbox name='webp' text={this.props.language.experimental.webp} betaFeature={true} />
           </ul>
           <ul>
             <Dropdown

src/components/modals/settings/sections/SearchSettings.jsx

@@ -3,8 +3,9 @@ import SettingsFunctions from '../../../../modules/helpers/settings';
 import { toast } from 'react-toastify';
 import Section from '../Section';
 import Dropdown from '../Dropdown';
+import Checkbox from '../Checkbox';
 
-const searchEngines = require('../../../../modules/json/search_engines.json');
+const searchEngines = require('../../../widgets/search/search_engines.json');
 
 export default class SearchSettings extends React.PureComponent {
   resetSearch() {
@@ -27,6 +28,9 @@ export default class SearchSettings extends React.PureComponent {
   render() {
     return (
         <Section title={this.props.language.searchbar.title} name='searchBar'>
+          <ul>
+            <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
+          </ul>
           <ul>
             <Dropdown label={this.props.language.searchbar.search_engine}
               name='searchEngine'
@@ -39,7 +43,7 @@ export default class SearchSettings extends React.PureComponent {
             </Dropdown>
           </ul>
           <ul id='searchEngineInput' style={{ display: 'none' }}>
-            <p style={{ "marginTop": "0px" }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+            <p style={{ 'marginTop': '0px' }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
             <input type='text' id='customSearchEngine'></input>
           </ul>
         </Section>

src/components/modals/tabs/Settings.jsx

@@ -9,8 +9,12 @@ import SearchSettings from '../settings/sections/SearchSettings';
 import LanguageSettings from '../settings/sections/LanguageSettings';
 
 export default class Settings extends React.PureComponent {
-  resetGreeting() {
-    document.getElementById('greetingName').value = '';
+  resetItem(type) {
+    switch (type) {
+      case 'greeting': document.getElementById('greetingName').value = ''; break;
+      case 'css': document.getElementById('customcss').value = ''; break;
+      default: break;
+    }
     toast(this.props.toastLanguage.reset);
   }
 
@@ -18,6 +22,7 @@ export default class Settings extends React.PureComponent {
     // Settings
     document.getElementById('greetingName').value = localStorage.getItem('greetingName');
     document.getElementById('language').value = localStorage.getItem('language');
+    document.getElementById('customcss').value = localStorage.getItem('customcss');
 
     if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns
       const choices = document.getElementsByClassName('choices');
@@ -45,13 +50,14 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='ampm' text={this.props.language.time.ampm} />
             <Checkbox name='zero' text={this.props.language.time.zero} />
             <Checkbox name='analog' text={this.props.language.time.analog} />
+            <Checkbox name='percentageComplete' text={this.props.language.time.percentageComplete} />
           </Section>
 
           <Section title={this.props.language.greeting.title} name='greeting'>
             <Checkbox name='events' text={this.props.language.greeting.events} />
             <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
             <ul>
-              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetGreeting()}>{this.props.language.reset}</span></p>
+              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greeting')}>{this.props.language.reset}</span></p>
               <input type='text' id='greetingName'></input>
             </ul>
           </Section>
@@ -63,17 +69,17 @@ export default class Settings extends React.PureComponent {
           </Section>
 
           <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-
           <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+          <Section title={this.props.language.offline} name='offlineMode' dropdown={false} />
 
-          <Section title={this.props.language.offline} name='offlineMode' noDropdown={true} />
-          <Section title={this.props.language.dark} name='darkTheme' noDropdown={true} />
-
-          <Section title={this.props.language.experimental.title} name='experimental' slider={false}>
-            <Checkbox name='webp' text={this.props.language.experimental.webp} />
-            <Checkbox name='animations' text={this.props.language.experimental.animations} />
-            <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} newFeature={true} />
-            <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} newFeature={true} />
+          <Section title='Appearance' name='appearance' slider={false}>
+            <Checkbox name='animations' text={this.props.language.experimental.animations} betaFeature={true} />
+            <Checkbox name='darkTheme' text={this.props.language.dark} />
+            <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} betaFeature={true} />
+            <ul>
+              <p>Custom CSS <span className='modalLink' onClick={() => this.resetItem('css')}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
+              <textarea id='customcss'></textarea>
+            </ul>
           </Section>
 
           <LanguageSettings language={this.props.language} />