chore(deps-dev): bump stylelint-scss from 6.3.0 to 6.3.1 (#744)

Bumps [stylelint-scss](https://github.com/stylelint-scss/stylelint-scss) from 6.3.0 to 6.3.1.
- [Release notes](https://github.com/stylelint-scss/stylelint-scss/releases)
- [Changelog](https://github.com/stylelint-scss/stylelint-scss/blob/master/CHANGELOG.md)
- [Commits](https://github.com/stylelint-scss/stylelint-scss/compare/v6.3.0...v6.3.1)

---
updated-dependencies:
- dependency-name: stylelint-scss
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,5 +1,5 @@
 ---
-name: Bug Report
+name: Bug Report (Legacy)
 about: Report a bug to help improve Mue
 title: "[Bug]"
 labels: bug
@@ -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**

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,6 +1,6 @@
 ---
-name: Feature Request
-about: Request things to be added to mue
+name: Request a feature
+about: Request something to be implemented in the extension.
 title: "[Feature Request]"
 labels: enhancement
 assignees: ''

.github/ISSUE_TEMPLATE/issue_report.yml

@@ -0,0 +1,58 @@
+name: Report a bug
+description: Report an issue with the extension.
+title: "[Bug] Insert issue name here"
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to report a Mue issue!
+  - type: textarea
+    id: description 
+    attributes:
+      label: Description
+      description: Describe the issue you are having with the extension
+      placeholder: e.g. It does not save my settings upon editing the Greeting widget
+    validations:
+      required: true
+  - type: dropdown
+    id: version
+    attributes:
+      label: Version
+      description: What version of Mue are you running?
+      options:
+        - 7.0.0
+        - 6.0.6
+        - 6.0.5
+        - 6.0.4
+        - 6.0.3
+        - 6.0.2
+        - 6.0.1
+        - 6.0.0
+      default: 0
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browser(s) are you seeing the problem on?
+      multiple: true
+      options:
+        - Mozilla Firefox
+        - Google Chrome
+        - Naver Whale
+        - Microsoft Edge
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/mue/.github/blob/main/CODE_OF_CONDUCT.md).
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true

.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

LICENSE

@@ -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.

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>

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>

jsconfig.json

@@ -1,7 +1,9 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es6"
+    "target": "es6",
+    "baseUrl": "src"
   },
+  "include": ["src"],
   "exclude": ["node_modules"]
 }

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'),
-    });
-  }
-});

manifest/background.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) => {

manifest/chrome.json

@@ -4,7 +4,7 @@
   "default_locale": "en",
   "name": "__MSG_name__",
   "description": "__MSG_description__",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "homepage_url": "https://muetab.com",
   "action": {
     "default_icon": "icons/128x128.png"

manifest/firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Mue",
   "description": "Fast, open and free-to-use new tab page for modern browsers.",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "homepage_url": "https://muetab.com",
   "action": {
     "default_icon": "icons/128x128.png"

package.json

@@ -9,46 +9,46 @@
   "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.1.0",
+    "@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.19",
+    "@sentry/react": "^8.5.0",
+    "embla-carousel-autoplay": "8.1.3",
+    "embla-carousel-react": "8.1.3",
     "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",
+    "use-debounce": "^10.0.1"
   },
   "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.13",
+    "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.3.0",
+    "sass": "^1.77.4",
+    "stylelint": "^16.6.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-scss": "^6.3.1",
+    "vite": "5.2.12",
     "vite-plugin-progress": "^0.0.7"
   },
   "scripts": {
@@ -59,6 +59,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"
   }
 }

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');
+    }
+  });
 });

src/App.jsx

@@ -1,56 +1,75 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import { useEffect, useState } from 'react';
 import { ToastContainer } from 'react-toastify';
+import Background from 'features/background/Background';
+import Widgets from 'features/misc/views/Widgets';
+import Modals from 'features/misc/modals/Modals';
+import { loadSettings, moveSettings } from 'utils/settings';
+import EventBus from 'utils/eventbus';
+import variables from 'config/variables';
 
-import Background from 'components/widgets/background/Background';
-import Widgets from 'components/widgets/Widgets';
-import Modals from 'components/modals/Modals';
+const useAppSetup = () => {
+  useEffect(() => {
+    const firstRun = localStorage.getItem('firstRun');
+    const stats = localStorage.getItem('stats');
 
-import { loadSettings, moveSettings } from 'modules/helpers/settings';
-
-import EventBus from 'modules/helpers/eventbus';
-
-export default class App extends PureComponent {
-  componentDidMount() {
-    // 4.0 -> 5.0 (the key below is only on 5.0)
-    // now featuring 5.0 -> 5.1
-    // the firstRun check was moved here because the old function was useless
-    if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) {
+    if (!firstRun || !stats) {
       moveSettings();
       window.location.reload();
     }
 
     loadSettings();
 
-    EventBus.on('refresh', (data) => {
+    const refreshHandler = (data) => {
       if (data === 'other') {
         loadSettings(true);
       }
-    });
+    };
+
+    EventBus.on('refresh', refreshHandler);
 
     variables.stats.tabLoad();
-  }
 
-  componentWillUnmount() {
-    EventBus.off('refresh');
-  }
+    return () => {
+      EventBus.off('refresh', refreshHandler);
+    };
+  }, []);
+};
 
-  render() {
-    return (
-      <>
-        {localStorage.getItem('background') === 'true' ? <Background /> : null}
-        <ToastContainer
-          position="bottom-right"
-          autoClose={localStorage.getItem('toastDisplayTime') || 2500}
-          newestOnTop={true}
-          closeOnClick
-          pauseOnFocusLoss
-        />
-        <div id="center">
-          <Widgets />
-          <Modals />
-        </div>
-      </>
-    );
-  }
-}
+const App = () => {
+  const [toastDisplayTime, setToastDisplayTime] = useState(2500);
+  const [showBackground, setShowBackground] = useState(false);
+
+  useEffect(() => {
+    const storedToastDisplayTime = localStorage.getItem('toastDisplayTime');
+    const storedBackground = localStorage.getItem('background');
+
+    if (storedToastDisplayTime) {
+      setToastDisplayTime(parseInt(storedToastDisplayTime, 10));
+    }
+
+    if (storedBackground === 'true') {
+      setShowBackground(true);
+    }
+  }, []);
+
+  useAppSetup();
+
+  return (
+    <>
+      {showBackground && <Background />}
+      <ToastContainer
+        position="top-center"
+        autoClose={toastDisplayTime}
+        newestOnTop={true}
+        closeOnClick
+        pauseOnFocusLoss
+      />
+      <div id="center">
+        <Widgets />
+        <Modals />
+      </div>
+    </>
+  );
+};
+
+export default App;

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;

src/components/Elements/AddModal/AddModal.jsx

@@ -1,20 +1,24 @@
-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';
+import { Button } 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 +31,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,41 +46,30 @@ 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={{
-              height: '16px',
-              fontSize: '15px',
-            }}
+          <Button
+            type="settings"
             onClick={() => editLink(editData, name, url, icon)}
-          >
-            <MdAddLink /> {variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
-          </button>
+            icon={<MdAddLink />}
+            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+          />
         ) : (
-          <button
-            style={{
-              height: '16px',
-              fontSize: '15px',
-            }}
+          <Button
+            type="settings"
             onClick={() => addLink(name, url, icon)}
-          >
-            <MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}
-          </button>
+            icon={<MdAddLink />}
+            label={variables.getMessage('widgets.quicklinks.add')}
+          />
         )}
       </div>
     </div>
   );
 }
 
-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 };

src/components/Elements/AddModal/index.jsx

@@ -0,0 +1 @@
+export * from './AddModal';

src/components/Elements/Button/Button.jsx

@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react';
+import Tooltip from 'components/Elements/Tooltip/Tooltip';
+
+const Button = forwardRef(
+  (
+    { icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey, href },
+    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;
+      case 'linkIconButton':
+        className = 'btn-icon';
+        break;
+      case 'linkButton':
+        className = 'btn-settings';
+        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>
+    );
+
+    const linkButton = (
+      <a className={className} onClick={onClick} ref={ref} disabled={disabled} href={href}>
+        {icon}
+        {label}
+      </a>
+    );
+
+    const linkIconButton = (
+      <Tooltip title={tooltipTitle} key={tooltipKey}>
+        <a
+          className={className}
+          onClick={onClick}
+          ref={ref}
+          disabled={disabled}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {icon}
+          {label}
+        </a>
+      </Tooltip>
+    );
+
+    switch (type) {
+      case 'linkIconButton':
+        return linkIconButton;
+      case 'linkButton':
+        return linkButton;
+      case 'icon':
+        return (
+          <Tooltip title={tooltipTitle} key={tooltipKey}>
+            {button}
+          </Tooltip>
+        );
+      default:
+        return button;
+    }
+  },
+);
+
+export { Button as default, Button };

src/components/Elements/Button/index.jsx

@@ -0,0 +1 @@
+export * from './Button';

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

src/components/Elements/MainModal/backend/Tab.jsx

@@ -0,0 +1,105 @@
+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);

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -0,0 +1,109 @@
+import variables from 'config/variables';
+import React, { useState, useEffect } 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';
+
+const Tabs = (props) => {
+  const [currentTab, setCurrentTab] = useState(props.children[0].props.label);
+  const [currentName, setCurrentName] = useState(props.children[0].props.name);
+
+  const onClick = (tab, name) => {
+    if (name !== currentName) {
+      variables.stats.postEvent('tab', `Opened ${name}`);
+    }
+
+    setCurrentTab(tab);
+    setCurrentName(name);
+  };
+
+  const hideReminder = () => {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  };
+
+  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={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">
+        {props.children.map((tab, index) => (
+          <Tab
+            currentTab={currentTab}
+            key={index}
+            label={tab.props.label}
+            onClick={(nextTab) => onClick(nextTab, tab.props.name)}
+            navbarTab={props.navbar || false}
+          />
+        ))}
+        {reminderInfo}
+      </div>
+      <div className="modalTabContent">
+        <div className="modalNavbar">
+          {navbarButtons.map(({ tab, icon }, index) => (
+            <Button
+              type="navigation"
+              onClick={() => props.changeTab(tab)}
+              icon={icon}
+              label={variables.getMessage(`modals.main.navbar.${tab}`)}
+              active={props.current === tab}
+              key={`${tab}-${index}`}
+            />
+          ))}
+        </div>
+        {props.children.map((tab, index) => {
+          if (tab.props.label !== currentTab) {
+            return undefined;
+          }
+
+          return (
+            <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

src/components/Elements/MainModal/index.jsx

@@ -0,0 +1 @@
+export * from './Main';

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;
@@ -38,6 +35,10 @@
   &:focus {
     outline: 0;
   }
+
+  .modalInfoPage {
+    user-select: text;
+  }
 }
 
 .closePositioning {
@@ -52,13 +53,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);
+    }
   }
 }
 
@@ -80,7 +84,7 @@
 
 #modal {
   height: 80vh;
-  width: clamp(60vw, 1200px, 90vw);
+  width: clamp(60vw, 1400px, 90vw);
 
   @include themed {
     background-color: t($modal-background);
@@ -162,6 +166,27 @@ h5 {
     gap: 15px;
     align-items: center;
   }
+
+  .MuiOutlinedInput-notchedOutline {
+    @include themed {
+      border-color: t($modal-sidebarActive) !important;
+    }
+  }
+}
+
+.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 {
@@ -244,6 +269,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 {

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -1,10 +1,31 @@
 // this file is too long
 @import 'modules/item';
 @import 'modules/buttons';
-@import 'modules/featured';
 @import 'modules/lightbox';
 @import 'scss/variables';
 
+.creatorItems {
+  .item {
+    flex-flow: row !important;
+  }
+
+  .item-back {
+    margin: 0 !important;
+    filter: blur(40px) saturate(180%) brightness(90%) !important;
+    height: 15px !important;
+    width: 200px !important;
+  }
+
+  .item-icon {
+    margin: 0 !important;
+  }
+
+  .card-details {
+    margin: 0 !important;
+    text-align: left;
+  }
+}
+
 .items {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -48,8 +69,8 @@
       filter: blur(60px) saturate(180%) brightness(90%);
       position: absolute;
       object-fit: cover !important;
-      height: 90px !important;
-      width: 100px !important;
+      height: 90px;
+      width: 100px;
       border-radius: 100px;
       transition: 0.5s;
       margin-top: 30px;
@@ -65,11 +86,13 @@
     }
 
     .card-details {
+      z-index: 1;
       padding: 10px;
       margin-bottom: 24px;
       display: flex;
       flex-flow: column;
       gap: 5px;
+      align-items: center;
 
       .card-title {
         font-size: 18px;
@@ -93,7 +116,7 @@
         }
 
         border-radius: 150px;
-        padding: 2px 8px;
+        padding: 2px 15px;
         background-color: rgb(255 255 255 / 10%);
         border: 1px solid rgb(209 213 219 / 30%);
       }
@@ -128,6 +151,7 @@
       width: 100%;
       max-width: 650px !important;
       word-wrap: break-word !important;
+      font-size: 16px;
     }
   }
 
@@ -136,8 +160,9 @@
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: 15px;
-    width: 25%;
-    max-height: 450px;
+    width: 30%;
+    max-width: 300px;
+    max-height: 700px;
 
     .front {
       padding: 20px;
@@ -160,6 +185,8 @@
       height: auto;
       border-radius: 12px;
       box-shadow: 0 5px 25px black;
+      aspect-ratio: 1 / 1;
+      object-fit: contain;
     }
 
     .divider {
@@ -184,64 +211,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 +224,15 @@
   grid-gap: 5px;
   padding: 50px;
 
+  .title,
+  svg {
+    margin: 10px;
+  }
+
+  svg {
+    font-size: 70px;
+  }
+
   @include themed {
     .sideloadIcon {
       font-size: 50px;
@@ -346,49 +324,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 +386,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 {
@@ -493,64 +416,16 @@ p.author {
 
     .subtitle {
       color: #ccc !important;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 5;
     }
   }
 
   .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,17 +465,24 @@ 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;
+  gap: 5px;
+  padding: 5px;
+  margin: 10px 0;
 
   @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);
   }
+
+  .title:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
 }
 
 .createYourOwn {
@@ -614,3 +496,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;
+  }
+}

src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss

@@ -0,0 +1,136 @@
+.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 {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-content: center;
+
+  @include modal-button(standard);
+}

src/components/Elements/MainModal/scss/marketplace/modules/_item.scss

@@ -0,0 +1,177 @@
+.side {
+  float: right;
+  margin-left: 20px;
+}
+
+p.description {
+  margin-top: 0;
+  max-width: 800px;
+}
+
+.moreInfo {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+
+  .items {
+    margin-top: 0 !important;
+  }
+
+  .item {
+    flex: 1 0 40% !important;
+  }
+
+  .infoItem {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 15px;
+
+    svg {
+      @include themed {
+        background-image: t($slightGradient);
+        box-shadow: t($boxShadow);
+      }
+
+      font-size: 18px;
+      padding: 7px;
+      border-radius: 100%;
+    }
+
+    .text {
+      display: flex;
+      flex-flow: column;
+      font-size: medium;
+    }
+  }
+
+  .header {
+    // text-transform: uppercase;
+    font-size: small;
+
+    @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;
+  }
+}
+
+.subHeader {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  gap: 25px;
+
+  .itemWarning {
+    padding: 10px 20px;
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+
+    .text {
+      display: flex;
+      flex-flow: column;
+    }
+
+    svg {
+      @include themed {
+        background-image: t($slightGradient);
+        box-shadow: t($boxShadow);
+      }
+
+      padding: 7px;
+      border-radius: 100%;
+    }
+
+    @include themed {
+      background: t($modal-sidebar);
+      border-radius: t($borderRadius);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    }
+  }
+
+  .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);
+        box-shadow: t($boxShadow);
+      }
+
+      font-size: 18px;
+      padding: 7px;
+      border-radius: 100%;
+    }
+
+    .text {
+      font-size: medium;
+      display: flex;
+      flex-flow: column;
+    }
+  }
+
+  .header {
+    font-size: small;
+
+    @include themed {
+      color: t($subColor);
+    }
+  }
+
+  span {
+    @include themed {
+      color: t($color);
+    }
+  }
+}
+
+.showMoreItems {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.marketplaceDescription {
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+
+  .subtitle {
+    user-select: text !important;
+  }
+}
+
+.moreFromCurator {
+  margin-top: 50px;
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+}

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,66 +52,88 @@
 
         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;
+.resetDataButtonsLayout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
 
-  button:not(:first-child) {
-    width: 40% !important;
-    height: 99px !important;
-    flex-flow: column-reverse !important;
+  :nth-child(1) {
+    grid-column: span 2;
   }
 
   button {
     @include modal-button(standard);
+
+    padding: 5px 10px;
   }
 }
 
 table {
   border-collapse: separate;
+  border-radius: 10px;
+  margin-top: 20px;
 
   @include themed {
-    border-radius: t($borderRadius);
-    margin-top: 20px;
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    padding: 0;
+    border: 0;
+    outline: none;
+  }
 
-    tr:first-child {
-      background: t($modal-sidebarActive);
-
-      th {
-        padding: 1rem;
-      }
-    }
-
-    td {
-      padding: 15px;
-    }
-
-    tr {
-      th:last-child {
-        display: grid;
-        place-items: center;
-      }
-    }
-
-    ::placeholder {
+  tr:first-child {
+    @include themed {
+      border-radius: t($borderRadius);
       color: t($subColor);
     }
 
-    tr:not(:first-child) {
-      background: t($modal-sidebar);
+    letter-spacing: 2px;
 
-      textarea {
-        width: 90%;
-        margin: 10px;
+    th {
+      padding: 20px;
+    }
+  }
+
+  td {
+    padding: 15px;
+  }
+
+  tr {
+    th:last-child {
+      display: grid;
+      place-items: center;
+    }
+  }
+
+  ::placeholder {
+    @include themed {
+      color: t($subColor);
+    }
+  }
+
+  tr:not(:first-child) {
+    @include themed {
+      background: t($modal-secondaryColour);
+    }
+
+    textarea {
+      width: 90%;
+      margin: 10px;
+
+      @include themed {
         color: t($color);
       }
     }
@@ -139,6 +164,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 +178,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 +210,6 @@ table {
   .messageAction {
     float: right;
   }
-
-  @include themed {
-    background: t($modal-sidebar);
-    border-radius: t($borderRadius);
-  }
 }
 
 .messagesContainer {
@@ -192,3 +217,48 @@ 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);
+    }
+  }
+
+  border-radius: 12px;
+  height: 40px;
+  font-size: 1rem;
+  align-items: center;
+  justify-content: center;
+  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;
+    }
+  }
+}

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;
+}

src/components/Elements/MainModal/scss/modules/_scrollbars.scss

@@ -11,9 +11,21 @@
 }
 
 ::-webkit-scrollbar-thumb {
+  border-radius: 25px;
+
   @include themed {
     background: t($modal-sidebarActive);
   }
 
-  border-radius: 12px;
+  &:hover {
+    @include themed {
+      background: t($btn-backgroundHover);
+    }
+  }
+
+  &:active {
+    @include themed {
+      background: t($btn-backgroundHover);
+    }
+  }
 }

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;
+}

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;
+}

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;
+  }
+}

src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss

@@ -7,7 +7,7 @@
 .aboutLogo {
   height: 100px;
   width: auto;
-  margin: calc(1rem - 15px) 0 1rem 0;
+  margin: calc(1rem - 15px) 0 1rem;
   align-self: center;
 }
 
@@ -17,7 +17,7 @@
   gap: 15px;
 
   a {
-    @include basicIconButton(11px, 1.2rem, modal);
+    text-decoration: none;
   }
 }
 
@@ -47,3 +47,9 @@
     }
   }
 }
+
+.aboutText {
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+}

src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss

@@ -0,0 +1,24 @@
+.updateChangelog {
+  max-width: 75%;
+  margin-top: 15px;
+  white-space: pre-wrap;
+  font-size: 18px;
+
+  a {
+    color: var(--modal-link);
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.changelogtab {
+  .mainTitle {
+    margin: 0 !important;
+  }
+
+  img {
+    max-width: 95%;
+  }
+}

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;

src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss

@@ -0,0 +1,138 @@
+.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;
+  }
+}

src/components/Elements/ResetModal/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,23 @@ 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 };

src/components/Elements/ResetModal/index.jsx

@@ -0,0 +1 @@
+export * from './ResetModal';

src/components/Elements/ShareModal/ShareModal.jsx

@@ -0,0 +1,130 @@
+import { memo } from 'react';
+import variables from 'config/variables';
+import { MdClose, MdEmail, MdContentCopy } from 'react-icons/md';
+import { FaFacebookF } from 'react-icons/fa';
+import { AiFillWechat } from 'react-icons/ai';
+import { SiTencentqq, SiX } from 'react-icons/si';
+import Tooltip from '../Tooltip/Tooltip';
+import { toast } from 'react-toastify';
+
+import { Button } from 'components/Elements';
+
+import './sharemodal.scss';
+
+function ShareModal({ modalClose, data }) {
+  if (data.startsWith('https://cdn.')) {
+    data = {
+      url: data,
+      name: 'this image',
+    };
+  } else if (data.startsWith('"')) {
+    data = {
+      url: data,
+      name: 'this quote',
+    };
+  } else {
+    data = {
+      url: data,
+      name: 'this marketplace item',
+    };
+  }
+
+  const copyLink = () => {
+    navigator.clipboard.writeText(data.url);
+    toast(
+      data.startsWith('"')
+        ? variables.getMessage('toasts.quote')
+        : variables.getMessage('toasts.link_copied'),
+    );
+  };
+
+  return (
+    <div className="smallModal">
+      <div className="shareHeader">
+        <span className="title">{variables.getMessage('widgets.quote.share')}</span>
+        <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
+          <div className="close" onClick={modalClose}>
+            <MdClose />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="shareButtons">
+        <Button
+          onClick={() =>
+            window
+              .open(
+                `https://x.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<SiX />}
+          tooltipTitle="X (Twitter)"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
+              .focus()
+          }
+          icon={<FaFacebookF />}
+          tooltipTitle="Facebook"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(
+                'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
+                  data.name +
+                  'on Mue: ' +
+                  data.url,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<MdEmail />}
+          tooltipTitle="Email"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(
+                `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<AiFillWechat />}
+          tooltipTitle="WeChat"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
+              .focus()
+          }
+          icon={<SiTencentqq />}
+          tooltipTitle="Tencent QQ"
+          type="icon"
+        />
+      </div>
+      <div className="copy">
+        <input type="text" value={data.url} className="left field" readOnly />
+        <Button
+          onClick={() => copyLink()}
+          icon={<MdContentCopy />}
+          tooltipTitle={variables.getMessage('modals.share.copy_link')}
+          type="icon"
+        />
+      </div>
+    </div>
+  );
+}
+
+const MemoizedSharemodal = memo(ShareModal);
+
+export { MemoizedSharemodal as default, MemoizedSharemodal as ShareModal };

src/components/Elements/ShareModal/index.jsx

@@ -0,0 +1 @@
+export * from './ShareModal';

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 {
@@ -44,13 +38,10 @@
     justify-content: space-between;
     display: flex;
     gap: 15px;
-  }
 
-  button {
-    place-items: center;
-    display: grid;
-
-    @include basicIconButton(11px, 1.3rem, modal);
+    button {
+      width: 40px;
+    }
   }
 
   .copy {
@@ -58,6 +49,10 @@
     flex-flow: row;
     gap: 15px;
 
+    button {
+      width: 40px;
+    }
+
     input[type='text'] {
       @include themed {
         background: t($modal-sidebar);
@@ -86,20 +81,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 +88,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);
+      }
+    }
+  }
 }

src/components/Elements/Tooltip/Tooltip.jsx

@@ -1,13 +1,18 @@
-import { useState, memo } from 'react';
-import PropTypes from 'prop-types';
+import { useState, memo, useRef } from 'react';
 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 tooltipId = useRef(`tooltip-${Math.random()}`);
+
+  const { x, y, refs, strategy } = useFloating({
     placement: placement || 'bottom',
     middleware: [flip(), offset(15), shift()],
+    elements: {
+      reference,
+    },
   });
 
   return (
@@ -19,13 +24,14 @@ function Tooltip({ children, title, style, placement, subtitle }) {
         onMouseLeave={() => setShowTooltip(false)}
         onFocus={() => setShowTooltip(true)}
         onBlur={() => setShowTooltip(false)}
-        ref={reference}
+        ref={setReference}
+        aria-describedby={tooltipId.current}
       >
         {children}
       </div>
       {showTooltip && (
         <span
-          ref={floating}
+          ref={refs.setFloating}
           style={{
             position: strategy,
             top: y ?? '',
@@ -43,12 +49,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 };

src/components/Elements/Tooltip/index.jsx

@@ -0,0 +1 @@
+export * from './Tooltip';

src/components/Elements/Tooltip/tooltip.scss

@@ -97,51 +97,36 @@
   }
 }
 
-.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);
-      }
-    }
-  }
+#floating {
+  transition-property: opacity, transform;
+}
+
+#floating[data-status='open'],
+#floating[data-status='close'] {
+  transition-duration: 250ms;
+}
+
+#floating[data-status='initial'],
+#floating[data-status='close'] {
+  opacity: 0;
+}
+
+#floating[data-status='initial'][data-placement^='top'],
+#floating[data-status='close'][data-placement^='top'] {
+  transform: translateY(5px);
+}
+
+#floating[data-status='initial'][data-placement^='bottom'],
+#floating[data-status='close'][data-placement^='bottom'] {
+  transform: translateY(-5px);
+}
+
+#floating[data-status='initial'][data-placement^='left'],
+#floating[data-status='close'][data-placement^='left'] {
+  transform: translateX(5px);
+}
+
+#floating[data-status='initial'][data-placement^='right'],
+#floating[data-status='close'][data-placement^='right'] {
+  transform: translateX(-5px);
 }

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';

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

src/components/Form/Settings/Checkbox/index.jsx

@@ -0,0 +1 @@
+export * from './Checkbox';

src/components/Form/Settings/ChipSelect/ChipSelect.jsx

@@ -0,0 +1,57 @@
+import { useState, memo } from 'react';
+
+import Box from '@mui/material/Box';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Chip from '@mui/material/Chip';
+
+function ChipSelect({ label, options }) {
+  let start = (localStorage.getItem('apiCategories') || '').split(',');
+  if (start[0] === '') {
+    start = [];
+  }
+
+  const [optionsSelected, setoptionsSelected] = useState(start);
+
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    setoptionsSelected(typeof value === 'string' ? value.split(',') : value);
+    localStorage.setItem('apiCategories', value);
+  };
+
+  return (
+    <FormControl>
+      <InputLabel id="chipSelect-label">{label}</InputLabel>
+      <Select
+        labelId="chipSelect-label"
+        id="chipSelect"
+        multiple
+        value={optionsSelected}
+        onChange={handleChange}
+        input={<OutlinedInput id="select-multiple-chip" label={label} />}
+        renderValue={(optionsSelected) => (
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+            {optionsSelected.map((value) => (
+              <Chip key={value} label={value} />
+            ))}
+          </Box>
+        )}
+      >
+        {options.map((option) => (
+          <MenuItem key={option.name} value={option.name}>
+            {option.name.charAt(0).toUpperCase() + option.name.slice(1)}{' '}
+            {option.count && `(${option.count})`}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+const MemoizedChipSelect = memo(ChipSelect);
+export { ChipSelect as default, MemoizedChipSelect as ChipSelect };

src/components/Form/Settings/ChipSelect/index.jsx

@@ -0,0 +1 @@
+export * from './ChipSelect';

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

src/components/Form/Settings/Dropdown/index.jsx

@@ -0,0 +1 @@
+export * from './Dropdown';

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

src/components/Form/Settings/FileUpload/index.jsx

@@ -0,0 +1 @@
+export * from './FileUpload';

src/components/Form/Settings/Radio/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 };

src/components/Form/Settings/Radio/index.jsx

@@ -0,0 +1 @@
+export * from './Radio';

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

src/components/Form/Settings/Slider/index.jsx

@@ -0,0 +1 @@
+export * from './Slider';

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