From e4395497ed8726beedfdb3577d1b5f7526ce91ef Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 20 Mar 2021 19:45:49 +0000 Subject: [PATCH] refactor: improve dark theme, add switch component etc, fix stuff Co-authored-by: Alex Sparkes --- src/App.jsx | 20 --------- src/components/modals/main/Main.jsx | 2 - .../modals/main/marketplace/Item.jsx | 20 +++++---- .../main/marketplace/sections/Added.jsx | 5 ++- .../main/marketplace/sections/Marketplace.jsx | 1 + src/components/modals/main/scss/index.scss | 2 +- .../modals/main/scss/settings/_buttons.scss | 12 +++++ .../modals/main/scss/settings/_main.scss | 15 +++++-- src/components/modals/main/settings/Radio.jsx | 2 +- .../modals/main/settings/Switch.jsx | 44 +++++++++++++++++++ .../modals/main/settings/sections/About.jsx | 2 +- .../main/settings/sections/Background.jsx | 16 +++---- .../main/settings/sections/Greeting.jsx | 3 +- .../modals/main/settings/sections/Time.jsx | 1 - src/components/modals/welcome/welcome.scss | 6 +-- src/components/widgets/Widgets.jsx | 34 +++++++++++++- src/components/widgets/time/Date.jsx | 19 +------- src/modules/constants.js | 4 +- src/modules/default_settings.json | 8 ++-- src/modules/helpers/settings.js | 9 +++- src/scss/_themes.scss | 4 ++ src/scss/_variables.scss | 4 +- src/translations/en-GB.json | 1 - 23 files changed, 150 insertions(+), 84 deletions(-) create mode 100644 src/components/modals/main/settings/Switch.jsx diff --git a/src/App.jsx b/src/App.jsx index 5ecac667..593ea3d7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -21,26 +21,6 @@ export default class App extends React.PureComponent { } SettingsFunctions.loadSettings(); - - // 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) { - event.preventDefault(); - } - }, false); - - document.onkeydown = (e) => { - e = e || window.event; - if (!e.ctrlKey) return; - let code = e.which || e.keyCode; - - switch (code) { - case 65: - e.preventDefault(); - e.stopPropagation(); - break; - } - }; } render() { diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx index 03d1ff69..e4c0eb91 100644 --- a/src/components/modals/main/Main.jsx +++ b/src/components/modals/main/Main.jsx @@ -14,7 +14,6 @@ export default function MainModal(props) { return (
× -
@@ -26,7 +25,6 @@ export default function MainModal(props) {
-
); } diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx index 9d0c836c..e34a13a0 100644 --- a/src/components/modals/main/marketplace/Item.jsx +++ b/src/components/modals/main/marketplace/Item.jsx @@ -3,6 +3,8 @@ import React from 'react'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; export default function Item(props) { + const language = window.language.modals.main.marketplace.product; + let warningHTML; // For some reason it breaks sometimes so we use try/catch try { @@ -10,8 +12,8 @@ export default function Item(props) { warningHTML = (
    -
  • {this.props.language.quote_warning.title}
    • -
  • {this.props.language.quote_warning.description}
    • +
  • {language.quote_warning.title}
    • +
  • {language.quote_warning.description}
); @@ -37,29 +39,29 @@ export default function Item(props) { product
-

{props.language.information}

+

{language.information}


    -
  • {props.language.last_updated}
    • +
  • {language.last_updated}
  • {props.data.updated}

    • -
  • {props.language.version}
    • +
  • {language.version}
  • {props.data.version}

    • -
  • {props.language.author}
    • +
  • {language.author}
  • {props.data.author}
    -
  • {props.language.notice.title}
    • -
  • {props.language.notice.description}
    • +
  • {language.notice.title}
    • +
  • {language.notice.description}
{warningHTML}

-

{props.language.overview}

+

{language.overview}

); diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index 960c3f5d..1f6c5b83 100644 --- a/src/components/modals/main/marketplace/sections/Added.jsx +++ b/src/components/modals/main/marketplace/sections/Added.jsx @@ -7,6 +7,8 @@ import FileUpload from '../../settings/FileUpload'; import MarketplaceFunctions from '../../../../../modules/helpers/marketplace'; +import { toast } from 'react-toastify'; + export default class Added extends React.PureComponent { constructor(...args) { super(...args); @@ -77,7 +79,7 @@ export default class Added extends React.PureComponent { break; } - toast(this.props.toastLanguage[type + 'ed']); + toast(window.language.modals.main.toasts[type + 'ed']); let button = ''; if (type === 'install') { @@ -113,6 +115,7 @@ export default class Added extends React.PureComponent { {content} + ); } diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index 32bc42de..a4f4a07f 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -169,6 +169,7 @@ export default class Marketplace extends React.PureComponent { items={this.state.items.slice(0, 3)} toggleFunction={(input) => this.toggle('item', input)} /> + ); } diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index e426e877..00ad7736 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -29,7 +29,7 @@ } .modalLink { - color: #5352ed; + color: var(--modal-link); cursor: pointer; padding-left: 10px; diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index ed4de74e..7883c50e 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -203,3 +203,15 @@ input[type=number]::-webkit-outer-spin-button { color: map-get($button-colours, 'other'); } } + +.MuiCheckbox-root { + color: var(--modal-text) !important; +} + +.MuiIconButton-label > svg.MuiSvgIcon-root { + color: var(--modal-text) !important; +} + +legend { + color: var(--modal-text) !important; +} \ No newline at end of file diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 2b327ca3..624185f5 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -65,7 +65,7 @@ li { height: 15px; border-radius: 12px; outline: none; - background: #ecf0f1; + background: var(--sidebar); border-radius: 12px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); @@ -147,14 +147,21 @@ input[type=color]::-moz-color-swatch { #customcss, #customjs { font-family: Consolas !important; - border: solid 1px black !important; - margin-left: 0px; + padding: 15px; + border-radius: 15px; + background-color: var(--sidebar) !important; + border: none; + margin-left: 0; } -.MuiCheckbox-colorPrimary.Mui-checked { +.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked { color: map-get($button-colours, 'reset') !important; } +.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { + background-color: var(--sidebar) !important; +} + .reminder-info { position: absolute; bottom: 20px; diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx index 34991758..1b0f5fa5 100644 --- a/src/components/modals/main/settings/Radio.jsx +++ b/src/components/modals/main/settings/Radio.jsx @@ -28,7 +28,7 @@ export default class Radio extends React.PureComponent { {this.props.title} this.handleChange(e.target.value)} value={this.state.value}> {this.props.options.map(option => - } label={option.name} /> + } label={option.name} key={option.name} /> )} diff --git a/src/components/modals/main/settings/Switch.jsx b/src/components/modals/main/settings/Switch.jsx new file mode 100644 index 00000000..231a9b43 --- /dev/null +++ b/src/components/modals/main/settings/Switch.jsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import SettingsFunctions from '../../../../modules/helpers/settings'; + +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); + this.state = { + checked: (localStorage.getItem(this.props.name) === 'true') + }; + } + + handleChange() { + SettingsFunctions.setItem(this.props.name); + + this.setState({ + checked: (this.state.checked === true) ? false : true + }); + } + + render() { + let text = this.props.text; + + if (this.props.newFeature) { + text = {this.props.text} NEW; + } else if (this.props.betaFeature) { + text = {this.props.text} BETA; + } + + return ( + + this.handleChange()} />} + label={text} + labelPlacement='start' + /> +
+ + ); + } +} diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx index e51329fe..c3eae952 100644 --- a/src/components/modals/main/settings/sections/About.jsx +++ b/src/components/modals/main/settings/sections/About.jsx @@ -24,7 +24,7 @@ export default class About extends React.PureComponent { const newVersion = versionData[0].tag_name; let updateMsg = this.language.version.no_update; - if (window.constants.VERSION < newVersion) { + if (Number(window.constants.VERSION) < newVersion) { updateMsg = `${this.language.version.update_available}: ${newVersion}`; } diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx index e338ca69..a8a4731b 100644 --- a/src/components/modals/main/settings/sections/Background.jsx +++ b/src/components/modals/main/settings/sections/Background.jsx @@ -223,10 +223,8 @@ export default class BackgroundSettings extends React.PureComponent {

{background.title}

{background.buttons.title}

-
    - - -
+ +

{background.effects.title}

    @@ -239,12 +237,10 @@ export default class BackgroundSettings extends React.PureComponent {

{background.source.title}

-
    - - - - -
+ + + +

    {background.source.custom_url} this.resetItem('customBackground')}>{this.language.buttons.reset}

    this.setState({ customBackground: e.target.value })}> diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx index b62a759b..0b2f9fb3 100644 --- a/src/components/modals/main/settings/sections/Greeting.jsx +++ b/src/components/modals/main/settings/sections/Greeting.jsx @@ -1,6 +1,7 @@ import React from 'react'; import Checkbox from '../Checkbox'; +import Switch from '../Switch'; import DatePicker from 'react-date-picker'; import { toast } from 'react-toastify'; @@ -46,7 +47,7 @@ export default class GreetingSettings extends React.PureComponent { return (

    {greeting.title}

    - +
      diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx index 5874f0e4..b84231f2 100644 --- a/src/components/modals/main/settings/sections/Time.jsx +++ b/src/components/modals/main/settings/sections/Time.jsx @@ -67,7 +67,6 @@ export default class TimeSettings extends React.PureComponent {

      {time.date.title}

      - diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss index 444a7594..f227563a 100644 --- a/src/components/modals/welcome/welcome.scss +++ b/src/components/modals/welcome/welcome.scss @@ -5,7 +5,7 @@ h2.subtitle { font-size: 24px; - color: #535353; + color: var(--modal-text); text-transform: uppercase; } @@ -21,7 +21,7 @@ a { text-decoration: none; line-height: 20px !important; - color: #5352ED; + color: var(--modal-link); cursor: pointer; &:hover { @@ -54,5 +54,5 @@ } .welcomeLink { - color: black !important; + color: var(--modal-text) !important; } diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx index a54e6901..740bb65c 100644 --- a/src/components/widgets/Widgets.jsx +++ b/src/components/widgets/Widgets.jsx @@ -26,11 +26,41 @@ export default class Widgets extends React.PureComponent { return enabled; } + componentDidMount() { + const widget = document.getElementById('widgets'); + // These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page + widget.addEventListener('mousedown', (event) => { + if (event.detail > 1) { + event.preventDefault(); + } + }, false); + + document.onkeydown = (e) => { + e = e || window.event; + if (!e.ctrlKey) { + return; + } + let code = e.which || e.keyCode; + + const modals = document.getElementsByClassName('ReactModal__Overlay'); + if (modals.length > 0) { + return; + } + + switch (code) { + case 65: + e.preventDefault(); + e.stopPropagation(); + break; + } + }; + } + render() { const enabled = this.enabled; return ( - +
      {enabled('searchBar') ? : null} {enabled('greeting') ? : null} {enabled('time') ? : null} @@ -38,7 +68,7 @@ export default class Widgets extends React.PureComponent { {enabled('quote') ? : null} {enabled('view') ? : null} {enabled('favouriteEnabled') ? : null} - +
      ); } } diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index 13a63057..29e217f6 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -71,28 +71,11 @@ export default class DateWidget extends React.PureComponent { } } - // based on https://gist.github.com/IamSilviu/5899269#gistcomment-2773524 - getWeekNumber() { - const today = new Date(); - const firstDayOfYear = new Date(today.getFullYear(), 0, 1); - const pastDaysOfYear = (today - firstDayOfYear) / 86400000; - return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7); - } - componentDidMount() { this.getDate(); } render() { - return ( -
      - {this.state.date} - {(localStorage.getItem('weeknumber') === 'true') ? -
      - {'Week ' + this.getWeekNumber()} -       - :null} -
      - ) + return {this.state.date}; } } diff --git a/src/modules/constants.js b/src/modules/constants.js index 6fdcbed8..1d9a206e 100644 --- a/src/modules/constants.js +++ b/src/modules/constants.js @@ -1,8 +1,8 @@ export const API_URL = 'https://api.muetab.com'; export const UNSPLASH_URL = 'https://unsplash.muetab.com'; -export const MARKETPLACE_URL = 'https://marketplace.muetab.com'; +export const MARKETPLACE_URL = 'http://127.0.0.1:8080'; export const WEBSITE_URL = 'https://muetab.com'; export const SPONSORS_URL = 'https://sponsors.muetab.com'; export const OFFLINE_IMAGES = 20; export const BETA_VERSION = false; -export const VERSION = 5.0; +export const VERSION = '5.0'; diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json index 84b73510..fa92eda5 100644 --- a/src/modules/default_settings.json +++ b/src/modules/default_settings.json @@ -109,7 +109,7 @@ }, { "name": "shortFormat", - "value": "default" + "value": "dots" }, { "name": "zoom", @@ -120,11 +120,11 @@ "value": 2500 }, { - "name": "fontStyle", + "name": "fontstyle", "value": "normal" }, { - "name": "fontWeight", - "value": "normal" + "name": "fontweight", + "value": 400 } ] diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 2f2ec0fd..947c27b3 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -50,9 +50,9 @@ export default class SettingsFunctions { // Set theme depending on user preferred if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - localStorage.setItem('darkTheme', true); + localStorage.setItem('theme', 'dark'); } else { - localStorage.setItem('darkTheme', false); + localStorage.setItem('theme', 'light'); } // Languages @@ -123,6 +123,11 @@ export default class SettingsFunctions { document.body.style.zoom = zoom + '%'; } + const theme = localStorage.getItem('theme'); + if (theme === 'dark') { + document.body.classList.add('dark'); + } + // easter egg console.log(` █████████████████████████████████████████████████████████████ diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss index 2760ea93..5defef21 100644 --- a/src/scss/_themes.scss +++ b/src/scss/_themes.scss @@ -6,6 +6,7 @@ $background: map-get($modal, 'background'); $sidebar: map-get($modal, 'sidebar'); $tab-active: map-get($modal, 'tab-active'); $photo-info: map-get($theme-colours, 'photo-info'); +$modal-link: map-get($modal, 'modal-link'); $main-text-dark: map-get($theme-colours, 'secondary'); $modal-text-dark: map-get($theme-colours, 'main'); @@ -13,6 +14,7 @@ $background-dark: map-get($modal, 'background-dark'); $sidebar-dark: map-get($modal, 'sidebar-dark'); $tab-active-dark: map-get($modal, 'tab-active-dark'); $photo-info-dark: map-get($theme-colours, 'photo-info-dark'); +$modal-link-dark: map-get($modal, 'modal-link-dark'); :root { --main-text: #{$main-text}; @@ -21,6 +23,7 @@ $photo-info-dark: map-get($theme-colours, 'photo-info-dark'); --sidebar: #{$sidebar}; --tab-active: #{$tab-active}; --photo-info: #{$photo-info}; + --modal-link: #{$modal-link}; } .dark { @@ -30,4 +33,5 @@ $photo-info-dark: map-get($theme-colours, 'photo-info-dark'); --sidebar: #{$sidebar-dark}; --tab-active: #{$tab-active-dark}; --photo-info: #{$photo-info-dark}; + --modal-link: #{$modal-link-dark}; } \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index fcd62d4e..c499ed98 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -19,7 +19,9 @@ $modal: ( 'sidebar': #f0f0f0, 'tab-active': rgba(219, 219, 219, 0.72), 'sidebar-dark': #353b48, - 'tab-active-dark': rgba(65, 71, 84, .9) + 'tab-active-dark': rgba(65, 71, 84, .9), + 'modal-link': #5352ed, + 'modal-link-dark': #3498db ); $marketplace: ( diff --git a/src/translations/en-GB.json b/src/translations/en-GB.json index 01678b58..44cee06f 100644 --- a/src/translations/en-GB.json +++ b/src/translations/en-GB.json @@ -58,7 +58,6 @@ "date": { "title": "Date", "day_of_week": "Day of week", - "week_number": "Week Number", "datenth": "Date nth", "short_date": "Short Date", "short_format": "Short Format",