refactor: make modals like widgets

src/App.jsx

@@ -2,29 +2,16 @@ import React from 'react';
 
 import Background from './components/widgets/background/Background';
 import Widgets from './components/widgets/Widgets';
-import Navbar from './components/widgets/navbar/Navbar';
+import Modals from './components/modals/Modals';
 
 import SettingsFunctions from './modules/helpers/settings';
 import { ToastContainer } from 'react-toastify';
-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('./components/modals/Main'));
-const Update = React.lazy(() => import('./components/modals/Update'));
-const Welcome = React.lazy(() => import('./components/modals/Welcome'));
-//const Feedback = React.lazy(() => import('./components/modals/Feedback'));
-const renderLoader = () => <div></div>;
 
 export default class App extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-      mainModal: false,
+      toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500
-      updateModal: false,
-      welcomeModal: false,
-      feedbackModal: false,
-      toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500,
-      overlayClassList: (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'
     };
   }
 
@@ -33,28 +20,8 @@ export default class App extends React.PureComponent {
       SettingsFunctions.setDefaultSettings();
     }
 
-    if (localStorage.getItem('showWelcome') === 'true') {
-      this.setState({
-        welcomeModal: true
-      });
-    }
-
     SettingsFunctions.loadSettings();
     
-    // 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
-    });
-    
     // These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page
     document.addEventListener('mousedown', (event) => {
       if (event.detail > 1) {
@@ -76,35 +43,14 @@ export default class App extends React.PureComponent {
     };
   }
 
-  closeWelcome() {
-    localStorage.setItem('showWelcome', false);
-    this.setState({
-      welcomeModal: false
-    });
-  }
-
   render() {
     return (
       <React.Fragment>
-        <Background photoInformationClass={this.state.tooltipClassList}/>
+        <Background/>
         <ToastContainer position='bottom-right' autoClose={this.state.toastDisplayTime} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
         <div id='center'>
-          <Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
           <Widgets/>
-          <React.Suspense fallback={renderLoader()}>
+          <Modals/>
-            <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>
         </div>
       </React.Fragment>
     );

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

@@ -1,3 +1,5 @@
+@import '../main/scss/index.scss';
+
 #feedbackmodal {
   position: absolute;
   margin: auto;

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 { data } = await (await fetch(window.window.constants.MARKETPLACE_URL + '/all')).json();
-    const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).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

@@ -1,3 +1,10 @@
+@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');

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

@@ -33,6 +33,8 @@
   color: #fff !important;
 }
 
-.react-date-picker__clear-button, .react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
+.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

@@ -137,11 +137,18 @@ input[type=color]::-moz-color-swatch {
 
 // Dark Theme
 .dark {
-  #blurRange, #brightnessRange {
+
+  #blurRange,
+  #brightnessRange {
     background-color: #535c68;
   }
 
-  #customBackground, #backgroundAPI, #searchEngine, #language, #greetingName, #customSearchEngine {
+  #customBackground,
+  #backgroundAPI,
+  #searchEngine,
+  #language,
+  #greetingName,
+  #customSearchEngine {
     color: white;
   }
 
@@ -163,7 +170,8 @@ input[type=color]::-moz-color-swatch {
   font-size: 12px;
 }
 
-#customcss, #customjs {
+#customcss,
+#customjs {
   font-family: Consolas !important;
   border: solid 1px black !important;
   margin-left: 0px;

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 hexToRgb from '../../../../../modules/helpers/background/hexToRgb';
-import rgbToHex from '../../../../modules/helpers/background/rgbToHex';
+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

@@ -1,3 +1,5 @@
+@import '../main/scss/index.scss';
+
 .updateContent {
   width: 400px;
   padding: 5px;

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

@@ -1,5 +1,8 @@
+@import '../main/scss/index.scss';
+
 .dark {
-  h2.subtitle, svg {
+  h2.subtitle,
+  svg {
     color: white !important;
   }
 }
@@ -33,7 +36,8 @@
     }
   }
 
-  img.icon, svg {
+  img.icon,
+  svg {
     margin-top: -12px;
     padding: 10px;
     cursor: pointer;
@@ -49,7 +53,8 @@
     line-height: 1em;
   }
 
-  img, svg {
+  img,
+  svg {
     height: 24px;
     width: auto;
   }

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;

src/index.js

@@ -17,6 +17,10 @@ const languagecode = localStorage.getItem('language') || 'en-GB';
 window.languagecode = languagecode;
 window.language = merge(require('./translations/en-GB.json'), require(`./translations/${languagecode}.json`));
 
+// window.constants
+import * as Constants from './modules/constants';
+window.constants = Constants;
+
 ReactDOM.render(
   <App/>,
   document.getElementById('root')

src/scss/index.scss

@@ -1,16 +1,9 @@
 @import 'variables';
 @import 'mixins';
 
-@import 'modules/settings';
 @import 'modules/toast';
 @import 'modules/marketplace';
 @import 'modules/buttons';
-@import 'modules/dropdown';
-
-@import 'modules/modals/main';
-@import 'modules/modals/feedback';
-@import 'modules/modals/update';
-@import 'modules/modals/welcome';
 
 body {
   background: #2f3640;