feat: custom font ui, fix modal css and date widget stuff

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

src/components/modals/Main.jsx

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

src/components/modals/settings/sections/About.jsx

@@ -36,6 +36,13 @@ export default class About extends React.PureComponent {
   }
 
   componentDidMount() {
+    if (localStorage.getItem('offlineMode') === 'true') {
+      this.setState({
+        update: this.props.language.version.offline_mode
+      });
+      return;
+    }
+
     this.getGitHubData();
   }
 

src/components/modals/settings/sections/Appearance.jsx

@@ -9,7 +9,8 @@ export default class AppearanceSettings extends React.PureComponent {
     super(...args);
     this.state = {
       zoom: localStorage.getItem('zoom'),
-      toast_duration: localStorage.getItem('toastDisplayTime')
+      toast_duration: localStorage.getItem('toastDisplayTime'),
+      font: localStorage.getItem('font')
     };
   }
 
@@ -29,6 +30,13 @@ export default class AppearanceSettings extends React.PureComponent {
         });
         break;
 
+      case 'font':
+        localStorage.setItem('font', '');
+        this.setState({
+          font: ''
+        });
+        break;
+
       default:
         toast('resetItem requires a key!');
     }
@@ -39,6 +47,7 @@ export default class AppearanceSettings extends React.PureComponent {
   componentDidUpdate() {
     localStorage.setItem('zoom', this.state.zoom);
     localStorage.setItem('toastDisplayTime', this.state.toast_duration);
+    localStorage.setItem('font', this.state.font);
   }
 
   render() {
@@ -49,6 +58,12 @@ export default class AppearanceSettings extends React.PureComponent {
         <h2>{appearance.title}</h2>
         <Checkbox name='darkTheme' text={appearance.dark_theme} />
         <Checkbox name='brightnessTime' text={appearance.night_mode} />
+        <h3>{appearance.font.title}</h3>
+        <ul>
+          <p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.props.language.buttons.reset}</span></p>
+          <input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
+        </ul>
+        <Checkbox name='fontGoogle' text={appearance.font.google} />
         <h3>{appearance.accessibility.title}</h3>
         <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
         <ul>

src/components/modals/settings/sections/Language.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Dropdown from '../Dropdown';
 
 const languages = require('../../../../modules/languages.json');

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

@@ -74,10 +74,13 @@ export default class TimeSettings extends React.PureComponent {
           <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)}>
-          <option className='choices' value='default'>{time.date.short_separator.default}</option>
+          <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>
+          <option className='choices' value='slashes'>{time.date.short_separator.slashes}</option>
          </Dropdown>
       </div>
     );

src/components/widgets/time/Date.jsx

@@ -39,13 +39,16 @@ export default class DateWidget extends React.PureComponent {
 
       let format;
       switch (localStorage.getItem('shortFormat')) {
+        case 'dots':
+          format = `${day}.${month}.${year}`;
+          break;
         case 'dash':
           format = `${day}-${month}-${year}`;
           break;
         case 'gaps':
           format = `${day} - ${month} - ${year}`;
           break;
-        default:
+        case 'slashes':
           format = `${day}/${month}/${year}`;
       }