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

src/components/widgets/navbar/Navbar.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import RefreshIcon from '@material-ui/icons/RefreshRounded';
 import Gear from '@material-ui/icons/SettingsRounded';
-import NewReleases from '@material-ui/icons/NewReleasesRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
 import Report from '@material-ui/icons/SmsFailed';
@@ -39,18 +38,24 @@ export default class Navbar extends React.PureComponent {
       feedbackHTML = null;
     }
 
+    // toggle notes
+    let notesHTML = (
+      <div className='notes'>
+        <NotesIcon className='topicons'/>
+        <React.Suspense fallback={renderLoader()}>
+          <Notes language={this.props.language.widgets.navbar.notes} />
+        </React.Suspense>
+      </div>
+    );
+
+    if (localStorage.getItem('notesEnabled') === 'false') {
+      notesHTML = null;
+    }
+
     return (
       <div className='navbar-container'>
-        <div className='notes'>
-          <NotesIcon className='topicons'/>
-          <React.Suspense fallback={renderLoader()}>
-            <Notes language={this.props.language.widgets.navbar.notes} />
-          </React.Suspense>
-        </div>
+        {notesHTML}
         {feedbackHTML}
-        <Tooltip title={this.props.language.widgets.navbar.tooltips.update} placement='top'>
-          <NewReleases className='refreshicon topicons' onClick={() => this.props.openModal('updateModal')} />
-        </Tooltip>
         {refreshHTML}
         <Tooltip title={this.props.language.modals.main.navbar.settings} placement='top'>
           <Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')} />

src/translations/en-GB.json

@@ -99,7 +99,6 @@
             "add_colour": "Add colour",
             "favourite": "Favourite",
             "view": "View",
-            "refresh": "Refresh",
             "disabled": "Disabled"
           },
           "search": {
@@ -113,6 +112,11 @@
             "dark_theme": "Dark Theme",
             "night_mode": "Night Mode",
             "animations": "Animations",
+            "navbar": {
+              "title": "Navbar",
+              "notes": "Notes",
+              "refresh": "Refresh Button"
+            },
             "font": {
               "title": "Font",
               "custom": "Custom Font",