Dark theme support for modal and about tab improvements

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

@@ -2,39 +2,55 @@ import React from 'react';
 
 import Tooltip from '@material-ui/core/Tooltip';
 
+import * as Constants from '../../../../modules/constants';
+
 export default class About extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-        contributors: []
+      contributors: [],
+      update: ''
     }
   }
 
-  async getContributors() {
-    const data = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
+  async getGitHubData() {
+    const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
+    const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
+
+    let updateMsg = 'No update available';
+    let version = versionData[0].tag_name;
+    if (version !== '5.0' && version !== '4.1') {
+      updateMsg = 'Update available: ' + version;
+    }
 
     this.setState({ 
-        contributors: data // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
+        contributors: contributors, // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK,
+        update: updateMsg
     });
   }
 
   componentDidMount() {
-    this.getContributors();
+    this.getGitHubData();
   }
 
   render() {
     return (
       <div>
           <h2>About</h2>
-          <img style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
-          <p>Copyright 2018-2021 Mue Tab (BSD-3 License)</p>
-          <p>Version 5.0.0</p>
+          <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>Copyright 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
+          <p>Version {Constants.VERSION} ({this.state.update})</p>
+          <h3>Resources Used</h3>
+          <p>Pexels (Background Images)</p>
+          <p>Google (Pin Icon)</p>
           <h3>Contributors</h3>
           {this.state.contributors.map((item) =>
             <Tooltip title={item.login} placement='top' key={item.login}>
-                <a href={'https://github.com/' + item.login}><img className='abouticon' src={item.avatar_url} alt={item.login}></img></a>
+                <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>
           )}
+          <h3>Supporters</h3>
+          <p>to be implemented</p>
       </div>
     );
   }

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

@@ -5,7 +5,6 @@ export default function AppearanceSettings (props) {
   return (
     <div>
         <h2>Appearance</h2>
-        <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
         <Checkbox name='darkTheme' text={props.language.dark} />
         <Checkbox name='brightnessTime' text={props.language.experimental.night_mode} betaFeature={true} />
         <ul>
@@ -13,6 +12,7 @@ export default function AppearanceSettings (props) {
             <textarea id='customcss'></textarea>
         </ul>
         <h3>Accessibility</h3>
+        <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
         <ul>
             <p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
             <input className='range' type='range' min='50' max='200' value={100} />

src/components/modals/tabs-backend/Tab.jsx

@@ -36,9 +36,7 @@ export default class Tab extends React.PureComponent {
           }
         }
 
-        let icon;
-        let divider;
-
+        let icon, divider;
         switch (this.props.label) {
           // Navbar
           case 'Settings': icon = <Settings/>; break;
@@ -62,7 +60,7 @@ export default class Tab extends React.PureComponent {
           case 'Photo Packs': icon = <Background/>; break; 
           case 'Quotes Packs': icon = <Quote/>; break;
           case 'Plugins':
-            icon = <Plugins />
+            icon = <Plugins/>;
             divider = <div><hr/></div>;
             break;
           case 'Added': icon = <Added/>; break;

src/components/modals/tabs/Settings.jsx

@@ -11,31 +11,30 @@ import Background from '../settings/sections/Background';
 
 import SettingsTabs from '../tabs-backend/Tabs';
 
-export default class Settings extends React.PureComponent {
-  render() {
+export default function Settings (props) {
     return (
       <React.Fragment>
         <SettingsTabs>
           <div label='Time'>
-            <Time language={this.props.language}/>
+            <Time language={props.language}/>
           </div>
           <div label='Quote'>
-            <Quote language={this.props.language}/>
+            <Quote language={props.language}/>
           </div>
           <div label='Greeting'>
-            <Greeting language={this.props.language}/>
+            <Greeting language={props.language} toastLanguage={props.toastLanguage} />
           </div>
           <div label='Background'>
-            <Background language={this.props.language}/>
+            <Background language={props.language} toastLanguage={props.toastLanguage}/>
           </div>
           <div label='Search'>
-            <Search language={this.props.language}/>
+            <Search language={props.language}/>
           </div>
           <div label='Appearance'>
-            <Appearance language={this.props.language}/>
+            <Appearance language={props.language} toastLanguage={props.toastLanguage}/>
           </div>
           <div label='Language'>
-            <Language language={this.props.language}/>
+            <Language language={props.language}/>
           </div>
           <div label='Change Log'>
             <About/>
@@ -46,5 +45,4 @@ export default class Settings extends React.PureComponent {
         </SettingsTabs>
       </React.Fragment>
     );
-  }
-}
+}