diff --git a/src/App.jsx b/src/App.jsx index 8a0b3c1e..5ecac667 100644 --- a/src/App.jsx +++ b/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 = () =>
; export default class App extends React.PureComponent { constructor(...args) { super(...args); this.state = { - mainModal: false, - updateModal: false, - welcomeModal: false, - feedbackModal: false, - toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500, - overlayClassList: (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay' + toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500 }; } @@ -33,27 +20,7 @@ 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) => { @@ -76,35 +43,14 @@ export default class App extends React.PureComponent { }; } - closeWelcome() { - localStorage.setItem('showWelcome', false); - this.setState({ - welcomeModal: false - }); - } - render() { return ( - +
- this.setState({ [modal]: true })}/> - - this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> -
this.setState({ mainModal: false })} /> - - this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> - this.setState({ updateModal: false })} /> - - this.closeWelcome()} isOpen={this.state.welcomeModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> - this.closeWelcome()} /> - - {/* this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.setState({ feedbackModal: false })} /> - */} - +
); diff --git a/src/components/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx similarity index 100% rename from src/components/ErrorBoundary.jsx rename to src/components/modals/ErrorBoundary.jsx diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx new file mode 100644 index 00000000..bb5bddf9 --- /dev/null +++ b/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 = () =>
; + +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 ( + + this.setState({ [modal]: true })}/> + + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> +
this.setState({ mainModal: false })} /> + + this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> + this.setState({ updateModal: false })} /> + + this.closeWelcome()} isOpen={this.state.welcomeModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> + this.closeWelcome()} /> + + {/* this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> + this.setState({ feedbackModal: false })} /> + */} + + + ); + } +} \ No newline at end of file diff --git a/src/components/modals/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx similarity index 97% rename from src/components/modals/Feedback.jsx rename to src/components/modals/feedback/Feedback.jsx index f26083a9..967549e9 100644 --- a/src/components/modals/Feedback.jsx +++ b/src/components/modals/feedback/Feedback.jsx @@ -1,5 +1,7 @@ import React from 'react'; +import './feedback.scss'; + export default function FeedbackModal(props) { return (
diff --git a/src/scss/modules/modals/_feedback.scss b/src/components/modals/feedback/feedback.scss similarity index 95% rename from src/scss/modules/modals/_feedback.scss rename to src/components/modals/feedback/feedback.scss index 1ded653f..c222ce1f 100644 --- a/src/scss/modules/modals/_feedback.scss +++ b/src/components/modals/feedback/feedback.scss @@ -1,3 +1,5 @@ +@import '../main/scss/index.scss'; + #feedbackmodal { position: absolute; margin: auto; diff --git a/src/components/modals/Main.jsx b/src/components/modals/main/Main.jsx similarity index 96% rename from src/components/modals/Main.jsx rename to src/components/modals/main/Main.jsx index 693258e2..03d1ff69 100644 --- a/src/components/modals/Main.jsx +++ b/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; diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx similarity index 100% rename from src/components/modals/marketplace/Item.jsx rename to src/components/modals/main/marketplace/Item.jsx diff --git a/src/components/modals/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx similarity index 100% rename from src/components/modals/marketplace/Items.jsx rename to src/components/modals/main/marketplace/Items.jsx diff --git a/src/components/modals/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx similarity index 97% rename from src/components/modals/marketplace/sections/Added.jsx rename to src/components/modals/main/marketplace/sections/Added.jsx index 509d21e8..960c3f5d 100644 --- a/src/components/modals/marketplace/sections/Added.jsx +++ b/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) { diff --git a/src/components/modals/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx similarity index 91% rename from src/components/modals/marketplace/sections/Marketplace.jsx rename to src/components/modals/main/marketplace/sections/Marketplace.jsx index 8a44c672..32bc42de 100644 --- a/src/components/modals/marketplace/sections/Marketplace.jsx +++ b/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], diff --git a/src/scss/modules/modals/_main.scss b/src/components/modals/main/scss/index.scss similarity index 97% rename from src/scss/modules/modals/_main.scss rename to src/components/modals/main/scss/index.scss index 5a0db731..585b7467 100644 --- a/src/scss/modules/modals/_main.scss +++ b/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'); diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss new file mode 100644 index 00000000..ed4de74e --- /dev/null +++ b/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'); + } +} diff --git a/src/scss/modules/_dropdown.scss b/src/components/modals/main/scss/settings/_dropdown.scss similarity index 84% rename from src/scss/modules/_dropdown.scss rename to src/components/modals/main/scss/settings/_dropdown.scss index e8c9ae7f..d3b133a4 100644 --- a/src/scss/modules/_dropdown.scss +++ b/src/components/modals/main/scss/settings/_dropdown.scss @@ -4,10 +4,10 @@ width: 120px; color: map-get($modal, 'text'); background: #f0f0f0; - border:none; + border: none; padding: 10px 10px; border-radius: 5px; - + } select#language { @@ -30,9 +30,11 @@ border-image-slice: 1 !important; border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%) !important; background: transparent !important; - color: #fff !important; + 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; -} \ No newline at end of file +} diff --git a/src/scss/modules/_settings.scss b/src/components/modals/main/scss/settings/_main.scss similarity index 94% rename from src/scss/modules/_settings.scss rename to src/components/modals/main/scss/settings/_main.scss index 2026aae9..dad31e99 100644 --- a/src/scss/modules/_settings.scss +++ b/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; @@ -187,4 +195,4 @@ input[type=color]::-moz-color-swatch { h1 { font-size: 1em; } -} \ No newline at end of file +} diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx similarity index 94% rename from src/components/modals/settings/Checkbox.jsx rename to src/components/modals/main/settings/Checkbox.jsx index 4a8bfabf..aaed5f51 100644 --- a/src/components/modals/settings/Checkbox.jsx +++ b/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'; diff --git a/src/components/modals/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx similarity index 100% rename from src/components/modals/settings/Dropdown.jsx rename to src/components/modals/main/settings/Dropdown.jsx diff --git a/src/components/modals/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx similarity index 100% rename from src/components/modals/settings/FileUpload.jsx rename to src/components/modals/main/settings/FileUpload.jsx diff --git a/src/components/modals/settings/ResetModal.jsx b/src/components/modals/main/settings/ResetModal.jsx similarity index 100% rename from src/components/modals/settings/ResetModal.jsx rename to src/components/modals/main/settings/ResetModal.jsx diff --git a/src/components/modals/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx similarity index 91% rename from src/components/modals/settings/sections/About.jsx rename to src/components/modals/main/settings/sections/About.jsx index 642aa095..b3350db8 100644 --- a/src/components/modals/settings/sections/About.jsx +++ b/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; diff --git a/src/components/modals/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx similarity index 97% rename from src/components/modals/settings/sections/Advanced.jsx rename to src/components/modals/main/settings/sections/Advanced.jsx index 1ea24194..a9071252 100644 --- a/src/components/modals/settings/sections/Advanced.jsx +++ b/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'; diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx similarity index 100% rename from src/components/modals/settings/sections/Appearance.jsx rename to src/components/modals/main/settings/sections/Appearance.jsx diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx similarity index 97% rename from src/components/modals/settings/sections/Background.jsx rename to src/components/modals/main/settings/sections/Background.jsx index d1b4785b..e338ca69 100644 --- a/src/components/modals/settings/sections/Background.jsx +++ b/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' }; diff --git a/src/components/modals/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx similarity index 91% rename from src/components/modals/settings/sections/Changelog.jsx rename to src/components/modals/main/settings/sections/Changelog.jsx index 6b41b7bf..6b46b49a 100644 --- a/src/components/modals/settings/sections/Changelog.jsx +++ b/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 = `

${this.props.language.contact_support}: https://muetab.com/contact

`; diff --git a/src/components/modals/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx similarity index 100% rename from src/components/modals/settings/sections/Experimental.jsx rename to src/components/modals/main/settings/sections/Experimental.jsx diff --git a/src/components/modals/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx similarity index 100% rename from src/components/modals/settings/sections/Greeting.jsx rename to src/components/modals/main/settings/sections/Greeting.jsx diff --git a/src/components/modals/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx similarity index 93% rename from src/components/modals/settings/sections/Language.jsx rename to src/components/modals/main/settings/sections/Language.jsx index 0e605bff..dc08542d 100644 --- a/src/components/modals/settings/sections/Language.jsx +++ b/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; diff --git a/src/components/modals/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx similarity index 100% rename from src/components/modals/settings/sections/Quote.jsx rename to src/components/modals/main/settings/sections/Quote.jsx diff --git a/src/components/modals/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx similarity index 97% rename from src/components/modals/settings/sections/Search.jsx rename to src/components/modals/main/settings/sections/Search.jsx index 4a241b56..e5bcc7da 100644 --- a/src/components/modals/settings/sections/Search.jsx +++ b/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() { diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx similarity index 100% rename from src/components/modals/settings/sections/Time.jsx rename to src/components/modals/main/settings/sections/Time.jsx diff --git a/src/components/modals/tabs/Addons.jsx b/src/components/modals/main/tabs/Addons.jsx similarity index 100% rename from src/components/modals/tabs/Addons.jsx rename to src/components/modals/main/tabs/Addons.jsx diff --git a/src/components/modals/tabs/Marketplace.jsx b/src/components/modals/main/tabs/Marketplace.jsx similarity index 100% rename from src/components/modals/tabs/Marketplace.jsx rename to src/components/modals/main/tabs/Marketplace.jsx diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx similarity index 100% rename from src/components/modals/tabs/Settings.jsx rename to src/components/modals/main/tabs/Settings.jsx diff --git a/src/components/modals/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx similarity index 100% rename from src/components/modals/tabs/backend/Tab.jsx rename to src/components/modals/main/tabs/backend/Tab.jsx diff --git a/src/components/modals/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx similarity index 100% rename from src/components/modals/tabs/backend/Tabs.jsx rename to src/components/modals/main/tabs/backend/Tabs.jsx diff --git a/src/components/modals/Update.jsx b/src/components/modals/update/Update.jsx similarity index 92% rename from src/components/modals/Update.jsx rename to src/components/modals/update/Update.jsx index cfe58490..93af6561 100644 --- a/src/components/modals/Update.jsx +++ b/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 = `

${this.props.language.contact_support}: https://muetab.com/contact

`; diff --git a/src/scss/modules/modals/_update.scss b/src/components/modals/update/update.scss similarity index 81% rename from src/scss/modules/modals/_update.scss rename to src/components/modals/update/update.scss index da996aee..8b2068b6 100644 --- a/src/scss/modules/modals/_update.scss +++ b/src/components/modals/update/update.scss @@ -1,3 +1,5 @@ +@import '../main/scss/index.scss'; + .updateContent { width: 400px; padding: 5px; diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/welcome/Welcome.jsx similarity index 98% rename from src/components/modals/Welcome.jsx rename to src/components/modals/welcome/Welcome.jsx index 49623a96..f606dc59 100644 --- a/src/components/modals/Welcome.jsx +++ b/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; diff --git a/src/scss/modules/modals/_welcome.scss b/src/components/modals/welcome/welcome.scss similarity index 72% rename from src/scss/modules/modals/_welcome.scss rename to src/components/modals/welcome/welcome.scss index ed8fd10a..2f0e2df9 100644 --- a/src/scss/modules/modals/_welcome.scss +++ b/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,14 +36,15 @@ } } - img.icon, svg { - margin-top: -12px; - padding: 10px; - cursor: pointer; - transition: ease 0.2s; + img.icon, + svg { + margin-top: -12px; + padding: 10px; + cursor: pointer; + transition: ease 0.2s; - &:hover { - transform: scale(1.1); + &:hover { + transform: scale(1.1); } } @@ -49,7 +53,8 @@ line-height: 1em; } - img, svg { + img, + svg { height: 24px; width: auto; } diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index cade42ba..f26a3530 100644 --- a/src/components/widgets/background/Background.jsx +++ b/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; } diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx index 4c9d9b7b..51ce7a5e 100644 --- a/src/components/widgets/navbar/Navbar.jsx +++ b/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) {
:null} - {(Constants.BETA_VERSION === true) ? + {(window.constants.BETA_VERSION === true) ? props.openModal('feedbackModal')}/> diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 84ff4a32..cd0dda92 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/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) { diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss index 0d8d0be5..a20d02d9 100644 --- a/src/components/widgets/search/search.scss +++ b/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; diff --git a/src/index.js b/src/index.js index 49d99421..145cdc1e 100644 --- a/src/index.js +++ b/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( , document.getElementById('root') diff --git a/src/scss/index.scss b/src/scss/index.scss index e2b48793..95ab314f 100644 --- a/src/scss/index.scss +++ b/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;