From d42f69ae951a45ab1191212b603402e950befa9b Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Sun, 28 Feb 2021 12:23:28 +0000
Subject: [PATCH] improve settings sections

---
 .../modals/settings/sections/Background.jsx   | 20 +++++++++++--------
 .../modals/settings/sections/Greeting.jsx     |  4 +++-
 .../modals/settings/sections/Language.jsx     |  5 +++++
 .../modals/settings/sections/Quote.jsx        | 11 ++++------
 .../modals/settings/sections/Time.jsx         |  2 ++
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/settings/sections/Background.jsx
index 7e840bd2..cc4b03fe 100644
--- a/src/components/modals/settings/sections/Background.jsx
+++ b/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>
diff --git a/src/components/modals/settings/sections/Greeting.jsx b/src/components/modals/settings/sections/Greeting.jsx
index 4b014537..fd58404b 100644
--- a/src/components/modals/settings/sections/Greeting.jsx
+++ b/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}/>
diff --git a/src/components/modals/settings/sections/Language.jsx b/src/components/modals/settings/sections/Language.jsx
index 15c25120..418f0f77 100644
--- a/src/components/modals/settings/sections/Language.jsx
+++ b/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>
   );
 }
\ No newline at end of file
diff --git a/src/components/modals/settings/sections/Quote.jsx b/src/components/modals/settings/sections/Quote.jsx
index c96c6fc6..201f52bc 100644
--- a/src/components/modals/settings/sections/Quote.jsx
+++ b/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>
   );
 }
\ No newline at end of file
diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx
index e108416e..c48dc4c9 100644
--- a/src/components/modals/settings/sections/Time.jsx
+++ b/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>