feat: cleanup, settings UI improvements

Co-authored-by: David Ralph <ohlookitsderpy@protonmail.com>

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

@@ -8,7 +8,7 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 import Chip from '@mui/material/Chip';
 
-function ChipSelect({ label, options, name }) {
+function ChipSelect({ label, options }) {
   let start = (localStorage.getItem('apiCategories') || '').split(',');
   if (start[0] === '') {
     start = [];

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

@@ -20,8 +20,8 @@ export default class About extends PureComponent {
       update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
       loading: variables.getMessage('modals.main.loading'),
       image: document.body.classList.contains('dark')
-        ? 'icons/mue_dark.png'
-        : 'icons/mue_light.png',
+        ? 'icons/mue_about.png'
+        : 'icons/mue_about.png',
     };
     this.controller = new AbortController();
   }
@@ -128,36 +128,51 @@ export default class About extends PureComponent {
   render() {
     return (
       <>
-        <span className="mainTitle">
-          {variables.getMessage('modals.main.settings.sections.about.title')}
-        </span>
         <div className="settingsRow" style={{ justifyContent: 'center' }}>
           <div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
             <img draggable={false} className="aboutLogo" src={this.state.image} alt="Logo" />
-            <span className="title">
-              {variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
-              {variables.constants.VERSION}
-            </span>
-            <span className="subtitle">({this.state.update})</span>
-            <span className="subtitle">
-              {variables.getMessage('modals.main.settings.sections.about.copyright')}{' '}
-              {variables.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()}{' '}
-              <a
-                className="link"
-                href={
-                  'https://github.com/' +
-                  variables.constants.ORG_NAME +
-                  '/' +
-                  variables.constants.REPO_NAME +
-                  '/graphs/contributors'
-                }
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {variables.constants.COPYRIGHT_NAME}
-              </a>{' '}
-              ({variables.constants.COPYRIGHT_LICENSE})
-            </span>
+            <div className="aboutText">
+              <span className="title">Mue, By Kaiso</span>
+              <span className="subtitle">
+                {variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
+                {variables.constants.VERSION}
+              </span>
+              <span className="subtitle">({this.state.update})</span>
+            </div>
+            <div>
+              <span className="subtitle">
+                Copyright 2018-
+                {new Date().getFullYear()}{' '}
+                <a
+                  className="link"
+                  href={
+                    'https://github.com/' +
+                    variables.constants.ORG_NAME +
+                    '/' +
+                    variables.constants.REPO_NAME +
+                    '/graphs/contributors'
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  The Mue Authors
+                </a>
+                ,{' '}
+              </span>
+              <span className="subtitle">
+                Copyright 2023-2024{' '}
+                <a
+                  className="link"
+                  href="https://kaiso.one"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {' '}
+                  Kaiso One Ltd
+                </a>
+              </span>
+            </div>
+            <span className="subtitle">Licensed under the BSD-3-Clause License</span>
             <span className="subtitle">
               <a
                 href={variables.constants.PRIVACY_URL}

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

@@ -77,7 +77,7 @@ export default class GreetingSettings extends PureComponent {
           <input
             type="date"
             onChange={this.changeDate}
-            value={this.state.birthday.toISOString().substr(0, 10)}
+            value={this.state.birthday.toISOString().substring(0, 10)}
             required
           />
         </SettingsItem>

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

@@ -1,10 +1,12 @@
 /* eslint-disable array-callback-return */
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdShowChart, MdRestartAlt } from 'react-icons/md';
+import { MdShowChart, MdRestartAlt, MdDownload } from 'react-icons/md';
 import { FaTrophy } from 'react-icons/fa';
 import { toast } from 'react-toastify';
 
+import { saveFile } from 'modules/helpers/settings/modals';
+
 import achievementsData from 'modules/helpers/settings/achievements.json';
 import translations from 'modules/helpers/settings/achievement_translations/index';
 
@@ -21,6 +23,7 @@ const achievementLanguage = {
   id_ID: translations.id_ID,
   tr_TR: translations.tr_TR,
   bn: translations.bn,
+  pt_BR: translations.pt_BR,
 };
 
 export default class Stats extends PureComponent {
@@ -78,6 +81,14 @@ export default class Stats extends PureComponent {
     this.forceUpdate();
   }
 
+  downloadStats() {
+    let date = new Date();
+    // Format the date as YYYY-MM-DD_HH-MM-SS
+    let formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}_${date.getHours().toString().padStart(2, '0')}-${date.getMinutes().toString().padStart(2, '0')}-${date.getSeconds().toString().padStart(2, '0')}`;
+    let filename = `mue_stats_${formattedDate}.json`;
+    saveFile(JSON.stringify(this.state.stats, null, 2), filename);
+  }
+
   componentDidMount() {
     this.getAchievements();
     this.forceUpdate();
@@ -102,7 +113,10 @@ export default class Stats extends PureComponent {
           <span className="mainTitle">
             {variables.getMessage('modals.main.settings.sections.stats.title')}
           </span>
-          <div className="statsReset">
+          <div className="headerActions">
+            <button onClick={() => this.downloadStats()}>
+              <MdDownload /> {variables.getMessage('widgets.background.download')}
+            </button>
             <button onClick={() => this.resetStats()}>
               <MdRestartAlt /> {variables.getMessage('modals.main.settings.buttons.reset')}
             </button>

src/components/modals/main/settings/sections/quicklinks/AddModal.jsx

@@ -11,7 +11,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
   const [icon, setIcon] = useState(edit ? editData.icon : '');
 
   return (
-    <div className="smallModal" style={{ width: '260px' }}>
+    <div className="addLinkModal">
       <div className="shareHeader">
         <span className="title">
           {edit
@@ -30,15 +30,14 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
           placeholder={variables.getMessage('widgets.quicklinks.name')}
           value={name}
           onChange={(e) => setName(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
+          style={{ gridColumn: 'span 2' }}
         />
-        <span className="dropdown-error" />
         <TextareaAutosize
           maxRows={10}
           placeholder={variables.getMessage('widgets.quicklinks.url')}
           value={url}
           onChange={(e) => setUrl(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
         />
-        <span className="dropdown-error">{urlError}</span>
         <TextareaAutosize
           maxRows={10}
           maxLines={1}
@@ -46,7 +45,11 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
           value={icon}
           onChange={(e) => setIcon(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
         />
-        <span className="dropdown-error">{iconError}</span>
+      </div>
+      <div className="addFooter">
+        <span className="dropdown-error">
+          {iconError} {urlError}
+        </span>
         {edit ? (
           <button
             style={{
@@ -63,6 +66,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
               height: '16px',
               fontSize: '15px',
             }}
+            className="sideload"
             onClick={() => addLink(name, url, icon)}
           >
             <MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}