diff --git a/src/App.jsx b/src/App.jsx index 2f0ce920..beda7faf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,13 +8,6 @@ import SettingsFunctions from './modules/helpers/settings'; import { ToastContainer } from 'react-toastify'; export default class App extends React.PureComponent { - constructor(...args) { - super(...args); - this.state = { - toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500 - }; - } - componentDidMount() { if (!localStorage.getItem('firstRun')) { SettingsFunctions.setDefaultSettings(); @@ -27,7 +20,7 @@ export default class App extends React.PureComponent { return ( <> - +
diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx index a7712455..25471842 100644 --- a/src/components/modals/Modals.jsx +++ b/src/components/modals/Modals.jsx @@ -8,18 +8,17 @@ import Modal from 'react-modal'; 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 Feedback = React.lazy(() => import('./feedback/Feedback')); const renderLoader = () => <>; export default class Modals extends React.PureComponent { - constructor(...args) { - super(...args); + constructor() { + super(); this.state = { mainModal: false, updateModal: false, welcomeModal: false, - feedbackModal: false, - overlayClassList: (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay', + feedbackModal: false }; } @@ -43,18 +42,18 @@ export default class Modals extends React.PureComponent { <> this.setState({ [modal]: true })}/> - this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}> -
this.setState({ mainModal: false })} /> + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> +
this.setState({ mainModal: false })}/> - this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}> - this.setState({ updateModal: false })} /> - - this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}> - this.closeWelcome()} /> + this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> + this.setState({ updateModal: false })}/> + + this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> + this.closeWelcome()}/> + + this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> + this.setState({ feedbackModal: false })}/> - {/* this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.setState({ feedbackModal: false })} /> - */} ); diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index 1f6c5b83..bb019a4c 100644 --- a/src/components/modals/main/marketplace/sections/Added.jsx +++ b/src/components/modals/main/marketplace/sections/Added.jsx @@ -10,8 +10,8 @@ import MarketplaceFunctions from '../../../../../modules/helpers/marketplace'; import { toast } from 'react-toastify'; export default class Added extends React.PureComponent { - constructor(...args) { - super(...args); + constructor() { + super(); this.state = { installed: JSON.parse(localStorage.getItem('installed')), current_data: { diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index a4f4a07f..ac0063f6 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -10,8 +10,8 @@ import MarketplaceFunctions from '../../../../../modules/helpers/marketplace'; import { toast } from 'react-toastify'; export default class Marketplace extends React.PureComponent { - constructor(...args) { - super(...args); + constructor() { + super(); this.state = { items: [], current_data: { diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index 22a48035..6f12e863 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -29,18 +29,6 @@ } } -.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; @@ -167,43 +155,6 @@ input[type=number]::-webkit-outer-spin-button { 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'); - } -} - .MuiCheckbox-root { color: var(--modal-text) !important; } diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index d8b0dff0..4d0023f0 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -28,27 +28,15 @@ input { .DayPickerInput, .input-container { input { - width: 200px; - color: var(--modal-text) ! important; - background: var(--sidebar); - border: none; - padding: 10px 10px; - border-radius: 5px; + width: 200px; + color: var(--modal-text) ! important; + background: var(--sidebar); + border: none; + padding: 10px 10px; + border-radius: 5px; } } -h4, -.switch { - display: inline; - font-size: 1.4em; - font-weight: 100; -} - -h4, -#engines { - display: inline; -} - h4 { cursor: pointer; } @@ -62,10 +50,6 @@ ul { } } -li { - margin-top: 1px; -} - .range { -webkit-appearance: none; width: 200px; @@ -136,16 +120,6 @@ input[type=color]::-moz-color-swatch { } } -.customBackgroundHex { - font-size: 1.2em; - padding-left: 7px; - vertical-align: middle; -} - -.nodropdown { - cursor: default; -} - .newFeature { color: #ff4757; font-size: 12px; diff --git a/src/components/modals/main/settings/Checkbox.jsx b/src/components/modals/main/settings/Checkbox.jsx index f7f4520e..ccfc88da 100644 --- a/src/components/modals/main/settings/Checkbox.jsx +++ b/src/components/modals/main/settings/Checkbox.jsx @@ -6,14 +6,14 @@ import CheckboxUI from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; export default class Checkbox extends React.PureComponent { - constructor(...args) { - super(...args); + constructor(props) { + super(props); this.state = { checked: (localStorage.getItem(this.props.name) === 'true') }; } - handleChange() { + handleChange = () => { SettingsFunctions.setItem(this.props.name); this.setState({ @@ -33,7 +33,7 @@ export default class Checkbox extends React.PureComponent { return ( <> this.handleChange()} />} + control={} label={text} />
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx index 96e6a6e8..7b33b358 100644 --- a/src/components/modals/main/settings/Dropdown.jsx +++ b/src/components/modals/main/settings/Dropdown.jsx @@ -1,8 +1,8 @@ import React from 'react'; export default class Dropdown extends React.PureComponent { - constructor(...args) { - super(...args); + constructor(props) { + super(props); this.state = { value: localStorage.getItem(this.props.name) || '' }; @@ -12,7 +12,9 @@ export default class Dropdown extends React.PureComponent { return this.props.label ? : null; } - onChange(value) { + onChange = (e) => { + const { value } = e.target; + this.setState({ value: value }); @@ -28,7 +30,7 @@ export default class Dropdown extends React.PureComponent { return ( <> {this.getLabel()} - {this.props.children} diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx index 1b0f5fa5..93dc345a 100644 --- a/src/components/modals/main/settings/Radio.jsx +++ b/src/components/modals/main/settings/Radio.jsx @@ -7,14 +7,16 @@ import FormControl from '@material-ui/core/FormControl'; import FormLabel from '@material-ui/core/FormLabel'; export default class Radio extends React.PureComponent { - constructor(...args) { - super(...args); + constructor(props) { + super(props); this.state = { value: localStorage.getItem(this.props.name) }; } - handleChange(value) { + handleChange = (e) => { + const { value } = e.target; + localStorage.setItem(this.props.name, value); this.setState({ @@ -26,7 +28,7 @@ export default class Radio extends React.PureComponent { return ( {this.props.title} - this.handleChange(e.target.value)} value={this.state.value}> + {this.props.options.map(option => } label={option.name} key={option.name} /> )} diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx index b214258a..a0396c5f 100644 --- a/src/components/modals/main/settings/Slider.jsx +++ b/src/components/modals/main/settings/Slider.jsx @@ -3,22 +3,24 @@ import React from 'react'; import { toast } from 'react-toastify'; export default class Slider extends React.PureComponent { - constructor(...args) { - super(...args); + constructor(props) { + super(props); this.state = { value: localStorage.getItem(this.props.name) || '' }; this.language = window.language.modals.main.settings; } - handleChange(value) { + handleChange = () => { + const { value } = e.target; + localStorage.setItem(this.props.name, value); this.setState({ value: value }); } - resetItem() { + resetItem = () => { localStorage.setItem(this.props.name, this.props.default); this.setState({ value: this.props.default @@ -30,8 +32,8 @@ export default class Slider extends React.PureComponent { render() { return ( <> -

{this.props.title} ({this.state.value}{this.props.display}) this.resetItem()}>{this.language.buttons.reset}

- this.handleChange(e.target.value)} /> +

{this.props.title} ({this.state.value}{this.props.display}) {this.language.buttons.reset}

+ ); } diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx index 76e516f1..3872bdd5 100644 --- a/src/components/modals/main/settings/Switch.jsx +++ b/src/components/modals/main/settings/Switch.jsx @@ -6,14 +6,14 @@ import SwitchUI from '@material-ui/core/Switch'; import FormControlLabel from '@material-ui/core/FormControlLabel'; export default class Switch extends React.PureComponent { - constructor(...args) { - super(...args); + constructor(props) { + super(props); this.state = { checked: (localStorage.getItem(this.props.name) === 'true') }; } - handleChange() { + handleChange = () => { SettingsFunctions.setItem(this.props.name); this.setState({ @@ -33,7 +33,7 @@ export default class Switch extends React.PureComponent { return ( <> this.handleChange()} />} + control={} label={text} labelPlacement='start' /> diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx index fbf4c3f3..8b3ae131 100644 --- a/src/components/modals/main/settings/Text.jsx +++ b/src/components/modals/main/settings/Text.jsx @@ -3,15 +3,17 @@ import React from 'react'; import { toast } from 'react-toastify'; export default class Text extends React.PureComponent { - constructor(...args) { - super(...args); + constructor(props) { + super(props); this.state = { value: localStorage.getItem(this.props.name) || '' }; this.language = window.language.modals.main.settings; } - handleChange(value) { + handleChange(e) { + const { value } = e.target; + // Alex wanted font to work with montserrat and Montserrat, so I made it work if (this.props.upperCaseFirst === true) { value = value.charAt(0).toUpperCase() + value.slice(1); @@ -23,7 +25,7 @@ export default class Text extends React.PureComponent { }); } - resetItem() { + resetItem = () => { localStorage.setItem(this.props.name, this.props.default || ''); this.setState({ value: this.props.default || '' @@ -35,10 +37,10 @@ export default class Text extends React.PureComponent { render() { return ( <> -

{this.props.title} this.resetItem()}>{this.language.buttons.reset}

+

{this.props.title} {this.language.buttons.reset}

{(this.props.textarea === true) ? -