Merge branch 'main' into comment-border-tweak

2024-11-22 20:31:13 +00:00 · 2023-07-10 23:13:40 +00:00 · 2023-07-10 23:13:40 +00:00 · 7378142362
commit 7378142362
parent 96e216975a 546f0ad704
45 changed files with 2628 additions and 2350 deletions
--- a/3
+++ b/3
@ -42,6 +42,9 @@ FROM node:alpine as runner
 COPY --from=builder /usr/src/app/dist /app/dist
 COPY --from=builder /usr/src/app/node_modules /app/node_modules
 RUN chown -R node:node /app
 USER node
 EXPOSE 1234
 WORKDIR /app
 CMD node dist/js/server.js
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit a241fe1255a6363c7ae1ec5a09520c066745e6ce
+Subproject commit 713ceed9c7ef84deaa222e68361e670e0763cd83
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "lemmy-ui",
-  "version": "0.18.1-rc.10",
+  "version": "0.18.2-rc.1",
  "description": "An isomorphic UI for lemmy",
  "repository": "https://github.com/LemmyNet/lemmy-ui",
  "license": "AGPL-3.0",
@ -8,7 +8,7 @@
  "scripts": {
    "analyze": "webpack --mode=none",
    "prebuild:dev": "yarn clean && node generate_translations.js",
-    "build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development",
+    "build:dev": "webpack --env LEMMY_UI_DISABLE_CSP=true --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development",
    "prebuild:prod": "yarn clean && node generate_translations.js",
    "build:prod": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=production",
    "clean": "yarn run rimraf dist",
@ -50,7 +50,7 @@
    "clean-webpack-plugin": "^4.0.0",
    "cookie": "^0.5.0",
    "copy-webpack-plugin": "^11.0.0",
-    "cross-fetch": "^3.1.5",
+    "cross-fetch": "^4.0.0",
    "css-loader": "^6.7.3",
    "date-fns": "^2.30.0",
    "emoji-mart": "^5.4.0",
@ -58,16 +58,16 @@
    "express": "~4.18.2",
    "history": "^5.3.0",
    "html-to-text": "^9.0.5",
-    "i18next": "^22.4.15",
+    "i18next": "^23.2.8",
-    "inferno": "^8.1.1",
+    "inferno": "^8.2.2",
-    "inferno-create-element": "^8.1.1",
+    "inferno-create-element": "^8.2.2",
    "inferno-helmet": "^5.2.1",
-    "inferno-hydrate": "^8.1.1",
+    "inferno-hydrate": "^8.2.2",
    "inferno-i18next-dess": "0.0.2",
-    "inferno-router": "^8.1.1",
+    "inferno-router": "^8.2.2",
-    "inferno-server": "^8.1.1",
+    "inferno-server": "^8.2.2",
    "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.18.0-rc.2",
+    "lemmy-js-client": "0.18.1",
    "lodash.isequal": "^4.5.0",
    "lodash.merge": "^4.6.2",
    "markdown-it": "^13.0.1",
@ -75,22 +75,23 @@
    "markdown-it-emoji": "^2.0.2",
    "markdown-it-footnote": "^3.0.3",
    "markdown-it-html5-embed": "^1.0.0",
    "markdown-it-ruby": "^0.1.1",
    "markdown-it-sub": "^1.0.0",
    "markdown-it-sup": "^1.0.0",
    "mini-css-extract-plugin": "^2.7.5",
    "register-service-worker": "^1.7.2",
    "run-node-webpack-plugin": "^1.3.0",
-    "sanitize-html": "^2.10.0",
+    "sanitize-html": "^2.11.0",
-    "sass": "^1.62.1",
+    "sass": "^1.63.6",
-    "sass-loader": "^13.2.2",
+    "sass-loader": "^13.3.2",
    "serialize-javascript": "^6.0.1",
    "service-worker-webpack": "^1.0.0",
    "sharp": "^0.32.1",
    "tippy.js": "^6.3.7",
    "toastify-js": "^1.12.0",
    "tributejs": "^5.1.3",
-    "webpack": "5.82.1",
+    "webpack": "5.88.1",
-    "webpack-cli": "^5.1.1",
+    "webpack-cli": "^5.1.4",
    "webpack-node-externals": "^3.0.0"
  },
  "devDependencies": {
@ -103,32 +104,32 @@
    "@types/lodash.isequal": "^4.5.6",
    "@types/markdown-it": "^12.2.3",
    "@types/markdown-it-container": "^2.0.5",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.4.0",
    "@types/path-browserify": "^1.0.0",
    "@types/sanitize-html": "^2.9.0",
    "@types/serialize-javascript": "^5.0.1",
    "@types/toastify-js": "^1.11.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/parser": "^5.61.0",
-    "eslint": "^8.40.0",
+    "eslint": "^8.44.0",
    "eslint-plugin-inferno": "^7.32.2",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "husky": "^8.0.3",
    "import-sort-style-module": "^6.0.0",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^13.2.3",
    "prettier": "^2.8.8",
    "prettier-plugin-import-sort": "^0.0.7",
    "prettier-plugin-organize-imports": "^3.2.2",
-    "prettier-plugin-packagejson": "^2.4.3",
+    "prettier-plugin-packagejson": "^2.4.4",
    "rimraf": "^5.0.0",
    "sortpack": "^2.3.4",
    "style-loader": "^3.3.2",
-    "terser": "^5.17.3",
+    "terser": "^5.18.2",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.6",
    "typescript-language-server": "^3.3.2",
    "webpack-bundle-analyzer": "^4.9.0",
-    "webpack-dev-server": "4.15.0"
+    "webpack-dev-server": "4.15.1"
  },
  "packageManager": "yarn@1.22.19",
  "engines": {
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -204,6 +204,11 @@ blockquote {
  height: 5rem;
 }
 .mobile-thumbnail-container .thumbnail {
  width: 100%;
  height: auto;
 }
 .thumbnail svg {
  height: 1.25rem;
  width: 1.25rem;
--- a/src/assets/css/themes/_variables.darkly-pureblack.scss
+++ b/src/assets/css/themes/_variables.darkly-pureblack.scss
@ -18,7 +18,7 @@ $green: #00bc8c;
 $cyan: #3498db;
 $primary: $green;
-$secondary: $gray-700;
+$secondary: $gray-600;
 $success: $green;
 $dark: $gray-300;
--- a/src/assets/css/themes/_variables.darkly-red.scss
+++ b/src/assets/css/themes/_variables.darkly-red.scss
@ -1,7 +1,6 @@
@import "variables.darkly";
 $primary: $blue;
 $secondary: #444;
 $light: $gray-800;
 $link-color: $red;
--- a/src/assets/css/themes/_variables.darkly.scss
+++ b/src/assets/css/themes/_variables.darkly.scss
@ -17,7 +17,7 @@ $green: #00bc8c;
 $cyan: #3498db;
 $primary: $green;
-$secondary: $gray-700;
+$secondary: $gray-500;
 $success: $green;
 $dark: $gray-300;
--- a/src/assets/css/themes/_variables.i386.scss
+++ b/src/assets/css/themes/_variables.i386.scss
@ -26,7 +26,7 @@ $danger: #aa0000;
 $info: #00aaaa;
 $warning: #aa00aa;
 $light: $gray-800;
-$dark: black;
+$dark: $gray-300;
 $body-bg: #000084;
 $body-color: $gray-300;
--- a/src/assets/css/themes/_variables.vaporwave-dark.scss
+++ b/src/assets/css/themes/_variables.vaporwave-dark.scss
@ -9,6 +9,7 @@ $gray-800: #303030;
 $gray-900: #222;
 $light: $gray-700;
 $dark: $gray-200;
 $body-bg: $gray-900;
 $body-color: $gray-200;
--- a/src/assets/css/themes/darkly-compact.css
+++ b/src/assets/css/themes/darkly-compact.css
@ -70,7 +70,7 @@ hr.my-3 {
  --bs-gray-800: #303030;
  --bs-gray-900: #222;
  --bs-primary: #00bc8c;
-  --bs-secondary: #444;
+  --bs-secondary: #adb5bd;
  --bs-success: #00bc8c;
  --bs-info: #3498db;
  --bs-warning: #f39c12;
@ -78,7 +78,7 @@ hr.my-3 {
  --bs-light: #303030;
  --bs-dark: #dee2e6;
  --bs-primary-rgb: 0, 188, 140;
-  --bs-secondary-rgb: 68, 68, 68;
+  --bs-secondary-rgb: 173, 181, 189;
  --bs-success-rgb: 0, 188, 140;
  --bs-info-rgb: 52, 152, 219;
  --bs-warning-rgb: 243, 156, 18;
@ -86,7 +86,7 @@ hr.my-3 {
  --bs-light-rgb: 48, 48, 48;
  --bs-dark-rgb: 222, 226, 230;
  --bs-primary-text-emphasis: #004b38;
-  --bs-secondary-text-emphasis: #1b1b1b;
+  --bs-secondary-text-emphasis: #45484c;
  --bs-success-text-emphasis: #004b38;
  --bs-info-text-emphasis: #153d58;
  --bs-warning-text-emphasis: #613e07;
@ -94,7 +94,7 @@ hr.my-3 {
  --bs-light-text-emphasis: #444;
  --bs-dark-text-emphasis: #444;
  --bs-primary-bg-subtle: #ccf2e8;
-  --bs-secondary-bg-subtle: #dadada;
+  --bs-secondary-bg-subtle: #eff0f2;
  --bs-success-bg-subtle: #ccf2e8;
  --bs-info-bg-subtle: #d6eaf8;
  --bs-warning-bg-subtle: #fdebd0;
@ -102,7 +102,7 @@ hr.my-3 {
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #99e4d1;
-  --bs-secondary-border-subtle: #b4b4b4;
+  --bs-secondary-border-subtle: #dee1e5;
  --bs-success-border-subtle: #99e4d1;
  --bs-info-border-subtle: #aed6f1;
  --bs-warning-border-subtle: #fad7a0;
@ -182,7 +182,7 @@ hr.my-3 {
  --bs-tertiary-bg: #292929;
  --bs-tertiary-bg-rgb: 41, 41, 41;
  --bs-primary-text-emphasis: #66d7ba;
-  --bs-secondary-text-emphasis: #8f8f8f;
+  --bs-secondary-text-emphasis: #ced3d7;
  --bs-success-text-emphasis: #66d7ba;
  --bs-info-text-emphasis: #85c1e9;
  --bs-warning-text-emphasis: #f8c471;
@ -190,7 +190,7 @@ hr.my-3 {
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #00261c;
-  --bs-secondary-bg-subtle: #0e0e0e;
+  --bs-secondary-bg-subtle: #232426;
  --bs-success-bg-subtle: #00261c;
  --bs-info-bg-subtle: #0a1e2c;
  --bs-warning-bg-subtle: #311f04;
@ -198,7 +198,7 @@ hr.my-3 {
  --bs-light-bg-subtle: #303030;
  --bs-dark-bg-subtle: #181818;
  --bs-primary-border-subtle: #007154;
-  --bs-secondary-border-subtle: #292929;
+  --bs-secondary-border-subtle: #686d71;
  --bs-success-border-subtle: #007154;
  --bs-info-border-subtle: #1f5b83;
  --bs-warning-border-subtle: #925e0b;
@ -1961,13 +1961,13 @@ progress {
 .table-secondary {
  --bs-table-color: #000;
-  --bs-table-bg: #dadada;
+  --bs-table-bg: #eff0f2;
-  --bs-table-border-color: #c4c4c4;
+  --bs-table-border-color: #d7d8da;
-  --bs-table-striped-bg: #cfcfcf;
+  --bs-table-striped-bg: #e3e4e6;
  --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c4c4c4;
+  --bs-table-active-bg: #d7d8da;
  --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cacaca;
+  --bs-table-hover-bg: #dddee0;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
@ -2994,20 +2994,20 @@ textarea.form-control-lg {
 }
 .btn-secondary {
-  --bs-btn-color: #fff;
+  --bs-btn-color: #000;
-  --bs-btn-bg: #444;
+  --bs-btn-bg: #adb5bd;
-  --bs-btn-border-color: #444;
+  --bs-btn-border-color: #adb5bd;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #3a3a3a;
+  --bs-btn-hover-bg: #b9c0c7;
-  --bs-btn-hover-border-color: #363636;
+  --bs-btn-hover-border-color: #b5bcc4;
-  --bs-btn-focus-shadow-rgb: 96, 96, 96;
+  --bs-btn-focus-shadow-rgb: 147, 154, 161;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #363636;
+  --bs-btn-active-bg: #bdc4ca;
-  --bs-btn-active-border-color: #333333;
+  --bs-btn-active-border-color: #b5bcc4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #444;
+  --bs-btn-disabled-bg: #adb5bd;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
 }
 .btn-success {
@ -3130,19 +3130,19 @@ textarea.form-control-lg {
 }
 .btn-outline-secondary {
-  --bs-btn-color: #444;
+  --bs-btn-color: #adb5bd;
-  --bs-btn-border-color: #444;
+  --bs-btn-border-color: #adb5bd;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #444;
+  --bs-btn-hover-bg: #adb5bd;
-  --bs-btn-hover-border-color: #444;
+  --bs-btn-hover-border-color: #adb5bd;
-  --bs-btn-focus-shadow-rgb: 68, 68, 68;
+  --bs-btn-focus-shadow-rgb: 173, 181, 189;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #444;
+  --bs-btn-active-bg: #adb5bd;
-  --bs-btn-active-border-color: #444;
+  --bs-btn-active-border-color: #adb5bd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #444;
+  --bs-btn-disabled-color: #adb5bd;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
  --bs-gradient: none;
 }
@ -6777,8 +6777,8 @@ textarea.form-control-lg {
 }
 .text-bg-secondary {
-  color: #fff !important;
+  color: #000 !important;
-  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important;
 }
 .text-bg-success {
@ -6825,8 +6825,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-success {
--- a/src/assets/css/themes/darkly-pureblack.css
+++ b/src/assets/css/themes/darkly-pureblack.css
@ -30,7 +30,7 @@
  --bs-gray-800: #202020;
  --bs-gray-900: #111;
  --bs-primary: #00bc8c;
-  --bs-secondary: #333;
+  --bs-secondary: #666;
  --bs-success: #00bc8c;
  --bs-info: #3498db;
  --bs-warning: #f39c12;
@ -38,7 +38,7 @@
  --bs-light: #111;
  --bs-dark: #dee2e6;
  --bs-primary-rgb: 0, 188, 140;
-  --bs-secondary-rgb: 51, 51, 51;
+  --bs-secondary-rgb: 102, 102, 102;
  --bs-success-rgb: 0, 188, 140;
  --bs-info-rgb: 52, 152, 219;
  --bs-warning-rgb: 243, 156, 18;
@ -46,7 +46,7 @@
  --bs-light-rgb: 17, 17, 17;
  --bs-dark-rgb: 222, 226, 230;
  --bs-primary-text-emphasis: #004b38;
-  --bs-secondary-text-emphasis: #141414;
+  --bs-secondary-text-emphasis: #292929;
  --bs-success-text-emphasis: #004b38;
  --bs-info-text-emphasis: #153d58;
  --bs-warning-text-emphasis: #613e07;
@ -54,7 +54,7 @@
  --bs-light-text-emphasis: #333;
  --bs-dark-text-emphasis: #333;
  --bs-primary-bg-subtle: #ccf2e8;
-  --bs-secondary-bg-subtle: #d6d6d6;
+  --bs-secondary-bg-subtle: #e0e0e0;
  --bs-success-bg-subtle: #ccf2e8;
  --bs-info-bg-subtle: #d6eaf8;
  --bs-warning-bg-subtle: #fdebd0;
@ -62,7 +62,7 @@
  --bs-light-bg-subtle: #f6f6f7;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #99e4d1;
-  --bs-secondary-border-subtle: #adadad;
+  --bs-secondary-border-subtle: #c2c2c2;
  --bs-success-border-subtle: #99e4d1;
  --bs-info-border-subtle: #aed6f1;
  --bs-warning-border-subtle: #fad7a0;
@ -142,7 +142,7 @@
  --bs-tertiary-bg: #191919;
  --bs-tertiary-bg-rgb: 25, 25, 25;
  --bs-primary-text-emphasis: #66d7ba;
-  --bs-secondary-text-emphasis: #858585;
+  --bs-secondary-text-emphasis: #a3a3a3;
  --bs-success-text-emphasis: #66d7ba;
  --bs-info-text-emphasis: #85c1e9;
  --bs-warning-text-emphasis: #f8c471;
@ -150,7 +150,7 @@
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #00261c;
-  --bs-secondary-bg-subtle: #0a0a0a;
+  --bs-secondary-bg-subtle: #141414;
  --bs-success-bg-subtle: #00261c;
  --bs-info-bg-subtle: #0a1e2c;
  --bs-warning-bg-subtle: #311f04;
@ -158,7 +158,7 @@
  --bs-light-bg-subtle: #202020;
  --bs-dark-bg-subtle: #101010;
  --bs-primary-border-subtle: #007154;
-  --bs-secondary-border-subtle: #1f1f1f;
+  --bs-secondary-border-subtle: #3d3d3d;
  --bs-success-border-subtle: #007154;
  --bs-info-border-subtle: #1f5b83;
  --bs-warning-border-subtle: #925e0b;
@ -1945,13 +1945,13 @@ progress {
 .table-secondary {
  --bs-table-color: #000;
-  --bs-table-bg: #d6d6d6;
+  --bs-table-bg: #e0e0e0;
-  --bs-table-border-color: #c1c1c1;
+  --bs-table-border-color: #cacaca;
-  --bs-table-striped-bg: #cbcbcb;
+  --bs-table-striped-bg: #d5d5d5;
  --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c1c1c1;
+  --bs-table-active-bg: #cacaca;
  --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c6c6c6;
+  --bs-table-hover-bg: #cfcfcf;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
@ -2979,19 +2979,19 @@ textarea.form-control-lg {
 .btn-secondary {
  --bs-btn-color: #f3f3f3;
-  --bs-btn-bg: #333;
+  --bs-btn-bg: #666;
-  --bs-btn-border-color: #333;
+  --bs-btn-border-color: #666;
  --bs-btn-hover-color: #f3f3f3;
-  --bs-btn-hover-bg: #2b2b2b;
+  --bs-btn-hover-bg: #575757;
-  --bs-btn-hover-border-color: #292929;
+  --bs-btn-hover-border-color: #525252;
-  --bs-btn-focus-shadow-rgb: 80, 80, 80;
+  --bs-btn-focus-shadow-rgb: 123, 123, 123;
  --bs-btn-active-color: #f3f3f3;
-  --bs-btn-active-bg: #292929;
+  --bs-btn-active-bg: #525252;
-  --bs-btn-active-border-color: #262626;
+  --bs-btn-active-border-color: #4d4d4d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f3f3f3;
-  --bs-btn-disabled-bg: #333;
+  --bs-btn-disabled-bg: #666;
-  --bs-btn-disabled-border-color: #333;
+  --bs-btn-disabled-border-color: #666;
 }
 .btn-success {
@ -3114,19 +3114,19 @@ textarea.form-control-lg {
 }
 .btn-outline-secondary {
-  --bs-btn-color: #333;
+  --bs-btn-color: #666;
-  --bs-btn-border-color: #333;
+  --bs-btn-border-color: #666;
  --bs-btn-hover-color: #f3f3f3;
-  --bs-btn-hover-bg: #333;
+  --bs-btn-hover-bg: #666;
-  --bs-btn-hover-border-color: #333;
+  --bs-btn-hover-border-color: #666;
-  --bs-btn-focus-shadow-rgb: 51, 51, 51;
+  --bs-btn-focus-shadow-rgb: 102, 102, 102;
  --bs-btn-active-color: #f3f3f3;
-  --bs-btn-active-bg: #333;
+  --bs-btn-active-bg: #666;
-  --bs-btn-active-border-color: #333;
+  --bs-btn-active-border-color: #666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #333;
+  --bs-btn-disabled-color: #666;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #333;
+  --bs-btn-disabled-border-color: #666;
  --bs-gradient: none;
 }
@ -6766,7 +6766,7 @@ textarea.form-control-lg {
 .text-bg-secondary {
  color: #f3f3f3 !important;
-  background-color: RGBA(51, 51, 51, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(102, 102, 102, var(--bs-bg-opacity, 1)) !important;
 }
 .text-bg-success {
@ -6813,8 +6813,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(41, 41, 41, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(82, 82, 82, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(41, 41, 41, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(82, 82, 82, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-success {
--- a/src/assets/css/themes/darkly-red.css
+++ b/src/assets/css/themes/darkly-red.css
@ -30,7 +30,7 @@
  --bs-gray-800: #303030;
  --bs-gray-900: #222;
  --bs-primary: #375a7f;
-  --bs-secondary: #444;
+  --bs-secondary: #adb5bd;
  --bs-success: #00bc8c;
  --bs-info: #3498db;
  --bs-warning: #f39c12;
@ -38,7 +38,7 @@
  --bs-light: #303030;
  --bs-dark: #dee2e6;
  --bs-primary-rgb: 55, 90, 127;
-  --bs-secondary-rgb: 68, 68, 68;
+  --bs-secondary-rgb: 173, 181, 189;
  --bs-success-rgb: 0, 188, 140;
  --bs-info-rgb: 52, 152, 219;
  --bs-warning-rgb: 243, 156, 18;
@ -46,7 +46,7 @@
  --bs-light-rgb: 48, 48, 48;
  --bs-dark-rgb: 222, 226, 230;
  --bs-primary-text-emphasis: #162433;
-  --bs-secondary-text-emphasis: #1b1b1b;
+  --bs-secondary-text-emphasis: #45484c;
  --bs-success-text-emphasis: #004b38;
  --bs-info-text-emphasis: #153d58;
  --bs-warning-text-emphasis: #613e07;
@ -54,7 +54,7 @@
  --bs-light-text-emphasis: #444;
  --bs-dark-text-emphasis: #444;
  --bs-primary-bg-subtle: #d7dee5;
-  --bs-secondary-bg-subtle: #dadada;
+  --bs-secondary-bg-subtle: #eff0f2;
  --bs-success-bg-subtle: #ccf2e8;
  --bs-info-bg-subtle: #d6eaf8;
  --bs-warning-bg-subtle: #fdebd0;
@ -62,7 +62,7 @@
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #afbdcc;
-  --bs-secondary-border-subtle: #b4b4b4;
+  --bs-secondary-border-subtle: #dee1e5;
  --bs-success-border-subtle: #99e4d1;
  --bs-info-border-subtle: #aed6f1;
  --bs-warning-border-subtle: #fad7a0;
@ -142,7 +142,7 @@
  --bs-tertiary-bg: #292929;
  --bs-tertiary-bg-rgb: 41, 41, 41;
  --bs-primary-text-emphasis: #879cb2;
-  --bs-secondary-text-emphasis: #8f8f8f;
+  --bs-secondary-text-emphasis: #ced3d7;
  --bs-success-text-emphasis: #66d7ba;
  --bs-info-text-emphasis: #85c1e9;
  --bs-warning-text-emphasis: #f8c471;
@ -150,7 +150,7 @@
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #0b1219;
-  --bs-secondary-bg-subtle: #0e0e0e;
+  --bs-secondary-bg-subtle: #232426;
  --bs-success-bg-subtle: #00261c;
  --bs-info-bg-subtle: #0a1e2c;
  --bs-warning-bg-subtle: #311f04;
@ -158,7 +158,7 @@
  --bs-light-bg-subtle: #303030;
  --bs-dark-bg-subtle: #181818;
  --bs-primary-border-subtle: #21364c;
-  --bs-secondary-border-subtle: #292929;
+  --bs-secondary-border-subtle: #686d71;
  --bs-success-border-subtle: #007154;
  --bs-info-border-subtle: #1f5b83;
  --bs-warning-border-subtle: #925e0b;
@ -1945,13 +1945,13 @@ progress {
 .table-secondary {
  --bs-table-color: #000;
-  --bs-table-bg: #dadada;
+  --bs-table-bg: #eff0f2;
-  --bs-table-border-color: #c4c4c4;
+  --bs-table-border-color: #d7d8da;
-  --bs-table-striped-bg: #cfcfcf;
+  --bs-table-striped-bg: #e3e4e6;
  --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c4c4c4;
+  --bs-table-active-bg: #d7d8da;
  --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cacaca;
+  --bs-table-hover-bg: #dddee0;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
@ -2978,20 +2978,20 @@ textarea.form-control-lg {
 }
 .btn-secondary {
-  --bs-btn-color: #fff;
+  --bs-btn-color: #000;
-  --bs-btn-bg: #444;
+  --bs-btn-bg: #adb5bd;
-  --bs-btn-border-color: #444;
+  --bs-btn-border-color: #adb5bd;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #3a3a3a;
+  --bs-btn-hover-bg: #b9c0c7;
-  --bs-btn-hover-border-color: #363636;
+  --bs-btn-hover-border-color: #b5bcc4;
-  --bs-btn-focus-shadow-rgb: 96, 96, 96;
+  --bs-btn-focus-shadow-rgb: 147, 154, 161;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #363636;
+  --bs-btn-active-bg: #bdc4ca;
-  --bs-btn-active-border-color: #333333;
+  --bs-btn-active-border-color: #b5bcc4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #444;
+  --bs-btn-disabled-bg: #adb5bd;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
 }
 .btn-success {
@ -3114,19 +3114,19 @@ textarea.form-control-lg {
 }
 .btn-outline-secondary {
-  --bs-btn-color: #444;
+  --bs-btn-color: #adb5bd;
-  --bs-btn-border-color: #444;
+  --bs-btn-border-color: #adb5bd;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #444;
+  --bs-btn-hover-bg: #adb5bd;
-  --bs-btn-hover-border-color: #444;
+  --bs-btn-hover-border-color: #adb5bd;
-  --bs-btn-focus-shadow-rgb: 68, 68, 68;
+  --bs-btn-focus-shadow-rgb: 173, 181, 189;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #444;
+  --bs-btn-active-bg: #adb5bd;
-  --bs-btn-active-border-color: #444;
+  --bs-btn-active-border-color: #adb5bd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #444;
+  --bs-btn-disabled-color: #adb5bd;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
  --bs-gradient: none;
 }
@ -6765,8 +6765,8 @@ textarea.form-control-lg {
 }
 .text-bg-secondary {
-  color: #fff !important;
+  color: #000 !important;
-  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important;
 }
 .text-bg-success {
@ -6813,8 +6813,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-success {
--- a/src/assets/css/themes/darkly.css
+++ b/src/assets/css/themes/darkly.css
@ -30,7 +30,7 @@
  --bs-gray-800: #303030;
  --bs-gray-900: #222;
  --bs-primary: #00bc8c;
-  --bs-secondary: #444;
+  --bs-secondary: #adb5bd;
  --bs-success: #00bc8c;
  --bs-info: #3498db;
  --bs-warning: #f39c12;
@ -38,7 +38,7 @@
  --bs-light: #303030;
  --bs-dark: #dee2e6;
  --bs-primary-rgb: 0, 188, 140;
-  --bs-secondary-rgb: 68, 68, 68;
+  --bs-secondary-rgb: 173, 181, 189;
  --bs-success-rgb: 0, 188, 140;
  --bs-info-rgb: 52, 152, 219;
  --bs-warning-rgb: 243, 156, 18;
@ -46,7 +46,7 @@
  --bs-light-rgb: 48, 48, 48;
  --bs-dark-rgb: 222, 226, 230;
  --bs-primary-text-emphasis: #004b38;
-  --bs-secondary-text-emphasis: #1b1b1b;
+  --bs-secondary-text-emphasis: #45484c;
  --bs-success-text-emphasis: #004b38;
  --bs-info-text-emphasis: #153d58;
  --bs-warning-text-emphasis: #613e07;
@ -54,7 +54,7 @@
  --bs-light-text-emphasis: #444;
  --bs-dark-text-emphasis: #444;
  --bs-primary-bg-subtle: #ccf2e8;
-  --bs-secondary-bg-subtle: #dadada;
+  --bs-secondary-bg-subtle: #eff0f2;
  --bs-success-bg-subtle: #ccf2e8;
  --bs-info-bg-subtle: #d6eaf8;
  --bs-warning-bg-subtle: #fdebd0;
@ -62,7 +62,7 @@
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #99e4d1;
-  --bs-secondary-border-subtle: #b4b4b4;
+  --bs-secondary-border-subtle: #dee1e5;
  --bs-success-border-subtle: #99e4d1;
  --bs-info-border-subtle: #aed6f1;
  --bs-warning-border-subtle: #fad7a0;
@ -142,7 +142,7 @@
  --bs-tertiary-bg: #292929;
  --bs-tertiary-bg-rgb: 41, 41, 41;
  --bs-primary-text-emphasis: #66d7ba;
-  --bs-secondary-text-emphasis: #8f8f8f;
+  --bs-secondary-text-emphasis: #ced3d7;
  --bs-success-text-emphasis: #66d7ba;
  --bs-info-text-emphasis: #85c1e9;
  --bs-warning-text-emphasis: #f8c471;
@ -150,7 +150,7 @@
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #00261c;
-  --bs-secondary-bg-subtle: #0e0e0e;
+  --bs-secondary-bg-subtle: #232426;
  --bs-success-bg-subtle: #00261c;
  --bs-info-bg-subtle: #0a1e2c;
  --bs-warning-bg-subtle: #311f04;
@ -158,7 +158,7 @@
  --bs-light-bg-subtle: #303030;
  --bs-dark-bg-subtle: #181818;
  --bs-primary-border-subtle: #007154;
-  --bs-secondary-border-subtle: #292929;
+  --bs-secondary-border-subtle: #686d71;
  --bs-success-border-subtle: #007154;
  --bs-info-border-subtle: #1f5b83;
  --bs-warning-border-subtle: #925e0b;
@ -1945,13 +1945,13 @@ progress {
 .table-secondary {
  --bs-table-color: #000;
-  --bs-table-bg: #dadada;
+  --bs-table-bg: #eff0f2;
-  --bs-table-border-color: #c4c4c4;
+  --bs-table-border-color: #d7d8da;
-  --bs-table-striped-bg: #cfcfcf;
+  --bs-table-striped-bg: #e3e4e6;
  --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c4c4c4;
+  --bs-table-active-bg: #d7d8da;
  --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cacaca;
+  --bs-table-hover-bg: #dddee0;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
@ -2978,20 +2978,20 @@ textarea.form-control-lg {
 }
 .btn-secondary {
-  --bs-btn-color: #fff;
+  --bs-btn-color: #000;
-  --bs-btn-bg: #444;
+  --bs-btn-bg: #adb5bd;
-  --bs-btn-border-color: #444;
+  --bs-btn-border-color: #adb5bd;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #3a3a3a;
+  --bs-btn-hover-bg: #b9c0c7;
-  --bs-btn-hover-border-color: #363636;
+  --bs-btn-hover-border-color: #b5bcc4;
-  --bs-btn-focus-shadow-rgb: 96, 96, 96;
+  --bs-btn-focus-shadow-rgb: 147, 154, 161;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #363636;
+  --bs-btn-active-bg: #bdc4ca;
-  --bs-btn-active-border-color: #333333;
+  --bs-btn-active-border-color: #b5bcc4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #444;
+  --bs-btn-disabled-bg: #adb5bd;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
 }
 .btn-success {
@ -3114,19 +3114,19 @@ textarea.form-control-lg {
 }
 .btn-outline-secondary {
-  --bs-btn-color: #444;
+  --bs-btn-color: #adb5bd;
-  --bs-btn-border-color: #444;
+  --bs-btn-border-color: #adb5bd;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #444;
+  --bs-btn-hover-bg: #adb5bd;
-  --bs-btn-hover-border-color: #444;
+  --bs-btn-hover-border-color: #adb5bd;
-  --bs-btn-focus-shadow-rgb: 68, 68, 68;
+  --bs-btn-focus-shadow-rgb: 173, 181, 189;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #444;
+  --bs-btn-active-bg: #adb5bd;
-  --bs-btn-active-border-color: #444;
+  --bs-btn-active-border-color: #adb5bd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #444;
+  --bs-btn-disabled-color: #adb5bd;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #444;
+  --bs-btn-disabled-border-color: #adb5bd;
  --bs-gradient: none;
 }
@ -6765,8 +6765,8 @@ textarea.form-control-lg {
 }
 .text-bg-secondary {
-  color: #fff !important;
+  color: #000 !important;
-  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important;
 }
 .text-bg-success {
@ -6813,8 +6813,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-success {
--- a/src/assets/css/themes/i386.css
+++ b/src/assets/css/themes/i386.css
@ -26,35 +26,35 @@
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
-  --bs-gray-700: #495057;
+  --bs-gray-700: #444;
  --bs-gray-800: #303030;
-  --bs-gray-900: #222;
+  --bs-gray-900: #2f2f2f;
  --bs-primary: #fefe54;
-  --bs-secondary: #222;
+  --bs-secondary: #303030;
  --bs-success: #00aa00;
  --bs-info: #00aaaa;
  --bs-warning: #aa00aa;
  --bs-danger: #aa0000;
-  --bs-light: #303030;
+  --bs-light: #444;
-  --bs-dark: black;
+  --bs-dark: #bbb;
  --bs-primary-rgb: 254, 254, 84;
-  --bs-secondary-rgb: 34, 34, 34;
+  --bs-secondary-rgb: 48, 48, 48;
  --bs-success-rgb: 0, 170, 0;
  --bs-info-rgb: 0, 170, 170;
  --bs-warning-rgb: 170, 0, 170;
  --bs-danger-rgb: 170, 0, 0;
-  --bs-light-rgb: 48, 48, 48;
+  --bs-light-rgb: 68, 68, 68;
-  --bs-dark-rgb: 0, 0, 0;
+  --bs-dark-rgb: 187, 187, 187;
  --bs-primary-text-emphasis: #666622;
-  --bs-secondary-text-emphasis: #0e0e0e;
+  --bs-secondary-text-emphasis: #131313;
  --bs-success-text-emphasis: #004400;
  --bs-info-text-emphasis: #004444;
  --bs-warning-text-emphasis: #440044;
  --bs-danger-text-emphasis: #440000;
-  --bs-light-text-emphasis: #495057;
+  --bs-light-text-emphasis: #444;
-  --bs-dark-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #444;
  --bs-primary-bg-subtle: #ffffdd;
-  --bs-secondary-bg-subtle: lightgray;
+  --bs-secondary-bg-subtle: #d6d6d6;
  --bs-success-bg-subtle: #cceecc;
  --bs-info-bg-subtle: #cceeee;
  --bs-warning-bg-subtle: #eeccee;
@ -62,7 +62,7 @@
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #ffffbb;
-  --bs-secondary-border-subtle: #a7a7a7;
+  --bs-secondary-border-subtle: #acacac;
  --bs-success-border-subtle: #99dd99;
  --bs-info-border-subtle: #99dddd;
  --bs-warning-border-subtle: #dd99dd;
@ -129,8 +129,8 @@
  color-scheme: dark;
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
-  --bs-body-bg: #222;
+  --bs-body-bg: #2f2f2f;
-  --bs-body-bg-rgb: 34, 34, 34;
+  --bs-body-bg-rgb: 47, 47, 47;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(173, 181, 189, 0.75);
@ -139,10 +139,10 @@
  --bs-secondary-bg-rgb: 48, 48, 48;
  --bs-tertiary-color: rgba(173, 181, 189, 0.5);
  --bs-tertiary-color-rgb: 173, 181, 189;
-  --bs-tertiary-bg: #292929;
+  --bs-tertiary-bg: #303030;
-  --bs-tertiary-bg-rgb: 41, 41, 41;
+  --bs-tertiary-bg-rgb: 48, 48, 48;
  --bs-primary-text-emphasis: #fefe98;
-  --bs-secondary-text-emphasis: #7a7a7a;
+  --bs-secondary-text-emphasis: #838383;
  --bs-success-text-emphasis: #66cc66;
  --bs-info-text-emphasis: #66cccc;
  --bs-warning-text-emphasis: #cc66cc;
@ -150,7 +150,7 @@
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #bbb;
  --bs-primary-bg-subtle: #333311;
-  --bs-secondary-bg-subtle: #070707;
+  --bs-secondary-bg-subtle: #0a0a0a;
  --bs-success-bg-subtle: #002200;
  --bs-info-bg-subtle: #002222;
  --bs-warning-bg-subtle: #220022;
@ -158,12 +158,12 @@
  --bs-light-bg-subtle: #303030;
  --bs-dark-bg-subtle: #181818;
  --bs-primary-border-subtle: #989832;
-  --bs-secondary-border-subtle: #141414;
+  --bs-secondary-border-subtle: #1d1d1d;
  --bs-success-border-subtle: #006600;
  --bs-info-border-subtle: #006666;
  --bs-warning-border-subtle: #660066;
  --bs-danger-border-subtle: #660000;
-  --bs-light-border-subtle: #495057;
+  --bs-light-border-subtle: #444;
  --bs-dark-border-subtle: #303030;
  --bs-heading-color: inherit;
  --bs-link-color: #fefe98;
@ -171,7 +171,7 @@
  --bs-link-color-rgb: 254, 254, 152;
  --bs-link-hover-color-rgb: 254, 254, 173;
  --bs-code-color: #fe98fe;
-  --bs-border-color: #495057;
+  --bs-border-color: #444;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #99ff99;
  --bs-form-valid-border-color: #99ff99;
@ -1942,13 +1942,13 @@ progress {
 .table-secondary {
  --bs-table-color: #000;
-  --bs-table-bg: lightgray;
+  --bs-table-bg: #d6d6d6;
-  --bs-table-border-color: #bebebe;
+  --bs-table-border-color: #c1c1c1;
-  --bs-table-striped-bg: #c8c8c8;
+  --bs-table-striped-bg: #cbcbcb;
  --bs-table-striped-color: #000;
-  --bs-table-active-bg: #bebebe;
+  --bs-table-active-bg: #c1c1c1;
  --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c3c3c3;
+  --bs-table-hover-bg: #c6c6c6;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
@ -2012,28 +2012,28 @@ progress {
 .table-light {
  --bs-table-color: #fff;
-  --bs-table-bg: #303030;
+  --bs-table-bg: #444;
-  --bs-table-border-color: #454545;
+  --bs-table-border-color: #575757;
-  --bs-table-striped-bg: #3a3a3a;
+  --bs-table-striped-bg: #4d4d4d;
  --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #454545;
+  --bs-table-active-bg: #575757;
  --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #404040;
+  --bs-table-hover-bg: #525252;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
 }
 .table-dark {
-  --bs-table-color: #fff;
+  --bs-table-color: #000;
-  --bs-table-bg: black;
+  --bs-table-bg: #bbb;
-  --bs-table-border-color: #1a1a1a;
+  --bs-table-border-color: #a8a8a8;
-  --bs-table-striped-bg: #0d0d0d;
+  --bs-table-striped-bg: #b2b2b2;
-  --bs-table-striped-color: #fff;
+  --bs-table-striped-color: #000;
-  --bs-table-active-bg: #1a1a1a;
+  --bs-table-active-bg: #a8a8a8;
-  --bs-table-active-color: #fff;
+  --bs-table-active-color: #000;
-  --bs-table-hover-bg: #131313;
+  --bs-table-hover-bg: #adadad;
-  --bs-table-hover-color: #fff;
+  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
 }
@ -2933,19 +2933,19 @@ textarea.form-control-lg {
 .btn-secondary {
  --bs-btn-color: #fff;
-  --bs-btn-bg: #222;
+  --bs-btn-bg: #303030;
-  --bs-btn-border-color: #222;
+  --bs-btn-border-color: #303030;
  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #1d1d1d;
+  --bs-btn-hover-bg: #292929;
-  --bs-btn-hover-border-color: #1b1b1b;
+  --bs-btn-hover-border-color: #262626;
-  --bs-btn-focus-shadow-rgb: 67, 67, 67;
+  --bs-btn-focus-shadow-rgb: 79, 79, 79;
  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #1b1b1b;
+  --bs-btn-active-bg: #262626;
-  --bs-btn-active-border-color: #1a1a1a;
+  --bs-btn-active-border-color: #242424;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #222;
+  --bs-btn-disabled-bg: #303030;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-border-color: #303030;
 }
 .btn-success {
@ -3018,36 +3018,36 @@ textarea.form-control-lg {
 .btn-light {
  --bs-btn-color: #fff;
-  --bs-btn-bg: #303030;
+  --bs-btn-bg: #444;
-  --bs-btn-border-color: #303030;
+  --bs-btn-border-color: #444;
  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #292929;
+  --bs-btn-hover-bg: #3a3a3a;
-  --bs-btn-hover-border-color: #262626;
+  --bs-btn-hover-border-color: #363636;
-  --bs-btn-focus-shadow-rgb: 79, 79, 79;
+  --bs-btn-focus-shadow-rgb: 96, 96, 96;
  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #262626;
+  --bs-btn-active-bg: #363636;
-  --bs-btn-active-border-color: #242424;
+  --bs-btn-active-border-color: #333333;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #303030;
+  --bs-btn-disabled-bg: #444;
-  --bs-btn-disabled-border-color: #303030;
+  --bs-btn-disabled-border-color: #444;
 }
 .btn-dark {
-  --bs-btn-color: #fff;
+  --bs-btn-color: #000;
-  --bs-btn-bg: black;
+  --bs-btn-bg: #bbb;
-  --bs-btn-border-color: black;
+  --bs-btn-border-color: #bbb;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #262626;
+  --bs-btn-hover-bg: #c5c5c5;
-  --bs-btn-hover-border-color: #1a1a1a;
+  --bs-btn-hover-border-color: #c2c2c2;
-  --bs-btn-focus-shadow-rgb: 38, 38, 38;
+  --bs-btn-focus-shadow-rgb: 159, 159, 159;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #333333;
+  --bs-btn-active-bg: #c9c9c9;
-  --bs-btn-active-border-color: #1a1a1a;
+  --bs-btn-active-border-color: #c2c2c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: black;
+  --bs-btn-disabled-bg: #bbb;
-  --bs-btn-disabled-border-color: black;
+  --bs-btn-disabled-border-color: #bbb;
 }
 .btn-outline-primary {
@ -3068,19 +3068,19 @@ textarea.form-control-lg {
 }
 .btn-outline-secondary {
-  --bs-btn-color: #222;
+  --bs-btn-color: #303030;
-  --bs-btn-border-color: #222;
+  --bs-btn-border-color: #303030;
  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #222;
+  --bs-btn-hover-bg: #303030;
-  --bs-btn-hover-border-color: #222;
+  --bs-btn-hover-border-color: #303030;
-  --bs-btn-focus-shadow-rgb: 34, 34, 34;
+  --bs-btn-focus-shadow-rgb: 48, 48, 48;
  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #222;
+  --bs-btn-active-bg: #303030;
-  --bs-btn-active-border-color: #222;
+  --bs-btn-active-border-color: #303030;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #222;
+  --bs-btn-disabled-color: #303030;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-border-color: #303030;
  --bs-gradient: none;
 }
@ -3153,36 +3153,36 @@ textarea.form-control-lg {
 }
 .btn-outline-light {
-  --bs-btn-color: #303030;
+  --bs-btn-color: #444;
-  --bs-btn-border-color: #303030;
+  --bs-btn-border-color: #444;
  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #303030;
+  --bs-btn-hover-bg: #444;
-  --bs-btn-hover-border-color: #303030;
+  --bs-btn-hover-border-color: #444;
-  --bs-btn-focus-shadow-rgb: 48, 48, 48;
+  --bs-btn-focus-shadow-rgb: 68, 68, 68;
  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #303030;
+  --bs-btn-active-bg: #444;
-  --bs-btn-active-border-color: #303030;
+  --bs-btn-active-border-color: #444;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #303030;
+  --bs-btn-disabled-color: #444;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #303030;
+  --bs-btn-disabled-border-color: #444;
  --bs-gradient: none;
 }
 .btn-outline-dark {
-  --bs-btn-color: black;
+  --bs-btn-color: #bbb;
-  --bs-btn-border-color: black;
+  --bs-btn-border-color: #bbb;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: black;
+  --bs-btn-hover-bg: #bbb;
-  --bs-btn-hover-border-color: black;
+  --bs-btn-hover-border-color: #bbb;
-  --bs-btn-focus-shadow-rgb: 0, 0, 0;
+  --bs-btn-focus-shadow-rgb: 187, 187, 187;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: black;
+  --bs-btn-active-bg: #bbb;
-  --bs-btn-active-border-color: black;
+  --bs-btn-active-border-color: #bbb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: black;
+  --bs-btn-disabled-color: #bbb;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: black;
+  --bs-btn-disabled-border-color: #bbb;
  --bs-gradient: none;
 }
@ -6490,7 +6490,7 @@ textarea.form-control-lg {
 .text-bg-secondary {
  color: #fff !important;
-  background-color: RGBA(34, 34, 34, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(48, 48, 48, var(--bs-bg-opacity, 1)) !important;
 }
 .text-bg-success {
@ -6515,12 +6515,12 @@ textarea.form-control-lg {
 .text-bg-light {
  color: #fff !important;
-  background-color: RGBA(48, 48, 48, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
 }
 .text-bg-dark {
-  color: #fff !important;
+  color: #000 !important;
-  background-color: RGBA(0, 0, 0, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(187, 187, 187, var(--bs-bg-opacity, 1)) !important;
 }
 .link-primary {
@ -6537,8 +6537,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(27, 27, 27, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(38, 38, 38, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(27, 27, 27, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(38, 38, 38, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-success {
@ -6582,8 +6582,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-light:hover, .link-light:focus {
-  color: RGBA(38, 38, 38, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(38, 38, 38, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-dark {
@ -6591,8 +6591,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-dark:hover, .link-dark:focus {
-  color: RGBA(0, 0, 0, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(201, 201, 201, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(0, 0, 0, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(201, 201, 201, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-body-emphasis {
@ -11588,7 +11588,7 @@ textarea.form-control-lg {
 .dropdown-item.active,
 .dropdown-item:hover,
 option:disabled {
-  color: #222;
+  color: #303030;
 }
 .input-group-text {
--- a/src/assets/css/themes/vaporwave-dark.css
+++ b/src/assets/css/themes/vaporwave-dark.css
@ -36,7 +36,7 @@
  --bs-warning: #fffb96;
  --bs-danger: rgb(255, 95, 110);
  --bs-light: #444;
-  --bs-dark: #222;
+  --bs-dark: #ebebeb;
  --bs-primary-rgb: 255, 64, 186;
  --bs-secondary-rgb: 1, 205, 254;
  --bs-success-rgb: 5, 255, 161;
@ -44,7 +44,7 @@
  --bs-warning-rgb: 255, 251, 150;
  --bs-danger-rgb: 255, 95, 110;
  --bs-light-rgb: 68, 68, 68;
-  --bs-dark-rgb: 34, 34, 34;
+  --bs-dark-rgb: 235, 235, 235;
  --bs-primary-text-emphasis: #661a4a;
  --bs-secondary-text-emphasis: #005266;
  --bs-success-text-emphasis: #026640;
@ -74,8 +74,9 @@
  --bs-font-sans-serif: "Lucida Console", Monaco, monospace;
  --bs-font-monospace: Arial, "Noto Sans", sans-serif;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-root-font-size: 93.75%;
  --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 0.875rem;
+  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #ebebeb;
@ -184,6 +185,9 @@
  box-sizing: border-box;
 }
 :root {
  font-size: var(--bs-root-font-size);
 }
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
@ -220,47 +224,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
 }
 h1, .h1 {
-  font-size: calc(1.34375rem + 1.125vw);
+  font-size: calc(1.375rem + 1.5vw);
 }
@media (min-width: 1200px) {
  h1, .h1 {
-    font-size: 2.1875rem;
+    font-size: 2.5rem;
  }
 }
 h2, .h2 {
-  font-size: calc(1.3rem + 0.6vw);
+  font-size: calc(1.325rem + 0.9vw);
 }
@media (min-width: 1200px) {
  h2, .h2 {
-    font-size: 1.75rem;
+    font-size: 2rem;
  }
 }
 h3, .h3 {
-  font-size: calc(1.278125rem + 0.3375vw);
+  font-size: calc(1.3rem + 0.6vw);
 }
@media (min-width: 1200px) {
  h3, .h3 {
-    font-size: 1.53125rem;
+    font-size: 1.75rem;
  }
 }
 h4, .h4 {
-  font-size: calc(1.25625rem + 0.075vw);
+  font-size: calc(1.275rem + 0.3vw);
 }
@media (min-width: 1200px) {
  h4, .h4 {
-    font-size: 1.3125rem;
+    font-size: 1.5rem;
  }
 }
 h5, .h5 {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 h6, .h6 {
-  font-size: 0.875rem;
+  font-size: 1rem;
 }
 p {
@ -586,7 +590,7 @@ progress {
 }
 .lead {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  font-weight: 300;
 }
@ -680,7 +684,7 @@ progress {
 .blockquote {
  margin-bottom: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 .blockquote > :last-child {
  margin-bottom: 0;
@ -2025,15 +2029,15 @@ progress {
 }
 .table-dark {
-  --bs-table-color: #fff;
+  --bs-table-color: #000;
-  --bs-table-bg: #222;
+  --bs-table-bg: #ebebeb;
-  --bs-table-border-color: #383838;
+  --bs-table-border-color: #d4d4d4;
-  --bs-table-striped-bg: #2d2d2d;
+  --bs-table-striped-bg: #dfdfdf;
-  --bs-table-striped-color: #fff;
+  --bs-table-striped-color: #000;
-  --bs-table-active-bg: #383838;
+  --bs-table-active-bg: #d4d4d4;
-  --bs-table-active-color: #fff;
+  --bs-table-active-color: #000;
-  --bs-table-hover-bg: #333333;
+  --bs-table-hover-bg: #d9d9d9;
-  --bs-table-hover-color: #fff;
+  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
 }
@ -2088,13 +2092,13 @@ progress {
 .col-form-label-lg {
  padding-top: calc(0.5rem + var(--bs-border-width));
  padding-bottom: calc(0.5rem + var(--bs-border-width));
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 .col-form-label-sm {
  padding-top: calc(0.25rem + var(--bs-border-width));
  padding-bottom: calc(0.25rem + var(--bs-border-width));
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
 }
 .form-text {
@ -2107,7 +2111,7 @@ progress {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
@ -2200,7 +2204,7 @@ progress {
 .form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
 }
 .form-control-sm::file-selector-button {
@ -2212,7 +2216,7 @@ progress {
 .form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
 }
 .form-control-lg::file-selector-button {
@ -2259,7 +2263,7 @@ textarea.form-control-lg {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
@ -2300,7 +2304,7 @@ textarea.form-control-lg {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
 }
@ -2308,7 +2312,7 @@ textarea.form-control-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
 }
@ -2318,7 +2322,7 @@ textarea.form-control-lg {
 .form-check {
  display: block;
-  min-height: 1.3125rem;
+  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
 }
@ -2654,7 +2658,7 @@ textarea.form-control-lg {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
@ -2670,7 +2674,7 @@ textarea.form-control-lg {
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
  padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
 }
@ -2679,7 +2683,7 @@ textarea.form-control-lg {
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
 }
@ -2729,7 +2733,7 @@ textarea.form-control-lg {
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
@ -2819,7 +2823,7 @@ textarea.form-control-lg {
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
@ -2897,7 +2901,7 @@ textarea.form-control-lg {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
-  --bs-btn-font-size: 0.875rem;
+  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
@ -3095,20 +3099,20 @@ textarea.form-control-lg {
 }
 .btn-dark {
-  --bs-btn-color: #fff;
+  --bs-btn-color: #000;
-  --bs-btn-bg: #222;
+  --bs-btn-bg: #ebebeb;
-  --bs-btn-border-color: #222;
+  --bs-btn-border-color: #ebebeb;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #434343;
+  --bs-btn-hover-bg: #eeeeee;
-  --bs-btn-hover-border-color: #383838;
+  --bs-btn-hover-border-color: #ededed;
-  --bs-btn-focus-shadow-rgb: 67, 67, 67;
+  --bs-btn-focus-shadow-rgb: 200, 200, 200;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #4e4e4e;
+  --bs-btn-active-bg: #efefef;
-  --bs-btn-active-border-color: #383838;
+  --bs-btn-active-border-color: #ededed;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #222;
+  --bs-btn-disabled-bg: #ebebeb;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-border-color: #ebebeb;
 }
 .btn-outline-primary {
@ -3231,19 +3235,19 @@ textarea.form-control-lg {
 }
 .btn-outline-dark {
-  --bs-btn-color: #222;
+  --bs-btn-color: #ebebeb;
-  --bs-btn-border-color: #222;
+  --bs-btn-border-color: #ebebeb;
-  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #222;
+  --bs-btn-hover-bg: #ebebeb;
-  --bs-btn-hover-border-color: #222;
+  --bs-btn-hover-border-color: #ebebeb;
-  --bs-btn-focus-shadow-rgb: 34, 34, 34;
+  --bs-btn-focus-shadow-rgb: 235, 235, 235;
-  --bs-btn-active-color: #fff;
+  --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #222;
+  --bs-btn-active-bg: #ebebeb;
-  --bs-btn-active-border-color: #222;
+  --bs-btn-active-border-color: #ebebeb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #222;
+  --bs-btn-disabled-color: #ebebeb;
  --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-border-color: #ebebeb;
  --bs-gradient: none;
 }
@ -3273,14 +3277,14 @@ textarea.form-control-lg {
 .btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
-  --bs-btn-font-size: 1.09375rem;
+  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
 }
 .btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
-  --bs-btn-font-size: 0.765625rem;
+  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
 }
@ -3353,7 +3357,7 @@ textarea.form-control-lg {
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 0.875rem;
+  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
@ -3615,7 +3619,7 @@ textarea.form-control-lg {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
 }
@ -3900,15 +3904,15 @@ textarea.form-control-lg {
  --bs-navbar-hover-color: rgba(255, 64, 186, 0.7);
  --bs-navbar-disabled-color: rgba(235, 235, 235, 0.3);
  --bs-navbar-active-color: rgba(235, 235, 235, 0.9);
-  --bs-navbar-brand-padding-y: 0.3359375rem;
+  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
-  --bs-navbar-brand-font-size: 1.09375rem;
+  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(235, 235, 235, 0.9);
  --bs-navbar-brand-hover-color: rgba(235, 235, 235, 0.9);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
-  --bs-navbar-toggler-font-size: 1.09375rem;
+  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28235, 235, 235, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
@ -4545,7 +4549,7 @@ textarea.form-control-lg {
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
-  font-size: 0.875rem;
+  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
@ -4689,7 +4693,7 @@ textarea.form-control-lg {
 .pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
-  --bs-pagination-font-size: 0.875rem;
+  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
@ -4769,14 +4773,14 @@ textarea.form-control-lg {
 .pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
-  --bs-pagination-font-size: 1.09375rem;
+  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
 }
 .pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
-  --bs-pagination-font-size: 0.765625rem;
+  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
 }
@ -4911,7 +4915,7 @@ textarea.form-control-lg {
 .progress,
 .progress-stacked {
  --bs-progress-height: 1rem;
-  --bs-progress-font-size: 0.65625rem;
+  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
@ -5717,7 +5721,7 @@ textarea.form-control-lg {
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
-  --bs-tooltip-font-size: 0.765625rem;
+  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
@ -5816,7 +5820,7 @@ textarea.form-control-lg {
 .popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
-  --bs-popover-font-size: 0.765625rem;
+  --bs-popover-font-size: 0.875rem;
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-width: var(--bs-border-width);
  --bs-popover-border-color: var(--bs-border-color-translucent);
@ -5825,7 +5829,7 @@ textarea.form-control-lg {
  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
-  --bs-popover-header-font-size: 0.875rem;
+  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: inherit;
  --bs-popover-header-bg: var(--bs-secondary-bg);
  --bs-popover-body-padding-x: 1rem;
@ -6844,8 +6848,8 @@ textarea.form-control-lg {
 }
 .text-bg-dark {
-  color: #fff !important;
+  color: #000 !important;
-  background-color: RGBA(34, 34, 34, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(235, 235, 235, var(--bs-bg-opacity, 1)) !important;
 }
 .link-primary {
@ -6916,8 +6920,8 @@ textarea.form-control-lg {
  text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-dark:hover, .link-dark:focus {
-  color: RGBA(27, 27, 27, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(239, 239, 239, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(27, 27, 27, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(239, 239, 239, var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-body-emphasis {
@ -8296,27 +8300,27 @@ textarea.form-control-lg {
 }
 .fs-1 {
-  font-size: calc(1.34375rem + 1.125vw) !important;
+  font-size: calc(1.375rem + 1.5vw) !important;
 }
 .fs-2 {
-  font-size: calc(1.3rem + 0.6vw) !important;
+  font-size: calc(1.325rem + 0.9vw) !important;
 }
 .fs-3 {
-  font-size: calc(1.278125rem + 0.3375vw) !important;
+  font-size: calc(1.3rem + 0.6vw) !important;
 }
 .fs-4 {
-  font-size: calc(1.25625rem + 0.075vw) !important;
+  font-size: calc(1.275rem + 0.3vw) !important;
 }
 .fs-5 {
-  font-size: 1.09375rem !important;
+  font-size: 1.25rem !important;
 }
 .fs-6 {
-  font-size: 0.875rem !important;
+  font-size: 1rem !important;
 }
 .fst-italic {
@ -11859,16 +11863,16 @@ textarea.form-control-lg {
 }
@media (min-width: 1200px) {
  .fs-1 {
-    font-size: 2.1875rem !important;
+    font-size: 2.5rem !important;
  }
  .fs-2 {
-    font-size: 1.75rem !important;
+    font-size: 2rem !important;
  }
  .fs-3 {
-    font-size: 1.53125rem !important;
+    font-size: 1.75rem !important;
  }
  .fs-4 {
-    font-size: 1.3125rem !important;
+    font-size: 1.5rem !important;
  }
 }
@media print {
--- a/src/assets/css/themes/vaporwave-light.css
+++ b/src/assets/css/themes/vaporwave-light.css
@ -74,8 +74,9 @@
  --bs-font-sans-serif: "Lucida Console", Monaco, monospace;
  --bs-font-monospace: Arial, "Noto Sans", sans-serif;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-root-font-size: 93.75%;
  --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 0.875rem;
+  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #495057;
@ -184,6 +185,9 @@
  box-sizing: border-box;
 }
 :root {
  font-size: var(--bs-root-font-size);
 }
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
@ -220,47 +224,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
 }
 h1, .h1 {
-  font-size: calc(1.34375rem + 1.125vw);
+  font-size: calc(1.375rem + 1.5vw);
 }
@media (min-width: 1200px) {
  h1, .h1 {
-    font-size: 2.1875rem;
+    font-size: 2.5rem;
  }
 }
 h2, .h2 {
-  font-size: calc(1.3rem + 0.6vw);
+  font-size: calc(1.325rem + 0.9vw);
 }
@media (min-width: 1200px) {
  h2, .h2 {
-    font-size: 1.75rem;
+    font-size: 2rem;
  }
 }
 h3, .h3 {
-  font-size: calc(1.278125rem + 0.3375vw);
+  font-size: calc(1.3rem + 0.6vw);
 }
@media (min-width: 1200px) {
  h3, .h3 {
-    font-size: 1.53125rem;
+    font-size: 1.75rem;
  }
 }
 h4, .h4 {
-  font-size: calc(1.25625rem + 0.075vw);
+  font-size: calc(1.275rem + 0.3vw);
 }
@media (min-width: 1200px) {
  h4, .h4 {
-    font-size: 1.3125rem;
+    font-size: 1.5rem;
  }
 }
 h5, .h5 {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 h6, .h6 {
-  font-size: 0.875rem;
+  font-size: 1rem;
 }
 p {
@ -585,7 +589,7 @@ progress {
 }
 .lead {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  font-weight: 300;
 }
@ -679,7 +683,7 @@ progress {
 .blockquote {
  margin-bottom: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 .blockquote > :last-child {
  margin-bottom: 0;
@ -2087,13 +2091,13 @@ progress {
 .col-form-label-lg {
  padding-top: calc(0.5rem + var(--bs-border-width));
  padding-bottom: calc(0.5rem + var(--bs-border-width));
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 .col-form-label-sm {
  padding-top: calc(0.25rem + var(--bs-border-width));
  padding-bottom: calc(0.25rem + var(--bs-border-width));
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
 }
 .form-text {
@ -2106,7 +2110,7 @@ progress {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
@ -2199,7 +2203,7 @@ progress {
 .form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
 }
 .form-control-sm::file-selector-button {
@ -2211,7 +2215,7 @@ progress {
 .form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
 }
 .form-control-lg::file-selector-button {
@ -2258,7 +2262,7 @@ textarea.form-control-lg {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
@ -2299,7 +2303,7 @@ textarea.form-control-lg {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
 }
@ -2307,7 +2311,7 @@ textarea.form-control-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
 }
@ -2317,7 +2321,7 @@ textarea.form-control-lg {
 .form-check {
  display: block;
-  min-height: 1.3125rem;
+  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
 }
@ -2653,7 +2657,7 @@ textarea.form-control-lg {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
@ -2669,7 +2673,7 @@ textarea.form-control-lg {
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
  padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
 }
@ -2678,7 +2682,7 @@ textarea.form-control-lg {
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
 }
@ -2728,7 +2732,7 @@ textarea.form-control-lg {
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
@ -2818,7 +2822,7 @@ textarea.form-control-lg {
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
@ -2896,7 +2900,7 @@ textarea.form-control-lg {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
-  --bs-btn-font-size: 0.875rem;
+  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
@ -3272,14 +3276,14 @@ textarea.form-control-lg {
 .btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
-  --bs-btn-font-size: 1.09375rem;
+  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
 }
 .btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
-  --bs-btn-font-size: 0.765625rem;
+  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
 }
@ -3352,7 +3356,7 @@ textarea.form-control-lg {
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 0.875rem;
+  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
@ -3614,7 +3618,7 @@ textarea.form-control-lg {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
 }
@ -3899,15 +3903,15 @@ textarea.form-control-lg {
  --bs-navbar-hover-color: rgba(255, 64, 186, 0.7);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
-  --bs-navbar-brand-padding-y: 0.3359375rem;
+  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
-  --bs-navbar-brand-font-size: 1.09375rem;
+  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
-  --bs-navbar-toggler-font-size: 1.09375rem;
+  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2873, 80, 87, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
@ -4544,7 +4548,7 @@ textarea.form-control-lg {
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
-  font-size: 0.875rem;
+  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
@ -4688,7 +4692,7 @@ textarea.form-control-lg {
 .pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
-  --bs-pagination-font-size: 0.875rem;
+  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
@ -4768,14 +4772,14 @@ textarea.form-control-lg {
 .pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
-  --bs-pagination-font-size: 1.09375rem;
+  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
 }
 .pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
-  --bs-pagination-font-size: 0.765625rem;
+  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
 }
@ -4910,7 +4914,7 @@ textarea.form-control-lg {
 .progress,
 .progress-stacked {
  --bs-progress-height: 1rem;
-  --bs-progress-font-size: 0.65625rem;
+  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
@ -5716,7 +5720,7 @@ textarea.form-control-lg {
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
-  --bs-tooltip-font-size: 0.765625rem;
+  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
@ -5815,7 +5819,7 @@ textarea.form-control-lg {
 .popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
-  --bs-popover-font-size: 0.765625rem;
+  --bs-popover-font-size: 0.875rem;
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-width: var(--bs-border-width);
  --bs-popover-border-color: var(--bs-border-color-translucent);
@ -5824,7 +5828,7 @@ textarea.form-control-lg {
  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
-  --bs-popover-header-font-size: 0.875rem;
+  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: inherit;
  --bs-popover-header-bg: var(--bs-secondary-bg);
  --bs-popover-body-padding-x: 1rem;
@ -8295,27 +8299,27 @@ textarea.form-control-lg {
 }
 .fs-1 {
-  font-size: calc(1.34375rem + 1.125vw) !important;
+  font-size: calc(1.375rem + 1.5vw) !important;
 }
 .fs-2 {
-  font-size: calc(1.3rem + 0.6vw) !important;
+  font-size: calc(1.325rem + 0.9vw) !important;
 }
 .fs-3 {
-  font-size: calc(1.278125rem + 0.3375vw) !important;
+  font-size: calc(1.3rem + 0.6vw) !important;
 }
 .fs-4 {
-  font-size: calc(1.25625rem + 0.075vw) !important;
+  font-size: calc(1.275rem + 0.3vw) !important;
 }
 .fs-5 {
-  font-size: 1.09375rem !important;
+  font-size: 1.25rem !important;
 }
 .fs-6 {
-  font-size: 0.875rem !important;
+  font-size: 1rem !important;
 }
 .fst-italic {
@ -11858,16 +11862,16 @@ textarea.form-control-lg {
 }
@media (min-width: 1200px) {
  .fs-1 {
-    font-size: 2.1875rem !important;
+    font-size: 2.5rem !important;
  }
  .fs-2 {
-    font-size: 1.75rem !important;
+    font-size: 2rem !important;
  }
  .fs-3 {
-    font-size: 1.53125rem !important;
+    font-size: 1.75rem !important;
  }
  .fs-4 {
-    font-size: 1.3125rem !important;
+    font-size: 1.5rem !important;
  }
 }
@media print {
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@ -1,8 +1,8 @@
 import { initializeSite, setupDateFns } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
-import { Router } from "inferno-router";
+import { BrowserRouter } from "inferno-router";
 import { App } from "../shared/components/app/app";
-import { HistoryService, UserService } from "../shared/services";
+import { UserService } from "../shared/services";
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
@ -13,9 +13,9 @@ async function startClient() {
  await setupDateFns();
  const wrapper = (
-    <Router history={HistoryService.history}>
+    <BrowserRouter>
      <App user={UserService.Instance.myUserInfo} />
-    </Router>
+    </BrowserRouter>
  );
  const root = document.getElementById("root");
--- a/src/server/handlers/catch-all-handler.tsx
+++ b/src/server/handlers/catch-all-handler.tsx
@ -120,7 +120,7 @@ export default async (req: Request, res: Response) => {
    const root = renderToString(wrapper);
-    res.send(await createSsrHtml(root, isoData));
+    res.send(await createSsrHtml(root, isoData, res.locals.cspNonce));
  } catch (err) {
    // If an error is caught here, the error page couldn't even be rendered
    console.error(err);
--- a/src/server/handlers/robots-handler.ts
+++ b/src/server/handlers/robots-handler.ts
@ -15,5 +15,6 @@ export default async ({ res }: { res: Response }) => {
  Disallow: /admin
  Disallow: /password_change
  Disallow: /search/
  Disallow: /modlog
  `);
 };
--- a/src/server/middleware.ts
+++ b/src/server/middleware.ts
@ -1,3 +1,4 @@
 import * as crypto from "crypto";
 import type { NextFunction, Request, Response } from "express";
 import { hasJwtCookie } from "./utils/has-jwt-cookie";
@ -8,9 +9,20 @@ export function setDefaultCsp({
  res: Response;
  next: NextFunction;
 }) {
  res.locals.cspNonce = crypto.randomBytes(16).toString("hex");
  res.setHeader(
    "Content-Security-Policy",
-    `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src * data:`
+    `default-src 'self';
     manifest-src *;
     connect-src *;
     img-src * data:;
     script-src 'self' 'nonce-${res.locals.cspNonce}';
     style-src 'self' 'unsafe-inline';
     form-action 'self';
     base-uri 'self';
     frame-src *;
     media-src * data:`.replace(/\s+/g, " ")
  );
  next();
--- a/src/server/utils/create-ssr-html.tsx
+++ b/src/server/utils/create-ssr-html.tsx
@ -4,7 +4,7 @@ import { renderToString } from "inferno-server";
 import serialize from "serialize-javascript";
 import sharp from "sharp";
 import { favIconPngUrl, favIconUrl } from "../../shared/config";
-import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
+import { IsoDataOptionalSite } from "../../shared/interfaces";
 import { buildThemeList } from "./build-themes-list";
 import { fetchIconPng } from "./fetch-icon-png";
@ -14,7 +14,8 @@ let appleTouchIcon: string | undefined = undefined;
 export async function createSsrHtml(
  root: string,
-  isoData: IsoDataOptionalSite
+  isoData: IsoDataOptionalSite,
  cspNonce: string
 ) {
  const site = isoData.site_res;
@ -22,6 +23,12 @@ export async function createSsrHtml(
    (await buildThemeList())[0]
  }.css" />`;
  const customHtmlHeaderScriptTag = new RegExp("<script", "g");
  const customHtmlHeaderWithNonce = customHtmlHeader.replace(
    customHtmlHeaderScriptTag,
    `<script nonce="${cspNonce}"`
  );
  if (!appleTouchIcon) {
    appleTouchIcon = site?.site_view.site.icon
      ? `data:image/png;base64,${await sharp(
@ -45,28 +52,28 @@ export async function createSsrHtml(
    process.env["LEMMY_UI_DEBUG"] === "true"
      ? renderToString(
          <>
-            <script src="//cdn.jsdelivr.net/npm/eruda"></script>
+            <script
-            <script>eruda.init();</script>
+              nonce={cspNonce}
              src="//cdn.jsdelivr.net/npm/eruda"
            ></script>
            <script nonce={cspNonce}>eruda.init();</script>
          </>
        )
      : "";
  const helmet = Helmet.renderStatic();
  const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
  return `
    <!DOCTYPE html>
    <html ${helmet.htmlAttributes.toString()}>
    <head>
-    <script>window.isoData = ${serialize(isoData)}</script>
+    <script nonce="${cspNonce}">window.isoData = ${serialize(isoData)}</script>
    <script>window.lemmyConfig = ${serialize(config)}</script>
    <!-- A remote debugging utility for mobile -->
    ${erudaStr}
    <!-- Custom injected script -->
-    ${customHtmlHeader}
+    ${customHtmlHeaderWithNonce}
    ${helmet.title.toString()}
    ${helmet.meta.toString()}
--- a/src/shared/components/app/footer.tsx
+++ b/src/shared/components/app/footer.tsx
@ -58,7 +58,7 @@ export class Footer extends Component<FooterProps, any> {
            </li>
            <li className="nav-item">
              <a className="nav-link" href={joinLemmyUrl}>
-                {I18NextService.i18n.t("join_lemmy")}
+                {new URL(joinLemmyUrl).hostname}
              </a>
            </li>
          </ul>
--- a/src/shared/components/app/theme.tsx
+++ b/src/shared/components/app/theme.tsx
@ -21,7 +21,10 @@ export class Theme extends Component<Props> {
          />
        </Helmet>
      );
-    } else if (this.props.defaultTheme != "browser") {
+    } else if (
      this.props.defaultTheme != "browser" &&
      this.props.defaultTheme != "browser-compact"
    ) {
      return (
        <Helmet>
          <link
@ -31,6 +34,25 @@ export class Theme extends Component<Props> {
          />
        </Helmet>
      );
    } else if (this.props.defaultTheme == "browser-compact") {
      return (
        <Helmet>
          <link
            rel="stylesheet"
            type="text/css"
            href="/css/themes/litely-compact.css"
            id="default-light"
            media="(prefers-color-scheme: light)"
          />
          <link
            rel="stylesheet"
            type="text/css"
            href="/css/themes/darkly-compact.css"
            id="default-dark"
            media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
          />
        </Helmet>
      );
    } else {
      return (
        <Helmet>
--- a/src/shared/components/common/html-tags.tsx
+++ b/src/shared/components/common/html-tags.tsx
@ -8,6 +8,7 @@ import { I18NextService } from "../../services";
 interface HtmlTagsProps {
  title: string;
  path: string;
  canonicalPath?: string;
  description?: string;
  image?: string;
 }
@ -16,6 +17,8 @@ interface HtmlTagsProps {
 export class HtmlTags extends Component<HtmlTagsProps, any> {
  render() {
    const url = httpExternalPath(this.props.path);
    const canonicalUrl =
      this.props.canonicalPath ?? httpExternalPath(this.props.path);
    const desc = this.props.description;
    const image = this.props.image;
@ -30,6 +33,8 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
          <meta key={u} property={u} content={url} />
        ))}
        <link rel="canonical" href={canonicalUrl} />
        {/* Open Graph / Facebook */}
        <meta property="og:type" content="website" />
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@ -4,6 +4,7 @@ import autosize from "autosize";
 import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import { Language } from "lemmy-js-client";
 import {
  concurrentImageUpload,
@ -19,7 +20,6 @@ import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
 import { LanguageSelect } from "./language-select";
 import NavigationPrompt from "./navigation-prompt";
 import ProgressBar from "./progress-bar";
 interface MarkdownTextAreaProps {
@ -138,18 +138,14 @@ export class MarkdownTextArea extends Component<
  render() {
    const languageId = this.state.languageId;
    // TODO add these prompts back in at some point
    // <Prompt
    //   when={!this.props.hideNavigationWarnings && this.state.content}
    //   message={I18NextService.i18n.t("block_leaving")}
    // />
    return (
      <form
        className="markdown-textarea"
        id={this.formId}
        onSubmit={linkEvent(this, this.handleSubmit)}
      >
-        <NavigationPrompt
+        <Prompt
          message={I18NextService.i18n.t("block_leaving")}
          when={
            !this.props.hideNavigationWarnings &&
            !!this.state.content &&
@ -219,7 +215,7 @@ export class MarkdownTextArea extends Component<
                {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
                <a
                  href={markdownHelpUrl}
-                  className="btn btn-sm text-muted fw-bold"
+                  className="btn btn-sm btn-link rounded-0 text-muted fw-bold"
                  title={I18NextService.i18n.t("formatting_help")}
                  rel={relTags}
                >
--- a/src/shared/components/common/navigation-prompt.tsx
+++ b/src/shared/components/common/navigation-prompt.tsx
@ -1,53 +0,0 @@
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
 export interface IPromptProps {
  when: boolean;
 }
 export default class NavigationPrompt extends Component<IPromptProps, any> {
  public unblock;
  public enable() {
    if (this.unblock) {
      this.unblock();
    }
    this.unblock = this.context.router.history.block(tx => {
      if (window.confirm(I18NextService.i18n.t("block_leaving") ?? undefined)) {
        this.unblock();
        tx.retry();
      }
    });
  }
  public disable() {
    if (this.unblock) {
      this.unblock();
      this.unblock = null;
    }
  }
  public componentWillMount() {
    if (this.props.when) {
      this.enable();
    }
  }
  public componentWillReceiveProps(nextProps: IPromptProps) {
    if (nextProps.when) {
      if (!this.props.when) {
        this.enable();
      }
    } else {
      this.disable();
    }
  }
  public componentWillUnmount() {
    this.disable();
  }
  public render() {
    return null;
  }
 }
--- a/src/shared/components/common/sort-select.tsx
+++ b/src/shared/components/common/sort-select.tsx
@ -79,6 +79,15 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
          <option value={"TopMonth"}>
            {I18NextService.i18n.t("top_month")}
          </option>
          <option value={"TopThreeMonths"}>
            {I18NextService.i18n.t("top_three_months")}
          </option>
          <option value={"TopSixMonths"}>
            {I18NextService.i18n.t("top_six_months")}
          </option>
          <option value={"TopNineMonths"}>
            {I18NextService.i18n.t("top_nine_months")}
          </option>
          <option value={"TopYear"}>{I18NextService.i18n.t("top_year")}</option>
          <option value={"TopAll"}>{I18NextService.i18n.t("top_all")}</option>
        </select>
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@ -1,6 +1,7 @@
 import { myAuthRequired } from "@utils/app";
 import { capitalizeFirstLetter, randomStr } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
  CommunityView,
  CreateCommunity,
@ -12,7 +13,6 @@ import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 import NavigationPrompt from "../common/navigation-prompt";
 interface CommunityFormProps {
  community_view?: CommunityView; // If a community is given, that means this is an edit
@ -90,7 +90,8 @@ export class CommunityForm extends Component<
        className="community-form"
        onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
      >
-        <NavigationPrompt
+        <Prompt
          message={I18NextService.i18n.t("block_leaving")}
          when={
            !this.props.loading &&
            !!(
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@ -312,6 +312,7 @@ export class Community extends Component<
            <HtmlTags
              title={this.documentTitle}
              path={this.context.router.route.match.url}
              canonicalPath={res.community_view.community.actor_id}
              description={res.community_view.community.description}
              image={res.community_view.community.icon}
            />
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@ -7,6 +7,7 @@ import {
  InfernoNode,
  linkEvent,
 } from "inferno";
 import { Prompt } from "inferno-router";
 import {
  CreateSite,
  EditSite,
@ -21,7 +22,6 @@ import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { ListingTypeSelect } from "../common/listing-type-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 import NavigationPrompt from "../common/navigation-prompt";
 interface SiteFormProps {
  blockedInstances?: Instance[];
@ -123,7 +123,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
        className="site-form"
        onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
      >
-        <NavigationPrompt
+        <Prompt
          message={I18NextService.i18n.t("block_leaving")}
          when={
            !this.props.loading &&
            !siteSetup &&
@ -410,6 +411,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
              <option value="browser">
                {I18NextService.i18n.t("browser_default")}
              </option>
              <option value="browser-compact">
                {I18NextService.i18n.t("browser_default_compact")}
              </option>
              {this.props.themeList?.map(theme => (
                <option key={theme} value={theme}>
                  {theme}
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@ -1,3 +1,4 @@
 import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
 import { mdToHtml } from "../../markdown";
@ -32,10 +33,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
    return (
      <div className="site-sidebar accordion">
        <section id="sidebarInfo" className="card border-secondary mb-3">
-          <header
+          <header className="card-header" id="sidebarInfoHeader">
            className="card-header d-flex align-items-center"
            id="sidebarInfoHeader"
          >
            {this.siteName()}
            {!this.state.collapsed && (
              <BannerIconHeader banner={this.props.site.banner} />
@ -54,7 +52,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
  siteName() {
    return (
-      <>
+      <div className={classNames({ "mb-2": !this.state.collapsed })}>
        <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
        {!this.props.isMobile && (
          <button
@ -83,7 +81,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
            )}
          </button>
        )}
-      </>
+      </div>
    );
  }
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@ -312,6 +312,7 @@ function renderModlogType({ type_, view }: ModlogType) {
      const {
        mod_feature_post: { featured, is_featured_community },
        post: { id, name },
        community,
      } = view as ModFeaturePostView;
      return (
@ -320,7 +321,12 @@ function renderModlogType({ type_, view }: ModlogType) {
          <span>
            Post <Link to={`/post/${id}`}>{name}</Link>
          </span>
-          <span>{is_featured_community ? " In Community" : " In Local"}</span>
+          <span>
            {is_featured_community
              ? " in community "
              : " in Local, from community "}
          </span>
          <CommunityLink community={community} />
        </>
      );
    }
@ -532,7 +538,7 @@ function renderModlogType({ type_, view }: ModlogType) {
      return (
        <>
-          <span>Purged a Post from from </span>
+          <span>Purged a Post from </span>
          <CommunityLink community={community} />
          {reason && (
            <span>
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@ -324,6 +324,7 @@ export class Profile extends Component<
              <HtmlTags
                title={this.documentTitle}
                path={this.context.router.route.match.url}
                canonicalPath={personRes.person_view.person.actor_id}
                description={personRes.person_view.person.bio}
                image={personRes.person_view.person.avatar}
              />
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@ -596,6 +596,9 @@ export class Settings extends Component<any, SettingsState> {
                <option value="browser">
                  {I18NextService.i18n.t("browser_default")}
                </option>
                <option value="browser-compact">
                  {I18NextService.i18n.t("browser_default_compact")}
                </option>
                <option disabled aria-hidden="true">
                  ──
                </option>
@ -635,6 +638,9 @@ export class Settings extends Component<any, SettingsState> {
                <option value="browser">
                  {I18NextService.i18n.t("browser_default")}
                </option>
                <option value="browser-compact">
                  {I18NextService.i18n.t("browser_default_compact")}
                </option>
                {this.state.themeList.map(theme => (
                  <option key={theme} value={theme}>
                    {theme}
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@ -15,6 +15,7 @@ import { isImage } from "@utils/media";
 import { Choice } from "@utils/types";
 import autosize from "autosize";
 import { Component, InfernoNode, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
  CommunityView,
  CreatePost,
@ -39,7 +40,6 @@ import { toast } from "../../toast";
 import { Icon, Spinner } from "../common/icon";
 import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 import NavigationPrompt from "../common/navigation-prompt";
 import { SearchableSelect } from "../common/searchable-select";
 import { PostListings } from "./post-listings";
@ -332,7 +332,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
    return (
      <form className="post-form" onSubmit={linkEvent(this, handlePostSubmit)}>
-        <NavigationPrompt
+        <Prompt
          message={I18NextService.i18n.t("block_leaving")}
          when={
            !!(
              this.state.form.name ||
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -310,16 +310,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    const url = post.url;
    const thumbnail = post.thumbnail_url;
-    if (url && isImage(url)) {
+    if (thumbnail) {
      if (url.includes("pictrs")) {
        return url;
      } else if (thumbnail) {
        return thumbnail;
      } else {
        return url;
      }
    } else if (thumbnail) {
      return thumbnail;
    } else if (url && isImage(url)) {
      return url;
    } else {
      return undefined;
    }
@ -602,7 +596,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        {this.commentsButton}
        {canShare() && (
          <button
-            className="btn btn-sm btn-animate text-muted py-0"
+            className="btn btn-sm btn-link btn-animate text-muted py-0"
            onClick={linkEvent(this, this.handleShare)}
            type="button"
          >
@ -611,7 +605,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        )}
        {!post.local && (
          <a
-            className="btn btn-sm btn-animate text-muted py-0"
+            className="btn btn-sm btn-link btn-animate text-muted py-0"
            title={I18NextService.i18n.t("link")}
            href={post.ap_id}
          >
@ -650,7 +644,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        <div className="dropdown">
          <button
-            className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
+            className="btn btn-sm btn-link btn-animate text-muted py-0 dropdown-toggle"
            onClick={linkEvent(this, this.handleShowAdvanced)}
            data-tippy-content={I18NextService.i18n.t("more")}
            data-bs-toggle="dropdown"
@ -783,7 +777,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
      : I18NextService.i18n.t("save");
    return (
      <button
-        className="btn btn-sm btn-animate text-muted py-0"
+        className="btn btn-sm btn-link btn-animate text-muted py-0"
        onClick={linkEvent(this, this.handleSavePostClick)}
        data-tippy-content={label}
        aria-label={label}
@ -804,7 +798,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
  get crossPostButton() {
    return (
      <Link
-        className="btn btn-sm btn-animate text-muted py-0"
+        className="btn btn-sm btn-link btn-animate text-muted py-0"
        to={{
          /* Empty string properties are required to satisfy type*/
          pathname: "/create_post",
@ -894,7 +888,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
  get viewSourceButton() {
    return (
      <button
-        className="btn btn-sm btn-animate text-muted py-0"
+        className="btn btn-sm btn-link btn-animate text-muted py-0"
        onClick={linkEvent(this, this.handleViewSource)}
        data-tippy-content={I18NextService.i18n.t("view_source")}
        aria-label={I18NextService.i18n.t("view_source")}
@ -1327,10 +1321,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    const post = this.postView.post;
    return post.thumbnail_url || (post.url && isImage(post.url)) ? (
      <div className="row">
-        <div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
+        <div className={`${this.state.imageExpanded ? "col-12" : "col-9"}`}>
          {this.postTitleLine()}
        </div>
-        <div className="col-4">
+        <div className="col-3 mobile-thumbnail-container">
          {/* Post thumbnail */}
          {!this.state.imageExpanded && this.thumbnail()}
        </div>
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@ -353,6 +353,7 @@ export class Post extends Component<any, PostState> {
              <HtmlTags
                title={this.documentTitle}
                path={this.context.router.route.match.url}
                canonicalPath={res.post_view.post.ap_id}
                image={this.imageTag}
                description={res.post_view.post.body}
              />
--- a/src/shared/components/private_message/private-message-form.tsx
+++ b/src/shared/components/private_message/private-message-form.tsx
@ -2,6 +2,7 @@ import { myAuthRequired } from "@utils/app";
 import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component, InfernoNode } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Prompt } from "inferno-router";
 import {
  CreatePrivateMessage,
  EditPrivateMessage,
@ -13,7 +14,6 @@ import { I18NextService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 import NavigationPrompt from "../common/navigation-prompt";
 import { PersonListing } from "../person/person-listing";
 interface PrivateMessageFormProps {
@ -62,16 +62,12 @@ export class PrivateMessageForm extends Component<
      this.setState({ loading: false, content: undefined, previewMode: false });
    }
  }
  // TODO
  // <Prompt
  //   when={!this.state.loading && this.state.content}
  //   message={I18NextService.i18n.t("block_leaving")}
  // />
  render() {
    return (
      <form className="private-message-form">
-        <NavigationPrompt
+        <Prompt
          message={I18NextService.i18n.t("block_leaving")}
          when={
            !this.state.loading && !!this.state.content && !this.state.submitted
          }
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@ -466,6 +466,10 @@ export class Search extends Component<any, SearchState> {
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
          canonicalPath={
            this.context.router.route.match.url +
            this.context.router.route.location.search
          }
        />
        <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
        {this.selects}
--- a/src/shared/interfaces.ts
+++ b/src/shared/interfaces.ts
@ -18,14 +18,9 @@ export type IsoDataOptionalSite<T extends RouteData = any> = Partial<
 > &
  Pick<IsoData<T>, Exclude<keyof IsoData<T>, "site_res">>;
 export interface ILemmyConfig {
  wsHost?: string;
 }
 declare global {
  interface Window {
    isoData: IsoData;
    lemmyConfig?: ILemmyConfig;
  }
 }
--- a/src/shared/markdown.ts
+++ b/src/shared/markdown.ts
@ -10,6 +10,7 @@ import markdown_it_container from "markdown-it-container";
 // import markdown_it_emoji from "markdown-it-emoji/bare";
 import markdown_it_footnote from "markdown-it-footnote";
 import markdown_it_html5_embed from "markdown-it-html5-embed";
 import markdown_it_ruby from "markdown-it-ruby";
 import markdown_it_sub from "markdown-it-sub";
 import markdown_it_sup from "markdown-it-sup";
 import Renderer from "markdown-it/lib/renderer";
@ -159,6 +160,7 @@ export function setupMarkdown() {
    .use(markdown_it_footnote)
    .use(markdown_it_html5_embed, html5EmbedConfig)
    .use(markdown_it_container, "spoiler", spoilerConfig)
    .use(markdown_it_ruby)
    .use(localInstanceLinkParser);
  // .use(markdown_it_emoji, {
  //   defs: emojiDefs,
@ -186,13 +188,16 @@ export function setupMarkdown() {
    //Provide custom renderer for our emojis to allow us to add a css class and force size dimensions on them.
    const item = tokens[idx] as any;
    const title = item.attrs.length >= 3 ? item.attrs[2][1] : "";
-    const src: string = item.attrs[0][1];
+    const customEmoji = customEmojisLookup.get(title);
-    const isCustomEmoji = customEmojisLookup.get(title) != undefined;
+    const isCustomEmoji = customEmoji != undefined;
    if (!isCustomEmoji) {
      return defaultRenderer?.(tokens, idx, options, env, self) ?? "";
    }
-    const alt_text = item.content;
+    return `<img class="icon icon-emoji" src="${
-    return `<img class="icon icon-emoji" src="${src}" title="${title}" alt="${alt_text}"/>`;
+      customEmoji!.custom_emoji.image_url
    }" title="${customEmoji!.custom_emoji.shortcode}" alt="${
      customEmoji!.custom_emoji.alt_text
    }"/>`;
  };
  md.renderer.rules.table_open = function () {
    return '<table class="table">';
--- a/src/shared/services/HistoryService.ts
+++ b/src/shared/services/HistoryService.ts
@ -1,18 +0,0 @@
 import { History, createBrowserHistory } from "history";
 export class HistoryService {
  static #_instance: HistoryService;
  #history: History;
  private constructor() {
    this.#history = createBrowserHistory();
  }
  static get #Instance() {
    return this.#_instance ?? (this.#_instance = new this());
  }
  public static get history() {
    return this.#Instance.#history;
  }
 }
--- a/src/shared/services/index.ts
+++ b/src/shared/services/index.ts
@ -1,5 +1,4 @@
 export { FirstLoadService } from "./FirstLoadService";
 export { HistoryService } from "./HistoryService";
 export { HomeCacheService } from "./HomeCacheService";
 export { HttpService } from "./HttpService";
 export { I18NextService } from "./I18NextService";
--- a/src/shared/utils/app/convert-comment-sort-type.ts
+++ b/src/shared/utils/app/convert-comment-sort-type.ts
@ -11,6 +11,9 @@ export default function convertCommentSortType(
    case "TopDay":
    case "TopWeek":
    case "TopMonth":
    case "TopThreeMonths":
    case "TopSixMonths":
    case "TopNineMonths":
    case "TopYear": {
      return "Top";
    }
--- a/yarn.lock
+++ b/yarn.lock
		`@ -1 +1 @@`
			`Subproject commit a241fe1255a6363c7ae1ec5a09520c066745e6ce`				`Subproject commit 713ceed9c7ef84deaa222e68361e670e0763cd83`