improve settings sections

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

@@ -228,11 +228,23 @@ export default class BackgroundSettings extends React.PureComponent {
     return (
         <div>
           <h2>Background</h2>
+          <Checkbox name='background' text='Enabled' />
+          <h3>Buttons</h3>
           <ul>
             <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} />
           </ul>
+          <h3>Effects</h3>
+          <ul>
+            <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
+            <input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
+          </ul>
+          <ul>
+            <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
+            <input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
+          </ul>
+          <h3>Source</h3>
           <ul>
             <Dropdown
               label={this.props.language.background.api}
@@ -243,14 +255,6 @@ export default class BackgroundSettings extends React.PureComponent {
                 <option className='choices' value='unsplash'>Unsplash</option>
             </Dropdown>
           </ul>
-          <ul>
-            <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
-            <input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
-          </ul>
-          <ul>
-            <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
-            <input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
-          </ul>
           <ul>
             <p>{this.props.language.background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
             <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>

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

@@ -42,13 +42,15 @@ export default class GreetingSettings extends React.PureComponent {
     return (
       <div>
         <h2>Greeting</h2>
+        <Checkbox name='greeting'>Enabled</Checkbox>
         <Checkbox name='events' text={this.props.language.greeting.events} />
         <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
-        <Checkbox name='birthdayenabled' text={this.props.language.greeting.birthday_enabled} />
         <ul>
           <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span></p>
           <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
         </ul>
+        <h3>Birthday</h3>
+        <Checkbox name='birthdayenabled' text={this.props.language.greeting.birthday_enabled} />
         <ul>
           <p>{this.props.language.greeting.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>

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

@@ -16,6 +16,11 @@ export default function LanguageSettings (props) {
              <option className='choices' value={language.code} key={language.code}>{language.text}</option>
           )}
       </Dropdown>
+      <h4 htmlFor='quotelanguage' className='nodropdown'>Quote {props.language.language}</h4>
+      <Dropdown label={props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
+              <option className='choices' value='English'>English</option>
+              <option className='choices' value='French'>Français</option>
+      </Dropdown>
     </div>
   );
 }

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

@@ -1,19 +1,16 @@
 import React from 'react';
 
 import Checkbox from '../Checkbox';
-import Dropdown from '../Dropdown';
 
 export default function QuoteSettings (props) {
   return (
     <div>
       <h2>Quote</h2>
+      <Checkbox name='greeting' text={'Enabled'}></Checkbox>
+      <h3>Buttons</h3>
       <Checkbox name='copyButton' text={props.language.quote.copy} />
-            <Checkbox name='tweetButton' text={props.language.quote.tweet} />
-            <Checkbox name='favouriteQuoteEnabled' text={props.language.quote.favourite} />
-            <Dropdown label={props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
-              <option className='choices' value='English'>English</option>
-              <option className='choices' value='French'>Français</option>
-            </Dropdown>
+      <Checkbox name='tweetButton' text={props.language.quote.tweet} />
+      <Checkbox name='favouriteQuoteEnabled' text={props.language.quote.favourite} />
     </div>
   );
 }

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

@@ -7,6 +7,7 @@ export default function TimeSettings (props) {
   return (
     <div>
       <h2>Time</h2>
+      <Checkbox name='time' text='Enabled' />
       <Checkbox name='seconds' text={props.language.time.seconds} />
       <Checkbox name='24hour' text={props.language.time.twentyfourhour} />
       <Checkbox name='ampm' text={props.language.time.ampm} />
@@ -14,6 +15,7 @@ export default function TimeSettings (props) {
       <Checkbox name='analog' text={props.language.time.analog} />
       <Checkbox name='percentageComplete' text={props.language.time.percentageComplete} />
       <h3>Date</h3>
+      <Checkbox name='date' text='Enabled' />
       <Checkbox name='short' text={props.language.date.short_date} betaFeature={true} />
       <Dropdown label={props.language.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
         <option className='choices' value='DMY'>DMY</option>