From 5dd11aca94c00c76f40f02dbd3e48a6bacd7b07a Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Mon, 22 Mar 2021 22:17:52 +0000
Subject: [PATCH] perf: remove unneeded divs and replace with <>, remove
 outdated notes code

---
 src/App.jsx                                   |  4 +--
 src/components/modals/Modals.jsx              |  6 ++---
 src/components/modals/main/Main.jsx           | 26 +++++++++----------
 .../modals/main/scss/settings/_main.scss      |  4 ---
 .../modals/main/settings/Checkbox.jsx         |  4 +--
 .../modals/main/settings/Dropdown.jsx         |  4 +--
 .../modals/main/settings/Slider.jsx           |  4 +--
 .../modals/main/settings/Switch.jsx           |  4 +--
 src/components/modals/main/settings/Text.jsx  |  4 +--
 .../modals/main/settings/sections/About.jsx   |  4 +--
 .../main/settings/sections/Advanced.jsx       |  4 +--
 .../main/settings/sections/Appearance.jsx     |  4 +--
 .../main/settings/sections/Background.jsx     |  4 +--
 .../main/settings/sections/Changelog.jsx      |  4 +--
 .../main/settings/sections/Experimental.jsx   |  8 +++---
 .../main/settings/sections/Greeting.jsx       |  4 +--
 .../main/settings/sections/Language.jsx       |  6 ++---
 .../modals/main/settings/sections/Order.jsx   |  4 +--
 .../modals/main/settings/sections/Quote.jsx   |  4 +--
 .../modals/main/settings/sections/Search.jsx  |  4 +--
 .../modals/main/settings/sections/Time.jsx    | 20 +++++++-------
 src/components/modals/main/tabs/Addons.jsx    |  6 ++---
 .../modals/main/tabs/Marketplace.jsx          |  6 ++---
 src/components/modals/main/tabs/Settings.jsx  |  7 +++--
 .../modals/main/tabs/backend/Tab.jsx          |  6 ++---
 src/components/widgets/navbar/Notes.jsx       |  7 +----
 src/components/widgets/quote/Quote.jsx        |  2 +-
 src/components/widgets/search/Search.jsx      |  6 ++---
 28 files changed, 80 insertions(+), 90 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 593ea3d7..2f0ce920 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,14 +25,14 @@ export default class App extends React.PureComponent {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <Background/>
         <ToastContainer position='bottom-right' autoClose={this.state.toastDisplayTime} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
         <div id='center'>
           <Widgets/>
           <Modals/>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx
index b9a816ad..a7712455 100644
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -9,7 +9,7 @@ const Main = React.lazy(() => import('./main/Main'));
 const Update = React.lazy(() => import('./update/Update'));
 const Welcome = React.lazy(() => import('./welcome/Welcome'));
 //const Feedback = React.lazy(() => import('./components/modals/Feedback'));
-const renderLoader = () => <div></div>;
+const renderLoader = () => <></>;
 
 export default class Modals extends React.PureComponent {
   constructor(...args) {
@@ -40,7 +40,7 @@ export default class Modals extends React.PureComponent {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
         <React.Suspense fallback={renderLoader()}>
           <Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
@@ -56,7 +56,7 @@ export default class Modals extends React.PureComponent {
               <Feedback modalClose={() => this.setState({ feedbackModal: false })} />
             </Modal> */}
         </React.Suspense>
-      </React.Fragment>
+      </>
     );
   }
 }
\ No newline at end of file
diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx
index e4c0eb91..5547c4e1 100644
--- a/src/components/modals/main/Main.jsx
+++ b/src/components/modals/main/Main.jsx
@@ -12,19 +12,19 @@ export default function MainModal(props) {
   const language = window.language;
 
   return (
-    <div className='modal'>
+    <>
       <span className='closeModal' onClick={props.modalClose}>&times;</span>
-        <Navigation navbar={true}>
-          <div label={language.modals.main.navbar.settings}>
-            <Settings/>
-          </div>
-          <div label={language.modals.main.navbar.addons}>
-            <Addons/>
-          </div>
-          <div label={language.modals.main.navbar.marketplace}>
-            <Marketplace/>
-          </div>
-        </Navigation>
-    </div>
+      <Navigation navbar={true}>
+        <div label={language.modals.main.navbar.settings}>
+          <Settings/>
+        </div>
+        <div label={language.modals.main.navbar.addons}>
+          <Addons/>
+        </div>
+        <div label={language.modals.main.navbar.marketplace}>
+          <Marketplace/>
+        </div>
+      </Navigation>
+    </>
   );
 }
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index aece09cd..d8b0dff0 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -49,10 +49,6 @@ h4,
   display: inline;
 }
 
-.section {
-  margin-bottom: 20px;
-}
-
 h4 {
   cursor: pointer;
 }
diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx
index 56e80f22..409a2bff 100644
--- a/src/components/modals/main/settings/Checkbox.jsx
+++ b/src/components/modals/main/settings/Checkbox.jsx
@@ -31,13 +31,13 @@ export default class Checkbox extends React.PureComponent {
     }
 
     return (
-      <React.Fragment>
+      <>
         <FormControlLabel
           control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
           label={text}
         />
         <br/>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index 9f54a932..c1fb64fb 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/src/components/modals/main/settings/Dropdown.jsx
@@ -26,14 +26,14 @@ export default class Dropdown extends React.PureComponent {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         {this.getLabel()}
         <div className='dropdown' style={{ display: 'inline' }}>
           <select name={this.props.name} value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
             {this.props.children}
           </select>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index cef48b93..b214258a 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -29,10 +29,10 @@ export default class Slider extends React.PureComponent {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
         <input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={(e) => this.handleChange(e.target.value)} />
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx
index 231a9b43..bfdedd01 100644
--- a/src/components/modals/main/settings/Switch.jsx
+++ b/src/components/modals/main/settings/Switch.jsx
@@ -31,14 +31,14 @@ export default class Switch extends React.PureComponent {
     }
 
     return (
-      <React.Fragment>
+      <>
         <FormControlLabel
           control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
           label={text}
           labelPlacement='start'
         />
         <br/>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index 91f1fd6d..fbf4c3f3 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -34,13 +34,13 @@ export default class Text extends React.PureComponent {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <p>{this.props.title} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
         {(this.props.textarea === true) ? 
            <textarea className='settingsTextarea' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
           :<input type='text' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
         }
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index c3eae952..0bfe6744 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -49,7 +49,7 @@ export default class About extends React.PureComponent {
 
   render() {
     return (
-      <div>
+      <>
         <h2>{this.language.title}</h2>
         <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
         <p>{this.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
@@ -76,7 +76,7 @@ export default class About extends React.PureComponent {
             <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=256'} alt={item.handle}></img></a>
           </Tooltip>
         )}
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index 02bafa58..04919c08 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -33,7 +33,7 @@ export default class AdvancedSettings extends React.PureComponent {
     const { advanced } = this.language.sections;
 
     return (
-      <div>
+      <>
         <h2>{advanced.title}</h2>
         <Checkbox name='offlineMode' text={advanced.offline_mode} />
 
@@ -55,7 +55,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'modal'} overlayClassName={'Overlay'} ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />
         </Modal>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index 9300a342..ddacd4c2 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -24,7 +24,7 @@ export default function AppearanceSettings() {
   ]
 
   return (
-    <div>
+    <>
       <h2>{appearance.title}</h2>
       <Radio name='theme' title='Theme' options={themeOptions} />
 
@@ -58,6 +58,6 @@ export default function AppearanceSettings() {
       <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
       <Slider title={appearance.accessibility.zoom} name='zoom' default='100' min='50' max='200' display='%'/>
       <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
-    </div>
+    </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx
index c5e47e6d..199a254b 100644
--- a/src/components/modals/main/settings/sections/Background.jsx
+++ b/src/components/modals/main/settings/sections/Background.jsx
@@ -200,7 +200,7 @@ export default class BackgroundSettings extends React.PureComponent {
     }
 
     return (
-      <div>
+      <>
         <h2>{background.title}</h2>
         <Switch name='background' text={this.language.enabled} />
         <h3>{background.buttons.title}</h3>
@@ -231,7 +231,7 @@ export default class BackgroundSettings extends React.PureComponent {
           <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
           {colourSettings}
         </ul>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx
index 6b46b49a..6ed55f9d 100644
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -45,12 +45,12 @@ export default class Changelog extends React.PureComponent {
 
   render() {
     return (
-      <div>
+      <>
         <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
         <h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
         {this.state.image ? <img draggable='false' src={this.state.image} alt='Update'></img> : null}
         <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx
index ead132ce..1384cf29 100644
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import Checkbox from '../Checkbox';
 
-export default function ExperimentalSettings (props) {
+export default function ExperimentalSettings() {
   return (
-    <div>
-    </div>
+    <>
+      <p>Coming soon...</p>
+    </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index 655b315f..32e13dff 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -28,7 +28,7 @@ export default class GreetingSettings extends React.PureComponent {
     const { greeting } = this.language.sections;
 
     return (
-      <div>
+      <>
         <h2>{greeting.title}</h2>
         <Switch name='greeting' text={this.language.enabled} />
         <Checkbox name='events' text={greeting.events} />
@@ -42,7 +42,7 @@ export default class GreetingSettings extends React.PureComponent {
           <p>{greeting.birthday_date}</p>
           <DayPickerInput onDayChange={(data) => this.changeDate(data)} value={this.state.birthday} />
         </ul>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx
index 31c9888f..41249d23 100644
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/src/components/modals/main/settings/sections/Language.jsx
@@ -5,11 +5,11 @@ import Radio from '../Radio';
 
 const languages = require('../../../../../modules/languages.json');
 
-export default function LanguageSettings () {
+export default function LanguageSettings() {
   const language = window.language.modals.main.settings.sections.language;
 
   return (
-    <div>
+    <>
       <h2>{language.title}</h2>
       <Radio name='language' options={languages} />
       <br/>
@@ -17,6 +17,6 @@ export default function LanguageSettings () {
         <option className='choices' value='English'>English</option>
         <option className='choices' value='French'>Français</option>
       </Dropdown>
-    </div>
+    </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx
index dad87d0d..7a935b12 100644
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -34,14 +34,14 @@ export default class OrderSettings extends React.PureComponent {
 
   render() {
     return (
-      <div>
+      <>
         <h2>Order</h2>
         <SortableContainer onSortEnd={this.onSortEnd}>
           {this.state.items.map((value, index) => (
             <SortableItem key={`item-${value}`} index={index} value={value} />
           ))}
         </SortableContainer>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index 3389d9e7..1b24eacd 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -8,7 +8,7 @@ export default function QuoteSettings() {
   const { quote } = window.language.modals.main.settings.sections;
 
   return (
-    <div>
+    <>
       <h2>{quote.title}</h2>
       <Switch name='quote' text={window.language.modals.main.settings.enabled} />
       <Checkbox name='authorLink' text={quote.author_link}/>
@@ -19,6 +19,6 @@ export default function QuoteSettings() {
       <Checkbox name='copyButton' text={quote.buttons.copy}/>
       <Checkbox name='tweetButton' text={quote.buttons.tweet}/>
       <Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite}/>
-    </div>
+    </>
   );
 }
\ No newline at end of file
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index bc424813..38d2994d 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -58,7 +58,7 @@ export default class SearchSettings extends React.PureComponent {
     const { search } = language.sections;
 
     return (
-      <div className='section'>
+      <>
         <h2>{search.title}</h2>
         <Switch name='searchBar' text={language.enabled} />
         <Checkbox name='voiceSearch' text={search.voice_search} />
@@ -74,7 +74,7 @@ export default class SearchSettings extends React.PureComponent {
           <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.reset}</span></p>
           <input type='text' id='customSearchEngine'></input>
         </ul>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 82ad6e3e..857d9997 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -20,24 +20,24 @@ export default class TimeSettings extends React.PureComponent {
     let timeSettings;
 
     const digitalSettings = (
-      <React.Fragment>
+      <>
         <h3>{time.digital.title}</h3>
         <Checkbox name='seconds' text={time.digital.seconds} />
         <Checkbox name='24hour' text={time.digital.twentyfourhour} />
         <Checkbox name='ampm' text={time.digital.ampm} />
         <Checkbox name='zero' text={time.digital.zero} />
-      </React.Fragment>
+      </>
     );
 
     const analogSettings = (
-      <React.Fragment>
+      <>
         <h3>{time.analogue.title}</h3>
         <Checkbox name='secondHand' text={time.analogue.second_hand} />
         <Checkbox name='minuteHand' text={time.analogue.minute_hand} />
         <Checkbox name='hourHand' text={time.analogue.hour_hand} />
         <Checkbox name='hourMarks' text={time.analogue.hour_marks} />
         <Checkbox name='minuteMarks' text={time.analogue.minute_marks} />
-      </React.Fragment>
+      </>
     );
 
     switch (this.state.timeType) {
@@ -49,14 +49,14 @@ export default class TimeSettings extends React.PureComponent {
     let dateSettings;
     
     const longSettings = (
-      <React.Fragment>
+      <>
         <Checkbox name='dayofweek' text={time.date.day_of_week} />
         <Checkbox name='datenth' text={time.date.datenth} />
-      </React.Fragment>
+      </>
     );
 
     const shortSettings = (
-      <React.Fragment>
+      <>
         <br/>
         <Dropdown label={time.date.short_format} name='dateFormat'>
           <option className='choices' value='DMY'>DMY</option>
@@ -70,7 +70,7 @@ export default class TimeSettings extends React.PureComponent {
           <option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
           <option className='choices' value='slashes'>{time.date.short_separator.slashes}</option>
        </Dropdown>
-      </React.Fragment>
+      </>
     );
 
     switch (this.state.dateType) {
@@ -79,7 +79,7 @@ export default class TimeSettings extends React.PureComponent {
     }
 
     return (
-      <div>
+      <>
         <h2>{time.title}</h2>
         <Switch name='time' text={this.language.enabled} />
         <Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
@@ -97,7 +97,7 @@ export default class TimeSettings extends React.PureComponent {
         </Dropdown>
         <br/>
         {dateSettings}
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/modals/main/tabs/Addons.jsx b/src/components/modals/main/tabs/Addons.jsx
index 5e72630b..98749cf8 100644
--- a/src/components/modals/main/tabs/Addons.jsx
+++ b/src/components/modals/main/tabs/Addons.jsx
@@ -4,9 +4,9 @@ import Added from '../marketplace/sections/Added';
 
 import AddonsTabs from './backend/Tabs';
 
-export default function Addons (props) {
+export default function Addons() {
   return (
-    <React.Fragment>
+    <>
       <AddonsTabs>
         <div label='Added'>
           <Added/>
@@ -15,6 +15,6 @@ export default function Addons (props) {
 
         </div>
       </AddonsTabs>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/components/modals/main/tabs/Marketplace.jsx b/src/components/modals/main/tabs/Marketplace.jsx
index 024f8677..64ff0e33 100644
--- a/src/components/modals/main/tabs/Marketplace.jsx
+++ b/src/components/modals/main/tabs/Marketplace.jsx
@@ -3,9 +3,9 @@ import React from 'react';
 import MarketplaceBackend from '../marketplace/sections/Marketplace';
 import MarketplaceTabs from './backend/Tabs';
 
-export default function Marketplace (props) {
+export default function Marketplace() {
   return (
-    <React.Fragment>
+    <>
       <MarketplaceTabs>
         <div label='Photo Packs'>
           <MarketplaceBackend type='photo_packs'/>
@@ -14,6 +14,6 @@ export default function Marketplace (props) {
           <MarketplaceBackend type='quote_packs'/>
         </div>
       </MarketplaceTabs>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index 5333a7c2..1dc7968e 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -14,11 +14,10 @@ import Order from '../settings/sections/Order';
 
 import SettingsTabs from './backend/Tabs';
 
-export default function Settings () {
+export default function Settings() {
   const language = window.language.modals.main.settings.sections;
-
   return (
-    <React.Fragment>
+    <>
       <SettingsTabs>
         <div label={language.time.title}><Time/></div>
         <div label={language.quote.title}><Quote/></div>
@@ -37,6 +36,6 @@ export default function Settings () {
         <h1>IMPORTANT INFO</h1>
         <p>In order for changes to take place, the page must be refreshed.</p>
       </div>
-    </React.Fragment>
+    </>
   );
 }
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 9418c94e..3b37de87 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -68,11 +68,11 @@ export default function Tab(props) {
   }
 
   return (
-    <React.Fragment>
+    <>
       <li className={className} onClick={() => props.onClick(props.label)}>
       {icon} <span>{props.label}</span>
       </li>
-      {(divider === true) ? <div><hr/></div> : null}
-    </React.Fragment>
+      {(divider === true) ? <hr/> : null}
+    </>
   )
 }
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 4c00f841..87c59a39 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -39,13 +39,8 @@ export default class Notes extends React.PureComponent {
   }
 
   render() {
-    let classList = 'notescontainer';
-    if (localStorage.getItem('darkTheme') === 'true') {
-      classList += ' dark';
-    }
-
     return (
-      <span id='noteContainer' className={classList}>
+      <span id='noteContainer' className='notescontainer'>
         <div className='topbarnotes'>
           <NotesIcon/>
           <h3>{this.language.title}</h3>
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 0423c7aa..3eed5e8a 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -143,7 +143,7 @@ export default class Quote extends React.PureComponent {
     this.setState({
       favourited: localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={() => this.favourite()} /> : null,
       copy: (localStorage.getItem('copyButton') === 'false') ? null : this.state.copy,
-      tweet: (localStorage.getItem('tweetButton') === 'false') ? null: this.state.tweet
+      tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.state.tweet
     });
 
     this.getQuote();
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index 0d7eaad8..05e460df 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -70,13 +70,13 @@ export default class Search extends React.PureComponent {
 
   render() {
     return (
-      <div id='searchBar'>
-        <form action={this.state.url}>
+      <>
+        <form action={this.state.url} id='searchBar'>
           {this.state.microphone}
           <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
           <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
         </form>
-      </div>
+      </>
     );
   }
 }