fix: unique key console error on about

fix: greeting options hot reload, unsplash collection setting text missing
fix: search autocomplete
2024-05-18 13:33:58 +01:00 · 2024-05-18 11:39:05 +01:00 · 2024-05-18 01:43:28 +01:00 · 2024-05-17 23:24:36 +01:00 · 2024-05-17 23:05:49 +01:00 · 2024-05-17 22:49:40 +01:00
397 changed files with 20839 additions and 18762 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,27 @@
+# API URLs
+API_URL=https://api.muetab.com/v2
+SPONSORS_URL=https://sponsors.muetab.com
+GITHUB_URL=https://api.github.com
+OPENSTREETMAP_URL=https://www.openstreetmap.org
+
+# Mue URLs
+WEBSITE_URL=https://muetab.com
+PRIVACY_URL=https://muetab.com/privacy
+BLOG_POST=https://blog.muetab.com/posts/version-7-0
+TRANSLATIONS_URL=https://docs.muetab.com/translations/
+WEBLATE_URL=https://hosted.weblate.org/projects/mue/mue-tab/
+REPORT_ITEM =https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+
+BUG_REPORT =https://github.com/mue/mue/issues/new?assignees=&labels=issue+report&template=bug-report.md&title=%5BBug%5D+
+DONATE_LINK=https://muetab.com/donate
+SENTRY_DSN =https://430352fd4b174d688ebd82fc85c22c58@o1217438.ingest.sentry.io/6359480
+KNOWLEDGEBASE=https://support.muetab.com
+
+# Mue Info
+ORG_NAME=mue
+REPO_NAME=mue
+EMAIL=hello@muetab.com
+TWITTER_HANDLE=getmue
+DISCORD_SERVER=zv8C9F8
+OPENCOLLECTIVE_USERNAME=mue
+
+VERSION=7.0.1
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@ -24,10 +24,10 @@ If applicable, add screenshots to help explain your problem.

 **Desktop (please complete the following information):**
 - OS: [e.g. Windows, Ubuntu]
- - OS Version: [e.g 10, 19.10]
+ - OS Version: [e.g 11, 23.10]
 - Browser: [e.g. Chrome, Firefox]
- - Browser Version: [e.g. 70]
- - Mue Version: [e.g. 0.5]
+ - Browser Version: [e.g. 115]
+ - Mue Version: [e.g. 7.1.0]
 - Resolution: [e.g 1920x1080]

 **Additional context**
--- a/.github/workflows/automerge.yml
+++ b/.github/workflows/automerge.yml
@ -8,7 +8,7 @@ jobs:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
-          node-version: "14.x"
+          node-version: "20.x"
      - name: Install dependencies
        run: npm install
      - name: Build
--- a/4
+++ b/4
@ -1,7 +1,7 @@
 BSD 3-Clause License

-Copyright (c) 2023- Kaiso One Ltd
-Copyright (c) 2019-2023 The Mue Authors
+Copyright (c) 2023-2024 Kaiso One Ltd
+Copyright (c) 2019-2024 The Mue Authors
 Copyright (c) 2018-2019 David Ralph

 All rights reserved.
--- a/README.md
+++ b/README.md
@ -12,6 +12,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 <br>

 ## Table of contents
+
 - [Table of contents](#table-of-contents)
 - [Screenshots](#screenshots)
 - [Features](#features)
@ -48,7 +49,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an

 ### Planned Features

-Please see our [roadmap](https://trello.com/b/w7zhS7Hi/mue-50).
+Please see our [roadmap](https://trello.com/b/w7zhS7Hi/mue-50). We are currently working on a rewrite over on the "phoenix" branch.

 ## Installation

@ -107,6 +108,7 @@ Please see the [documentation](https://docs.muetab.com/development#mue-tab).
 [Aksal](https://github.com/aksalsf) - Indonesian <br/>
 [Kağan Can Şit](https://github.com/KaganCanSit) - Turkish <br/>
 efeaydal - Turkish <br/>
+
 ### Contributors

 Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs.
@ -117,10 +119,3 @@ And finally, a big thank you to all the other [contributors](https://github.com/

 [Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode <br/>
 [Undraw](https://undraw.co) - Welcome modal images
-
-<p>This project is supported by:</p>
-<p>
-  <a href="https://www.digitalocean.com/">
-    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_blue.svg" width="201px">
-  </a>
-</p>
--- a/index.html
+++ b/index.html
@ -1,38 +1,113 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/png" sizes="32x32" href="./icons/32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="./icons/16x16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/icons/32x32.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/icons/16x16.png" />
    <title>New Tab</title>
  </head>

  <body>
    <noscript>
      <style>
-        *,
-        a {
+        @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400&display=swap');
+
+        * {
          font-family: 'Lexend Deca', sans-serif;
-          text-align: center;
-          color: black;
-          background: white !important;
+          overflow: hidden;
+        }
+
+        .criticalError {
+          display: grid;
+          place-items: center;
+          width: 100vw;
+          height: 100vh;
+        }
+
+        .criticalError .criticalError-actions {
+          display: flex;
+          flex-flow: row;
+          gap: 20px;
+        }
+
+        .criticalError a {
+          border: 0;
+          border-radius: 12px;
+          padding: 10px 30px 10px 30px;
+          font-size: 1rem;
+          display: flex;
+          align-items: center;
+          flex-flow: row;
+          justify-content: center;
+          gap: 20px;
+          transition: 0.5s;
+          cursor: pointer;
+          text-decoration: none;
        }

        @media (prefers-color-scheme: dark) {
-          *,
-          a {
-            color: white;
-            background: #2f3640 !important;
+          * {
+            background-color: #000000;
+          }
+
+          .criticalError .criticalError-message {
+            color: #fff;
+          }
+
+          .criticalError p {
+            color: rgba(255, 255, 255, 0.7529411765);
+          }
+
+          .criticalError a {
+            background: #0e1013;
+            box-shadow: 0 0 0 1px #484848;
+            color: #fff;
+          }
+
+          .criticalError a:hover {
+            background: #1e1e1e;
+          }
+        }
+
+        @media (prefers-color-scheme: light) {
+          * {
+            background-color: #ffffff;
+          }
+
+          .criticalError .criticalError-message {
+            color: #000;
+          }
+
+          .criticalError p {
+            color: rgba(0, 0, 0, 0.7529411765);
+          }
+
+          .criticalError a {
+            background: #fdfdfd;
+            box-shadow: 0 0 0 1px #484848;
+            color: #000;
+          }
+
+          .criticalError a:hover {
+            background: #f5f5f5;
          }
        }
      </style>
-      <h1>Error</h1>
-      <h2>You need to enable JavaScript to use Mue</h2>
-      <p>
-        Having trouble? Contact us:
-        <a href="https://muetab.com/contact">https://muetab.com/contact</a>
-      </p>
+      <div class="criticalError">
+        <div class="criticalError-message">
+          <h1>A critical error has occurred</h1>
+          <p>The new tab could not be loaded. Please enable JavaScript and try again.</p>
+          <div class="criticalError-actions">
+            <a href="https://github.com/mue/mue/issues/new/choose" target="_blank" rel="noreferrer"
+              >Report Issue</a
+            >
+            <a href="https://discord.gg/zv8C9F8" target="_blank" rel="noreferrer"
+              >Support Discord</a
+            >
+          </div>
+        </div>
+      </div>
    </noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -1,7 +1,9 @@
 {
  "compilerOptions": {
    "module": "commonjs",
-    "target": "es6"
+    "target": "es6",
+    "baseUrl": "src"
  },
+  "include": ["src"],
  "exclude": ["node_modules"]
 }
--- a/manifest/background-chrome.js
+++ b/manifest/background-chrome.js
@ -1,10 +0,0 @@
-/* eslint-disable no-undef */
-chrome.runtime.setUninstallURL('https://muetab.com/uninstall');
-
-chrome.runtime.onInstalled.addListener((details) => {
-  if (details.reason === 'install') {
-    chrome.tabs.create({
-      url: chrome.runtime.getURL('index.html'),
-    });
-  }
-});
--- a/manifest/background-firefox.js
+++ b/manifest/background-firefox.js
@ -1,4 +1,9 @@
+/* eslint-disable no-use-before-define */
 /* eslint-disable no-undef */
+if (typeof browser === 'undefined') {
+  var browser = chrome;
+}
+
 browser.runtime.setUninstallURL('https://muetab.com/uninstall');

 browser.runtime.onInstalled.addListener((details) => {
--- a/package.json
+++ b/package.json
@ -9,46 +9,45 @@
  "homepage": "https://muetab.com",
  "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
  "license": "BSD-3-Clause",
-  "version": "7.0.0",
+  "version": "7.1.0",
  "dependencies": {
    "@eartharoid/i18n": "1.2.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@floating-ui/react-dom": "1.3.0",
-    "@fontsource/lexend-deca": "5.0.5",
-    "@fontsource/montserrat": "5.0.5",
-    "@muetab/react-color-gradient-picker": "0.1.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@floating-ui/react-dom": "2.0.9",
+    "@fontsource/lexend-deca": "5.0.12",
+    "@fontsource/montserrat": "5.0.17",
    "@muetab/react-sortable-hoc": "^2.0.1",
-    "@mui/material": "5.14.8",
-    "@sentry/react": "^7.58.1",
-    "embla-carousel-autoplay": "8.0.0-rc11",
-    "embla-carousel-react": "8.0.0-rc11",
+    "@mui/material": "5.15.18",
+    "@sentry/react": "^8.2.1",
+    "embla-carousel-autoplay": "8.0.4",
+    "embla-carousel-react": "8.0.4",
    "fast-blurhash": "^1.1.2",
    "image-conversion": "^2.1.1",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-clock": "4.5.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
+    "react": "^18.3.1",
+    "react-best-gradient-color-picker": "^3.0.7",
+    "react-clock": "5.0.0",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
    "react-modal": "3.16.1",
-    "react-toastify": "9.1.3"
+    "react-toastify": "10.0.5"
  },
  "devDependencies": {
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.6.6",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
    "@eartharoid/deep-merge": "^0.0.2",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "adm-zip": "^0.5.10",
-    "eslint": "^8.48.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "adm-zip": "^0.5.12",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
    "eslint-config-react-app": "^7.0.1",
-    "husky": "^8.0.3",
-    "prettier": "^3.0.0",
-    "sass": "^1.63.6",
-    "stylelint": "^15.10.3",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "stylelint-scss": "^5.0.1",
-    "vite": "4.4.4",
+    "husky": "^9.0.11",
+    "prettier": "^3.2.5",
+    "sass": "^1.77.2",
+    "stylelint": "^16.5.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-scss": "^6.3.0",
+    "vite": "5.2.11",
    "vite-plugin-progress": "^0.0.7"
  },
  "scripts": {
@ -59,6 +58,6 @@
    "pretty": "prettier --write \"./**/*.{js,jsx,json,scss,css}\"",
    "lint": "eslint \"./src/**/*.{js,jsx}\" && stylelint \"./src/**/*.{scss,css}\"",
    "lint:fix": "eslint \"./src/**/*.{js,jsx}\" --fix && stylelint \"./src/**/*.{scss,css}\" --fix",
-    "postinstall": "husky install"
+    "postinstall": "husky"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/icons/128x128.png
+++ b/public/icons/128x128.png
--- a/public/icons/16x16.png
+++ b/public/icons/16x16.png
--- a/public/icons/32x32.png
+++ b/public/icons/32x32.png
--- a/public/icons/48x48.png
+++ b/public/icons/48x48.png
--- a/scripts/updatetranslations.js
+++ b/scripts/updatetranslations.js
@ -1,13 +1,7 @@
-// tl;dr this function merges the translation file with the english file in order to add untranslated strings
 const fs = require('fs');
+const path = require('path');
 const merge = require('@eartharoid/deep-merge');

-/**
- * It recursively compares the keys of two JSON objects and removes the keys from the first object that
- * are not present in the second object
- * @param json1 - The JSON object that you want to remove keys from.
- * @param json2 - The JSON object that you want to compare against.
- */
 const compareAndRemoveKeys = (json1, json2) => {
  for (let key in json1) {
    if (json2.hasOwnProperty(key)) {
@ -20,20 +14,72 @@ const compareAndRemoveKeys = (json1, json2) => {
  }
 };

-fs.readdirSync('../src/translations').forEach((file) => {
+const localesDir = path.join(__dirname, '../src/i18n/locales');
+const achievementsDir = path.join(localesDir, 'achievements');
+
+// Check if the locales directory exists, if not, create it
+if (!fs.existsSync(localesDir)) {
+  fs.mkdirSync(localesDir, { recursive: true });
+}
+
+// Check if the achievements directory exists, if not, create it
+if (!fs.existsSync(achievementsDir)) {
+  fs.mkdirSync(achievementsDir, { recursive: true });
+}
+
+fs.readdirSync(localesDir).forEach((file) => {
  if (file === 'en_GB.json') {
    return;
  }

-  const en = require('../src/translations/en_GB.json');
-  const newdata = merge(en, require('../src/translations/' + file));
+  if (fs.lstatSync(path.join(localesDir, file)).isDirectory()) {
+    return;
+  }
+
+  const en = require(path.join(localesDir, 'en_GB.json'));
+  const newdata = merge(en, require(path.join(localesDir, file)));

-  // remove strings not in english file
  compareAndRemoveKeys(newdata, en);

-  // write new file
-  fs.writeFileSync('../src/translations/' + file, JSON.stringify(newdata, null, 2));
+  fs.writeFileSync(path.join(localesDir, file), JSON.stringify(newdata, null, 2));

-  // add new line
-  fs.appendFileSync('../src/translations/' + file, '\n');
+  fs.appendFileSync(path.join(localesDir, file), '\n');
+});
+
+fs.readdirSync(achievementsDir).forEach((file) => {
+  if (file === 'en_GB.json') {
+    return;
+  }
+
+  if (fs.lstatSync(path.join(achievementsDir, file)).isDirectory()) {
+    return;
+  }
+
+  const enGBFilePath = path.join(achievementsDir, 'en_GB.json');
+  if (!fs.existsSync(enGBFilePath)) {
+    console.error(`File 'en_GB.json' does not exist in the directory '${achievementsDir}'`);
+    return;
+  }
+
+  const en = require(enGBFilePath);
+  const newdata = merge(en, require(path.join(achievementsDir, file)));
+
+  compareAndRemoveKeys(newdata, en);
+
+  fs.writeFileSync(path.join(achievementsDir, file), JSON.stringify(newdata, null, 2));
+
+  fs.appendFileSync(path.join(achievementsDir, file), '\n');
+
+  const locales = fs.readdirSync(localesDir);
+  locales.forEach((locale) => {
+    if (!fs.existsSync(path.join(achievementsDir, locale))) {
+      // ignore directories
+      if (fs.lstatSync(path.join(localesDir, locale)).isDirectory()) {
+        return;
+      }
+
+      fs.writeFileSync(path.join(achievementsDir, locale), JSON.stringify(en, null, 2));
+      fs.appendFileSync(path.join(achievementsDir, locale), '\n');
+    }
+  });
 });
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,14 +1,14 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent } from 'react';
 import { ToastContainer } from 'react-toastify';

-import Background from 'components/widgets/background/Background';
-import Widgets from 'components/widgets/Widgets';
-import Modals from 'components/modals/Modals';
+import Background from 'features/background/Background';
+import Widgets from 'features/misc/views/Widgets';
+import Modals from 'features/misc/modals/Modals';

-import { loadSettings, moveSettings } from 'modules/helpers/settings';
+import { loadSettings, moveSettings } from 'utils/settings';

-import EventBus from 'modules/helpers/eventbus';
+import EventBus from 'utils/eventbus';

 export default class App extends PureComponent {
  componentDidMount() {
@ -38,7 +38,7 @@ export default class App extends PureComponent {
  render() {
    return (
      <>
-        {localStorage.getItem('background') === 'true' ? <Background /> : null}
+        {localStorage.getItem('background') === 'true' && <Background />}
        <ToastContainer
          position="bottom-right"
          autoClose={localStorage.getItem('toastDisplayTime') || 2500}
--- a/src/ErrorBoundary.jsx
+++ b/src/ErrorBoundary.jsx
@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react';
+
+import { captureException } from '@sentry/react';
+
+class ErrorBoundary extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false,
+      errorData: '',
+      showReport: true,
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({ error: true, errorData: errorInfo });
+    console.error('Error boundary caught an error:', error, errorInfo);
+  }
+
+  reportError() {
+    captureException(this.state.errorData);
+    this.setState({
+      showReport: false,
+    });
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="criticalError">
+          <div className="criticalError-message">
+            <h1>A critical error has occurred</h1>
+            <p>
+              The new tab page could not be loaded. Please uninstall the extension and try again.
+            </p>
+            <div className="criticalError-actions">
+              {this.state.showReport ? (
+                <button onClick={() => this.reportError()}>Report Issue</button>
+              ) : (
+                <p>Sent Successfully</p>
+              )}
+              <a href="https://discord.gg/zv8C9F8" target="_blank" rel="noreferrer">
+                Support Discord
+              </a>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
--- a/src/assets/icons/128x128.png
+++ b/src/assets/icons/128x128.png
--- a/src/assets/icons/16x16.png
+++ b/src/assets/icons/16x16.png
--- a/src/assets/icons/32x32.png
+++ b/src/assets/icons/32x32.png
--- a/src/assets/icons/48x48.png
+++ b/src/assets/icons/48x48.png
--- a/src/assets/icons/mue_about.png
+++ b/src/assets/icons/mue_about.png
--- a/src/assets/icons/mue_dark.png
+++ b/src/assets/icons/mue_dark.png
--- a/src/assets/icons/mue_light.png
+++ b/src/assets/icons/mue_light.png
--- a/src/assets/icons/undraw_add_files_modified.svg
+++ b/src/assets/icons/undraw_add_files_modified.svg
--- a/src/assets/icons/undraw_around_the_world_modified.svg
+++ b/src/assets/icons/undraw_around_the_world_modified.svg
--- a/src/assets/icons/undraw_by_the_road.svg
+++ b/src/assets/icons/undraw_by_the_road.svg
--- a/src/assets/icons/undraw_celebration.svg
+++ b/src/assets/icons/undraw_celebration.svg
--- a/src/assets/icons/undraw_dark_mode.svg
+++ b/src/assets/icons/undraw_dark_mode.svg
--- a/src/assets/icons/undraw_making_art.svg
+++ b/src/assets/icons/undraw_making_art.svg
--- a/src/assets/icons/undraw_on_the_way.svg
+++ b/src/assets/icons/undraw_on_the_way.svg
--- a/src/assets/icons/undraw_private_data_modified.svg
+++ b/src/assets/icons/undraw_private_data_modified.svg
--- a/src/assets/icons/undraw_upgrade_modified.svg
+++ b/src/assets/icons/undraw_upgrade_modified.svg
--- a/src/assets/offline-images/1.webp
+++ b/src/assets/offline-images/1.webp
--- a/src/assets/offline-images/10.webp
+++ b/src/assets/offline-images/10.webp
--- a/src/assets/offline-images/11.webp
+++ b/src/assets/offline-images/11.webp
--- a/src/assets/offline-images/12.webp
+++ b/src/assets/offline-images/12.webp
--- a/src/assets/offline-images/2.webp
+++ b/src/assets/offline-images/2.webp
--- a/src/assets/offline-images/3.webp
+++ b/src/assets/offline-images/3.webp
--- a/src/assets/offline-images/4.webp
+++ b/src/assets/offline-images/4.webp
--- a/src/assets/offline-images/5.webp
+++ b/src/assets/offline-images/5.webp
--- a/src/assets/offline-images/6.webp
+++ b/src/assets/offline-images/6.webp
--- a/src/assets/offline-images/7.webp
+++ b/src/assets/offline-images/7.webp
--- a/src/assets/offline-images/8.webp
+++ b/src/assets/offline-images/8.webp
--- a/src/assets/offline-images/9.webp
+++ b/src/assets/offline-images/9.webp
--- a/src/assets/welcome-images/example1.webp
+++ b/src/assets/welcome-images/example1.webp
--- a/src/assets/welcome-images/example2.webp
+++ b/src/assets/welcome-images/example2.webp
--- a/src/assets/welcome-images/example3.webp
+++ b/src/assets/welcome-images/example3.webp
--- a/src/assets/welcome-images/example4.webp
+++ b/src/assets/welcome-images/example4.webp
--- a/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx
+++ b/src/components/modals/main/settings/sections/quicklinks/AddModal.jsx
@ -1,20 +1,23 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';

 import { useState, memo } from 'react';
-import PropTypes from 'prop-types';
 import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
-import Tooltip from 'components/helpers/tooltip/Tooltip';
+import { Tooltip } from 'components/Elements';

 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
  const [name, setName] = useState(edit ? editData.name : '');
  const [url, setUrl] = useState(edit ? editData.url : '');
-  const [icon, setIcon] = useState(edit ? editData.url : '');
+  const [icon, setIcon] = useState(edit ? editData.icon : '');

  return (
-    <div className="smallModal" style={{ width: '260px' }}>
+    <div className="addLinkModal">
      <div className="shareHeader">
-        <span className="title">{variables.getMessage('widgets.quicklinks.new')}</span>
+        <span className="title">
+          {edit
+            ? variables.getMessage('widgets.quicklinks.edit')
+            : variables.getMessage('widgets.quicklinks.new')}
+        </span>
        <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
          <div className="close" onClick={() => closeModal()}>
            <MdClose />
@ -27,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}
@ -43,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={{
@ -60,6 +66,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
              height: '16px',
              fontSize: '15px',
            }}
+            className="btn-settings"
            onClick={() => addLink(name, url, icon)}
          >
            <MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}
@ -70,14 +77,5 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
  );
 }

-AddModal.propTypes = {
-  urlError: PropTypes.string.isRequired,
-  iconError: PropTypes.string.isRequired,
-  addLink: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  edit: PropTypes.bool.isRequired,
-  editData: PropTypes.object.isRequired,
-  editLink: PropTypes.func.isRequired,
-};
-
-export default memo(AddModal);
+const MemoizedAddModal = memo(AddModal);
+export { MemoizedAddModal as default, MemoizedAddModal as AddModal };
--- a/src/components/Elements/AddModal/index.jsx
+++ b/src/components/Elements/AddModal/index.jsx
@ -0,0 +1 @@
+export * from './AddModal';
--- a/src/components/Elements/Button/Button.jsx
+++ b/src/components/Elements/Button/Button.jsx
@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import Tooltip from 'components/Elements/Tooltip/Tooltip';
+
+const Button = forwardRef(
+  (
+    { icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey },
+    ref,
+  ) => {
+    let className;
+
+    switch (type) {
+      case 'settings':
+        className = 'btn-settings';
+        break;
+      case 'secondary':
+        className = 'btn-secondary';
+        break;
+      case 'icon':
+        className = 'btn-icon';
+        break;
+      case 'navigation':
+        className = 'btn-navigation';
+        break;
+      case 'collection':
+        className = 'btn-collection';
+        break;
+      default:
+        className = 'btn-default';
+    }
+
+    if (iconPlacement === 'right') {
+      className += ' flowReverse';
+    }
+
+    if (active) {
+      className += ` ${className}-active`;
+    }
+
+    const button = (
+      <button className={className} onClick={onClick} ref={ref} disabled={disabled}>
+        {icon}
+        {label}
+      </button>
+    );
+
+    return type === 'icon' ? (
+      <Tooltip title={tooltipTitle} key={tooltipKey}>
+        {button}
+      </Tooltip>
+    ) : (
+      button
+    );
+  },
+);
+
+export { Button as default, Button };
--- a/src/components/Elements/Button/index.jsx
+++ b/src/components/Elements/Button/index.jsx
@ -0,0 +1 @@
+export * from './Button';
--- a/src/components/Elements/MainModal/Main.jsx
+++ b/src/components/Elements/MainModal/Main.jsx
@ -1,23 +1,19 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { Suspense, lazy, useState, memo } from 'react';
-import PropTypes from 'prop-types';
-
 import { MdClose } from 'react-icons/md';

 import './scss/index.scss';
-import Tooltip from 'components/helpers/tooltip/Tooltip';
-
-// Lazy load all the tabs instead of the modal itself
-const Settings = lazy(() => import('./tabs/Settings'));
-const Addons = lazy(() => import('./tabs/Addons'));
-const Marketplace = lazy(() => import('./tabs/Marketplace'));
+import { Tooltip } from 'components/Elements';
+const Settings = lazy(() => import('../../../features/misc/views/Settings'));
+const Addons = lazy(() => import('../../../features/misc/views/Addons'));
+const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace'));

 const renderLoader = () => (
  <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-    <ul className="sidebar">
+    <div className="modalSidebar">
      <span className="mainTitle">Mue</span>
-    </ul>
-    <div className="tab-content" style={{ width: '100%' }}>
+    </div>
+    <div className="modalTabContent">
      <div className="emptyItems">
        <div className="emptyMessage">
          <div className="loaderHolder">
@ -31,27 +27,22 @@ const renderLoader = () => (
 );

 function MainModal({ modalClose }) {
-  const [currentTab, setCurrentTab] = useState(0);
+  const [currentTab, setCurrentTab] = useState('settings');

  const changeTab = (type) => {
-    switch (type) {
-      case 'settings':
-        setCurrentTab(<Settings changeTab={changeTab} />);
-        break;
-      case 'addons':
-        setCurrentTab(<Addons changeTab={changeTab} />);
-        break;
-      case 'marketplace':
-        setCurrentTab(<Marketplace changeTab={changeTab} />);
-        break;
-      default:
-        break;
-    }
+    setCurrentTab(type);
  };

-  if (currentTab === 0) {
-    setCurrentTab(<Settings changeTab={changeTab} />);
-  }
+  const renderTab = () => {
+    switch (currentTab) {
+      case 'addons':
+        return <Addons changeTab={changeTab} />;
+      case 'marketplace':
+        return <Marketplace changeTab={changeTab} />;
+      default:
+        return <Settings changeTab={changeTab} />;
+    }
+  };

  return (
    <div className="frame">
@ -64,13 +55,10 @@ function MainModal({ modalClose }) {
          <MdClose />
        </span>
      </Tooltip>
-      <Suspense fallback={renderLoader()}>{currentTab}</Suspense>
+      <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
    </div>
  );
 }

-MainModal.propTypes = {
-  modalClose: PropTypes.func.isRequired,
-};
-
-export default memo(MainModal);
+const MemoizedMainModal = memo(MainModal);
+export { MemoizedMainModal as default, MemoizedMainModal as MainModal };
--- a/src/components/Elements/MainModal/backend/Tab.jsx
+++ b/src/components/Elements/MainModal/backend/Tab.jsx
@ -0,0 +1,104 @@
+import variables from 'config/variables';
+import { memo, useState, useEffect } from 'react';
+import {
+  MdSettings as Settings,
+  MdWidgets as Addons,
+  MdShoppingBasket as Marketplace,
+  MdMenu as Navbar,
+  MdEmojiPeople as Greeting,
+  MdAccessAlarm as Time,
+  MdOutlineFormatQuote as Quote,
+  MdLink as QuickLinks,
+  MdDateRange as Date,
+  MdOutlineTextsms as Message,
+  MdOutlinePhoto as Background,
+  MdSearch,
+  MdCloudQueue as Weather,
+  MdFormatPaint as Appearance,
+  MdTranslate as Language,
+  MdOutlineSettings as Advanced,
+  MdBugReport as Experimental,
+  MdOutlineAssessment as Stats,
+  MdOutlineNewReleases as Changelog,
+  MdInfoOutline as About,
+  MdOutlineExtension as Added,
+  MdAddCircleOutline as Create,
+  MdViewAgenda as Overview,
+  MdCollectionsBookmark as Collections,
+} from 'react-icons/md';
+
+const iconMapping = {
+  [variables.getMessage('modals.main.marketplace.product.overview')]: <Overview />,
+  [variables.getMessage('modals.main.navbar.settings')]: <Settings />,
+  [variables.getMessage('modals.main.navbar.addons')]: <Addons />,
+  [variables.getMessage('modals.main.navbar.marketplace')]: <Marketplace />,
+  [variables.getMessage('modals.main.settings.sections.appearance.navbar.title')]: <Navbar />,
+  [variables.getMessage('modals.main.settings.sections.greeting.title')]: <Greeting />,
+  [variables.getMessage('modals.main.settings.sections.time.title')]: <Time />,
+  [variables.getMessage('modals.main.settings.sections.quicklinks.title')]: <QuickLinks />,
+  [variables.getMessage('modals.main.settings.sections.quote.title')]: <Quote />,
+  [variables.getMessage('modals.main.settings.sections.date.title')]: <Date />,
+  [variables.getMessage('modals.main.settings.sections.message.title')]: <Message />,
+  [variables.getMessage('modals.main.settings.sections.background.title')]: <Background />,
+  [variables.getMessage('modals.main.settings.sections.search.title')]: <MdSearch />,
+  [variables.getMessage('modals.main.settings.sections.weather.title')]: <Weather />,
+  [variables.getMessage('modals.main.settings.sections.appearance.title')]: <Appearance />,
+  [variables.getMessage('modals.main.settings.sections.language.title')]: <Language />,
+  [variables.getMessage('modals.main.settings.sections.advanced.title')]: <Advanced />,
+  [variables.getMessage('modals.main.settings.sections.stats.title')]: <Stats />,
+  [variables.getMessage('modals.main.settings.sections.experimental.title')]: <Experimental />,
+  [variables.getMessage('modals.main.settings.sections.changelog.title')]: <Changelog />,
+  [variables.getMessage('modals.main.settings.sections.about.title')]: <About />,
+  [variables.getMessage('modals.main.addons.added')]: <Added />,
+  [variables.getMessage('modals.main.addons.create.title')]: <Create />,
+  [variables.getMessage('modals.main.marketplace.all')]: <Addons />,
+  [variables.getMessage('modals.main.marketplace.photo_packs')]: <Background />,
+  [variables.getMessage('modals.main.marketplace.quote_packs')]: <Quote />,
+  [variables.getMessage('modals.main.marketplace.preset_settings')]: <Advanced />,
+  [variables.getMessage('modals.main.marketplace.collections')]: <Collections />,
+};
+
+function Tab({ label, currentTab, onClick, navbarTab }) {
+  const [isExperimental, setIsExperimental] = useState(true);
+
+  useEffect(() => {
+    setIsExperimental(localStorage.getItem('experimental') !== 'false');
+  }, []);
+
+  let className = navbarTab ? 'navbar-item' : 'tab-list-item';
+  if (currentTab === label) {
+    className += navbarTab ? ' navbar-item-active' : ' tab-list-active';
+  }
+
+  const icon = iconMapping[label];
+  const divider = [
+    variables.getMessage('modals.main.settings.sections.weather.title'),
+    variables.getMessage('modals.main.settings.sections.language.title'),
+    variables.getMessage('modals.main.marketplace.all'),
+    variables.getMessage('modals.main.settings.sections.experimental.title'),
+  ].includes(label);
+  const mue = [
+    variables.getMessage('modals.main.marketplace.product.overview'),
+    variables.getMessage('modals.main.addons.added'),
+    variables.getMessage('modals.main.marketplace.all'),
+  ].includes(label);
+
+  if (
+    label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
+    !isExperimental
+  ) {
+    return <hr />;
+  }
+
+  return (
+    <>
+      {mue && <span className="mainTitle">Mue</span>}
+      <button className={className} onClick={() => onClick(label)}>
+        {icon} <span>{label}</span>
+      </button>
+      {divider && <hr />}
+    </>
+  );
+}
+
+export default memo(Tab);
--- a/src/components/Elements/MainModal/backend/Tabs.jsx
+++ b/src/components/Elements/MainModal/backend/Tabs.jsx
@ -0,0 +1,121 @@
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+import {
+  MdSettings,
+  MdOutlineShoppingBasket,
+  MdOutlineExtension,
+  MdRefresh,
+  MdClose,
+} from 'react-icons/md';
+import Tab from './Tab';
+import { Button } from 'components/Elements';
+import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
+
+class Tabs extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentTab: this.props.children[0].props.label,
+      currentName: this.props.children[0].props.name,
+    };
+  }
+
+  onClick = (tab, name) => {
+    if (name !== this.state.currentName) {
+      variables.stats.postEvent('tab', `Opened ${name}`);
+    }
+
+    this.setState({
+      currentTab: tab,
+      currentName: name,
+    });
+  };
+
+  hideReminder() {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  }
+
+  render() {
+    const navbarButtons = [
+      {
+        tab: 'settings',
+        icon: <MdSettings />,
+      },
+      {
+        tab: 'addons',
+        icon: <MdOutlineExtension />,
+      },
+      {
+        tab: 'marketplace',
+        icon: <MdOutlineShoppingBasket />,
+      },
+    ];
+
+    const reminderInfo = (
+      <div
+        className="reminder-info"
+        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+      >
+        <div className="shareHeader">
+          <span className="title">
+            {variables.getMessage('modals.main.settings.reminder.title')}
+          </span>
+          <span className="closeModal" onClick={() => this.hideReminder()}>
+            <MdClose />
+          </span>
+        </div>
+        <span className="subtitle">
+          {variables.getMessage('modals.main.settings.reminder.message')}
+        </span>
+        <button onClick={() => window.location.reload()}>
+          <MdRefresh />
+          {variables.getMessage('modals.main.error_boundary.refresh')}
+        </button>
+      </div>
+    );
+
+    return (
+      <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
+        <div className="modalSidebar">
+          {this.props.children.map((tab, index) => (
+            <Tab
+              currentTab={this.state.currentTab}
+              key={index}
+              label={tab.props.label}
+              onClick={(nextTab) => this.onClick(nextTab, tab.props.name)}
+              navbarTab={this.props.navbar || false}
+            />
+          ))}
+          {reminderInfo}
+        </div>
+        <div className="modalTabContent">
+          <div className="modalNavbar">
+            {navbarButtons.map(({ tab, icon }, index) => (
+              <Button
+                type="navigation"
+                onClick={() => this.props.changeTab(tab)}
+                icon={icon}
+                label={variables.getMessage(`modals.main.navbar.${tab}`)}
+                active={this.props.current === tab}
+                key={`${tab}-${index}`}
+              />
+            ))}
+          </div>
+          {this.props.children.map((tab, index) => {
+            if (tab.props.label !== this.state.currentTab) {
+              return undefined;
+            }
+
+            return (
+              <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Tabs;
--- a/src/components/Elements/MainModal/index.jsx
+++ b/src/components/Elements/MainModal/index.jsx
@ -0,0 +1 @@
+export * from './Main';
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@ -1,7 +1,7 @@
@import 'scss/variables';
@import 'modules/sidebar';
@import 'modules/navbar';
-@import 'modules/tab-content';
+@import 'modules/modalTabContent';
@import 'modules/links';
@import 'modules/scrollbars';
@import 'settings/main';
@ -10,10 +10,7 @@
 .Overlay {
  position: fixed;
  z-index: 100;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
@ -52,13 +49,16 @@
  padding: 0.5em;
  border-radius: 12px;
  cursor: pointer;
+  transition: 0.5s;

  svg {
    font-size: 2em;
  }

  &:hover {
-    background: rgb(121 121 121 / 22.6%);
+    @include themed {
+      background: t($modal-sidebarActive);
+    }
  }
 }

@ -164,6 +164,21 @@ h5 {
  }
 }

+.headerActions {
+  display: flex;
+  flex-flow: row;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+
+  .link {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+  }
+}
+
 .marketplaceCondition {
  display: flex;
  flex-flow: row !important;
@ -244,6 +259,16 @@ h5 {
    flex-flow: row;
    align-items: center;
    gap: 25px;
+
+    svg {
+      @include themed {
+        background-image: t($slightGradient);
+        box-shadow: t($boxShadow);
+      }
+
+      padding: 15px;
+      border-radius: 100%;
+    }
  }

  .content {
--- a/src/components/Elements/MainModal/scss/marketplace/_main.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss
@ -1,7 +1,6 @@
 // this file is too long
@import 'modules/item';
@import 'modules/buttons';
-@import 'modules/featured';
@import 'modules/lightbox';
@import 'scss/variables';

@ -184,64 +183,6 @@
  }
 }

-.tags {
-  display: flex;
-  flex-flow: row;
-  flex-wrap: wrap;
-  gap: 15px;
-  align-items: center;
-}
-
-.tag {
-  padding: 2px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  display: grid;
-  place-items: center;
-
-  @include themed {
-    background: t($modal-sidebar);
-    box-shadow: 0 0 0 3px t($modal-sidebarActive);
-
-    span {
-      &::before {
-        content: '#';
-        color: t($subColor);
-        margin-right: 5px;
-      }
-    }
-
-    &:hover {
-      background: t($modal-sidebarActive);
-    }
-  }
-}
-
-.moreTag {
-  padding: 2px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  display: grid;
-  place-items: center;
-
-  @include themed {
-    background: t($modal-sidebar);
-    box-shadow: 0 0 0 3px t($modal-sidebarActive);
-
-    span {
-      &::before {
-        content: '+';
-        color: t($subColor);
-        margin-right: 5px;
-      }
-    }
-
-    &:hover {
-      background: t($modal-sidebarActive);
-    }
-  }
-}
-
 .emptyItems {
  width: 100%;
  height: 100%;
@ -255,6 +196,15 @@
  grid-gap: 5px;
  padding: 50px;

+  .title,
+  svg {
+    margin: 10px;
+  }
+
+  svg {
+    font-size: 70px;
+  }
+
  @include themed {
    .sideloadIcon {
      font-size: 50px;
@ -346,49 +296,12 @@ p.author {
  }
 }

-.itemWarning {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  @include themed {
-    background: t($modal-sidebar);
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
-    border-radius: t($borderRadius);
-    padding: 15px;
-  }
-
-  .topRow {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-  }
-
-  .subtitle {
-    text-align: justify;
-  }
-}
-
-.truncate {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
 .filter {
  display: flex;
  flex-flow: row;
-  padding: 15px;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
-  margin-top: 15px;
-
-  @include themed {
-    background: t($modal-sidebar);
-    border-radius: t($borderRadius);
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
-  }

  .MuiFormControl-root {
    margin-bottom: 10px;
@ -445,24 +358,6 @@ p.author {
      color: #ccc !important;
    }
  }
-
-  .addAllButton {
-    margin: 0.5rem;
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    padding: 1px 12px;
-    backdrop-filter: blur(16px) saturate(180%) !important;
-    background-color: rgb(255 255 255 / 10%) !important;
-    border: 1px solid rgb(209 213 219 / 30%) !important;
-    color: #fff !important;
-
-    &:hover {
-      backdrop-filter: blur(16px) saturate(180%) !important;
-      background-color: rgb(17 25 40 / 20%) !important;
-      border: 1px solid rgb(255 255 255 / 12.5%) !important;
-    }
-  }
 }

 .collection {
@ -499,58 +394,6 @@ p.author {
  .items {
    justify-content: center;
  }
-
-  button.collectionButton,
-  a.collectionButton {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    padding: 1px 12px;
-    backdrop-filter: blur(16px) saturate(180%);
-    background-color: rgb(255 255 255 / 10%);
-    border: 1px solid rgb(209 213 219 / 30%);
-    color: #fff;
-
-    &:hover {
-      backdrop-filter: blur(16px) saturate(180%);
-      background-color: rgb(17 25 40 / 20%);
-      border: 1px solid rgb(255 255 255 / 12.5%);
-    }
-  }
-}
-
-a.collectionButton {
-  height: 40px;
-  text-decoration: none;
-
-  @include themed {
-    border-radius: t($borderRadius);
-  }
-}
-
-.smallBanner {
-  button {
-    padding: 0 15px;
-  }
-
-  display: flex;
-  justify-content: space-between;
-  padding: 15px;
-  margin-top: 15px;
-  align-items: center;
-
-  @include themed {
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
-    border-radius: t($borderRadius);
-    background: t($modal-sidebar);
-  }
-
-  .content {
-    display: flex;
-    flex-flow: column;
-    gap: 15px;
-    max-width: 250px;
-  }
 }

 .marketplaceRefresh {
@ -590,15 +433,17 @@ a.collectionButton {
 }

 .inCollection {
-  background-image: linear-gradient(to left, transparent, #000),
-    url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
+  // background-image: linear-gradient(to left, transparent, #000),
+  //  url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
  display: flex;
  flex-flow: column;
  gap: 15px;
  padding: 15px;
+  margin-top: 15px;

  @include themed {
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
+    background-color: t($modal-secondaryColour);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
    border-radius: t($borderRadius);
  }
 }
@ -614,3 +459,24 @@ a.collectionButton {
    font-size: 30px;
  }
 }
+
+.topAddons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+
+  .tooltip {
+    margin-right: 25px;
+  }
+
+  .mainTitle {
+    margin-bottom: 0 !important;
+  }
+}
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
@ -0,0 +1,131 @@
+.updateCheck {
+  flex-flow: row !important;
+}
+
+.btn-settings {
+  @include modal-button(standard);
+
+  display: inline;
+  margin-top: 0;
+  float: none !important;
+  padding: 0 20px;
+}
+
+.btn-secondary {
+  @include modal-button(secondary);
+
+  display: inline;
+  margin-top: 0;
+  float: none !important;
+  padding: 0 20px;
+}
+
+.btn-navigation {
+  @include modal-button(standard);
+
+  padding: 0 15px;
+
+  @include themed {
+    background: t($modal-secondaryColour) !important;
+    border-radius: t($borderRadius) !important;
+    box-shadow: t($boxShadow) !important;
+    border: 0 !important;
+
+    &:hover {
+      background: t($modal-sidebarActive) !important;
+    }
+  }
+
+  &:hover {
+    svg {
+      background: var(--tab-active);
+    }
+
+    color: var(--modal-text);
+  }
+
+  span,
+  svg {
+    font-size: 1.1em !important;
+  }
+
+  svg {
+    font-size: 1.2em !important;
+    color: var(--photo-info);
+  }
+}
+
+/* safari fix */
+@supports (-webkit-hyphens: none) {
+  .btn-navigation {
+    display: inline-block !important;
+  }
+}
+
+.btn-navigation-active {
+  @include themed {
+    background: t($modal-sidebarActive) !important;
+  }
+}
+
+.btn-collection {
+  padding: 1px 12px;
+  backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgb(255 255 255 / 10%);
+  border: 1px solid rgb(209 213 219 / 30%);
+  color: #fff;
+  border-radius: 12px;
+  height: 40px;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  justify-content: center;
+  gap: 20px;
+  transition: 0.5s;
+  cursor: pointer;
+
+  &:hover {
+    backdrop-filter: blur(16px) saturate(180%);
+    background-color: rgb(17 25 40 / 20%);
+    border: 1px solid rgb(255 255 255 / 12.5%);
+  }
+
+  &:active {
+    @include themed {
+      background: t($modal-sidebarActive);
+      box-shadow: 0 0 0 1px t($color);
+    }
+  }
+
+  &:focus {
+    @include themed {
+      background: t($modal-sidebarActive);
+      box-shadow: 0 0 0 1px t($color);
+    }
+  }
+
+  &:disabled {
+    @include themed {
+      background: t($modal-sidebarActive);
+      cursor: not-allowed;
+    }
+  }
+}
+
+a.btn-collection {
+  height: 40px;
+  text-decoration: none;
+
+  @include themed {
+    border-radius: t($borderRadius);
+  }
+}
+
+.flowReverse {
+  flex-flow: row-reverse !important;
+}
+
+.btn-icon {
+  @include modal-button(standard);
+}
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
@ -0,0 +1,84 @@
+.side {
+  float: right;
+  margin-left: 20px;
+}
+
+p.description {
+  margin-top: 0;
+  max-width: 800px;
+}
+
+.moreInfo {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  width: calc(100% - 30px);
+  gap: 25px;
+
+  .items {
+    margin-top: 0 !important;
+  }
+
+  .item {
+    flex: 1 0 40% !important;
+  }
+
+  .infoItem {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 15px;
+    flex: 1 0 44%;
+
+    svg {
+      @include themed {
+        background-image: t($slightGradient);
+      }
+
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 20px;
+      border-radius: 100%;
+    }
+
+    .text {
+      display: flex;
+      flex-flow: column;
+    }
+  }
+
+  .header {
+    text-transform: uppercase;
+
+    @include themed {
+      color: t($subColor);
+    }
+  }
+
+  span {
+    @include themed {
+      color: t($color);
+    }
+  }
+
+  @include themed {
+    background: t($modal-secondaryColour);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    border-radius: t($borderRadius);
+    padding: 15px;
+  }
+}
+
+.showMoreItems {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.marketplaceDescription {
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+}
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_lightbox.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_lightbox.scss
--- a/src/components/Elements/MainModal/scss/modules/_links.scss
+++ b/src/components/Elements/MainModal/scss/modules/_links.scss
--- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
+++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
@ -1,9 +1,11 @@
@import 'scss/variables';

-.tab-content {
-  button {
+.modalTabContent {
+  width: 100% !important;
+
+  /* button {
    @include modal-button(standard);
-  }
+  } */

  @include themed {
    padding: 1rem 3rem 3rem;
@ -25,9 +27,10 @@
      align-items: center;
      min-height: 100px;
      justify-content: space-between;
+      transition: 0.4s ease-in-out;

      /* border-top: 1px solid #ccc; */
-      border-bottom: 1px solid #ccc;
+      border-bottom: 1px solid #676767;
      padding-top: 1rem;
      padding-bottom: 1rem;

@ -49,30 +52,36 @@

        button {
          margin-top: 10px;
-          width: 283px;
+        }
+
+        .link {
+          margin-top: 10px;
+          display: flex;
+          flex-flow: row;
+          gap: 15px;
+          align-items: center;
        }
      }
    }
  }
 }

-.activityButtons {
-  justify-content: space-between !important;
-  align-items: flex-end !important;
-  align-content: space-between !important;
-  flex-flow: row wrap !important;
-
-  button:not(:first-child) {
-    width: 40% !important;
-    height: 99px !important;
-    flex-flow: column-reverse !important;
+.resetDataButtonsLayout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;  
+  
+  :nth-child(1) {
+    grid-column: span 2;
  }

  button {
    @include modal-button(standard);
+    padding: 5px 10px 5px 10px;
  }
 }

+
 table {
  border-collapse: separate;

@ -139,6 +148,12 @@ table {
  padding: 25px;
  justify-content: space-between;

+  @include themed {
+    background: t($modal-sidebar);
+    border-radius: t($borderRadius);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+  }
+
  div:nth-child(1) {
    display: flex;
    flex-flow: row;
@ -147,15 +162,14 @@ table {
  }

  .icon {
-    border-radius: 100%;
-    display: grid;
-    place-items: center;
-    padding: 15px;
-    font-size: 25px;
-
    @include themed {
-      background: t($modal-sidebarActive);
+      background-image: t($slightGradient);
+      box-shadow: t($boxShadow);
    }
+
+    padding: 15px;
+    border-radius: 100%;
+    font-size: 25px;
  }

  .messageText {
@ -180,11 +194,6 @@ table {
  .messageAction {
    float: right;
  }
-
-  @include themed {
-    background: t($modal-sidebar);
-    border-radius: t($borderRadius);
-  }
 }

 .messagesContainer {
@ -192,3 +201,46 @@ table {
  flex-flow: column;
  gap: 25px;
 }
+
+.eventDateSelection {
+  display: flex !important;
+  flex-flow: row !important;
+  gap: 5px !important;
+  text-align: center !important;
+  @include themed() {
+    background: t($modal-sidebar);
+    box-shadow: t($boxShadow);
+    color: t($color) !important;
+  }
+  hr {
+    height: 100%;
+    margin-right: 5px;
+    @include themed {
+      border-color: t($modal-secondaryColour);
+    }
+  }
+  text-align: center;
+  border-radius: 12px;
+  height: 40px;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  justify-content: center;
+  gap: 20px;
+  transition: 0.5s;
+  cursor: pointer;
+  border: 0;
+  padding-left: 10px;
+  padding-right: 5px;
+  input[type='tel'] {
+    background: none;
+    outline: none;
+    border: none;
+    max-width: 20px;
+    text-align: center;
+    @include themed {
+      color: t($color) !important;
+    }
+  }
+}
--- a/src/components/Elements/MainModal/scss/modules/_navbar.scss
+++ b/src/components/Elements/MainModal/scss/modules/_navbar.scss
@ -0,0 +1,12 @@
+#modal {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.modalNavbar {
+  display: flex;
+  flex-flow: row;
+  gap: 25px;
+  margin-bottom: 1rem;
+}
--- a/src/components/Elements/MainModal/scss/modules/_scrollbars.scss
+++ b/src/components/Elements/MainModal/scss/modules/_scrollbars.scss
--- a/src/components/Elements/MainModal/scss/modules/_sidebar.scss
+++ b/src/components/Elements/MainModal/scss/modules/_sidebar.scss
@ -1,18 +1,17 @@
@import 'scss/variables';

-.sidebar {
+.modalSidebar {
  @include themed {
    top: 0;
    left: 0;
    position: sticky;
    margin: 0;
-    padding: 0;
+    padding: 0 5px;
    background: t($modal-sidebar);
    border-radius: 12px 0 0 12px;
-    overflow-y: auto;
+    overflow: hidden auto;
    height: 80vh;
    min-width: 250px;
-    overflow-x: hidden;

    .mainTitle {
      text-align: center;
@ -73,3 +72,8 @@
    }
  }
 }
+
+.css-j204z7-MuiFormControlLabel-root {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
--- a/src/components/Elements/MainModal/scss/settings/_main.scss
+++ b/src/components/Elements/MainModal/scss/settings/_main.scss
@ -1,9 +1,9 @@
-@import 'modules/resetmodal';
@import 'scss/variables';
@import 'modules/material-ui';
@import 'modules/tabs/about';
@import 'modules/tabs/changelog';
@import 'modules/tabs/order';
+@import 'modules/tabs/stats';

 input {
  /* colour picker */
@ -42,10 +42,6 @@ input {
    vertical-align: middle;
    background: none;

-    &::-moz-color-swatch-wrapper {
-      padding: 0;
-    }
-
    &::-moz-color-swatch {
      border: none;
      border-radius: 100%;
@ -55,10 +51,11 @@ input {
  /* date picker */
  &[type='date'] {
    width: 260px;
+    flex-flow: column;

    @include themed {
      background: t($modal-sidebar);
-      border: 3px solid t($modal-sidebarActive);
+      border: 1px solid t($modal-sidebarActive);
      color: t($color);
    }

@ -132,139 +129,18 @@ h4 {
  }
 }

-.stats {
-  display: flex;
-  flex-flow: column;
-  gap: 30px;
-  width: 100%;
-
-  .rightPanel {
-    .statIcon {
-      display: flex;
-      justify-content: center;
-      margin-bottom: 30px;
-    }
-    .statGrid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      grid-gap: 10px;
-      div {
-        display: flex;
-        flex-flow: column;
-      }
-    }
-
-    .subtitle {
-      text-transform: capitalize;
-    }
-
-    span {
-      font-size: 20px;
-    }
-  }
-}
-
-.breadcrumb {
-  display: flex;
-  flex-flow: row;
-  padding-top: 20px;
-  gap: 10px;
-  align-items: center;
-
-  .settingsReturn {
-    border-radius: 12px;
-    cursor: pointer;
-    padding: 4px;
-
-    svg {
-      font-size: 2em;
-    }
-
-    &:hover {
-      background: rgb(121 121 121 / 22.6%);
-    }
-  }
-
-  .returnButton {
-    display: grid;
-    place-items: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
-    cursor: pointer;
-    margin-right: 25px;
-
-    svg {
-      font-size: 2em;
-    }
-
-    &:hover {
-      background: rgb(121 121 121 / 22.6%);
-    }
-  }
-}
-
-.achievements {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: 10px;
-}
-
-.achievement {
-  padding: 20px 10px;
-  display: flex;
-  flex-flow: row !important;
-  align-items: center;
-
-  @include themed {
-    background: t($modal-secondaryColour);
-    border: 1px solid t($modal-sidebarActive);
-    border-radius: t($borderRadius);
-    gap: 10px;
-  }
-
-  svg {
-    font-size: 20px !important;
-    padding: 15px;
-    border-radius: 100%;
-
-    @include themed {
-      background: t($modal-sidebarActive);
-    }
-  }
-}
-
-.statSection.rightPanel {
-  padding: 25px;
-
-  @include themed {
-    border-radius: t($borderRadius);
-    background: t($modal-secondaryColour);
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
-
-    svg {
-      font-size: 50px;
-      color: t($subColor);
-    }
-  }
-}
-
-.achievementContent {
-  display: flex;
-  flex-flow: column;
-  gap: 2px;
-
-  span:first-child {
-    font-weight: bold;
-    font-size: 15px;
-  }
-  .subtitle {
-    font-size: 13px !important;
-  }
-}
-
 .customcss textarea {
  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco,
    'Courier New', Courier, monospace !important;
 }
+
+.preferences {
+  transition: 0.4s ease-in-out;
+}
+
+.preferencesInactive {
+  opacity: 0.5;
+  pointer-events: none;
+  transition: 0.4s ease-in-out;
+}
--- a/src/components/Elements/MainModal/scss/settings/modules/_material-ui.scss
+++ b/src/components/Elements/MainModal/scss/settings/modules/_material-ui.scss
@ -170,3 +170,12 @@ legend,

  text-transform: capitalize;
 }
+
+.MuiChip-root {
+  text-transform: capitalize;
+
+  @include themed {
+    background: t($modal-sidebarActive) !important;
+    color: t($color) !important;
+  }
+}
--- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss
+++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss
@ -47,3 +47,9 @@
    }
  }
 }
+
+.aboutText {
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+}
--- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss
+++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss
@ -0,0 +1,23 @@
+.updateChangelog {
+  max-width: 75%;
+  margin-top: 15px;
+  white-space: pre-wrap;
+
+  a {
+    color: var(--modal-link);
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.changelogtab {
+  .mainTitle {
+    margin: 0 !important;
+  }
+
+  img {
+    max-width: 95%;
+  }
+}
--- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_order.scss
+++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_order.scss
@ -1,14 +1,15 @@
@import 'scss/variables';

 .sortableItem {
+  cursor: move;
+  width: 200px;
+  z-index: 999 !important;
+  padding: 15px;
+  margin-bottom: 10px;
+  font-size: 1.325rem;
+
  @include themed {
-    padding: 15px;
-    margin-bottom: 10px;
-    font-size: 1.325rem;
    color: t($color) !important;
-    cursor: move;
-    width: 200px;
-    z-index: 999 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
--- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss
+++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss
@ -0,0 +1,135 @@
+.stats {
+  display: flex;
+  flex-flow: column;
+  gap: 30px;
+  width: 100%;
+
+  .rightPanel {
+    .statIcon {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 30px;
+    }
+
+    .statGrid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      grid-gap: 10px;
+
+      div {
+        display: flex;
+        flex-flow: column;
+      }
+    }
+
+    .subtitle {
+      text-transform: capitalize;
+    }
+
+    span {
+      font-size: 20px;
+    }
+  }
+}
+
+.achievements {
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+}
+
+.achievementsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 10px;
+}
+
+.achievement {
+  padding: 20px 10px;
+  display: flex;
+  flex-flow: row !important;
+  align-items: center;
+
+  @include themed {
+    background: t($modal-secondaryColour);
+    border: 1px solid t($modal-sidebarActive);
+    border-radius: t($borderRadius);
+    gap: 10px;
+  }
+
+  .timestamp {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    @include themed {
+      color: t($subColor);
+    }
+  }
+
+  .achievementTitle {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  svg.trophy {
+    font-size: 20px !important;
+    @include themed {
+      background-image: t($slightGradient);
+      box-shadow: t($boxShadow);
+    }
+
+    padding: 15px;
+    border-radius: 100%;
+  }
+
+  svg.trophyLocked {
+    font-size: 20px !important;
+    @include themed {
+      background-image: t($modal-sidebarActive);
+      box-shadow: t($boxShadow);
+    }
+
+    padding: 15px;
+    border-radius: 100%;
+  }
+}
+
+.statSection.rightPanel {
+  padding: 25px;
+
+  @include themed {
+    border-radius: t($borderRadius);
+    background: t($modal-secondaryColour);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+
+    svg {
+      font-size: 50px;
+      color: t($subColor);
+    }
+  }
+}
+
+.achievementContent {
+  display: flex;
+  flex-flow: column;
+  gap: 2px;
+
+  .subtitle {
+    font-size: 13px !important;
+  }
+}
+
+.statsTopBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  button {
+    margin-bottom: 15px;
+    flex-flow: row !important;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@ -1,9 +1,8 @@
 import { memo } from 'react';
-import PropTypes from 'prop-types';
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
-import { setDefaultSettings } from 'modules/helpers/settings';
-import Tooltip from 'components/helpers/tooltip/Tooltip';
+import { setDefaultSettings } from 'utils/settings';
+import { Tooltip, Button } from 'components/Elements';

 function ResetModal({ modalClose }) {
  const reset = () => {
@ -33,21 +32,13 @@ function ResetModal({ modalClose }) {
        {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.information')}
      </span>
      <div className="resetFooter">
-        <button className="textButton" onClick={modalClose}>
-          <MdClose />
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        </button>
-        <button onClick={() => reset()}>
-          <MdRestartAlt />
-          {variables.getMessage('modals.main.settings.buttons.reset')}
-        </button>
+        <Button type="secondary" onClick={modalClose} icon={<MdClose />} label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')} />
+        <Button type="settings" onClick={() => reset()} icon={<MdRestartAlt />} label={variables.getMessage('modals.main.settings.buttons.reset')} />
      </div>
    </div>
  );
 }

-ResetModal.propTypes = {
-  modalClose: PropTypes.func.isRequired,
-};
+const MemoizedResetModal = memo(ResetModal);

-export default memo(ResetModal);
+export { MemoizedResetModal as default, MemoizedResetModal as ResetModal };
--- a/src/components/Elements/ResetModal/index.jsx
+++ b/src/components/Elements/ResetModal/index.jsx
@ -0,0 +1 @@
+export * from './ResetModal';
--- a/src/components/Elements/ShareModal/ShareModal.jsx
+++ b/src/components/Elements/ShareModal/ShareModal.jsx
@ -1,11 +1,10 @@
 import { memo } from 'react';
-import PropTypes from 'prop-types';
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { MdClose, MdEmail, MdContentCopy } from 'react-icons/md';
 import { FaTwitter, FaFacebookF } from 'react-icons/fa';
 import { AiFillWechat } from 'react-icons/ai';
 import { SiTencentqq } from 'react-icons/si';
-import Tooltip from '../tooltip/Tooltip';
+import Tooltip from '../Tooltip/Tooltip';
 import { toast } from 'react-toastify';

 import './sharemodal.scss';
@ -104,7 +103,7 @@ function ShareModal({ modalClose, data }) {
          <button
            onClick={() =>
              window
-                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
+                .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
                .focus()
            }
          >
@ -124,9 +123,6 @@ function ShareModal({ modalClose, data }) {
  );
 }

-ShareModal.propTypes = {
-  modalClose: PropTypes.func.isRequired,
-  data: PropTypes.string.isRequired,
-};
+const MemoizedSharemodal = memo(ShareModal);

-export default memo(ShareModal);
+export { MemoizedSharemodal as default, MemoizedSharemodal as ShareModal };
--- a/src/components/Elements/ShareModal/index.jsx
+++ b/src/components/Elements/ShareModal/index.jsx
@ -0,0 +1 @@
+export * from './ShareModal';
--- a/src/components/Elements/ShareModal/sharemodal.scss
+++ b/src/components/Elements/ShareModal/sharemodal.scss
@ -18,12 +18,6 @@
    flex-flow: row;
    justify-content: flex-end;
    gap: 20px;
-
-    button {
-      gap: 20px;
-      display: flex;
-      flex-flow: row;
-    }
  }

  .textButton {
@ -46,13 +40,6 @@
    gap: 15px;
  }

-  button {
-    place-items: center;
-    display: grid;
-
-    @include basicIconButton(11px, 1.3rem, modal);
-  }
-
  .copy {
    display: flex;
    flex-flow: row;
@ -86,20 +73,6 @@
    border: none;
    outline: none;
  }
-
-  .close {
-    padding: 15px;
-    place-items: center;
-    display: grid;
-    cursor: pointer;
-
-    &:hover {
-      @include themed {
-        background: t($modal-sidebar);
-        border-radius: t($borderRadius);
-      }
-    }
-  }
 }

 .shareHeader {
@ -107,4 +80,22 @@
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
+
+  .close {
+    padding: 15px;
+    place-items: center;
+    display: grid;
+    cursor: pointer;
+    transition: 0.3s;
+
+    @include themed {
+      border-radius: t($borderRadius);
+    }
+
+    &:hover {
+      @include themed {
+        background: t($modal-sidebarActive);
+      }
+    }
+  }
 }
--- a/src/components/Elements/Tooltip/Tooltip.jsx
+++ b/src/components/Elements/Tooltip/Tooltip.jsx
@ -1,13 +1,17 @@
 import { useState, memo } from 'react';
-import PropTypes from 'prop-types';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
 import './tooltip.scss';

 function Tooltip({ children, title, style, placement, subtitle }) {
  const [showTooltip, setShowTooltip] = useState(false);
-  const { x, y, reference, floating, strategy } = useFloating({
+  const [reference, setReference] = useState(null);
+
+  const { x, y, refs, strategy } = useFloating({
    placement: placement || 'bottom',
    middleware: [flip(), offset(15), shift()],
+    elements: {
+      reference,
+    },
  });

  return (
@ -19,13 +23,13 @@ function Tooltip({ children, title, style, placement, subtitle }) {
        onMouseLeave={() => setShowTooltip(false)}
        onFocus={() => setShowTooltip(true)}
        onBlur={() => setShowTooltip(false)}
-        ref={reference}
+        ref={setReference}
      >
        {children}
      </div>
      {showTooltip && (
        <span
-          ref={floating}
+          ref={refs.setFloating}
          style={{
            position: strategy,
            top: y ?? '',
@ -43,12 +47,6 @@ function Tooltip({ children, title, style, placement, subtitle }) {
  );
 }

-Tooltip.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired,
-  style: PropTypes.object,
-  placement: PropTypes.string,
-  subtitle: PropTypes.string.isRequired,
-};
+const MemoizedTooltip = memo(Tooltip);

-export default memo(Tooltip);
+export { MemoizedTooltip as default, MemoizedTooltip as Tooltip };
--- a/src/components/Elements/Tooltip/index.jsx
+++ b/src/components/Elements/Tooltip/index.jsx
@ -0,0 +1 @@
+export * from './Tooltip';
--- a/src/components/Elements/Tooltip/tooltip.scss
+++ b/src/components/Elements/Tooltip/tooltip.scss
@ -96,52 +96,3 @@
    }
  }
 }
-
-.infoTooltipTitle {
-  min-width: 200px;
-  position: absolute;
-  z-index: 1;
-  cursor: initial;
-  user-select: none;
-  opacity: 1;
-  text-align: left;
-  padding: 25px;
-  display: flex;
-  justify-content: center;
-  flex-flow: column;
-  gap: 10px;
-
-  @include themed {
-    background-color: t($modal-background);
-    border-radius: t($borderRadius);
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
-  }
-
-  .tooltipHeader {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    gap: 25px;
-  }
-
-  .link {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
-
-  .close {
-    font-size: 20px;
-    padding: 15px;
-    place-items: center;
-    display: grid;
-    cursor: pointer;
-
-    &:hover {
-      @include themed {
-        background: t($modal-sidebar);
-        border-radius: t($borderRadius);
-      }
-    }
-  }
-}
--- a/src/components/Elements/index.jsx
+++ b/src/components/Elements/index.jsx
@ -0,0 +1,6 @@
+export * from './Button';
+export * from './Tooltip';
+export * from './ShareModal';
+export * from './AddModal';
+export * from './ResetModal';
+export * from './MainModal';
--- a/src/components/Form/Settings/Checkbox/Checkbox.jsx
+++ b/src/components/Form/Settings/Checkbox/Checkbox.jsx
@ -1,9 +1,8 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Checkbox as CheckboxUI, FormControlLabel } from '@mui/material';

-import EventBus from 'modules/helpers/eventbus';
+import EventBus from 'utils/eventbus';

 class Checkbox extends PureComponent {
  constructor(props) {
@ -59,13 +58,4 @@ class Checkbox extends PureComponent {
  }
 }

-Checkbox.propTypes = {
-  name: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-};
-
-export default Checkbox;
+export { Checkbox as default, Checkbox };
--- a/src/components/Form/Settings/Checkbox/index.jsx
+++ b/src/components/Form/Settings/Checkbox/index.jsx
@ -0,0 +1 @@
+export * from './Checkbox';
--- a/src/components/Form/Settings/ChipSelect/ChipSelect.jsx
+++ b/src/components/Form/Settings/ChipSelect/ChipSelect.jsx
@ -1,5 +1,4 @@
 import { useState, memo } from 'react';
-import PropTypes from 'prop-types';

 import Box from '@mui/material/Box';
 import OutlinedInput from '@mui/material/OutlinedInput';
@ -9,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 = [];
@ -46,7 +45,8 @@ function ChipSelect({ label, options, name }) {
        >
          {options.map((option) => (
            <MenuItem key={option.name} value={option.name}>
-              {option.name.charAt(0).toUpperCase() + option.name.slice(1)} ({option.count})
+              {option.name.charAt(0).toUpperCase() + option.name.slice(1)}{' '}
+              {option.count && `(${option.count})`}
            </MenuItem>
          ))}
        </Select>
@ -55,10 +55,5 @@ function ChipSelect({ label, options, name }) {
  );
 }

-ChipSelect.propTypes = {
-  label: PropTypes.string,
-  options: PropTypes.array,
-  name: PropTypes.string,
-};
-
-export default memo(ChipSelect);
+const MemoizedChipSelect = memo(ChipSelect);
+export { ChipSelect as default, MemoizedChipSelect as ChipSelect };
--- a/src/components/Form/Settings/ChipSelect/index.jsx
+++ b/src/components/Form/Settings/ChipSelect/index.jsx
@ -0,0 +1 @@
+export * from './ChipSelect';
--- a/src/components/Form/Settings/Dropdown/Dropdown.jsx
+++ b/src/components/Form/Settings/Dropdown/Dropdown.jsx
@ -1,15 +1,14 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent, createRef } from 'react';
-import PropTypes from 'prop-types';
 import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';

-import EventBus from 'modules/helpers/eventbus';
+import EventBus from 'utils/eventbus';

 class Dropdown extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
-      value: localStorage.getItem(this.props.name) || this.props.children[0].props.value,
+      value: localStorage.getItem(this.props.name) || this.props.items[0].value,
      title: '',
    };
    this.dropdown = createRef();
@ -63,31 +62,17 @@ class Dropdown extends PureComponent {
          ref={this.dropdown}
          key={id}
        >
-          {this.props.manual
-            ? this.props.children
-            : this.props.children.map((e, index) => {
-                return e ? (
-                  <MenuItem key={index} value={e.props ? e.props.value : ''}>
-                    {e.props ? e.props.children : ''}
-                  </MenuItem>
-                ) : null;
-              })}
+          {this.props.items.map((item) =>
+            item !== null ? (
+              <MenuItem key={id + item.value} value={item.value}>
+                {item.text}
+              </MenuItem>
+            ) : null,
+          )}
        </Select>
      </FormControl>
    );
  }
 }

-Dropdown.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  onChange: PropTypes.func,
-  noSetting: PropTypes.bool,
-  manual: PropTypes.bool,
-  value2: PropTypes.string,
-  name2: PropTypes.string,
-};
-
-export default Dropdown;
+export { Dropdown as default, Dropdown };
--- a/src/components/Form/Settings/Dropdown/index.jsx
+++ b/src/components/Form/Settings/Dropdown/index.jsx
@ -0,0 +1 @@
+export * from './Dropdown';
--- a/src/components/Form/Settings/FileUpload/FileUpload.jsx
+++ b/src/components/Form/Settings/FileUpload/FileUpload.jsx
@ -1,9 +1,8 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
-import { videoCheck } from 'modules/helpers/background/widget';
+import videoCheck from 'features/background/api/videoCheck';

 class FileUpload extends PureComponent {
  componentDidMount() {
@ -63,11 +62,4 @@ class FileUpload extends PureComponent {
  }
 }

-FileUpload.propTypes = {
-  id: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  loadFunction: PropTypes.func.isRequired,
-  accept: PropTypes.string,
-};
-
-export default FileUpload;
+export { FileUpload as default, FileUpload };
--- a/src/components/Form/Settings/FileUpload/index.jsx
+++ b/src/components/Form/Settings/FileUpload/index.jsx
@ -0,0 +1 @@
+export * from './FileUpload';
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@ -1,6 +1,5 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import {
  Radio as RadioUI,
  RadioGroup,
@ -9,8 +8,8 @@ import {
  FormLabel,
 } from '@mui/material';

-import EventBus from 'modules/helpers/eventbus';
-import { translations } from 'modules/translations';
+import EventBus from 'utils/eventbus';
+import { translations } from 'lib/translations';

 class Radio extends PureComponent {
  constructor(props) {
@ -85,19 +84,4 @@ class Radio extends PureComponent {
  }
 }

-Radio.propTypes = {
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  onChange: PropTypes.func,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  smallTitle: PropTypes.bool,
-};
-
-export default Radio;
+export { Radio as default, Radio };
--- a/src/components/Form/Settings/Radio/index.jsx
+++ b/src/components/Form/Settings/Radio/index.jsx
@ -0,0 +1 @@
+export * from './Radio';
--- a/src/components/Form/Settings/Slider/Slider.jsx
+++ b/src/components/Form/Settings/Slider/Slider.jsx
@ -1,11 +1,10 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { Slider } from '@mui/material';
 import { MdRefresh } from 'react-icons/md';

-import EventBus from 'modules/helpers/eventbus';
+import EventBus from 'utils/eventbus';

 class SliderComponent extends PureComponent {
  constructor(props) {
@ -86,16 +85,4 @@ class SliderComponent extends PureComponent {
  }
 }

-SliderComponent.propTypes = {
-  name: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  default: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-  marks: PropTypes.array,
-  element: PropTypes.string,
-  category: PropTypes.string,
-};
-
-export default SliderComponent;
+export { SliderComponent as default, SliderComponent as Slider };
--- a/src/components/Form/Settings/Slider/index.jsx
+++ b/src/components/Form/Settings/Slider/index.jsx
@ -0,0 +1 @@
+export * from './Slider';
--- a/src/components/Form/Settings/Switch/Switch.jsx
+++ b/src/components/Form/Settings/Switch/Switch.jsx
@ -1,9 +1,8 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Switch as SwitchUI, FormControlLabel } from '@mui/material';

-import EventBus from 'modules/helpers/eventbus';
+import EventBus from 'utils/eventbus';

 class Switch extends PureComponent {
  constructor(props) {
@ -21,6 +20,10 @@ class Switch extends PureComponent {
      checked: value,
    });

+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+
    variables.stats.postEvent(
      'setting',
      `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,
@ -54,12 +57,4 @@ class Switch extends PureComponent {
  }
 }

-Switch.propTypes = {
-  name: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  category: PropTypes.string,
-  element: PropTypes.string,
-  header: PropTypes.bool,
-};
-
-export default Switch;
+export { Switch as default, Switch };
--- a/src/components/Form/Settings/Switch/index.jsx
+++ b/src/components/Form/Settings/Switch/index.jsx
@ -0,0 +1 @@
+export * from './Switch';
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@ -1,10 +1,10 @@
-import variables from 'modules/variables';
+import variables from 'config/variables';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { TextField } from '@mui/material';
+import { MdRefresh } from 'react-icons/md';

-import EventBus from 'modules/helpers/eventbus';
+import EventBus from 'utils/eventbus';

 class Text extends PureComponent {
  constructor(props) {
@ -69,9 +69,11 @@ class Text extends PureComponent {
            onChange={this.handleChange}
            varient="outlined"
            InputLabelProps={{ shrink: true }}
+            placeholder={this.props.placeholder || ''}
          />
        )}
        <span className="link" onClick={this.resetItem}>
+          <MdRefresh />
          {variables.getMessage('modals.main.settings.buttons.reset')}
        </span>
      </>
@ -79,15 +81,4 @@ class Text extends PureComponent {
  }
 }

-Text.propTypes = {
-  title: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  category: PropTypes.string.isRequired,
-  default: PropTypes.string,
-  element: PropTypes.string,
-  customcss: PropTypes.bool,
-  textarea: PropTypes.bool,
-  upperCaseFirst: PropTypes.bool,
-};
-
-export default Text;
+export { Text as default, Text };
--- a/src/components/Form/Settings/Text/index.jsx
+++ b/src/components/Form/Settings/Text/index.jsx
@ -0,0 +1 @@
+export * from './Text';
--- a/src/components/Form/Settings/index.jsx
+++ b/src/components/Form/Settings/index.jsx
@ -0,0 +1,8 @@
+export * from './Checkbox';
+export * from './ChipSelect';
+export * from './Dropdown';
+export * from './FileUpload';
+export * from './Radio';
+export * from './Slider';
+export * from './Switch';
+export * from './Text';
--- a/Show More
+++ b/Show More