fix: various fixes and date zero-padded feature

src/components/modals/ErrorBoundary.jsx

@@ -19,10 +19,12 @@ export default class ErrorBoundary extends React.PureComponent {
   render() {
     if (this.state.error) {
       return (
-        <div style={{'textAlign': 'center'}}>
-          <h1>{this.language.title}</h1>
-          <p>{this.language.message}</p>
-          <button className='refresh' onClick={() => window.location.reload()}>{this.language.refresh}</button>
+        <div className='emptyitems'>
+          <div className='emptyMessage'>
+            <h1>{this.language.title}</h1>
+            <p>{this.language.message}</p>
+            <button className='refresh' onClick={() => window.location.reload()}>{this.language.refresh}</button>
+          </div>
         </div>
       );
     }

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

@@ -367,3 +367,7 @@ li {
 .MuiIconButton-root {
   color: var(--modal-text) !important;
 }
+
+.MuiFormControl-root {
+  margin-top: 10px !important;
+}

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

@@ -18,6 +18,10 @@ export default class Dropdown extends React.PureComponent {
   onChange = (e) => {
     const { value } = e.target;
 
+    if (value === window.language.modals.main.loading) {
+      return;
+    }
+
     this.setState({
       value: value,
       title: e.target[e.target.selectedIndex].text

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

@@ -19,6 +19,10 @@ export default class Radio extends React.PureComponent {
   handleChange = (e) => {
     const { value } = e.target;
 
+    if (value === 'loading') {
+      return;
+    }
+
     localStorage.setItem(this.props.name, value);
   
     this.setState({

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

@@ -18,7 +18,7 @@ export default class Changelog extends React.PureComponent {
       title: data.title,
       date: data.date.split(' ')[0],
       image: data.featured_image || null,
-      author: 'By ' + data.author,
+      author: 'By ' + data.authors.join(', '),
       html: data.html
     });
    }

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

@@ -3,17 +3,48 @@ import React from 'react';
 import Radio from '../Radio';
 
 const languages = require('../../../../../modules/languages.json');
-const quote_languages = require('../../../../../modules/quote_languages.json');
 
-export default function LanguageSettings() {
-  const language = window.language.modals.main.settings.sections.language;
+export default class BackgroundSettings extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      quoteLanguages: [{
+        name: window.language.modals.main.loading,
+        value: 'loading'
+      }]
+    };
+  }
 
-  return (
-    <>
-      <h2>{language.title}</h2>
-      <Radio name='language' options={languages} element='.language' />
-      <h3>{language.quote}</h3>
-      <Radio name='quotelanguage' options={quote_languages} category='quote' />
-    </>
-  );
+  async getQuoteLanguages() {
+    const data = await (await fetch(window.constants.API_URL + '/quotes/languages')).json();
+
+    let array = [];
+    data.forEach(item => {
+      array.push({
+        name: item,
+        value: item
+      });
+    });
+
+    this.setState({
+      quoteLanguages: array
+    });
+  }
+
+  componentDidMount() {
+    this.getQuoteLanguages();
+  }
+
+  render() {
+    const language = window.language.modals.main.settings.sections.language;
+
+    return (
+      <>
+        <h2>{language.title}</h2>
+        <Radio name='language' options={languages} element='.language' />
+        <h3>{language.quote}</h3>
+        <Radio name='quotelanguage' options={this.state.quoteLanguages} category='quote' />
+      </>
+    );
+  }
 }

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

@@ -109,6 +109,7 @@ export default class TimeSettings extends React.PureComponent {
           <option value='short'>{time.date.type.short}</option>
         </Dropdown>
         <br/>
+        <Checkbox name='datezero' text={time.digital.zero} category='date' element='.date' />
         <Checkbox name='weeknumber' text={time.date.week_number} category='date' element='.date'/>
         {dateSettings}
       </>