fix: unique key console error on about

- General Fixes
- Event UI change
- Marketplace Collection UI Changes

Co-authored-by: David Ralph <me@davidcralph.co.uk>
Co-authored-by: Isaac <contact@eartharoid.me>

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.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

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-  extends: 'react-app',
-  parser: '@babel/eslint-parser'
+  extends: ['react-app', 'prettier'],
+  ignorePatterns: ['node_modules/', 'build/', 'coverage/', '*.scss', '*.css', '*.json'],
 };

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# Automatically assigned to any PRs
+* @davidcralph @alexsparkes

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

.github/workflows/automerge.yml

@@ -0,0 +1,27 @@
+name: automerge
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "20.x"
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+  automerge:
+    needs: build
+    runs-on: ubuntu-latest
+
+    permissions:
+      pull-requests: write
+      contents: write
+
+    steps:
+      - uses: fastify/github-action-merge-dependabot@v3.0.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/submit.yml

@@ -0,0 +1,27 @@
+name: Submit
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Release tag to submit, i.e 6.0.5"
+        required: true
+
+jobs:
+  submit:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup Chrome
+        uses: browser-actions/setup-chrome@latest
+        with:
+          chrome-version: latest
+      - name: Download Github Release Assets
+        uses: PlasmoHQ/download-release-asset@v1.0.0
+        with:
+          tag: ${{ github.event.inputs.tag }}
+      - name: Browser Plugin Publish
+        uses: PlasmoHQ/bpp@v2
+        env:
+          PUPPETEER_EXECUTABLE_PATH: /opt/hostedtoolcache/chromium/latest/x64/chrome
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}

.gitignore

@@ -1,12 +1,18 @@
 # Directories
 node_modules/
+.history/
 .vscode/
 build/
+.idea/
+dist/
 
 # Files
 package-lock.json
+.stylelintcache
 yarn-error.log
 .eslintcache
 stats.json
 yarn.lock
-*.zip
+keys.json
+.DS_Store
+*.zip

.husky/commit-msg.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "${dirname "$0"}/_/husky/husky.sh"
+
+npx commitlint --edit $1

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "plugins": ["stylelint-scss"],
+  "rules": {
+    "selector-class-pattern": null,
+    "no-descending-specificity": null,
+    "scss/no-global-function-names": null
+  }
+}

LICENSE

@@ -1,6 +1,9 @@
 BSD 3-Clause License
 
-Copyright (c) 2018-2021 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.
 
 Redistribution and use in source and binary forms, with or without

README.md

@@ -1,4 +1,4 @@
-<img src="https://raw.githubusercontent.com/mue/branding/main/logo/logo_round.png" align="left" width="180px" height="180px"/>
+<img src="assets/logo.png" align="left" width="180px" height="180px"/>
 <img align="left" width="0" height="192px" hspace="10"/>
 
 > <a href="https://muetab.com/">Mue</a>
@@ -12,73 +12,92 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 <br>
 
 ## Table of contents
-* [Screenshot](#screenshot)
-* [Features](#features)
-	* [Planned Features](#planned-features)
-* [Installation](#installation)
-	* [Chrome](#chrome)
-	* [Firefox](#firefox)
-	* [Edge Chromium](#edge-chromium)
-	* [Whale](#whale)
-	* [Other](#other)
-* [Contributing](#development)
-	* [Translations](#translations)
-* [Credits](#credits)
-	* [Developers](#developers)
-	* [Translators](#translators)
-  * [Contributors](#contributors)
-  * [Resources](#resources)
+
+- [Table of contents](#table-of-contents)
+- [Screenshots](#screenshots)
+- [Features](#features)
+  - [Planned Features](#planned-features)
+- [Installation](#installation)
+  - [Chrome](#chrome)
+  - [Firefox](#firefox)
+  - [Edge (Chromium)](#edge-chromium)
+  - [Whale](#whale)
+  - [Other](#other)
+- [Development](#development)
+  - [Translations](#translations)
+- [Credits](#credits)
+  - [Developers](#developers)
+  - [Translators](#translators)
+  - [Contributors](#contributors)
+  - [Resources](#resources)
+
 ## Screenshots
+
 ![Screenshot](assets/screenshot.webp)
 ![Settings Modal](assets/screenshot2.webp)
 
 ## Features
-* Fast and free
-* Supports multiple browsers
-* Actively developed and open source
-* Automatically updating [API](https://github.com/mue/api) with new photos, quotes and offline mode
-* Widgets such as searchbar, weather, quick links, clock, date, quote, greeting
-* Settings - enable/disable various features and customise parts of Mue
-* Navbar with copy button, favourite background, notes feature etc
-* [Marketplace](https://github.com/mue/marketplace) - download custom photo packs, quote packs and preset settings made by the community
+
+- Fast and free
+- Supports multiple browsers
+- Actively developed and open source
+- Automatically updating [API](https://github.com/mue/api) with new photos, quotes and offline mode
+- Widgets such as search bar, weather, quick links, clock, date, quote, greeting
+- Settings - enable/disable various features and customise parts of Mue
+- Navbar with copy button, favourite background, notes feature etc
+- [Marketplace](https://github.com/mue/marketplace) - download custom photo packs, quote packs and preset settings made by the community
 
 ### Planned Features
-Please see our [roadmap](https://github.com/mue/mue/projects)
+
+Please see our [roadmap](https://trello.com/b/w7zhS7Hi/mue-50). We are currently working on a rewrite over on the "phoenix" branch.
 
 ## Installation
-*A demo of the tab can be found [here](https://demo.muetab.com), and the latest GitHub commit build [here](https://mue.vercel.app)*
+
+_A demo of the tab can be found [here](https://demo.muetab.com), and the latest GitHub commit build [here](https://mue.vercel.app)_
+
 ### Chrome
+
 [![Chrome Web Store Logo](assets/chrome.png)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
 <br>
 [Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
 
 ### Firefox
+
 [![Firefox Add-ons Logo](assets/firefox.png)](https://addons.mozilla.org/firefox/addon/mue)
 <br>
 [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue)
 
 ### Edge (Chromium)
+
 [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)
 
 ### Whale
+
 [Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc)
 
 ### Other
+
 [GitHub Releases](https://github.com/mue/mue/releases)
 
 ## Development
+
 Please see the [documentation](https://docs.muetab.com/development#mue-tab).
 
 ### Translations
-Please see the [documentation](https://docs.muetab.com/translations).
+
+[![Contribute on Weblate](https://hosted.weblate.org/widgets/mue/-/open-graph.png)](https://hosted.weblate.org/engage/mue/)
 
 ## Credits
+
 ### Developers
-[David Ralph](https://github.com/davidjcralph) - Lead development, photographer <br/>
+
+[David Ralph](https://github.com/davidcralph) - Lead development, photographer <br/>
 [Alex Sparkes](https://github.com/alexsparkes) - Name, lead design, photographer <br/>
 [Isaac Saunders](https://github.com/eartharoid) - QA, development, photographer <br/>
 [Wessel Tip](https://github.com/Wessel) - Development <br/>
+
 ### Translators
+
 [Wessel Tip](https://github.com/Wessel), [Heimen Stoffels](https://github.com/Vistaus) - Dutch <br/>
 [Alex Sparkes](https://github.com/alexsparkes), [Maxime](https://github.com/exiam) - French <br/>
 [Anders](https://github.com/FuryingFox) - Norwegian <br/>
@@ -86,10 +105,17 @@ Please see the [documentation](https://docs.muetab.com/translations).
 [Vicente](https://github.com/Vicente015) - Spanish <br/>
 [Austin Huang](https://github.com/austinhuang0131) - Chinese (Simplified) <br/>
 [FreeFun](https://github.com/xXFreeFunXx) - German <br/>
+[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.
 
 And finally, a big thank you to all the other [contributors](https://github.com/mue/mue/graphs/contributors)!
+
 ### Resources
+
 [Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode <br/>
 [Undraw](https://undraw.co) - Welcome modal images

babel.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  presets: ['@babel/preset-env', ['@babel/preset-react', {
-    runtime: 'automatic'
-  }]],
-  plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', '@babel/plugin-transform-react-inline-elements', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements']
-};

index.html

@@ -0,0 +1,115 @@
+<!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="/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>
+        @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400&display=swap');
+
+        * {
+          font-family: 'Lexend Deca', sans-serif;
+          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) {
+          * {
+            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>
+      <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>
+  </body>
+</html>

jsconfig.json

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

manifest/_locales/tr_TR/messages.json

@@ -0,0 +1,8 @@
+{
+  "name": {
+    "message": "Mue"
+  },
+  "description": {
+    "message": "Modern tarayıcılar için hızlı, açık ve kullanımı ücretsiz yeni sekme sayfası."
+  }
+}

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,10 +1,15 @@
+/* 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) => {
   if (details.reason === 'install') {
     browser.tabs.create({
-      url: browser.runtime.getURL('index.html')
+      url: browser.runtime.getURL('index.html'),
     });
   }
 });

manifest/chrome.json

@@ -1,12 +1,12 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "offline_enabled": true,
   "default_locale": "en",
   "name": "__MSG_name__",
   "description": "__MSG_description__",
-  "version": "5.3.3",
+  "version": "7.0.0",
   "homepage_url": "https://muetab.com",
-  "browser_action": {
+  "action": {
     "default_icon": "icons/128x128.png"
   },
   "chrome_url_overrides": {
@@ -17,9 +17,7 @@
     "48": "icons/48x48.png",
     "128": "icons/128x128.png"
   },
-  "content_security_policy": "script-src 'self' https://api.bing.com https://www.google.com; object-src 'self'",
   "background": {
-    "persistent": false,
-    "scripts": [ "background-chrome.js" ]
+    "service_worker": "background.js"
   }
 }

manifest/firefox.json

@@ -1,10 +1,10 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Mue",
   "description": "Fast, open and free-to-use new tab page for modern browsers.",
-  "version": "5.3.3",
+  "version": "7.0.0",
   "homepage_url": "https://muetab.com",
-  "browser_action": {
+  "action": {
     "default_icon": "icons/128x128.png"
   },
   "chrome_url_overrides": {
@@ -17,6 +17,5 @@
   },
   "chrome_settings_overrides": {
     "homepage": "index.html"
-  },
-  "content_security_policy": "script-src 'self' https://api.bing.com https://www.google.com; object-src 'self'"
+  }
 }

package.json

@@ -9,63 +9,55 @@
   "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": "5.3.3",
+  "version": "7.1.0",
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@fontsource/lexend-deca": "4.4.5",
-    "@fontsource/montserrat": "4.4.5",
-    "@material-ui/core": "5.0.0-beta.4",
-    "@material-ui/icons": "5.0.0-beta.4",
-    "react": "17.0.2",
-    "react-clock": "3.0.0",
-    "react-color-gradient-picker": "0.1.2",
-    "react-dom": "17.0.2",
-    "react-modal": "3.14.3",
-    "react-sortable-hoc": "2.0.0",
-    "react-toastify": "7.0.4",
-    "weather-icons-react": "1.2.0"
+    "@eartharoid/i18n": "1.2.1",
+    "@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.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",
+    "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": "10.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/eslint-parser": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-react-constant-elements": "^7.14.5",
-    "@babel/plugin-transform-react-inline-elements": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@eartharoid/deep-merge": "^0.0.1",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-react-class-to-function": "^1.2.2",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.2.0",
-    "eslint": "^7.32.0",
-    "eslint-config-react-app": "^6.0.0",
-    "html-webpack-plugin": "^5.3.2",
-    "mini-css-extract-plugin": "^2.2.0",
-    "sass": "^1.38.0",
-    "sass-loader": "^12.1.0",
-    "source-map-loader": "^3.0.0",
-    "webpack": "^5.51.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.0.0"
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@eartharoid/deep-merge": "^0.0.2",
+    "@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": "^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": {
-    "start": "webpack serve",
-    "build": "webpack --mode=production",
-    "chrome": "cp manifest/chrome.json build/manifest.json && cp -r manifest/_locales build/_locales && cp manifest/background-chrome.js build/background-chrome.js",
-    "firefox": "rm -rf build/_locales && cp manifest/firefox.json build/manifest.json"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version"
-    ]
+    "dev": "vite",
+    "dev:host": "vite --host",
+    "translations": "cd scripts && node updatetranslations.js",
+    "build": "vite build",
+    "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"
   }
 }

public/index.html

@@ -1,34 +0,0 @@
-<!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'>
-    <title>New Tab</title>
-  </head>
-
-  <body>
-    <noscript>
-      <style>
-        *, a {
-          font-family: 'Lexend Deca', sans-serif;
-          text-align: center;
-          color: black;
-          background: white !important;
-        }
-
-        @media (prefers-color-scheme: dark) {
-          *, a {
-            color: white;
-            background: #2f3640 !important;
-          }
-        }
-      </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>
-    </noscript>
-    <div id='root'></div>
-  </body>
-</html>

scripts/updatetranslations.js

@@ -1,12 +1,85 @@
 const fs = require('fs');
+const path = require('path');
 const merge = require('@eartharoid/deep-merge');
 
-fs.readdirSync('../src/translations').forEach((file) => {
+const compareAndRemoveKeys = (json1, json2) => {
+  for (let key in json1) {
+    if (json2.hasOwnProperty(key)) {
+      if (typeof json1[key] === 'object' && typeof json2[key] === 'object') {
+        compareAndRemoveKeys(json1[key], json2[key]);
+      }
+    } else {
+      delete json1[key];
+    }
+  }
+};
+
+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 newdata = merge(require('../src/translations/en_GB.json'), require('../src/translations/' + file));
-  fs.writeFileSync('../src/translations/' + file, JSON.stringify(newdata, null, 2));
-  fs.appendFileSync('../src/translations/' + file, '\n');
+  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)));
+
+  compareAndRemoveKeys(newdata, en);
+
+  fs.writeFileSync(path.join(localesDir, file), JSON.stringify(newdata, null, 2));
+
+  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,45 +1,56 @@
-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 { 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')) {
-      moveSettings();
-      window.location.reload();
-    }    
-
-    loadSettings();
-
-    EventBus.on('refresh', (data) => {
-      if (data === 'other') {
-        loadSettings(true);
-      }
-    });
-
-    window.stats.tabLoad();
-  }
-
-  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>
-      </>
-    );
-  }
-}
+import variables from 'config/variables';
+import { PureComponent } 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';
+
+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')) {
+      moveSettings();
+      window.location.reload();
+    }
+
+    loadSettings();
+
+    EventBus.on('refresh', (data) => {
+      if (data === 'other') {
+        loadSettings(true);
+      }
+    });
+
+    variables.stats.tabLoad();
+  }
+
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
+  render() {
+    return (
+      <>
+        {localStorage.getItem('background') === 'true' && <Background />}
+        <ToastContainer
+          position="bottom-right"
+          autoClose={localStorage.getItem('toastDisplayTime') || 2500}
+          newestOnTop={true}
+          closeOnClick
+          pauseOnFocusLoss
+        />
+        <div id="center">
+          <Widgets />
+          <Modals />
+        </div>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,81 @@
+import variables from 'config/variables';
+
+import { useState, memo } from 'react';
+import { TextareaAutosize } from '@mui/material';
+import { MdAddLink, MdClose } from 'react-icons/md';
+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.icon : '');
+
+  return (
+    <div className="addLinkModal">
+      <div className="shareHeader">
+        <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 />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="quicklinkModalTextbox">
+        <TextareaAutosize
+          maxRows={1}
+          placeholder={variables.getMessage('widgets.quicklinks.name')}
+          value={name}
+          onChange={(e) => setName(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
+          style={{ gridColumn: 'span 2' }}
+        />
+        <TextareaAutosize
+          maxRows={10}
+          placeholder={variables.getMessage('widgets.quicklinks.url')}
+          value={url}
+          onChange={(e) => setUrl(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
+        />
+        <TextareaAutosize
+          maxRows={10}
+          maxLines={1}
+          placeholder={variables.getMessage('widgets.quicklinks.icon')}
+          value={icon}
+          onChange={(e) => setIcon(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
+        />
+      </div>
+      <div className="addFooter">
+        <span className="dropdown-error">
+          {iconError} {urlError}
+        </span>
+        {edit ? (
+          <button
+            style={{
+              height: '16px',
+              fontSize: '15px',
+            }}
+            onClick={() => editLink(editData, name, url, icon)}
+          >
+            <MdAddLink /> {variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+          </button>
+        ) : (
+          <button
+            style={{
+              height: '16px',
+              fontSize: '15px',
+            }}
+            className="btn-settings"
+            onClick={() => addLink(name, url, icon)}
+          >
+            <MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+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,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 };

src/components/Elements/Button/index.jsx

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

src/components/Elements/MainModal/Main.jsx

@@ -0,0 +1,64 @@
+import variables from 'config/variables';
+import { Suspense, lazy, useState, memo } from 'react';
+import { MdClose } from 'react-icons/md';
+
+import './scss/index.scss';
+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%' }}>
+    <div className="modalSidebar">
+      <span className="mainTitle">Mue</span>
+    </div>
+    <div className="modalTabContent">
+      <div className="emptyItems">
+        <div className="emptyMessage">
+          <div className="loaderHolder">
+            <div id="loader"></div>
+            <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+function MainModal({ modalClose }) {
+  const [currentTab, setCurrentTab] = useState('settings');
+
+  const changeTab = (type) => {
+    setCurrentTab(type);
+  };
+
+  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">
+      <Tooltip
+        style={{ position: 'absolute', top: '1rem', right: '1rem' }}
+        title={variables.getMessage('modals.welcome.buttons.close')}
+        key="closeTooltip"
+      >
+        <span className="closeModal" onClick={modalClose}>
+          <MdClose />
+        </span>
+      </Tooltip>
+      <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
+    </div>
+  );
+}
+
+const MemoizedMainModal = memo(MainModal);
+export { MemoizedMainModal as default, MemoizedMainModal as MainModal };

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

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;

src/components/Elements/MainModal/index.jsx

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

src/components/Elements/MainModal/scss/index.scss

@@ -0,0 +1,395 @@
+@import 'scss/variables';
+@import 'modules/sidebar';
+@import 'modules/navbar';
+@import 'modules/modalTabContent';
+@import 'modules/links';
+@import 'modules/scrollbars';
+@import 'settings/main';
+@import 'marketplace/main';
+
+.Overlay {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+.Modal {
+  @include themed {
+    color: t($color);
+  }
+
+  box-shadow: 0 0 20px rgb(0 0 0 / 30%);
+  opacity: 1;
+  z-index: -2;
+  transition-timing-function: ease-in;
+  border-radius: map-get($modal, 'border-radius');
+  user-select: none;
+  overflow-y: auto;
+  transform: scale(0);
+  transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.closePositioning {
+  position: absolute;
+  top: 3rem;
+  right: 3rem;
+}
+
+.closeModal {
+  display: grid;
+  place-items: center;
+  padding: 0.5em;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: 0.5s;
+
+  svg {
+    font-size: 2em;
+  }
+
+  &:hover {
+    @include themed {
+      background: t($modal-sidebarActive);
+    }
+  }
+}
+
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+  overflow: hidden;
+}
+
+/* modal transition */
+.ReactModal__Content--after-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ReactModal__Content--before-close {
+  opacity: 0;
+  transform: scale(0);
+}
+
+#modal {
+  height: 80vh;
+  width: clamp(60vw, 1200px, 90vw);
+
+  @include themed {
+    background-color: t($modal-background);
+  }
+}
+
+/* fixes for font size on extension */
+label,
+p,
+span.modalLink {
+  font-size: 1rem;
+}
+
+h2 {
+  font-size: 2rem;
+  margin-bottom: 0;
+}
+
+h3 {
+  font-size: 1.17rem;
+}
+
+h5 {
+  font-size: 0.8rem;
+}
+
+.loaderHolder {
+  display: flex;
+  gap: 15px;
+  flex-flow: column;
+  align-items: center;
+}
+
+#loader {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+
+  @include themed {
+    border: 3px solid t($modal-sidebar);
+    border-radius: 50%;
+    border-top-color: t($modal-sidebarActive);
+  }
+
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.headerExtras {
+  display: flex;
+  flex-flow: column;
+  gap: -1px;
+  padding: 10px 0;
+
+  div:nth-child(1) {
+    display: flex;
+    flex-flow: column;
+    gap: 10px;
+  }
+
+  form {
+    margin-top: 10px;
+  }
+
+  .link {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+  }
+}
+
+.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;
+  gap: -1px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.languageSettings {
+  margin-bottom: 15px;
+
+  .MuiFormGroup-root {
+    gap: 5px;
+  }
+
+  .MuiFormControl-root {
+    width: 100% !important;
+    gap: 15px;
+
+    .MuiFormControlLabel-root {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      padding: 5px 5px 5px 20px;
+      transition: 0.3s;
+
+      @include themed {
+        background: t($modal-sidebar);
+        border-radius: t($borderRadius);
+
+        &:hover {
+          background: t($modal-sidebarActive);
+        }
+      }
+    }
+  }
+}
+
+.sliderTitle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0;
+
+  .link {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+  }
+}
+
+.moreSettings {
+  cursor: pointer;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  padding: 25px;
+  margin-top: 20px;
+  transition: 0.5s;
+
+  @include themed {
+    background: t($modal-sidebar);
+    border-radius: t($borderRadius);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+
+    &:hover {
+      background: t($modal-sidebarActive);
+    }
+  }
+
+  svg {
+    font-size: 20px;
+  }
+
+  .left {
+    display: flex;
+    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 {
+    display: flex;
+    flex-flow: column;
+  }
+
+  .action {
+    display: flex;
+    flex-flow: row;
+    gap: 20px;
+    align-items: center;
+  }
+}
+
+.reminder-info {
+  display: flex;
+  flex-flow: column;
+  position: absolute;
+  bottom: 0;
+  padding: 15px;
+  gap: 15px;
+
+  @include themed {
+    background-color: t($modal-secondaryColour);
+    border-radius: t($borderRadius);
+    border: 1px solid t($modal-sidebarActive);
+  }
+
+  button {
+    @include basicIconButton(5px, 5px, modal);
+
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+
+    svg {
+      margin: 0 !important;
+    }
+  }
+
+  svg {
+    margin: 0 !important;
+  }
+
+  @extend %tabText;
+}
+
+.quoteSkeleton {
+  margin-top: 5px;
+  display: flex;
+  flex-flow: column;
+  gap: 5px;
+  align-items: center;
+
+  div {
+    display: flex;
+    flex-flow: row;
+  }
+
+  .text {
+    display: flex;
+    flex-flow: column;
+    padding: 5px;
+  }
+
+  .skeletonAuthor {
+    font-size: smaller;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 25px;
+    padding: 0 20px 0 5px;
+
+    svg {
+      @include themed {
+        background-color: t($modal-sidebar);
+        padding: 10px;
+        border-radius: t($borderRadius);
+        place-items: center;
+      }
+    }
+
+    @include themed {
+      background-color: t($modal-sidebarActive);
+      border-radius: t($borderRadius);
+    }
+
+    .title {
+      font-size: medium !important;
+    }
+
+    .subtitle {
+      font-size: smaller !important;
+    }
+  }
+}
+
+.quickLinksSkeleton {
+  .circles {
+    display: flex;
+    flex-flow: row;
+    gap: 5px;
+
+    div {
+      margin-top: 10px;
+      padding: 3px;
+      height: 20px;
+      width: 20px;
+      border-radius: 100%;
+      display: grid;
+      place-items: center;
+
+      @include themed {
+        background-color: t($modal-sidebarActive);
+      }
+    }
+  }
+}
+
+.clockSkeleton {
+  font-size: 30px !important;
+  font-weight: bold;
+}

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

@@ -0,0 +1,482 @@
+// this file is too long
+@import 'modules/item';
+@import 'modules/buttons';
+@import 'modules/lightbox';
+@import 'scss/variables';
+
+.items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 1.5rem;
+  margin-top: 15px;
+  margin-bottom: 30px;
+
+  .item {
+    position: relative;
+    border-radius: 12px;
+    width: auto;
+    cursor: pointer;
+    transition: 0.5s;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    text-align: center;
+    gap: 15px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    @include themed {
+      background-color: t($modal-secondaryColour);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+
+      &:hover {
+        background-color: t($modal-sidebarActive);
+
+        img {
+          background-color: t($modal-sidebarActive);
+        }
+      }
+    }
+
+    .tags {
+      margin-top: 7px;
+    }
+
+    .item-back {
+      filter: blur(60px) saturate(180%) brightness(90%);
+      position: absolute;
+      object-fit: cover !important;
+      height: 90px !important;
+      width: 100px !important;
+      border-radius: 100px;
+      transition: 0.5s;
+      margin-top: 30px;
+    }
+
+    .item-icon {
+      object-fit: cover !important;
+      height: 60px !important;
+      width: 60px !important;
+      border-radius: 12px;
+      transition: 0.5s;
+      margin-top: 25px;
+    }
+
+    .card-details {
+      padding: 10px;
+      margin-bottom: 24px;
+      display: flex;
+      flex-flow: column;
+      gap: 5px;
+
+      .card-title {
+        font-size: 18px;
+      }
+
+      .card-subtitle {
+        font-size: 14px;
+
+        @include themed {
+          color: t($subColor);
+        }
+      }
+
+      .card-type {
+        margin-top: 8px;
+        font-size: 12px;
+        font-weight: bolder;
+
+        @include themed {
+          color: t($subColor);
+        }
+
+        border-radius: 150px;
+        padding: 2px 8px;
+        background-color: rgb(255 255 255 / 10%);
+        border: 1px solid rgb(209 213 219 / 30%);
+      }
+    }
+  }
+}
+
+.itemPage {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+
+  .itemShowcase {
+    display: flex;
+    flex-flow: column;
+    gap: 25px;
+    width: 60%;
+    max-width: 650px;
+
+    .description {
+      max-lines: 3;
+      font-size: 16px;
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    table {
+      table-layout: fixed;
+      width: 100%;
+      max-width: 650px !important;
+      word-wrap: break-word !important;
+    }
+  }
+
+  .itemInfo {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: 15px;
+    width: 25%;
+    max-height: 450px;
+
+    .front {
+      padding: 20px;
+      height: 100%;
+      display: flex;
+      flex-flow: column;
+      gap: 15px;
+      width: 100%;
+      box-sizing: border-box !important;
+      border-radius: 12px 12px 0 0;
+      backdrop-filter: blur(40px) saturate(150%) brightness(75%);
+
+      @include themed {
+        background-image: linear-gradient(to bottom, transparent, t($modal-background));
+      }
+    }
+
+    .icon {
+      width: 100%;
+      height: auto;
+      border-radius: 12px;
+      box-shadow: 0 5px 25px black;
+    }
+
+    .divider {
+      text-transform: uppercase;
+
+      @include themed {
+        color: t($subColor);
+      }
+    }
+
+    .iconButtons {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr;
+      grid-gap: 20px;
+
+      button {
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
+}
+
+.emptyItems {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.emptyMessage {
+  display: grid;
+  place-items: center;
+  grid-gap: 5px;
+  padding: 50px;
+
+  .title,
+  svg {
+    margin: 10px;
+  }
+
+  svg {
+    font-size: 70px;
+  }
+
+  @include themed {
+    .sideloadIcon {
+      font-size: 50px;
+      color: t($subColor);
+    }
+  }
+
+  button {
+    display: flex;
+    flex-flow: row;
+  }
+}
+
+.emptyNewMessage {
+  display: flex;
+  gap: 20px;
+  flex-flow: column;
+  text-align: center;
+  align-items: center;
+  user-select: none;
+
+  img {
+    width: 200px;
+    height: auto;
+  }
+
+  svg {
+    font-size: 70px;
+
+    /* background: -webkit-linear-gradient(90deg,rgba(255,92,39,.7) 37%,rgba(255,70,110,.67) 60%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; */
+  }
+
+  button {
+    svg {
+      font-size: 1rem;
+    }
+  }
+
+  .buttonsRow {
+    display: flex;
+    flex-flow: row;
+    gap: 30px;
+    align-items: center;
+  }
+}
+
+p.author {
+  margin-top: -5px;
+}
+
+#item > img,
+.updateImage,
+.updateChangelog > p > img {
+  border-radius: 12px;
+  height: 200px;
+  width: auto;
+  cursor: pointer;
+}
+
+.returnButton {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  cursor: pointer;
+
+  svg {
+    font-size: 2em;
+  }
+
+  &:hover {
+    background: rgb(121 121 121 / 22.6%);
+  }
+}
+
+.flexTopMarketplace {
+  display: flex;
+  margin-bottom: 15px;
+
+  .tooltip {
+    margin-right: 25px;
+  }
+
+  .mainTitle {
+    margin-bottom: 0 !important;
+  }
+}
+
+.filter {
+  display: flex;
+  flex-flow: row;
+  gap: 15px;
+  justify-content: space-between;
+  align-items: center;
+
+  .MuiFormControl-root {
+    margin-bottom: 10px;
+  }
+
+  .buttonSection {
+    display: flex;
+    flex-flow: row;
+    gap: 20px;
+  }
+
+  .tags {
+    max-width: 50%;
+  }
+}
+
+.collectionPage {
+  // height: 200px;
+  padding: 1.5rem;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  @include themed {
+    border-radius: t($borderRadius);
+  }
+
+  .nice-tag {
+    border-radius: 150px;
+    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;
+  }
+
+  .content {
+    display: flex;
+    flex-flow: column;
+    text-align: center;
+    text-shadow: #000 0 0 15px;
+
+    .mainTitle {
+      justify-content: center;
+      color: #fff !important;
+    }
+
+    .subtitle {
+      color: #ccc !important;
+    }
+  }
+}
+
+.collection {
+  display: flex;
+  justify-content: space-between;
+  padding: 36px 48px;
+  margin: 15px 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  align-items: center;
+
+  @include themed {
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    border-radius: t($borderRadius);
+  }
+
+  .content {
+    display: flex;
+    flex-flow: column;
+    gap: 15px;
+    max-width: 250px;
+    text-shadow: #000 0 0 15px;
+
+    .title {
+      color: #fff !important;
+    }
+
+    .subtitle {
+      color: #ccc !important;
+    }
+  }
+
+  .items {
+    justify-content: center;
+  }
+}
+
+.marketplaceRefresh {
+  display: flex;
+  flex-flow: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.marketplaceSearch {
+  display: flex;
+  align-items: center;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 18px;
+
+  @include themed {
+    box-shadow: 0 0 0 3px t($modal-sidebarActive);
+    background: t($modal-sidebar);
+  }
+
+  input {
+    all: unset;
+  }
+
+  @include themed {
+    &:focus-within {
+      background: t($modal-sidebarActive);
+      box-shadow: 0 0 0 1px t($color);
+    }
+
+    &:disabled {
+      background: t($modal-sidebarActive);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.inCollection {
+  // 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 {
+    background-color: t($modal-secondaryColour);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    border-radius: t($borderRadius);
+  }
+}
+
+.createYourOwn {
+  display: flex;
+  flex-flow: column;
+  gap: 20px;
+  align-items: center;
+  margin-top: 30px;
+
+  svg {
+    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,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);
+}

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

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

@@ -0,0 +1,16 @@
+.lightBoxModal {
+  margin: auto;
+  max-width: 60%;
+  background: none !important;
+  box-shadow: none !important;
+
+  img {
+    height: auto;
+    width: 100%;
+  }
+
+  .closeModal {
+    color: #fff;
+    text-shadow: 0 0 20px rgb(0 0 0 / 30%);
+  }
+}

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

@@ -0,0 +1,25 @@
+.resetLink {
+  color: var(--modal-link);
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  span {
+    font-size: 1.2rem;
+    color: var(--modal-link);
+    vertical-align: text-bottom;
+    margin-left: 5px;
+  }
+}
+
+.modalLink {
+  color: var(--modal-link);
+  cursor: pointer;
+  margin-left: 5px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}

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

@@ -0,0 +1,246 @@
+@import 'scss/variables';
+
+.modalTabContent {
+  width: 100% !important;
+
+  /* button {
+    @include modal-button(standard);
+  } */
+
+  @include themed {
+    padding: 1rem 3rem 3rem;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: t($modal-background);
+
+    @extend %tabText;
+
+    hr {
+      width: 100%;
+      background: rgb(196 196 196 / 74%);
+      outline: none;
+    }
+
+    .settingsRow {
+      display: flex;
+      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 #676767;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+
+      &.settingsNoBorder {
+        border-bottom: none;
+      }
+
+      .content {
+        display: flex;
+        flex-flow: column;
+        max-width: 50%;
+      }
+
+      .action {
+        display: flex;
+        flex-flow: column;
+        align-items: flex-end;
+        width: 300px;
+
+        button {
+          margin-top: 10px;
+        }
+
+        .link {
+          margin-top: 10px;
+          display: flex;
+          flex-flow: row;
+          gap: 15px;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+
+.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;
+
+  @include themed {
+    border-radius: t($borderRadius);
+    margin-top: 20px;
+
+    tr:first-child {
+      background: t($modal-sidebarActive);
+
+      th {
+        padding: 1rem;
+      }
+    }
+
+    td {
+      padding: 15px;
+    }
+
+    tr {
+      th:last-child {
+        display: grid;
+        place-items: center;
+      }
+    }
+
+    ::placeholder {
+      color: t($subColor);
+    }
+
+    tr:not(:first-child) {
+      background: t($modal-sidebar);
+
+      textarea {
+        width: 90%;
+        margin: 10px;
+        color: t($color);
+      }
+    }
+  }
+}
+
+.donateButton {
+  @include modal-button(standard);
+
+  flex-flow: row !important;
+  text-decoration: none;
+  height: auto !important;
+
+  svg {
+    font-size: 1.5rem !important;
+  }
+}
+
+.flexGrow {
+  flex-grow: 1;
+}
+
+.messageMap {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  gap: 25px;
+  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;
+    gap: 25px;
+    align-items: center;
+  }
+
+  .icon {
+    @include themed {
+      background-image: t($slightGradient);
+      box-shadow: t($boxShadow);
+    }
+
+    padding: 15px;
+    border-radius: 100%;
+    font-size: 25px;
+  }
+
+  .messageText {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 3;
+
+    textarea {
+      @include themed {
+        color: t($color);
+      }
+    }
+
+    .subtitle {
+      @include themed {
+        color: t($subColor);
+        font-size: 13px;
+      }
+    }
+  }
+
+  .messageAction {
+    float: right;
+  }
+}
+
+.messagesContainer {
+  display: flex;
+  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;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+@import 'scss/variables';
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  border-radius: 12px;
+
+  @include themed {
+    background: t($modal-sidebar);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  @include themed {
+    background: t($modal-sidebarActive);
+  }
+
+  border-radius: 12px;
+}

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

@@ -0,0 +1,79 @@
+@import 'scss/variables';
+
+.modalSidebar {
+  @include themed {
+    top: 0;
+    left: 0;
+    position: sticky;
+    margin: 0;
+    padding: 0 5px;
+    background: t($modal-sidebar);
+    border-radius: 12px 0 0 12px;
+    overflow: hidden auto;
+    height: 80vh;
+    min-width: 250px;
+
+    .mainTitle {
+      text-align: center;
+      font-size: 35px;
+      display: flex;
+      justify-content: center;
+      padding: 25px;
+    }
+
+    svg {
+      margin-left: 20px;
+      margin-right: 20px;
+      color: t($subColor);
+      font-size: 17px;
+    }
+
+    hr {
+      height: 1px;
+      background: #ccc;
+      margin: 0 1.75rem;
+      border: none;
+    }
+
+    button {
+      color: t($color);
+      font-size: 18px;
+      list-style: none;
+      cursor: pointer;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      margin: 0.2rem;
+      padding: 0.5rem;
+      transition: 0.5s;
+      outline: none;
+      border: none;
+      background: none;
+      min-width: calc(100% - 1.2em);
+      text-align: left;
+
+      &:hover {
+        background: t($modal-sidebarActive);
+      }
+
+      &:active {
+        background: t($modal-sidebarActive);
+        box-shadow: 0 0 0 0.5px t($color);
+      }
+
+      &:focus {
+        background: t($modal-sidebarActive);
+        box-shadow: 0 0 0 0.5px t($color);
+      }
+    }
+
+    .tab-list-active {
+      background: t($modal-sidebarActive);
+    }
+  }
+}
+
+.css-j204z7-MuiFormControlLabel-root {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}

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

@@ -0,0 +1,146 @@
+@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 */
+  &[type='color'] {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    appearance: none;
+    vertical-align: middle;
+    background: none;
+
+    @include themed {
+      border: t($modal-sidebarActive) 1px solid;
+    }
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
+  /* firefox fixes for colour picker (using "," didn't work) */
+  &[type='color']::-moz-color-swatch {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    appearance: none;
+    vertical-align: middle;
+    background: none;
+
+    &::-moz-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
+  /* date picker */
+  &[type='date'] {
+    width: 260px;
+    flex-flow: column;
+
+    @include themed {
+      background: t($modal-sidebar);
+      border: 1px solid t($modal-sidebarActive);
+      color: t($color);
+    }
+
+    padding: 15px 20px;
+    border-radius: 4px;
+    display: flex !important;
+    cursor: pointer;
+
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+    }
+  }
+}
+
+/* dark theme date picker fix */
+.dark {
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}
+
+h4 {
+  cursor: pointer;
+}
+
+.photosEmpty {
+  height: 400px;
+  display: grid;
+  place-items: center;
+
+  button {
+    padding: 0 20px;
+  }
+}
+
+.imagesTopBar {
+  padding-top: 25px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+
+  div:nth-child(1) {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 20px;
+
+    svg {
+      font-size: 30px;
+
+      @include themed {
+        color: t($subColor);
+      }
+    }
+
+    div {
+      display: flex;
+      flex-flow: column;
+    }
+  }
+
+  .topbarbuttons {
+    display: flex;
+    flex-flow: row;
+    gap: 25px;
+  }
+
+  button {
+    padding: 0 20px;
+  }
+}
+
+.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

@@ -0,0 +1,181 @@
+/* these are overrides for the material ui default styles */
+
+@import 'scss/variables';
+
+.MuiCheckbox-colorPrimary.Mui-checked,
+.MuiSwitch-colorPrimary.Mui-checked,
+.MuIconButton-colorPrimary.Mui-checked,
+.MuiSwitch-thumb,
+.MuiRadio-colorSecondary.Mui-checked,
+.PrivateSwitchBase-input-4,
+.MuiRadio-root,
+.aboutLink,
+.MuiSlider-colorPrimary,
+legend {
+  @include themed {
+    color: t($color) !important;
+  }
+}
+
+.MuiFormControlLabel-labelPlacementStart {
+  margin-left: 0 !important;
+}
+
+.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
+  @include themed {
+    background-color: t($subColor) !important;
+  }
+}
+
+.MuiSwitch-track {
+  @include themed {
+    background-color: t($subColor) !important;
+  }
+}
+
+.MuiIconButton-label > svg.MuiSvgIcon-root {
+  @include themed {
+    color: t($color) !important;
+  }
+}
+
+.MuiTouchRipple-root {
+  background: transparent;
+}
+
+.MuiFormControl-root {
+  margin-top: 10px !important;
+}
+
+.checkbox svg {
+  @include themed {
+    fill: t($color) !important;
+  }
+}
+
+.radio-title {
+  font-weight: bold;
+  font-size: 1.17rem;
+}
+
+.radio-title-small {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.MuiSlider-root {
+  margin-bottom: 30px !important;
+}
+
+.MuiOutlinedInput-notchedOutline {
+  @include themed {
+    border-color: t($color) !important;
+  }
+}
+
+.MuiFormLabel-root-MuiInputLabel-root {
+  @include themed {
+    color: t($color) !important;
+  }
+}
+
+.MuiInputLabel-root,
+.MuiSlider-markLabel,
+.MuiInputLabel-root,
+.MuiSelect-icon,
+.MuiSelect-select,
+.Mui-focused,
+legend,
+.MuiOutlinedInput-input {
+  @include themed {
+    color: t($color) !important;
+  }
+}
+
+.MuiMenu-list {
+  @include themed {
+    background-color: t($modal-background);
+    color: t($color);
+  }
+
+  li {
+    &:hover {
+      @include themed {
+        background-color: t($modal-sidebarActive);
+        transition: 0.5s;
+      }
+    }
+  }
+}
+
+.Mui-selected {
+  @include themed {
+    background-color: t($modal-sidebarActive) !important;
+  }
+}
+
+.MuiTextField-root,
+.MuiFormControl-root,
+.MuiSlider-root {
+  width: 300px !important;
+}
+
+.Mui-disabled {
+  color: #818181 !important;
+  cursor: not-allowed;
+
+  .checkbox svg {
+    fill: #818181 !important;
+  }
+}
+
+.MuiPaper-root {
+  @include themed {
+    background-color: t($modal-background) !important;
+  }
+}
+
+.MuiSlider-valueLabel {
+  @include themed {
+    background-color: t($modal-sidebarActive) !important;
+  }
+}
+
+.MuiFormControlLabel-labelPlacementStart {
+  justify-content: flex-end;
+}
+
+.settingsRow {
+  .MuiFormControlLabel-root {
+    flex-direction: row-reverse;
+    margin-right: 0;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .MuiFormControlLabel-root {
+    width: 100%;
+  }
+}
+
+.css-w66kx-MuiChip-root {
+  @include themed {
+    color: t($color) !important;
+    border: 1px solid t($modal-sidebarActive);
+    background: t($modal-sidebar) !important;
+    border-radius: t($borderRadius);
+  }
+
+  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

@@ -0,0 +1,55 @@
+.aboutLink {
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.aboutLogo {
+  height: 100px;
+  width: auto;
+  margin: calc(1rem - 15px) 0 1rem 0;
+  align-self: center;
+}
+
+.aboutContact {
+  flex-flow: row;
+  display: flex;
+  gap: 15px;
+
+  a {
+    @include basicIconButton(11px, 1.2rem, modal);
+  }
+}
+
+.contributorImages {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+
+  img {
+    width: 75px;
+    height: auto;
+
+    @include themed {
+      border-radius: t($borderRadius);
+    }
+  }
+}
+
+.subtitle-photographers {
+  font-size: 16px;
+
+  @include themed {
+    color: t($color);
+
+    span {
+      color: t($subColor);
+    }
+  }
+}
+
+.aboutText {
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+}

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

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

@@ -0,0 +1,164 @@
+@import 'scss/variables';
+
+.sortableItem {
+  cursor: move;
+  width: 200px;
+  z-index: 999 !important;
+  padding: 15px;
+  margin-bottom: 10px;
+  font-size: 1.325rem;
+
+  @include themed {
+    color: t($color) !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: t($modal-secondaryColour);
+    border-radius: t($borderRadius);
+    box-shadow: t($boxShadow);
+
+    svg {
+      font-size: 1.3rem;
+      color: t($subColor);
+    }
+
+    &:hover {
+      background: t($modal-sidebarActive) !important;
+    }
+  }
+
+  ul {
+    -webkit-padding-start: 0;
+    padding: 0;
+    list-style-type: none;
+
+    > label {
+      vertical-align: middle;
+    }
+  }
+}
+
+.sortablecontainer {
+  -webkit-padding-start: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.images-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  padding: 20px;
+  grid-gap: 20px;
+
+  @include themed {
+    div {
+      border-radius: t($borderRadius);
+
+      // border: 5px t($modal-sidebar) solid;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-flow: column;
+      gap: 5px;
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
+        border-radius: t($borderRadius);
+      }
+
+      button {
+        padding: 0 30px;
+        background: t($modal-background);
+        border: none !important;
+
+        &:hover {
+          background: t($modal-sidebarActive);
+        }
+      }
+
+      .tooltip {
+        position: absolute !important;
+        top: 5px !important;
+        right: 5px !important;
+      }
+    }
+
+    .iconButton {
+      width: calc(100% - 22px);
+      margin-top: 10px;
+
+      @include basicIconButton(11px, 1.3rem, modal);
+    }
+  }
+}
+
+.overviewGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 30px;
+}
+
+.tabPreview {
+  width: 100%;
+  aspect-ratio: 2 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+
+  @include themed {
+    background: t($modal-secondaryColour);
+    border-radius: t($borderRadius);
+    box-shadow: t($boxShadow);
+  }
+
+  .previewItem {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+
+    .quotediv .quote {
+      max-width: 100%;
+    }
+
+    .quotediv .author-holder .author .author-content .title {
+      font-size: 1em !important;
+
+      @include themed {
+        color: t($color) !important;
+      }
+    }
+  }
+}
+
+.overviewNews {
+  display: flex;
+  flex-flow: column;
+  margin-top: 16px;
+  padding: 25px;
+
+  .title {
+    font-size: 36px !important;
+    text-align: center;
+  }
+
+  .subtitle {
+    font-size: 12px !important;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
+  .content {
+    margin: 20px 20px 0;
+  }
+
+  @include themed {
+    background: t($modal-secondaryColour);
+    border-radius: t($borderRadius);
+    box-shadow: t($boxShadow);
+  }
+}

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

src/components/Elements/ResetModal/ResetModal.jsx

@@ -0,0 +1,44 @@
+import { memo } from 'react';
+import variables from 'config/variables';
+import { MdClose, MdRestartAlt } from 'react-icons/md';
+import { setDefaultSettings } from 'utils/settings';
+import { Tooltip, Button } from 'components/Elements';
+
+function ResetModal({ modalClose }) {
+  const reset = () => {
+    variables.stats.postEvent('setting', 'Reset');
+    setDefaultSettings('reset');
+    window.location.reload();
+  };
+
+  return (
+    <div className="smallModal">
+      <div className="shareHeader">
+        <span className="title">
+          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
+        </span>
+        <Tooltip
+          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+        >
+          <div className="close" onClick={modalClose}>
+            <MdClose />
+          </div>
+        </Tooltip>
+      </div>
+      <span className="title">
+        {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.question')}
+      </span>
+      <span className="subtitle">
+        {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.information')}
+      </span>
+      <div className="resetFooter">
+        <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>
+  );
+}
+
+const MemoizedResetModal = 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,128 @@
+import { memo } from 'react';
+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 { toast } from 'react-toastify';
+
+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(variables.getMessage('modals.share.copy_link'));
+  };
+
+  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">
+        <Tooltip title="Twitter">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <FaTwitter />
+          </button>
+        </Tooltip>
+        <Tooltip title="Facebook">
+          <button
+            onClick={() =>
+              window
+                .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
+                .focus()
+            }
+          >
+            <FaFacebookF />
+          </button>
+        </Tooltip>
+        <Tooltip title="Email">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
+                    data.data.name +
+                    'on Mue: ' +
+                    data,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <MdEmail />
+          </button>
+        </Tooltip>
+        <Tooltip title="WeChat">
+          <button
+            onClick={() =>
+              window
+                .open(
+                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
+                  '_blank',
+                )
+                .focus()
+            }
+          >
+            <AiFillWechat />
+          </button>
+        </Tooltip>
+        <Tooltip title="Tencent QQ">
+          <button
+            onClick={() =>
+              window
+                .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
+                .focus()
+            }
+          >
+            <SiTencentqq />
+          </button>
+        </Tooltip>
+      </div>
+      <div className="copy">
+        <input type="text" value={data.url} className="left field" readOnly />
+        <Tooltip title={variables.getMessage('modals.share.copy_link')} placement="top">
+          <button onClick={() => copyLink()}>
+            <MdContentCopy />
+          </button>
+        </Tooltip>
+      </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

@@ -0,0 +1,101 @@
+@import 'scss/variables';
+
+.smallModal {
+  @extend %tabText;
+
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+  padding: 15px;
+  width: 320px;
+
+  @include themed {
+    background: t($modal-secondaryColour);
+  }
+
+  .resetFooter {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-end;
+    gap: 20px;
+  }
+
+  .textButton {
+    @include basicIconButton(11px, 1.3rem, modal-text);
+
+    border: none !important;
+  }
+
+  .tooltipTitle {
+    @include themed {
+      background: t($modal-sidebar);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+      color: t($color);
+    }
+  }
+
+  .shareButtons {
+    justify-content: space-between;
+    display: flex;
+    gap: 15px;
+  }
+
+  .copy {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+
+    input[type='text'] {
+      @include themed {
+        background: t($modal-sidebar);
+        border-radius: t($borderRadius);
+        box-shadow: 0 0 0 1px t($modal-sidebarActive);
+        padding: 11px;
+        flex: 1;
+        color: t($color);
+      }
+
+      border: none;
+      outline: none;
+    }
+  }
+
+  input[type='text'] {
+    @include themed {
+      background: t($modal-sidebar);
+      border-radius: t($borderRadius);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+      padding: 11px;
+      flex: 1;
+      color: t($color);
+    }
+
+    border: none;
+    outline: none;
+  }
+}
+
+.shareHeader {
+  display: flex;
+  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

@@ -0,0 +1,52 @@
+import { useState, memo } 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 [reference, setReference] = useState(null);
+
+  const { x, y, refs, strategy } = useFloating({
+    placement: placement || 'bottom',
+    middleware: [flip(), offset(15), shift()],
+    elements: {
+      reference,
+    },
+  });
+
+  return (
+    <>
+      <div
+        className="tooltip"
+        style={style}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        onFocus={() => setShowTooltip(true)}
+        onBlur={() => setShowTooltip(false)}
+        ref={setReference}
+      >
+        {children}
+      </div>
+      {showTooltip && (
+        <span
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? '',
+            left: x ?? '',
+            display: 'flex',
+            flexFlow: 'column',
+          }}
+          className="tooltipTitle"
+        >
+          {title}
+          <span style={{ fontSize: '8px' }}>{subtitle}</span>
+        </span>
+      )}
+    </>
+  );
+}
+
+const MemoizedTooltip = 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

@@ -0,0 +1,98 @@
+@import 'scss/variables';
+
+.tooltip {
+  position: relative;
+  display: grid;
+}
+
+@keyframes floating {
+  0% {
+    transform: translate(0, -5px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0, -0);
+    opacity: 1;
+  }
+}
+
+.tooltipTitle {
+  @extend %basic;
+
+  text-align: center;
+  font-size: 0.6rem;
+  padding: 5px 10px;
+  position: absolute;
+  z-index: 1;
+
+  /* top: 100%;
+  left: 50%;
+  margin-top: 15px;
+  margin-left: -30px; */
+  cursor: initial;
+  user-select: none;
+  opacity: 1;
+  animation-name: floating;
+  animation-duration: 0.3s;
+  animation-timing-function: ease-in;
+}
+
+#modal {
+  .tooltipTitle {
+    @include themed {
+      background: t($modal-sidebar);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+      color: t($color);
+    }
+  }
+}
+
+#root {
+  .tooltipTitle {
+    @extend %basic;
+  }
+}
+
+.tooltipTitle::before {
+  transform: scale3d(0.2, 0.2, 1);
+  transition: all 0.2s ease-in-out;
+}
+
+.tooltipTitle::after {
+  transform: translate3d(0, 6px, 0);
+  transition: all 0.1s ease-in-out;
+}
+
+.tooltipTitle:hover::before,
+.tooltipTitle:hover::after {
+  opacity: 1;
+  transform: scale3d(1, 1, 1);
+}
+
+.tooltipTitle:hover::after {
+  transition: all 0.2s 0.1s ease-in-out;
+}
+
+#arrow {
+  position: absolute;
+  background: #333;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+
+.infoTooltip {
+  position: relative;
+  display: grid;
+
+  svg {
+    cursor: pointer;
+
+    &:hover {
+      @include themed {
+        color: t($color);
+      }
+    }
+  }
+}

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