feat: add notes setting and changelog section

src/components/modals/Main.jsx

@@ -13,7 +13,7 @@ export default function MainModal(props) {
       <div>
         <Navigation navbar={true}>
           <div label={props.language.modals.main.navbar.settings}>
-            <Settings language={props.language.modals.main.settings} toastLanguage={props.language.toasts} />
+            <Settings language={props.language.modals.main.settings} toastLanguage={props.language.toasts} updateLanguage={props.language.modals.update} />
           </div>
           <div label={props.language.modals.main.navbar.addons}>
             <Addons/>

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

@@ -58,6 +58,9 @@ 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.navbar.title}</h3>
+        <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
+        <Checkbox name='refresh' text={appearance.navbar.refresh} />
         <h3>{appearance.font.title}</h3>
         <ul>
           <p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.props.language.buttons.reset}</span></p>

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

@@ -224,7 +224,6 @@ export default class BackgroundSettings extends React.PureComponent {
         <ul>
           <Checkbox name='view' text={background.view} />
           <Checkbox name='favouriteEnabled' text={background.favourite} />
-          <Checkbox name='refresh' text={background.refresh} />
         </ul>
         <h3>Effects</h3>
         <ul>

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

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import * as Constants from '../../../../modules/constants';
+
+export default class Changelog extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      title: this.props.language.title,
+      date: null,
+      content: this.props.language.title,
+      html: this.props.language.loading,
+      image: null
+    };
+  }
+
+  async getUpdate() {
+    const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
+  
+    if (data.statusCode === 500 || data.title === null) {
+      const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
+      return this.setState({
+        title: this.props.language.error.title,
+        html: this.props.language.error.description + supportText
+      });
+    }
+  
+    this.setState({
+      title: data.title,
+      date: data.published,
+      image: data.image || null,
+      author: data.author,
+      html: data.content
+    });
+   }
+  
+   componentDidMount() {
+    if (localStorage.getItem('offlineMode') === 'true') {
+      return this.setState({
+        title: this.props.language.offline.title,
+        html: this.props.language.offline.description
+      });
+    }
+  
+    this.getUpdate();
+   }
+
+  render() {
+    return (
+      <div>
+        <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
+        <h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
+        {this.state.image ? <img draggable='false' src={this.state.image} alt='Update'></img> : null}
+        <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
+      </div>
+    );
+  }
+}

src/components/modals/tabs/Settings.jsx

@@ -9,6 +9,7 @@ import Quote from '../settings/sections/Quote';
 import Appearance from '../settings/sections/Appearance';
 import Background from '../settings/sections/Background';
 import Advanced from '../settings/sections/Advanced';
+import Changelog from '../settings/sections/Changelog';
 
 import SettingsTabs from './backend/Tabs';
 
@@ -44,7 +45,7 @@ export default function Settings (props) {
 
         </div>
         <div label={props.language.sections.changelog}>
-          <About/>
+          <Changelog language={props.updateLanguage} />
         </div>
         <div label={props.language.sections.about.title}>
           <About language={props.language.sections.about}/>