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

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