refactor: make modals like widgets

src/components/modals/Modals.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import Navbar from '../widgets/navbar/Navbar';
+
+import Modal from 'react-modal';
+
+// Modals are lazy loaded as the user won't use them every time they open a tab
+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>;
+
+export default class Modals extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      mainModal: false,
+      updateModal: false,
+      welcomeModal: false,
+      feedbackModal: false,
+      overlayClassList: (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay',
+    };
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('showWelcome') === 'true') {
+      this.setState({
+        welcomeModal: true
+      });
+    }
+
+    // dark theme support for modals and info card
+    let modalClassList = 'Modal';
+    let tooltipClassList = 'infoCard';
+        
+    if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
+      modalClassList += ' dark';
+      tooltipClassList += ' dark';
+    }
+    
+    this.setState({
+        modalClassList: modalClassList,
+        tooltipClassList: tooltipClassList
+    });
+  }
+
+  closeWelcome() {
+    localStorage.setItem('showWelcome', false);
+    this.setState({
+      welcomeModal: false
+    });
+  }
+
+  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={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+            <Main modalClose={() => this.setState({ mainModal: false })} />
+          </Modal>
+          <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+            <Update modalClose={() => this.setState({ updateModal: false })} />
+         </Modal>
+         <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+            <Welcome modalClose={() => this.closeWelcome()} />
+          </Modal>
+          {/* <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+              <Feedback modalClose={() => this.setState({ feedbackModal: false })} />
+            </Modal> */}
+        </React.Suspense>
+      </React.Fragment>
+    );
+  }
+}

src/components/modals/feedback/Feedback.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './feedback.scss';
+
 export default function FeedbackModal(props) {
   return (
     <div className='feedback'>

src/components/modals/feedback/feedback.scss

@@ -0,0 +1,54 @@
+@import '../main/scss/index.scss';
+
+#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/components/modals/main/Main.jsx

@@ -6,6 +6,8 @@ import Marketplace from './tabs/Marketplace';
 
 import Navigation from './tabs/backend/Tabs';
 
+import './scss/index.scss';
+
 export default function MainModal(props) {
   const language = window.language;
 

src/components/modals/main/marketplace/sections/Added.jsx

@@ -5,7 +5,7 @@ import Item from '../Item';
 import Items from '../Items';
 import FileUpload from '../../settings/FileUpload';
 
-import MarketplaceFunctions from '../../../../modules/helpers/marketplace';
+import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
 
 export default class Added extends React.PureComponent {
   constructor(...args) {

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -5,12 +5,10 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import Item from '../Item';
 import Items from '../Items';
 
-import MarketplaceFunctions from '../../../../modules/helpers/marketplace';
+import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
 
 import { toast } from 'react-toastify';
 
-import * as Constants from '../../../../modules/constants';
-
 export default class Marketplace extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -45,7 +43,7 @@ export default class Marketplace extends React.PureComponent {
         let info;
       // get item info
         try {
-          info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
+          info = await (await fetch(`${window.window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
         } catch (e) {
           return toast(this.props.toastLanguage.error);
         }
@@ -84,8 +82,8 @@ export default class Marketplace extends React.PureComponent {
   }
 
   async getItems() {
-    const { data } = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
-    const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
+    const { data } = await (await fetch(window.window.constants.MARKETPLACE_URL + '/all')).json();
+    const featured = await (await fetch(window.window.constants.MARKETPLACE_URL + '/featured')).json();
 
     this.setState({
       items: data[this.props.type],

src/components/modals/main/scss/index.scss

@@ -0,0 +1,340 @@
+@import '../../../../scss/variables';
+@import '../../../../scss/mixins';
+
+@import 'settings/main';
+@import 'settings/buttons';
+@import 'settings/dropdown';
+
+.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;
+  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;
+
+  .sidebar {
+    background-color: #2a303b !important;
+  }
+
+  .tab-list-active {
+    background: rgba(161, 159, 159, 0.8);
+  }
+
+  .tab-list-item {
+    &:hover {
+      background: rgba(161, 159, 159, 0.8);
+    }
+  }
+}
+
+.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;
+  }
+}
+
+.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: 100vh;
+  background: #f0f0f0;
+  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-height: 898px) {
+  ul.sidebar {
+    height: auto;
+  }
+}
+
+@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);
+  }
+}
+
+.tab-content {
+  position: absolute;
+  left: 25%;
+
+  h3 {
+    text-transform: uppercase;
+  }
+}
+
+@media only screen and (max-width: 1920px) {
+  .tab-content {
+    position: absolute;
+    left: 30%;
+    top: 15%;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .tab-content {
+    position: absolute;
+    left: 30%;
+    top: 7%;
+  }
+}
+
+@media only screen and (max-width: 1400px) {
+  .tab-content {
+    position: absolute;
+    left: 45%;
+  }
+}
+
+.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;
+    }
+  }
+}
+
+@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: 6px;
+  border-top-right-radius: map-get($modal, 'border-radius');
+  border-bottom-right-radius: map-get($modal, 'border-radius');
+}
+
+::-webkit-scrollbar-thumb {
+  background: #636e72;
+  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/components/modals/main/scss/settings/_buttons.scss

@@ -0,0 +1,205 @@
+%settingsButton {
+  transition: ease 0.33s;
+  color: map-get($theme-colours, 'main');
+  cursor: pointer;
+  padding: 10px 30px;
+  font-size: 20px;
+  border-radius: 24px;
+  box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
+
+  &:hover,
+  &:active {
+    outline: none;
+    background: none;
+  }
+}
+
+.dark %settingsButton {
+  box-shadow: none;
+}
+
+.refresh {
+  @extend %settingsButton;
+  background-color: map-get($button-colours, 'confirm');
+  border: 2px solid map-get($button-colours, 'confirm');
+
+  &:hover {
+    border: 2px solid map-get($button-colours, 'confirm');
+    color: map-get($button-colours, 'confirm');
+  }
+}
+
+.apply {
+  @extend %settingsButton;
+  margin-right: 20px;
+  background-color: map-get($button-colours, 'confirm');
+  border: 2px solid map-get($button-colours, 'confirm');
+
+  &:hover {
+    border: 2px solid map-get($button-colours, 'confirm');
+    color: map-get($button-colours, 'confirm');
+  }
+}
+
+.reset {
+  @extend %settingsButton;
+  margin-left: 5px;
+  background-color: map-get($button-colours, 'reset');
+  border: 2px solid map-get($button-colours, 'reset');
+
+  &:hover {
+    border: 2px solid map-get($button-colours, 'reset');
+    color: map-get($button-colours, 'reset');
+  }
+}
+
+.close {
+  @extend %settingsButton;
+  padding: 10px 50px 10px 50px;
+  background-color: map-get($button-colours, 'other');
+  border: 2px solid map-get($button-colours, 'other');
+
+  &:hover {
+    color: map-get($button-colours, 'other');
+    border: 2px solid map-get($button-colours, 'other');
+  }
+}
+
+.add {
+  @extend %settingsButton;
+  background-color: map-get($button-colours, 'other');
+  border: 2px solid map-get($button-colours, 'other');
+
+  &:hover {
+    color: map-get($button-colours, 'other');
+    border: 2px solid map-get($button-colours, 'other');
+  }
+}
+
+.export,
+.uploadbg,
+.import {
+  @extend %settingsButton;
+  background-color: map-get($button-colours, 'other');
+  border: 2px solid map-get($button-colours, 'other');
+  color: map-get($theme-colours, 'main');
+
+  &:hover {
+    color: map-get($button-colours, 'other');
+  }
+}
+
+.export,
+.import {
+  margin-left: 20px;
+}
+
+%storebutton {
+  cursor: pointer;
+  font-size: 18px;
+  float: right;
+  padding: 5px 30px;
+  background: none;
+  border-radius: 24px;
+  transition: ease 0.33s;
+  border: 2px solid black;
+
+  &:hover {
+    background: #2d3436;
+    color: map-get($theme-colours, 'main');
+    ;
+  }
+}
+
+.dark %storebutton {
+  border: 2px solid map-get($theme-colours, 'main');
+  color: map-get($theme-colours, 'main');
+
+  &:hover {
+    background: map-get($theme-colours, 'main');
+    color: #2d3436;
+  }
+}
+
+.removeFromMue {
+  @extend %storebutton;
+  border: 2px solid #ff4757;
+  color: #ff4757;
+
+  &:hover {
+    background: #ff4757;
+    color: map-get($theme-colours, 'main');
+    ;
+  }
+}
+
+#item .addToMue,
+#item .removeFromMue {
+  margin-top: 5px;
+}
+
+.addToMue {
+  @extend %storebutton;
+}
+
+.goToMarket {
+  float: none;
+  @extend %storebutton;
+}
+
+.sideload,
+.seemore {
+  margin-top: 12px;
+}
+
+.stop {
+  outline: none;
+  border-image-slice: 1;
+  border-image-source: map-get($theme-colours, 'gradient');
+  font-size: 1.2em;
+  padding-left: 7px;
+  vertical-align: middle;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  opacity: 1;
+  outline: none;
+}
+
+.pinNote {
+  @extend %settingsButton;
+  background-color: map-get($button-colours, 'confirm');
+  border: 2px solid map-get($button-colours, 'confirm');
+  color: map-get($theme-colours, 'main');
+  transition: 0s;
+
+  &:hover {
+    color: map-get($button-colours, 'confirm');
+  }
+
+  svg {
+    fill: currentColor;
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    font-size: 1.5rem;
+    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    flex-shrink: 0;
+    user-select: none;
+  }
+}
+
+.saveNote {
+  @extend %settingsButton;
+  background-color: map-get($button-colours, 'other');
+  border: 2px solid map-get($button-colours, 'other');
+  color: map-get($theme-colours, 'main');
+  transition: 0s;
+  display: inline;
+  margin: 5px;
+
+  &:hover {
+    color: map-get($button-colours, 'other');
+  }
+}

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

@@ -0,0 +1,40 @@
+.dropdown {
+  select {
+    margin-left: 10px;
+    width: 120px;
+    color: map-get($modal, 'text');
+    background: #f0f0f0;
+    border: none;
+    padding: 10px 10px;
+    border-radius: 5px;
+
+  }
+
+  select#language {
+    float: right;
+  }
+}
+
+// firefox dropdown
+@supports (-moz-appearance:none) {
+  select {
+    -moz-appearance: none !important;
+    background: url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat, linear-gradient(180deg, #ffb032 0%, #dd3b67 100%) !important;
+    background-position: calc(100% - 5px) center !important;
+  }
+}
+
+.react-date-picker__wrapper {
+  padding: 0.5rem 1rem !important;
+  box-sizing: border-box !important;
+  border-image-slice: 1 !important;
+  border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%) !important;
+  background: transparent !important;
+  color: #fff !important;
+}
+
+.react-date-picker__clear-button,
+.react-calendar__navigation__prev2-button,
+.react-calendar__navigation__next2-button {
+  display: none !important;
+}

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

@@ -0,0 +1,198 @@
+.hidden {
+  display: none;
+}
+
+input {
+  &[type=text] {
+    width: 200px;
+    padding: 0.5rem 1rem;
+    box-sizing: border-box;
+    border-image-slice: 1;
+    border-image-source: map-get($theme-colours, 'gradient');
+    background: transparent;
+  }
+
+  &:checked+.slider {
+    background: map-get($theme-colours, 'gradient');
+
+    &:before {
+      -webkit-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+  }
+
+  &:focus+.slider {
+    box-shadow: 0 0 1px #e67e22;
+  }
+}
+
+h4,
+.switch {
+  display: inline;
+  font-size: 1.4em;
+  font-weight: 100;
+}
+
+h4,
+#engines {
+  display: inline;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+h4 {
+  cursor: pointer;
+}
+
+ul {
+  padding-left: 5px;
+  margin: 0;
+
+  >label {
+    vertical-align: middle;
+  }
+}
+
+li {
+  margin-top: 1px;
+}
+
+.range {
+  -webkit-appearance: none;
+  width: 200px;
+  height: 15px;
+  border-radius: 12px;
+  outline: none;
+  background: #ecf0f1;
+  border-radius: 12px;
+  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 12px;
+    background: map-get($theme-colours, 'gradient');
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 12px;
+    border: 0;
+    background: map-get($theme-colours, 'gradient');
+    cursor: pointer;
+  }
+}
+
+input[type=color] {
+  border-radius: 100%;
+  height: 30px;
+  width: 30px;
+  box-shadow: map-get($main-parts, 'shadow');
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 100%;
+  }
+}
+
+input[type=color]::-moz-color-swatch {
+  border-radius: 100%;
+  height: 30px;
+  width: 30px;
+  box-shadow: map-get($main-parts, 'shadow');
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+
+  &::-moz-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-moz-color-swatch {
+    border: none;
+    border-radius: 100%;
+  }
+}
+
+.customBackgroundHex {
+  font-size: 1.2em;
+  padding-left: 7px;
+  vertical-align: middle;
+}
+
+// Dark Theme
+.dark {
+
+  #blurRange,
+  #brightnessRange {
+    background-color: #535c68;
+  }
+
+  #customBackground,
+  #backgroundAPI,
+  #searchEngine,
+  #language,
+  #greetingName,
+  #customSearchEngine {
+    color: white;
+  }
+
+  .choices {
+    background-color: white;
+  }
+
+  .modalLink {
+    color: #3498db;
+  }
+}
+
+.nodropdown {
+  cursor: default;
+}
+
+.newFeature {
+  color: #ff4757;
+  font-size: 12px;
+}
+
+#customcss,
+#customjs {
+  font-family: Consolas !important;
+  border: solid 1px black !important;
+  margin-left: 0px;
+}
+
+.MuiCheckbox-colorPrimary.Mui-checked {
+  color: map-get($button-colours, 'reset') !important;
+}
+
+.reminder-info {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  padding: 20px;
+  color: #000;
+  background: #f0f0f0;
+  max-width: 300px;
+  border-radius: 0.7em;
+  display: none;
+
+  h1 {
+    font-size: 1em;
+  }
+}

src/components/modals/main/settings/Checkbox.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import SettingsFunctions from '../../../modules/helpers/settings';
+import SettingsFunctions from '../../../../modules/helpers/settings';
 
 import CheckboxUI from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';

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

@@ -2,10 +2,8 @@ import React from 'react';
 
 import Tooltip from '@material-ui/core/Tooltip';
 
-import * as Constants from '../../../../modules/constants';
-
-const other_contributors = require('../../../../modules/other_contributors.json');
-const { version } = require('../../../../../package.json');
+const other_contributors = require('../../../../../modules/other_contributors.json');
+const { version } = require('../../../../../../package.json');
 
 export default class About extends React.PureComponent {
   constructor(...args) {
@@ -21,7 +19,7 @@ export default class About extends React.PureComponent {
 
   async getGitHubData() {
     const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
-    const { sponsors } = await (await fetch(Constants.SPONSORS_URL + '/list')).json();
+    const { sponsors } = await (await fetch(window.constants.SPONSORS_URL + '/list')).json();
 
     const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
     const newVersion = versionData[0].tag_name;

src/components/modals/main/settings/sections/Advanced.jsx

@@ -4,7 +4,7 @@ import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
 import ResetModal from '../ResetModal';
 
-import SettingsFunctions from '../../../../modules/helpers/settings';
+import SettingsFunctions from '../../../../../modules/helpers/settings';
 
 import { toast } from 'react-toastify';
 import Modal from 'react-modal';

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

@@ -5,13 +5,13 @@ import Dropdown from '../Dropdown';
 import FileUpload from '../FileUpload';
 
 import { ColorPicker } from 'react-color-gradient-picker';
-import hexToRgb from '../../../../modules/helpers/background/hexToRgb';
-import rgbToHex from '../../../../modules/helpers/background/rgbToHex';
+import hexToRgb from '../../../../../modules/helpers/background/hexToRgb';
+import rgbToHex from '../../../../../modules/helpers/background/rgbToHex';
 
 import { toast } from 'react-toastify';
 
 import 'react-color-gradient-picker/dist/index.css';
-import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
+import '../../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
 
 export default class BackgroundSettings extends React.PureComponent {
   DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };

src/components/modals/main/settings/sections/Changelog.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import * as Constants from '../../../../modules/constants';
-
 export default class Changelog extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -15,7 +13,7 @@ export default class Changelog extends React.PureComponent {
   }
 
   async getUpdate() {
-    const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
+    const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json();
   
     if (data.statusCode === 500 || data.title === null) {
       const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Dropdown from '../Dropdown';
 
-const languages = require('../../../../modules/languages.json');
+const languages = require('../../../../../modules/languages.json');
 
 export default function LanguageSettings () {
   const language = window.language.modals.main.settings.sections.language;

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

@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 
-const searchEngines = require('../../../widgets/search/search_engines.json');
+const searchEngines = require('../../../../widgets/search/search_engines.json');
 
 export default class SearchSettings extends React.PureComponent {
   resetSearch() {

src/components/modals/update/Update.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import * as Constants from '../../modules/constants';
+import './update.scss';
 
 export default class Update extends React.PureComponent {
   constructor(...args) {
@@ -15,7 +15,7 @@ export default class Update extends React.PureComponent {
  }
 
  async getUpdate() {
-  const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
+  const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json();
 
   if (data.statusCode === 500 || data.title === null) {
     const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;

src/components/modals/update/update.scss

@@ -0,0 +1,16 @@
+@import '../main/scss/index.scss';
+
+.updateContent {
+  width: 400px;
+  padding: 5px;
+
+  .closeModal {
+    margin-top: 10px;
+    font-size: 45px;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+}

src/components/modals/welcome/Welcome.jsx

@@ -4,6 +4,8 @@ import EmailIcon from '@material-ui/icons/Email';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import ForumIcon from '@material-ui/icons/Forum';
 
+import './welcome.scss';
+
 export default function WelcomeModal(props) {
   const language = window.language.modals.welcome;
 

src/components/modals/welcome/welcome.scss

@@ -0,0 +1,65 @@
+@import '../main/scss/index.scss';
+
+.dark {
+  h2.subtitle,
+  svg {
+    color: white !important;
+  }
+}
+
+.welcomeModalText {
+  line-height: 2px;
+
+  h2.subtitle {
+    font-size: 24px;
+    color: #535353;
+    text-transform: uppercase;
+  }
+
+  h1.welcometitle {
+    font-size: 50px;
+  }
+}
+
+.welcomeContent {
+  text-align: center;
+  padding: 25px;
+
+  a {
+    text-decoration: none;
+    line-height: 20px !important;
+    color: #5352ED;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  img.icon,
+  svg {
+    margin-top: -12px;
+    padding: 10px;
+    cursor: pointer;
+    transition: ease 0.2s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  p {
+    margin-top: 0.7rem;
+    line-height: 1em;
+  }
+
+  img,
+  svg {
+    height: 24px;
+    width: auto;
+  }
+}
+
+.welcomeLink {
+  color: black !important;
+}

src/components/widgets/background/Background.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import PhotoInformation from './PhotoInformation';
 
-import * as Constants from '../../../modules/constants';
-
 import './scss/index.scss';
 
 export default class Background extends React.PureComponent {
@@ -158,11 +156,11 @@ export default class Background extends React.PureComponent {
     let requestURL, data;
     switch (backgroundAPI) {
       case 'unsplash':
-        requestURL = `${Constants.UNSPLASH_URL}/getImage`;
+        requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
         break;
       // Defaults to Mue
       default:
-        requestURL = `${Constants.API_URL}/getImage?category=Outdoors`;
+        requestURL = `${window.constants.API_URL}/getImage?category=Outdoors`;
         break;
     }
 

src/components/widgets/navbar/Navbar.jsx

@@ -6,8 +6,6 @@ import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
 import Report from '@material-ui/icons/SmsFailed';
 
-import * as Constants from '../../../modules/constants';
-
 import './scss/index.scss';
 
 // the user probably won't use the notes feature every time so we lazy load
@@ -28,7 +26,7 @@ export default function Navbar(props) {
         </div>
       :null}
 
-      {(Constants.BETA_VERSION === true) ? 
+      {(window.constants.BETA_VERSION === true) ? 
         <Tooltip title='Feedback' placement='top'>
           <Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
         </Tooltip>

src/components/widgets/quote/Quote.jsx

@@ -7,8 +7,6 @@ import StarIcon2 from '@material-ui/icons/StarBorder';
 
 import { toast } from 'react-toastify';
 
-import * as Constants from '../../../modules/constants';
-
 import './quote.scss';
 
 
@@ -94,7 +92,7 @@ export default class Quote extends React.PureComponent {
 
     // First we try and get a quote from the API...
     try {
-      const data = await (await fetch(Constants.API_URL + '/getQuote?language=' + localStorage.getItem('quotelanguage'))).json();
+      const data = await (await fetch(window.constants.API_URL + '/getQuote?language=' + localStorage.getItem('quotelanguage'))).json();
 
       // If we hit the ratelimit, we fallback to local quotes
       if (data.statusCode === 429) {

src/components/widgets/search/search.scss

@@ -17,6 +17,7 @@
     -webkit-transition: width 0.5s ease-in-out;
     transition: width 0.5s ease-in-out;
     color: white;
+    padding: 0.5rem 1rem;
 
     &:focus {
       width: 400px;