refactor: make modals like widgets

src/components/modals/main/tabs/Addons.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Added from '../marketplace/sections/Added';
+
+import AddonsTabs from './backend/Tabs';
+
+export default function Addons (props) {
+  return (
+    <React.Fragment>
+      <AddonsTabs>
+        <div label='Added'>
+          <Added/>
+        </div>
+        <div label=''>
+
+        </div>
+      </AddonsTabs>
+    </React.Fragment>
+  );
+}

src/components/modals/main/tabs/Marketplace.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import MarketplaceBackend from '../marketplace/sections/Marketplace';
+import MarketplaceTabs from './backend/Tabs';
+
+export default function Marketplace (props) {
+  return (
+    <React.Fragment>
+      <MarketplaceTabs>
+        <div label='Photo Packs'>
+          <MarketplaceBackend type='photo_packs'/>
+        </div>
+        <div label='Quote Packs'>
+          <MarketplaceBackend type='quote_packs'/>
+        </div>
+      </MarketplaceTabs>
+    </React.Fragment>
+  );
+}

src/components/modals/main/tabs/Settings.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+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 Advanced from '../settings/sections/Advanced';
+import Changelog from '../settings/sections/Changelog';
+
+import SettingsTabs from './backend/Tabs';
+
+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>
+        <div label={language.greeting.title}><Greeting/></div>
+        <div label={language.background.title}><Background/></div>
+        <div label={language.search.title}><Search/></div>
+        <div label={language.appearance.title}><Appearance/></div>
+        <div label={language.language.title}><Language/></div>
+        <div label={language.advanced.title}><Advanced/></div>
+        <div label='Experimental'></div>
+        <div label={language.changelog}><Changelog/></div>
+        <div label={language.about.title}><About/></div>
+      </SettingsTabs>
+      <div className='reminder-info'>
+        <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

@@ -0,0 +1,76 @@
+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 Appearance from '@material-ui/icons/FormatPaint';
+import Language from '@material-ui/icons/Translate';
+import Changelog from '@material-ui/icons/NewReleasesRounded';
+import About from '@material-ui/icons/Info';
+import Experimental from '@material-ui/icons/BugReport';
+
+// Store
+import Colors from '@material-ui/icons/ColorLens';
+import Plugins from '@material-ui/icons/Widgets';
+import Added from '@material-ui/icons/AddCircle';
+
+export default function Tab(props) {
+  let className = 'tab-list-item';
+  if (props.currentTab === props.label) {
+    className += ' tab-list-active';
+  }
+
+  if (props.navbar === true) {
+    className = 'navbar-item';
+    if (props.currentTab === props.label) {
+      className += ' navbar-item-active';
+    }
+  }
+
+  let icon, divider;
+  switch (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 = true; break;
+    case 'Advanced': icon = <Settings/>; break;
+    case 'Experimental': icon = <Experimental/>; divider = true; 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 'Quote Packs': icon = <Quote/>; break;
+    case 'Plugins': icon = <Plugins/>; divider = true; break;
+    case 'Added': icon = <Added/>; break;
+
+    default: break;
+  }
+
+  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>
+  )
+}

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import Tab from './Tab';
+import ErrorBoundary from '../../../ErrorBoundary';
+
+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}>
+          <ErrorBoundary>
+          {this.props.children.map((child) => {
+            if (child.props.label !== this.state.currentTab) return undefined;
+            return child.props.children;
+          })}
+          </ErrorBoundary>
+        </div>
+      </span>
+    );
+  }
+}