refactor: improve dark theme, add switch component etc, fix stuff

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

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() {

src/components/modals/main/Main.jsx

@@ -14,7 +14,6 @@ export default function MainModal(props) {
   return (
     <div className='modal'>
       <span className='closeModal' onClick={props.modalClose}>&times;</span>
-      <div>
         <Navigation navbar={true}>
           <div label={language.modals.main.navbar.settings}>
             <Settings/>
@@ -26,7 +25,6 @@ export default function MainModal(props) {
             <Marketplace/>
           </div>
         </Navigation>
-      </div>
     </div>
   );
 }

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 = (
         <div className='productInformation'>
           <ul>
-            <li className='header'>{this.props.language.quote_warning.title}</li>
-            <li id='updated'>{this.props.language.quote_warning.description}</li>
+            <li className='header'>{language.quote_warning.title}</li>
+            <li id='updated'>{language.quote_warning.description}</li>
           </ul>
         </div>
       );
@@ -37,29 +39,29 @@ export default function Item(props) {
       <img alt='product' draggable={false} src={iconsrc} />
       <div className='informationContainer'>
         <div className='productInformation'>
-          <h4>{props.language.information}</h4>
+          <h4>{language.information}</h4>
           <ul>
             <br/>
-            <li className='header'>{props.language.last_updated}</li>
+            <li className='header'>{language.last_updated}</li>
             <li>{props.data.updated}</li>
             <br/>
-            <li className='header'>{props.language.version}</li>
+            <li className='header'>{language.version}</li>
             <li>{props.data.version}</li>
             <br/>
-            <li className='header'>{props.language.author}</li>
+            <li className='header'>{language.author}</li>
            <li>{props.data.author}</li>
          </ul>
         </div>
         <div className='productInformation'>
           <ul>
-            <li className='header'>{props.language.notice.title}</li>
-            <li id='updated'>{props.language.notice.description}</li>
+            <li className='header'>{language.notice.title}</li>
+            <li id='updated'>{language.notice.description}</li>
           </ul>
         </div>
         {warningHTML}
       </div>
       <br/>
-      <h1>{props.language.overview}</h1>
+      <h1>{language.overview}</h1>
       <p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
     </div>
   );

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 {
           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button>
           {content}
         </div>
+        <Item data={this.state.item_data} button={this.state.button} />
       </React.Fragment>
     );
   }

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)} />
         </div>
+        <Item data={this.state.item_data} button={this.state.button} />
       </React.Fragment>
     );
   }

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

@@ -29,7 +29,7 @@
 }
 
 .modalLink {
-  color: #5352ed;
+  color: var(--modal-link);
   cursor: pointer;
   padding-left: 10px;
 

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;
+}

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;

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

@@ -28,7 +28,7 @@ export default class Radio extends React.PureComponent {
         <FormLabel className='radio-title' component='legend'>{this.props.title}</FormLabel>
         <RadioGroup aria-label={this.props.name} name={this.props.name} onChange={(e) => this.handleChange(e.target.value)} value={this.state.value}>
           {this.props.options.map(option =>
-            <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} />
+            <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
           )}
         </RadioGroup>
       </FormControl>

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 = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+    } else if (this.props.betaFeature) {
+      text = <span>{this.props.text} <span className='newFeature'> BETA</span></span>;
+    }
+
+    return (
+      <React.Fragment>
+        <FormControlLabel
+          control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
+          label={text}
+          labelPlacement='start'
+        />
+        <br/>
+      </React.Fragment>
+    );
+  }
+}

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}`;
     }
 

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

@@ -223,10 +223,8 @@ export default class BackgroundSettings extends React.PureComponent {
         <h2>{background.title}</h2>
         <Checkbox name='background' text='Enabled' />
         <h3>{background.buttons.title}</h3>
-        <ul>
-          <Checkbox name='view' text={background.buttons.view} />
-          <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
-        </ul>
+        <Checkbox name='view' text={background.buttons.view} />
+        <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
 
         <h3>{background.effects.title}</h3>
         <ul>
@@ -239,12 +237,10 @@ export default class BackgroundSettings extends React.PureComponent {
         </ul>
     
         <h3>{background.source.title}</h3>
-        <ul>
-          <Dropdown label={background.source.api} name='backgroundAPI'>
-            <option className='choices' value='mue'>Mue</option>
-            <option className='choices' value='unsplash'>Unsplash</option>
-          </Dropdown>
-        </ul>
+        <Dropdown label={background.source.api} name='backgroundAPI'>
+          <option className='choices' value='mue'>Mue</option>
+          <option className='choices' value='unsplash'>Unsplash</option>
+        </Dropdown>
         <ul>
           <p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
           <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>

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 (
       <div>
         <h2>{greeting.title}</h2>
-        <Checkbox name='greeting' text={this.language.enabled} />
+        <Switch name='greeting' text={this.language.enabled} />
         <Checkbox name='events' text={greeting.events} />
         <Checkbox name='defaultGreetingMessage' text={greeting.default} />
         <ul>

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

@@ -67,7 +67,6 @@ export default class TimeSettings extends React.PureComponent {
         <h3>{time.date.title}</h3>
         <Checkbox name='date' text={this.language.enabled} />
         <Checkbox name='dayofweek' text={time.date.day_of_week} />
-        <Checkbox name='weeknumber' text={time.date.week_number} />
         <Checkbox name='datenth' text={time.date.datenth} />
         <Checkbox name='short' text={time.date.short_date} betaFeature={true} />
         <Dropdown label={time.date.short_format} name='dateFormat'>

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;
 }

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 (
-      <React.Fragment>
+      <div id='widgets'>
         {enabled('searchBar') ? <Search/> : null}
         {enabled('greeting') ? <Greeting/> : null}
         {enabled('time') ? <Clock/> : null}
@@ -38,7 +68,7 @@ export default class Widgets extends React.PureComponent {
         {enabled('quote') ? <Quote/> : null}
         {enabled('view') ? <Maximise/> : null}
         {enabled('favouriteEnabled') ? <Favourite/> : null}
-      </React.Fragment>
+      </div>
     );
   }
 }

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 (
-      <div>
-        <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
-        {(localStorage.getItem('weeknumber') === 'true') ?
-          <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}><br/>
-            {'Week ' + this.getWeekNumber()}
-          </span>
-        :null}
-      </div>
-    )
+    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>;
   }
 }

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'; 

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
   }
 ]

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(`
  █████████████████████████████████████████████████████████████                                                                        

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};
 }

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: (

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",