perf: remove unneeded divs and replace with <>, remove outdated notes code

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

src/components/modals/main/Main.jsx

@@ -12,7 +12,7 @@ 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}>
@@ -25,6 +25,6 @@ export default function MainModal(props) {
           <Marketplace/>
         </div>
       </Navigation>
-    </div>
+    </>
   );
 }

src/components/modals/main/scss/settings/_main.scss

@@ -49,10 +49,6 @@ h4,
   display: inline;
 }
 
-.section {
-  margin-bottom: 20px;
-}
-
 h4 {
   cursor: pointer;
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+    </>
   );
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+    </>
   );
 }

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>
+      </>
     );
   }
 }

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>
+    </>
   );
 }

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>
+      </>
     );
   }
 }

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>
+    </>
   );
 }

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>
+      </>
     );
   }
 }

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>
+      </>
     );
   }
 }

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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}
+    </>
   )
 }

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>

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();

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>
+      </>
     );
   }
 }