From 025303a01ac4da69995c7f595b6fe4ddacd466c0 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Fri, 19 Mar 2021 20:18:57 +0000
Subject: [PATCH] feat: better dropdowns, about section etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
---
 src/components/modals/settings/Dropdown.jsx     | 13 ++++++++++++-
 src/components/modals/settings/ResetModal.jsx   | 14 ++++++++++++++
 .../modals/settings/sections/About.jsx          | 17 ++++++++++-------
 .../modals/settings/sections/Advanced.jsx       | 16 +++++++++++++++-
 .../modals/settings/sections/Appearance.jsx     | 13 +++++++++----
 .../modals/settings/sections/Background.jsx     | 12 +++---------
 .../modals/settings/sections/Time.jsx           | 12 +++---------
 src/components/modals/tabs/Settings.jsx         |  4 ++++
 src/modules/constants.js                        |  1 -
 src/modules/default_settings.json               |  8 ++++++++
 src/scss/modules/_dropdown.scss                 | 12 +++++-------
 src/scss/modules/_settings.scss                 | 16 ++++++++++++++++
 src/scss/modules/modals/_main.scss              |  2 +-
 13 files changed, 100 insertions(+), 40 deletions(-)
 create mode 100644 src/components/modals/settings/ResetModal.jsx

diff --git a/src/components/modals/settings/Dropdown.jsx b/src/components/modals/settings/Dropdown.jsx
index 95c81fc5..1619bbe8 100644
--- a/src/components/modals/settings/Dropdown.jsx
+++ b/src/components/modals/settings/Dropdown.jsx
@@ -5,12 +5,23 @@ export default class Dropdown extends React.PureComponent {
     return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
   }
 
+  componentDidMount() {
+    document.getElementById(this.props.name).value = localStorage.getItem(this.props.name);
+  }
+
+  onChange = () => {
+    localStorage.setItem(this.props.name, document.getElementById(this.props.name).value);
+    if (this.props.onChange) {
+      this.props.onChange();
+    }
+  }
+
   render() {
     return (
       <React.Fragment>
         {this.getLabel()}
         <div className='dropdown' style={{ display: 'inline' }}>
-          <select name={this.props.name} id={this.props.id} onChange={this.props.onChange}>
+          <select name={this.props.name} id={this.props.name} onChange={this.onChange}>
             {this.props.children}
           </select>
         </div>
diff --git a/src/components/modals/settings/ResetModal.jsx b/src/components/modals/settings/ResetModal.jsx
new file mode 100644
index 00000000..b898cacd
--- /dev/null
+++ b/src/components/modals/settings/ResetModal.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function ResetModal(props) {
+  return (
+    <div className='welcomeContent'>
+      <span className='closeModal' onClick={props.modalClose}>&times;</span>
+      <div className='welcomeModalText'>
+        reset text
+        <button className='close' onClick={props.modalClose}>yes</button>
+        <button className='close' onClick={props.modalClose}>no</button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/modals/settings/sections/About.jsx b/src/components/modals/settings/sections/About.jsx
index ec3119cb..861ef6d9 100644
--- a/src/components/modals/settings/sections/About.jsx
+++ b/src/components/modals/settings/sections/About.jsx
@@ -5,6 +5,7 @@ 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');
 
 export default class About extends React.PureComponent {
   constructor(...args) {
@@ -12,6 +13,7 @@ export default class About extends React.PureComponent {
     this.state = {
       contributors: [],
       sponsors: [],
+      other_contributors: [],
       update: this.props.language.version.checking_update
     }
   }
@@ -21,17 +23,18 @@ export default class About extends React.PureComponent {
     const { sponsors } = await (await fetch(Constants.SPONSORS_URL + '/list')).json();
 
     const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
-    const version = versionData[0].tag_name;
+    const newVersion = versionData[0].tag_name;
 
     let updateMsg = this.props.language.version.no_update;
-    if (version !== '5.0' && version !== '4.1') {
-      updateMsg = `${this.props.language.version.update_available}: ${version}`;
+    if (version < newVersion) {
+      updateMsg = `${this.props.language.version.update_available}: ${newVersion}`;
     }
 
     this.setState({
       contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
       sponsors: sponsors,
-      update: updateMsg
+      update: updateMsg,
+      other_contributors: other_contributors
     });
   }
 
@@ -52,7 +55,7 @@ export default class About extends React.PureComponent {
         <h2>{this.props.language.title}</h2>
         <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
         <p>{this.props.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
-        <p>{this.props.language.version.title} {Constants.VERSION} ({this.state.update})</p>
+        <p>{this.props.language.version.title} {version} ({this.state.update})</p>
         <h3>{this.props.language.resources_used.title}</h3>
         <p>Pexels ({this.props.language.resources_used.bg_images})</p>
         <p>Google ({this.props.language.resources_used.pin_icon})</p>
@@ -63,8 +66,8 @@ export default class About extends React.PureComponent {
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
           </Tooltip>
         )}
-        {// for those who contributed without opening a pull request
-        other_contributors.map((item) =>
+        { // for those who contributed without opening a pull request
+        this.state.other_contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
           </Tooltip>
diff --git a/src/components/modals/settings/sections/Advanced.jsx b/src/components/modals/settings/sections/Advanced.jsx
index e924f5e9..3ec9b033 100644
--- a/src/components/modals/settings/sections/Advanced.jsx
+++ b/src/components/modals/settings/sections/Advanced.jsx
@@ -2,12 +2,21 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
+import ResetModal from '../ResetModal';
 
 import SettingsFunctions from '../../../../modules/helpers/settings';
 
 import { toast } from 'react-toastify';
+import Modal from 'react-modal';
 
 export default class AdvancedSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      resetModal: false
+    };
+  }
+
   resetItem(type) {
     document.getElementById(type).value = '';
     toast(this.props.language.toasts.reset);
@@ -42,7 +51,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <Checkbox name='offlineMode' text={advanced.offline_mode} />
 
         <h3>{advanced.data}</h3>
-        <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{this.props.language.buttons.reset}</button>
+        <button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.props.language.buttons.reset}</button>
         <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.buttons.export}</button>
         <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.buttons.import}</button>
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
@@ -56,9 +65,14 @@ export default class AdvancedSettings extends React.PureComponent {
           <p>{advanced.custom_js} <span className='modalLink' onClick={() => this.resetItem('customjs')}>{this.props.language.buttons.reset}</span></p>
           <textarea id='customjs'></textarea>
         </ul>
+
         <h3>{this.props.language.sections.experimental.title}</h3>
         <p>{advanced.experimental_warning}</p>
         <Checkbox name='experimental' text={this.props.language.enabled} />
+
+        <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'modal'} overlayClassName={'Overlay'} ariaHideApp={false}>
+          <ResetModal modalClose={() => this.setState({ resetModal: false })} />
+        </Modal>
       </div>
     );
   }
diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx
index ba0354ad..5e2155ec 100644
--- a/src/components/modals/settings/sections/Appearance.jsx
+++ b/src/components/modals/settings/sections/Appearance.jsx
@@ -51,10 +51,6 @@ export default class AppearanceSettings extends React.PureComponent {
     localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1));
   }
 
-  componentDidMount() {
-    document.getElementById('fontWeight').value = localStorage.getItem('fontWeight') || 400;
-  }
-
   render() {
     const { appearance } = this.props.language.sections;
 
@@ -88,6 +84,15 @@ export default class AppearanceSettings extends React.PureComponent {
               <option className='choices' value='700'>Bold</option>
               <option className='choices' value='800'>Extra-Bold</option>
         </Dropdown>
+        <Dropdown
+            label='Font Style'
+            name='fontstyle'
+            id='fontStyle'
+            onChange={() => localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}>
+              <option className='choices' value='normal'>Normal</option>
+              <option className='choices' value='italic'>Italic</option>
+              <option className='choices' value='oblique'>Oblique</option>
+        </Dropdown>
         <Checkbox name='fontGoogle' text={appearance.font.google} />
 
         <h3>{appearance.accessibility.title}</h3>
diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/settings/sections/Background.jsx
index b23f1223..01cfa736 100644
--- a/src/components/modals/settings/sections/Background.jsx
+++ b/src/components/modals/settings/sections/Background.jsx
@@ -100,8 +100,6 @@ export default class BackgroundSettings extends React.PureComponent {
     this.setState({
       gradientSettings
     });
-
-    document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
   }
 
   onGradientChange = (event, index) => {
@@ -241,13 +239,9 @@ export default class BackgroundSettings extends React.PureComponent {
     
         <h3>{background.source.title}</h3>
         <ul>
-          <Dropdown
-            label={background.source.api}
-            name='backgroundapi'
-            id='backgroundAPI'
-            onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
-              <option className='choices' value='mue'>Mue</option>
-              <option className='choices' value='unsplash'>Unsplash</option>
+          <Dropdown label={background.source.api} name='backgroundAPI'>
+            <option className='choices' value='mue'>Mue</option>
+            <option className='choices' value='unsplash'>Unsplash</option>
           </Dropdown>
         </ul>
         <ul>
diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx
index 78444b7a..fd06aec9 100644
--- a/src/components/modals/settings/sections/Time.jsx
+++ b/src/components/modals/settings/sections/Time.jsx
@@ -19,12 +19,6 @@ export default class TimeSettings extends React.PureComponent {
     });
   }
 
-  componentDidMount() {
-    document.getElementById('dateformat').value = localStorage.getItem('dateFormat');
-    document.getElementById('shortformat').value = localStorage.getItem('shortFormat');
-    document.getElementById('timeType').value = localStorage.getItem('timeType');
-  }
-
   render() {
     const { time } = this.props.language.sections;
 
@@ -61,7 +55,7 @@ export default class TimeSettings extends React.PureComponent {
       <div>
         <h2>{time.title}</h2>
         <Checkbox name='time' text={this.props.language.enabled} />
-        <Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
+        <Dropdown label='Type' name='timeType' onChange={() => this.changeType()}>
           <option className='choices' value='digital'>{time.digital.title}</option>
           <option className='choices' value='analogue'>{time.analogue.title}</option>
           <option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
@@ -75,14 +69,14 @@ export default class TimeSettings extends React.PureComponent {
         <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' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
+        <Dropdown label={time.date.short_format} name='dateFormat'>
           <option className='choices' value='DMY'>DMY</option>
           <option className='choices' value='MDY'>MDY</option>
           <option className='choices' value='YMD'>YMD</option>
         </Dropdown>
         <br/>
         <br/>
-        <Dropdown label={time.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
+        <Dropdown label={time.date.short_separator.title} name='shortFormat'>
           <option className='choices' value='dots'>{time.date.short_separator.dots}</option>
           <option className='choices' value='dash'>{time.date.short_separator.dash}</option>
           <option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx
index 4b334f18..25e0cc7e 100644
--- a/src/components/modals/tabs/Settings.jsx
+++ b/src/components/modals/tabs/Settings.jsx
@@ -51,6 +51,10 @@ export default function Settings (props) {
           <About language={props.language.sections.about}/>
         </div>
       </SettingsTabs>
+      <div className='reminder-info'>
+          <h1>IMPORTANT INFO</h1>
+          <p>In order for changes to take place, the page must be refreshed.</p>
+      </div>
     </React.Fragment>
   );
 }
diff --git a/src/modules/constants.js b/src/modules/constants.js
index dd970f6a..dbfc7784 100644
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -5,4 +5,3 @@ 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.0';
diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json
index a0df4ee6..84b73510 100644
--- a/src/modules/default_settings.json
+++ b/src/modules/default_settings.json
@@ -118,5 +118,13 @@
   {
     "name": "toastDisplayTime",
     "value": 2500
+  },
+  {
+    "name": "fontStyle",
+    "value": "normal"
+  },
+  {
+    "name": "fontWeight",
+    "value": "normal"
   }
 ]
diff --git a/src/scss/modules/_dropdown.scss b/src/scss/modules/_dropdown.scss
index 80e06da8..e8c9ae7f 100644
--- a/src/scss/modules/_dropdown.scss
+++ b/src/scss/modules/_dropdown.scss
@@ -1,15 +1,13 @@
 .dropdown {
   select {
     margin-left: 10px;
-
-    background: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
-    height: 34px;
     width: 120px;
     color: map-get($modal, 'text');
-
-    border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
-    border-image-slice: 1;
-    border-width: 3px 4px;
+    background: #f0f0f0;
+    border:none;
+    padding: 10px 10px;
+    border-radius: 5px;
+    
   }
 
   select#language {
diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss
index c61ab1ce..2026aae9 100644
--- a/src/scss/modules/_settings.scss
+++ b/src/scss/modules/_settings.scss
@@ -172,3 +172,19 @@ input[type=color]::-moz-color-swatch {
 .MuiCheckbox-colorPrimary.Mui-checked {
   color: map-get($button-colours, 'reset') !important;
 }
+
+.reminder-info {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  padding: 20px;
+  color: #000;
+  background: #f0f0f0;
+  max-width: 300px;
+  border-radius: 0.7em;
+  display: none;
+
+  h1 {
+    font-size: 1em;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/modules/modals/_main.scss b/src/scss/modules/modals/_main.scss
index cf4b684b..6ad81378 100644
--- a/src/scss/modules/modals/_main.scss
+++ b/src/scss/modules/modals/_main.scss
@@ -209,7 +209,7 @@ li {
 .tab-content {
   position: absolute;
   left: 25%;
-  top: 10%;
+  top: 7%;
 
   h3 {
     text-transform: uppercase;