Add new modal (WIP)

Currently broken: marketplace, addons, resizing the modal, gradient settings
Not implemented: apply button, reset button, import/export buttons

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/App.jsx

@@ -96,7 +96,7 @@ export default class App extends React.PureComponent {
           <Widgets language={language} languagecode={languagecode} />
           <PhotoInformation language={language} className={tooltipClassList} />
           <React.Suspense fallback={renderLoader()}>
-            <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+            <Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Main language={language} modalClose={() => this.setState({ mainModal: false })} />
             </Modal>
             <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>

src/components/modals/Main.jsx

@@ -4,61 +4,27 @@ import Settings from './tabs/Settings';
 import Addons from './tabs/Addons';
 import Marketplace from './tabs/Marketplace';
 
-import SettingsIcon from '@material-ui/icons/Settings';
-import AddonsIcon from '@material-ui/icons/Widgets';
-import MarketplaceIcon from '@material-ui/icons/ShoppingBasket';
+import Navigation from './tabs-backend/Tabs';
 
 export default class MainModal extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      tab: '',
-      currentTab: ''
-    }
-    this.tabs = {
-      settings: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
-      addons: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.language.toasts} openMarketplace={() => this.changeEnabled('marketplace')}/>,
-      marketplace: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.language.toasts} updateLanguage={this.props.language.update}/>
-    }
-  }
-
-  componentDidMount() {
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
-
-    this.setState({ 
-      tab: this.tabs.settings, 
-      currentTab: 'settings' 
-    });
-  }
-
-  componentWillUnmount() {
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
-  }
-
-  changeEnabled(input) {
-    document.getElementById(this.state.currentTab + 'TabLink').classList.toggle('active');
-    document.getElementById(input + 'TabLink').classList.toggle('active');
-
-    this.setState({ 
-      tab: this.tabs[input], 
-      currentTab: input 
-    });
-  }
-
   render() {
     return (
-      <div className='content'>
+      <div className='modal'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.language.modals.title}</h1>
-        <div className='tab'>
-          <button className='tablinks' id='marketplaceTabLink' onClick={() => this.changeEnabled('marketplace')}><MarketplaceIcon/> {this.props.language.modals.marketplace}</button>
-          <button className='tablinks' id='addonsTabLink'onClick={() => this.changeEnabled('addons')}><AddonsIcon/> {this.props.language.modals.addons}</button>
-          <button className='tablinks active' id='settingsTabLink' onClick={() => this.changeEnabled('settings')}><SettingsIcon/> {this.props.language.modals.settings}</button>
+        <div>
+          <Navigation navbar={true}>
+            <div label='Settings'>
+              <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />
+            </div>
+            <div label='My Add-ons'>
+              <Addons/>
+            </div>
+            <div label='Marketplace'>
+              <Marketplace/>
+            </div>
+          </Navigation>
         </div>
-        <br/>
-        {this.state.tab}
       </div>
     );
   }

src/components/modals/settings/Section.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import Slider from './Slider';
-
-import ExpandMore from '@material-ui/icons/ExpandMore';
-
-export default class Section extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      display: 'none',
-      transform: 'rotate(0)'
-    };
-  }
-
-  toggleSection() {
-    const display = (this.state.display === 'none') ? 'block' : 'none';
-
-    this.setState({
-      display: display,
-      transform: (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)'
-    });
-
-    if (this.props.onToggle) {
-      this.props.onToggle(display);
-    }
-  }
-
-  render() {
-    let extraHTML, expandMore;
-
-    if (this.props.children) {
-        extraHTML = (
-          <div style={{ display: this.state.display }}>
-            <li className='extraSettings'>{this.props.children}</li>
-          </div>
-        );
-
-        expandMore = (
-          <ExpandMore
-            style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
-            className={`expandIcons`}
-            onClick={() => this.toggleSection()} />
-        );
-    }
-
-    return (
-        <div className='section'>
-            <h4 className={(this.props.dropdown === false) ? 'nodropdown' : null} onClick={() => this.toggleSection()}>{this.props.title}</h4>
-            {expandMore}
-            {(this.props.slider !== false) ? <Slider name={this.props.name} /> : null}
-            {extraHTML}
-        </div>
-    );
-  }
-}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default class About extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        contributors: []
+    }
+  }
+
+  async getContributors() {
+    const data = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
+
+    this.setState({ 
+        contributors: data // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
+    });
+  }
+
+  componentDidMount() {
+    this.getContributors();
+  }
+
+  render() {
+    return (
+      <div>
+          <h2>About</h2>
+          <img style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
+          <p>Copyright 2018-2021 Mue Tab (BSD-3 License)</p>
+          <p>Version 5.0.0</p>
+          <h3>Contributors</h3>
+          {this.state.contributors.map((item) =>
+            <Tooltip title={item.login} placement='top' key={item.login}>
+                <a href={'https://github.com/' + item.login}><img className='abouticon' src={item.avatar_url} alt={item.login}></img></a>
+            </Tooltip>
+          )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+
+export default function AppearanceSettings (props) {
+  return (
+    <div>
+        <h2>Appearance</h2>
+        <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
+        <Checkbox name='darkTheme' text={props.language.dark} />
+        <Checkbox name='brightnessTime' text={props.language.experimental.night_mode} betaFeature={true} />
+        <ul>
+            <p>{props.language.custom_css} <span className='modalLink' onClick={() => this.resetItem()}>{props.language.reset}</span> <span className='newFeature'> NEW</span></p>
+            <textarea id='customcss'></textarea>
+        </ul>
+        <h3>Accessibility</h3>
+        <ul>
+            <p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
+            <input className='range' type='range' min='50' max='200' value={100} />
+        </ul>
+        <ul>
+            <p>Toast Duration (2500 milliseconds) <span className='modalLink'>{props.language.reset}</span></p>
+            <input className='range' type='range' min='50' max='200' value={100} />
+        </ul>
+    </div>
+  );
+}

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
-import Section from '../Section';
 import FileUpload from '../FileUpload';
 
 import { ColorPicker } from 'react-color-gradient-picker';
@@ -227,8 +226,8 @@ export default class BackgroundSettings extends React.PureComponent {
     }
 
     return (
-      <React.Fragment>
-        <Section title={this.props.language.background.title} name='background' onToggle={this.onSectionToggle}>
+        <div>
+          <h2>Background</h2>
           <ul>
             <Checkbox name='view' text={this.props.language.background.view} />
             <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
@@ -266,8 +265,7 @@ export default class BackgroundSettings extends React.PureComponent {
             <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
             {this.state.shown && colourSettings}
           </ul>
-        </Section>
-      </React.Fragment>
+        </div>
     );
   }
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import Section from '../Section';
 import Checkbox from '../Checkbox';
 
 import DatePicker from 'react-date-picker';
@@ -41,7 +40,8 @@ export default class GreetingSettings extends React.PureComponent {
 
   render() {
     return (
-      <Section title={this.props.language.greeting.title} name='greeting'>
+      <div>
+        <h2>Greeting</h2>
         <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} />
@@ -53,7 +53,7 @@ export default class GreetingSettings extends React.PureComponent {
           <p>{this.props.language.greeting.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
         </ul>
-      </Section>
+      </div>
     );
   }
 }

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

@@ -5,7 +5,8 @@ const languages = require('../../../../modules/languages.json');
 
 export default function LanguageSettings (props) {
   return (
-    <div className='section'>
+    <div>
+      <h2>Language</h2>
       <h4 htmlFor='language' className='nodropdown'>{props.language.language}</h4>
       <Dropdown
         name='language'

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
+
+export default function QuoteSettings (props) {
+  return (
+    <div>
+      <h2>Quote</h2>
+      <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>
+    </div>
+  );
+}

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { toast } from 'react-toastify';
 
-import Section from '../Section';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 
@@ -57,7 +56,8 @@ export default class SearchSettings extends React.PureComponent {
 
   render() {
     return (
-        <Section title={this.props.language.searchbar.title} name='searchBar'>
+       <div className='section'>
+          <h2>Search</h2>
           <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
           <ul>
             <Dropdown label={this.props.language.searchbar.search_engine}
@@ -74,7 +74,7 @@ export default class SearchSettings extends React.PureComponent {
             <p style={{ 'marginTop': '0px' }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
             <input type='text' id='customSearchEngine'></input>
           </ul>
-        </Section>
+        </div>
     );
   }
 }

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
+
+export default function TimeSettings (props) {
+  return (
+    <div>
+      <h2>Time</h2>
+      <Checkbox name='seconds' text={props.language.time.seconds} />
+      <Checkbox name='24hour' text={props.language.time.twentyfourhour} />
+      <Checkbox name='ampm' text={props.language.time.ampm} />
+      <Checkbox name='zero' text={props.language.time.zero} />
+      <Checkbox name='analog' text={props.language.time.analog} />
+      <Checkbox name='percentageComplete' text={props.language.time.percentageComplete} />
+      <h3>Date</h3>
+      <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>
+        <option className='choices' value='MDY'>MDY</option>
+        <option className='choices' value='YMD'>YMD</option>
+      </Dropdown>
+    </div>
+  );
+}

src/components/modals/tabs-backend/Tab.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+// navbar
+import Settings from '@material-ui/icons/Settings';
+import Addons from '@material-ui/icons/Widgets';
+import Marketplace from '@material-ui/icons/ShoppingBasket';
+
+// settings
+import Time from '@material-ui/icons/AccessAlarm';
+import Greeting from '@material-ui/icons/EmojiPeople';
+import Quote from '@material-ui/icons/FormatQuote';
+import Background from '@material-ui/icons/Photo';
+import Search from '@material-ui/icons/Search';
+import About from '@material-ui/icons/Info';
+import Plugins from '@material-ui/icons/Widgets';
+import Added from '@material-ui/icons/AddCircle';
+import Appearance from '@material-ui/icons/FormatPaint';
+import Language from '@material-ui/icons/Translate';
+import Changelog from '@material-ui/icons/NewReleasesRounded';
+
+export default class Tab extends React.PureComponent {
+      onClick = () => {
+        this.props.onClick(this.props.label);
+      };
+
+      render() {
+        let className = 'tab-list-item';
+        if (this.props.currentTab === this.props.label) {
+          className += ' tab-list-active';
+        }
+
+        if (this.props.navbar === true) {
+          className = 'navbar-item';
+          if (this.props.currentTab === this.props.label) {
+            className += ' navbar-item-active';
+          }
+        }
+
+        let icon;
+        let divider;
+
+        switch (this.props.label) {
+          // Navbar
+          case 'Settings': icon = <Settings/>; break;
+          case 'My Add-ons': icon = <Addons/>; break;
+          case 'Marketplace': icon = <Marketplace/>; break;
+          // Settings
+          case 'Time': icon = <Time/>; break;
+          case 'Greeting': icon = <Greeting/>; break;
+          case 'Quote': icon = <Quote/>; break;
+          case 'Background': icon = <Background/>; break;
+          case 'Search': icon = <Search/>; break;
+          case 'Appearance': icon = <Appearance/>; break;
+          case 'Language': 
+            icon = <Language/>; 
+            divider = <div><hr/></div>;
+          break;
+          case 'Change Log': icon = <Changelog/>; break;
+          case 'About': icon = <About/>; break; 
+          // Store
+          case 'Themes': icon = <Colors/>; break; 
+          case 'Photo Packs': icon = <Background/>; break; 
+          case 'Quotes Packs': icon = <Quote/>; break;
+          case 'Plugins':
+            icon = <Plugins />
+            divider = <div><hr/></div>;
+            break;
+          case 'Added': icon = <Added/>; break;
+          default: break;
+        }
+
+        return (
+          <React.Fragment>
+            <li className={className} onClick={this.onClick}>
+            {icon} <span>{this.props.label}</span>
+          </li>
+          {divider}
+          </React.Fragment>
+        )
+   }
+}                                    

src/components/modals/tabs-backend/Tabs.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Tab from './Tab';
+
+export default class Tabs extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentTab: this.props.children[0].props.label
+    };
+  }
+
+  onClick = (tab) => {
+    this.setState({ currentTab: tab });
+  };
+
+  render() {
+    let className = 'sidebar';
+    let tabClass = 'tab-content';
+    let optionsText = (<h1>Options</h1>);
+
+    if (this.props.navbar) {
+      className = 'modalNavbar';
+      tabClass = '';
+      optionsText = '';
+    }
+
+    return (
+      <span className='tabs'>
+        <ul className={className}>
+         {optionsText}
+          {this.props.children.map((tab) => {
+            return (
+              <Tab
+                currentTab={this.state.currentTab}
+                key={tab.props.label}
+                label={tab.props.label}
+                onClick={this.onClick}
+                navbar={this.props.navbar || false}
+              />
+            );
+          })}
+        </ul>
+        <div className={tabClass}>
+          {this.props.children.map((child) => {
+            if (child.props.label !== this.state.currentTab) return undefined;
+            return child.props.children;
+          })}
+        </div>
+      </span>
+    );
+  }
+}

src/components/modals/tabs/Settings.jsx

@@ -1,112 +1,50 @@
 import React from 'react';
 
-import SettingsFunctions from '../../../modules/helpers/settings';
-import Checkbox from '../settings/Checkbox';
-import Dropdown from '../settings/Dropdown';
-import Section from '../settings/Section';
-import FileUpload from '../settings/FileUpload';
+import About from '../settings/sections/About';
+import Language from '../settings/sections/Language';
+import Search from '../settings/sections/Search';
+import Greeting from '../settings/sections/Greeting';
+import Time from '../settings/sections/Time';
+import Quote from '../settings/sections/Quote';
+import Appearance from '../settings/sections/Appearance';
+import Background from '../settings/sections/Background';
 
-import { toast } from 'react-toastify';
-
-import BackgroundSettings from '../settings/sections/BackgroundSettings';
-import SearchSettings from '../settings/sections/SearchSettings';
-import LanguageSettings from '../settings/sections/LanguageSettings';
-import GreetingSettings from '../settings/sections/GreetingSettings';
+import SettingsTabs from '../tabs-backend/Tabs';
 
 export default class Settings extends React.PureComponent {
-  resetItem() {
-    document.getElementById('customcss').value = '';
-    toast(this.props.toastLanguage.reset);
-  }
-
-  componentDidMount() {
-    // Settings
-    document.getElementById('language').value = localStorage.getItem('language');
-    document.getElementById('customcss').value = localStorage.getItem('customcss');
-
-    if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns
-      const choices = document.getElementsByClassName('choices');
-      for (let i = 0; i < choices.length; i++) {
-        choices[i].style.backgroundColor = '#2f3542';
-      }
-    }
-  }
-
-  settingsImport(e) {
-    const content = JSON.parse(e.target.result);
-
-    for (const key of Object.keys(content)) {
-      localStorage.setItem(key, content[key]);
-    }
-
-    toast(this.props.toastLanguage.imported);
-  }
-
-  componentWillUnmount() {
-    localStorage.setItem('customcss', document.getElementById('customcss').value);
-  }
-
   render() {
     return (
-        <div className='columns'>
-          <Section title={this.props.language.time.title} name='time'>
-            <Checkbox name='seconds' text={this.props.language.time.seconds} />
-            <Checkbox name='24hour' text={this.props.language.time.twentyfourhour} />
-            <Checkbox name='ampm' text={this.props.language.time.ampm} />
-            <Checkbox name='zero' text={this.props.language.time.zero} />
-            <Checkbox name='analog' text={this.props.language.time.analog} />
-            <Checkbox name='percentageComplete' text={this.props.language.time.percentageComplete} />
-          </Section>
-
-          <GreetingSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-
-          <Section title={this.props.language.quote.title} name='quote'>
-            <Checkbox name='copyButton' text={this.props.language.quote.copy} />
-            <Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
-            <Checkbox name='favouriteQuoteEnabled' text={this.props.language.quote.favourite} />
-            <Dropdown label={this.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>
-          </Section>
-
-          <Section title={this.props.language.date.title} name='date'>
-            <Checkbox name='short' text={this.props.language.date.short_date} betaFeature={true} />
-            <Dropdown label={this.props.language.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
-              <option className='choices' value='DMY'>DMY</option>
-              <option className='choices' value='MDY'>MDY</option>
-              <option className='choices' value='YMD'>YMD</option>
-            </Dropdown>
-            <br/><br/>
-            <Dropdown label={this.props.language.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
-              <option className='choices' value='default'>{this.props.language.date.short_separator.default}</option>
-              <option className='choices' value='dash'>{this.props.language.date.short_separator.dash}</option>
-              <option className='choices' value='gaps'>{this.props.language.date.short_separator.gaps}</option>
-            </Dropdown>
-          </Section>
-
-          <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} backgroundDisabled={this.props.language.background.disabled} />
-          <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-          <Section title={this.props.language.offline} name='offlineMode' dropdown={false} />
-
-          <Section title='Appearance' name='appearance' slider={false}>
-            <Checkbox name='animations' text={this.props.language.experimental.animations} betaFeature={true} />
-            <Checkbox name='darkTheme' text={this.props.language.dark} />
-            <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} betaFeature={true} />
-            <ul>
-              <p>{this.props.language.custom_css} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
-              <textarea id='customcss'></textarea>
-            </ul>
-          </Section>
-
-          <LanguageSettings language={this.props.language} />
-
-          <button className='apply' onClick={() => window.location.reload()}>{this.props.language.apply}</button>
-          <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{this.props.language.reset}</button>
-          <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
-          <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
-          <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
-        </div>
+      <React.Fragment>
+        <SettingsTabs>
+          <div label='Time'>
+            <Time language={this.props.language}/>
+          </div>
+          <div label='Quote'>
+            <Quote language={this.props.language}/>
+          </div>
+          <div label='Greeting'>
+            <Greeting language={this.props.language}/>
+          </div>
+          <div label='Background'>
+            <Background language={this.props.language}/>
+          </div>
+          <div label='Search'>
+            <Search language={this.props.language}/>
+          </div>
+          <div label='Appearance'>
+            <Appearance language={this.props.language}/>
+          </div>
+          <div label='Language'>
+            <Language language={this.props.language}/>
+          </div>
+          <div label='Change Log'>
+            <About/>
+          </div>
+          <div label='About'>
+            <About/>
+          </div>
+        </SettingsTabs>
+      </React.Fragment>
     );
   }
 }

src/scss/index.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 @import 'mixins';
 
-@import 'modules/modal';
 @import 'modules/settings';
 @import 'modules/toast';
 @import 'modules/marketplace';
@@ -9,6 +8,10 @@
 @import 'modules/dropdown';
 @import 'modules/welcome';
 
+@import 'modules/modals/main';
+@import 'modules/modals/feedback';
+@import 'modules/modals/update';
+
 body {
     background: #2f3640;
     margin: 0;

src/scss/modules/_modal.scss

@@ -1,270 +0,0 @@
-.Modal {
-  background-color: map-get($modal, 'background');
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  padding: 25px;
-  transition: 0.6s;
-  transition-timing-function: ease-in;
-  border-radius: map-get($modal, 'border-radius');
-  -webkit-user-select: none;
-  scrollbar-color: #34495e #bdc3c7;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.modalLink {
-  color: #5352ed;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.closeModal {
-  position: absolute;
-  top: 1rem;
-  right: 2rem;
-  font-size: 4em;
-  cursor: pointer;
-
-  &:hover {
-    color: grey;
-  }
-}
-
-.dark {
-  background-color: #2f3542 !important;
-  color: white !important;
-}
-
-.zoom-in {
-  @include animation('zoom-in');
-}
-
-@include keyframes(zoom-in) {
-  0% {
-    transform: scale(0);
-  }
-
-  50% {
-    transform: scale(1.05, 1.05);
-  }
-
-  100% {
-    transform: scale(1, 1);
-  }
-}
-
-.Overlay {
-  position: fixed;
-  z-index: 100;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.modal-animation {
-  -webkit-animation: zoom-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-  animation: zoom-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-}
-
-.ReactModal__Content {
-  min-height: calc(100vh - 30vh);
-  max-height: calc(100vh - 10vh);
-  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
-  overflow-y: auto;
-  position: relative;
-}
-
-@media only screen and (max-height: 700px) {
-  .ReactModal__Content {
-    min-height: 500px;
-    max-height: calc(100vh - 30vh);
-  }
-}
-
-@media only screen and (min-height: 700px) {
-  .ReactModal__Content {
-    min-height: 600px;
-  }
-}
-
-.content {
-  margin-top: -20px;
-  width: 900px;
-
-  h1 {
-    font-size: 35px;
-  }
-
-  p {
-    font-size: 16px;
-  }
-
-  .columns {
-    font-size: 15px;
-
-    li {
-      padding-left: 10px;
-    }
-  }
-}
-
-.zoom-out {
-  @include animation('zoom-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both');
-}
-
-@include keyframes(zoom-out) {
-  0% {
-    transform: scale(1, 1);
-  }
-
-  50% {
-    transform: scale(1.05, 1.05);
-  }
-
-  100% {
-    transform: scale(0);
-  }
-}
-
-.tab,
-button.tablinks {
-  margin-top: -10px;
-  font-size: 24px;
-  background: none;
-  border: none;
-  outline: none;
-  color: map-get($modal, 'text');
-}
-
-.tablinks {
-  cursor: pointer;
-  border-radius: 12px;
-  padding: 10px 30px 10px 30px;
-
-  &:hover {
-    background: rgba(189, 195, 199, .075);
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    margin: 0 auto;
-    width: 50%;
-    padding-top: 10px;
-    border-bottom: 3px solid map-get($modal, 'tab-underline');
-  }
-
-  svg {
-    top: 0.125em;
-    position: relative;
-  }
-}
-
-.active:after {
-  border-bottom: 3px solid map-get($modal, 'tab-underline-active') !important;
-}
-
-.dark {
-  .tab,
-  button.tablinks {
-    color: white;
-  }
-
-  .active:after {
-    border-image-slice: 1;
-    border-image-source: map-get($theme-colours, 'gradient');
-    border-bottom: 3px solid;
-  }
-}
-
-.tab {
-  margin-left: -3px;
-}
-
-::-webkit-scrollbar {
-  width: 13px;
-  background: #bdc3c7;
-  border-top-right-radius: map-get($modal, 'border-radius');
-  border-bottom-right-radius: map-get($modal, 'border-radius');
-}
-
-::-webkit-scrollbar-thumb {
-  background: #34495e;
-  border-top-right-radius: map-get($modal, 'border-radius');
-  border-bottom-right-radius: map-get($modal, 'border-radius');
-}
-
-.updateContent {
-  width: 400px;
-  padding: 5px;
-
-  .closeModal {
-    margin-top: 10px;
-    font-size: 45px;
-  }
-
-  img {
-    width: 100%;
-    height: auto;
-  }
-}
-
-#feedbackmodal {
-  position: absolute;
-  margin: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 400px;
-  height: 100px;
-}
-
-.feedback {
-  width: 400px;
-  padding: 5px;
-
-  h1, .closeModal {
-    font-size: 2.5em;
-  }
-
-  span {
-    font-size: 6em;
-  }
-
-  button {
-    width: 100%;
-    border-radius: 48px;
-    outline: none;
-    border: none;
-    padding: 15px 20px;
-    font-size: 1.5em;
-    background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
-    color: #ffffff;
-    text-transform: uppercase;
-    cursor: pointer;
-  }
-
-  input[type=text] {
-    width: 100%;
-    font-size: 1em;
-  }
-
-  input[type=range] {
-    margin-left: 20px;
-    margin-right: 20px;
-    vertical-align: middle;
-  }
-
-  label.values {
-    font-weight: 700;
-  }
-}

src/scss/modules/modals/_feedback.scss

@@ -0,0 +1,52 @@
+#feedbackmodal {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 400px;
+    height: 100px;
+}
+
+.feedback {
+    width: 400px;
+    padding: 5px;
+
+    h1,
+    .closeModal {
+        font-size: 2.5em;
+    }
+
+    span {
+        font-size: 6em;
+    }
+
+    button {
+        width: 100%;
+        border-radius: 48px;
+        outline: none;
+        border: none;
+        padding: 15px 20px;
+        font-size: 1.5em;
+        background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+        color: #ffffff;
+        text-transform: uppercase;
+        cursor: pointer;
+    }
+
+    input[type=text] {
+        width: 100%;
+        font-size: 1em;
+    }
+
+    input[type=range] {
+        margin-left: 20px;
+        margin-right: 20px;
+        vertical-align: middle;
+    }
+
+    label.values {
+        font-weight: 700;
+    }
+}

src/scss/modules/modals/_main.scss

@@ -0,0 +1,352 @@
+.Modal {
+    color: map-get($modal, "text");
+    background-color: map-get($modal, "background");
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    border: none;
+    opacity: 1;
+    z-index: -2;
+    padding: 25px;
+    cursor: hand;
+    transition: 0.6s;
+    transition-timing-function: ease-in;
+    border-radius: map-get($modal, "border-radius");
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    scrollbar-width: thin;
+    scrollbar-color: #34495e #bdc3c7;
+    position: relative;
+
+    &:focus {
+        outline: 0;
+    }
+}
+
+
+.modalLink {
+    color: #5352ed;
+    cursor: pointer;
+    padding-left: 10px;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.closeModal {
+    position: absolute;
+    top: 1rem;
+    right: 2rem;
+    font-size: 4em;
+    cursor: pointer;
+
+    &:hover {
+        color: grey;
+    }
+}
+
+.dark {
+    background-color: #2f3542 !important;
+    color: white !important;
+}
+
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+    overflow: hidden;
+}
+
+.Overlay {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+}
+
+.ReactModal__Content {
+    min-height: calc(100vh - 30vh);
+    max-height: calc(100vh - 10vh);
+    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+    overflow-y: auto;
+    position: relative;
+}
+
+@media only screen and (max-height: 700px) {
+    .ReactModal__Content {
+        min-height: 500px;
+        max-height: calc(100vh - 30vh);
+    }
+}
+
+@media only screen and (min-height: 700px) {
+    .ReactModal__Content {
+        min-height: 600px;
+    }
+}
+
+.content {
+    margin-top: -20px;
+    width: 900px;
+
+    h1 {
+        font-size: 35px;
+    }
+
+    p {
+        font-size: 16px;
+    }
+
+    .columns {
+        font-size: 15px;
+
+        li {
+            padding-left: 10px;
+        }
+    }
+}
+
+.ReactModal__Overlay {
+    opacity: 0;
+    transform: scale(0);
+    transition: all 300ms cubic-bezier(.47, 1.64, .41, .8);
+}
+
+.ReactModal__Overlay--after-open {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.ReactModal__Overlay--before-close {
+    opacity: 0;
+    transform: scale(0);
+}
+
+ul.sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding-left: 0;
+    height: 100%;
+    background: #f0f0f0;
+    position: absolute;
+    overflow-y: show;
+    left: 0;
+    border-radius: 12px 0 0 12px;
+    text-align: left;
+    font-size: 24px;
+
+    h1 {
+        text-align: center;
+    }
+
+    svg,
+    li {
+        font-size: 30px;
+    }
+
+    svg {
+        vertical-align: middle;
+        font-size: 32px;
+        padding: 5px;
+    }
+
+    hr {
+        height: 3px;
+        background: rgba(196, 196, 196, 0.74);
+        width: 75%;
+        outline: none;
+        border: none;
+    }
+}
+
+li {
+    list-style: none;
+    font-size: 24px;
+    padding: 5px 30px 5px 30px;
+    cursor: pointer;
+    margin-top: 2px;
+}
+
+#modal {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 60%;
+    height: 80%;
+}
+
+.tab-list-active {
+    background: rgba(219, 219, 219, 0.72);
+}
+
+@media only screen and (max-width: 1200px) {
+    li.tab-list-item {
+        span {
+            display: none;
+        }
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    ul.sidebar {
+        h1 {
+            display: none;
+        }
+    }
+}
+
+.tab-list-item {
+    &:hover {
+        background: rgba(219, 219, 219, 0.8);
+    }
+}
+
+ul.sectionSelector {
+    margin: 0;
+    width: 60%;
+    padding-left: 30%;
+    padding-top: 20px;
+
+    .option {
+        display: inline;
+        padding: 15px;
+        font-size: 28px;
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    ul.sectionSelector {
+        span {
+            display: none;
+            padding: 5px !important;
+        }
+    }
+}
+
+.tab-content {
+    position: absolute;
+    left: 30%;
+    width: 60%;
+
+    h3 {
+        text-transform: uppercase;
+    }
+}
+
+@media only screen and (min-width: 1300px) {
+    .tab-content {
+        position: absolute;
+        left: 30%;
+    }
+}
+
+.navbar-item {
+    font-size: 22px;
+    font-weight: 500;
+    display: inline-flex;
+}
+
+.modalNavbar {
+    position: absolute;
+    left: 20rem;
+    top: 1rem;
+    justify-content: center;
+
+    svg {
+        margin-right: 0.5rem;
+        padding: 3px;
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    .modalNavbar {
+        left: 6rem;
+    }
+}
+
+.navbar-item {
+    span,
+    svg {
+        font-size: 1.1em !important;
+    }
+
+    &:hover {
+        background: none;
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    li.navbar-item {
+        span {
+            display: none;
+        }
+    }
+}
+
+.tabIndicator {
+    width: 40px;
+    height: 3px;
+    background: #000;
+}
+
+@media only screen and (max-width: 1200px) {
+    .tabContent {
+        left: 20px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    ul.sidebar {
+        width: 310px;
+        align-items: center;
+    }
+}
+
+.navbar-item-active {
+    background: map-get($theme-colours, "gradient");
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    svg {
+        color: orange;
+    }
+
+    &:hover {
+        opacity: .8;
+        background: map-get($theme-colours, "gradient");
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
+::-webkit-scrollbar {
+    width: 13px;
+    background: #bdc3c7;
+    border-top-right-radius: map-get($modal, 'border-radius');
+    border-bottom-right-radius: map-get($modal, 'border-radius');
+}
+
+::-webkit-scrollbar-thumb {
+    background: #34495e;
+    border-top-right-radius: map-get($modal, 'border-radius');
+    border-bottom-right-radius: map-get($modal, 'border-radius');
+}
+
+.abouticon {
+    width: 96px;
+    height: auto;
+    border-radius: 50%;
+    padding-right: 5px;
+}

src/scss/modules/modals/_update.scss

@@ -0,0 +1,14 @@
+.updateContent {
+    width: 400px;
+    padding: 5px;
+
+    .closeModal {
+        margin-top: 10px;
+        font-size: 45px;
+    }
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+}