feat: cleanup, settings UI improvements

Co-authored-by: David Ralph <ohlookitsderpy@protonmail.com>
2026-07-14 12:34:03 +02:00 · 2024-02-03 01:21:18 +00:00
parent b3b17ad234
commit cdae5ed29e
38 changed files with 1526 additions and 1435 deletions
--- a/src/components/modals/apps/Apps.jsx
+++ b/src/components/modals/apps/Apps.jsx
@@ -1,7 +1,10 @@
-import Tooltip from 'components/helpers/tooltip/Tooltip';
-import './scss/index.scss';
+import variables from 'modules/variables';
 import { MdLinkOff } from 'react-icons/md';

+import Tooltip from 'components/helpers/tooltip/Tooltip';
+
+import './scss/index.scss';
+
 const Apps = ({ appsInfo }) => {
  return (
    <div className="appsShortcutContainer">
@@ -29,10 +32,12 @@ const Apps = ({ appsInfo }) => {
        ))
      ) : (
        <div className="noAppsContainer">
-          <h3>
-            No app links found
+          <div className="emptyNewMessage">
            <MdLinkOff />
-          </h3>
+            <span className="title">
+              {variables.language.getMessage(variables.languagecode, 'widgets.navbar.apps.no_apps')}
+            </span>
+          </div>
        </div>
      )}
    </div>
--- a/src/components/modals/apps/scss/index.scss
+++ b/src/components/modals/apps/scss/index.scss
@@ -3,75 +3,75 @@
 $appsWidth: 21rem;

 .appsShortcutContainer {
-	max-height: 35rem;
-	overflow-y: auto;
-	// scrollbar-width: thin;
-	border-radius: 0.8em;
-	padding: 1.2em;
-	display: grid;
-	grid-template-columns: repeat(3, auto);
-	grid-auto-rows: 100px;
-	gap: 10px;
-	place-items: center;
+  max-height: 35rem;
+  overflow-y: auto;
+  // scrollbar-width: thin;
+  border-radius: 0.8em;
+  padding: 1.2em;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  grid-auto-rows: 100px;
+  gap: 10px;
+  place-items: center;

-	@include themed {
-		background: t($modal-secondaryColour);
-	}
+  @include themed {
+    background: t($modal-secondaryColour);
+  }

-	.noAppsContainer {
-		h3 {
-			margin: 0;
-			display: flex;
-			align-items: center;
-		}
-		
-		svg {
-			font-size: 30px;
-			margin-left: 10px;
-		}
-	}
+  .noAppsContainer {
+    h3 {
+      margin: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    svg {
+      font-size: 30px;
+      margin-left: 10px;
+    }
+  }
 }

 .appsIcon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	text-decoration: none;
-	padding: 10px;
-	border-radius: 0.8em;
-	cursor: pointer;
-	width: 5rem;
-	height: 4.7rem;
-	transition: 0.5s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-decoration: none;
+  padding: 10px;
+  border-radius: 0.8em;
+  cursor: pointer;
+  width: 5rem;
+  height: 4.7rem;
+  transition: 0.5s;

-	img {
-		border-radius: 0.6rem;
-	}
-	
-	span {
-		display: inline-block;
-		width: 100%;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		text-align: center;
-		margin-top: 10px;
-	}
+  img {
+    border-radius: 0.6rem;
+  }

-	&:hover {
-		span {
-			white-space: initial;
-		}
+  span {
+    display: inline-block;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    margin-top: 10px;
+  }

-		height: max-content;
-	}
+  &:hover {
+    span {
+      white-space: initial;
+    }

-	@include themed {
-		color: t($color);
+    height: max-content;
+  }

-		&:hover {
-			background: t($modal-sidebarActive);
-		}
-	}
+  @include themed {
+    color: t($color);
+
+    &:hover {
+      background: t($modal-sidebarActive);
+    }
+  }
 }
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -42,10 +42,6 @@ input {
    vertical-align: middle;
    background: none;

-    &::-moz-color-swatch-wrapper {
-      padding: 0;
-    }
-
    &::-moz-color-swatch {
      border: none;
      border-radius: 100%;
--- a/src/components/modals/main/scss/settings/modules/tabs/_about.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_about.scss
@@ -47,3 +47,9 @@
    }
  }
 }
+
+.aboutText {
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+}
--- a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
+++ b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
@@ -22,7 +22,6 @@ div.color-preview-area > div > div:nth-child(5) {
 }

 .input-field .label {
-  color: inherit;
  color: var(--modal-text) !important;
 }

--- a/src/components/modals/main/settings/ChipSelect.jsx
+++ b/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 = [];
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/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}
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/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>
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/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>
--- a/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx
+++ b/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')}
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -72,7 +72,7 @@
    margin: 5px;
    transition: 0.2s ease-in-out;
    cursor: pointer;
-    border-radius: 10px 10px 0x 0;
+    border-radius: 10px 10px 0 0;
    &:hover {
      background: #dd4038;
      border-radius: 10px;
@@ -202,13 +202,13 @@ a.privacy {
  }
  img {
    max-width: 60%;
-    border-radius: 10px 10px 10px 0px;
+    border-radius: 10px 10px 10px 0;
  }
 }

 .shareYourMue {
  padding: 8px 20px 8px 20px;
-  border-radius: 0px 0px 10px 10px;
+  border-radius: 0 0 10px 10px;
  letter-spacing: 2px;
  @include themed {
    background-color: t($modal-sidebarActive);