Allow Arabic and Cyrillic characters when signing up or creating community (#2780)

* Allow Arabic and Cyrillic characters when signing up or creating community

* Fix mistake with escape

* Another escape mistake

.babelrc

@@ -13,8 +13,13 @@
     ["@babel/typescript", { "isTSX": true, "allExtensions": true }]
   ],
   "plugins": [
+    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
+    [
       "@babel/plugin-transform-runtime",
+      // version defaults to 7.0.0 for which non-legacy decorators produce duplicate code
+      { "version": "^7.24.3" }
+    ],
     ["babel-plugin-inferno", { "imports": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+    ["@babel/plugin-transform-class-properties", { "loose": true }]
   ]
 }

.eslintignore

@@ -1,8 +0,0 @@
-generate_translations.js
-webpack.config.js
-src/api_tests
-**/*.png
-**/*.css
-**/*.scss
-**/*.svg
-src/shared/translations/**

.eslintrc.json

@@ -1,50 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true
-  },
-  "plugins": ["@typescript-eslint", "jsx-a11y", "prettier"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:inferno/recommended",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json",
-    "warnOnUnsupportedTypeScriptVersion": false
-  },
-  "rules": {
-    "@typescript-eslint/ban-ts-comment": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-empty-function": 0,
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "arrow-body-style": 0,
-    "curly": 0,
-    "eol-last": 0,
-    "eqeqeq": "error",
-    "func-style": 0,
-    "import/no-duplicates": 0,
-    "max-statements": 0,
-    "max-params": 0,
-    "new-cap": 0,
-    "no-console": 0,
-    "no-duplicate-imports": 0,
-    "no-extra-parens": 0,
-    "no-return-assign": 0,
-    "no-throw-literal": 0,
-    "no-trailing-spaces": 0,
-    "no-unused-expressions": 0,
-    "no-useless-constructor": 0,
-    "no-useless-escape": 0,
-    "no-var": 0,
-    "prefer-const": "error",
-    "prefer-rest-params": 0,
-    "prettier/prettier": "error",
-    "quote-props": 0,
-    "unicorn/filename-case": 0,
-    "jsx-a11y/media-has-caption": 0
-  }
-}

.github/CODEOWNERS

@@ -1 +1 @@
-* @dessalines @SleeplessOne1917 @alectrocute @jsit
+* @dessalines @SleeplessOne1917 @matc-pub

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
+pnpm lint-staged
-. "$(dirname "$0")/_/husky.sh"
-
-yarn lint-staged

.prettierignore

@@ -4,3 +4,4 @@ src/assets/css/themes/*.css
 src/assets/css/code-themes/*.css
 stats.json
 dist
+pnpm-lock.yaml

.woodpecker.yml

@@ -1,3 +1,6 @@
+variables:
+  - &install_pnpm "corepack enable pnpm"
+
 steps:
   fetch_git_submodules:
     image: node:20-alpine
@@ -5,44 +8,61 @@ steps:
       - apk add git
       - git submodule init
       - git submodule update --recursive --remote
-      # - git fetch --tags
+    when:
+      - event: [pull_request, tag]
 
-  yarn:
+  install:
     image: node:20-alpine
     commands:
-      - yarn
+      - *install_pnpm
+      - pnpm i
+    when:
+      - event: pull_request
 
-  yarn_lint:
+  lint:
     image: node:20-alpine
     commands:
-      - yarn lint
+      - *install_pnpm
+      - pnpm lint
+    when:
+      - event: pull_request
 
-  yarn_build_dev:
+  build_dev:
     image: node:20-alpine
     commands:
-      - yarn build:dev
+      - *install_pnpm
+      - pnpm prebuild:dev
+      - pnpm build:dev
+    when:
+      - event: pull_request
 
   publish_release_docker:
     image: woodpeckerci/plugin-docker-buildx
-    secrets: [docker_username, docker_password]
     settings:
       repo: dessalines/lemmy-ui
       dockerfile: Dockerfile
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
       platforms: linux/amd64, linux/arm64
       tag: ${CI_COMMIT_TAG}
     when:
-      event: tag
+      - event: tag
 
   nightly_build:
     image: woodpeckerci/plugin-docker-buildx
-    secrets: [docker_username, docker_password]
     settings:
       repo: dessalines/lemmy-ui
       dockerfile: Dockerfile
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
       platforms: linux/amd64, linux/arm64
       tag: dev
     when:
-      event: cron
+      - event: cron
 
   notify_on_failure:
     image: alpine:3
@@ -50,7 +70,8 @@ steps:
       - apk add curl
       - "curl -d'Lemmy-UI CI build failed: ${CI_PIPELINE_URL}' ntfy.sh/lemmy_drone_ci"
     when:
-      status: [failure]
+      - event: [pull_request, tag]
+        status: failure
 
   notify_on_tag_deploy:
     image: alpine:3

Dockerfile

@@ -1,10 +1,13 @@
-FROM node:21-alpine as builder
+FROM node:alpine as builder
 
 # Added vips-dev and pkgconfig so that local vips is used instead of prebuilt
 # Done for two reasons:
 # - libvips binaries are not available for ARM32
 # - It can break depending on the CPU (https://github.com/LemmyNet/lemmy-ui/issues/1566)
-RUN apk update && apk upgrade && apk add --no-cache curl yarn python3 build-base gcc wget git vips-dev pkgconfig
+RUN apk update && apk upgrade && apk add --no-cache curl python3 build-base gcc wget git vips-dev pkgconfig
+
+# Enable corepack to use pnpm
+RUN corepack enable
 
 # Install node-gyp
 RUN npm install -g node-gyp
@@ -15,10 +18,8 @@ ENV npm_config_target_platform=linux
 ENV npm_config_target_libc=musl
 
 # Cache deps
-COPY package.json yarn.lock ./
+COPY package.json pnpm-lock.yaml ./
-
+RUN pnpm i
-RUN yarn --production --prefer-offline --pure-lockfile --network-timeout 100000
-
 # Build
 COPY generate_translations.js \
   tsconfig.json \
@@ -32,17 +33,17 @@ COPY .git .git
 
 # Set UI version 
 RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"
+RUN echo "export const BUILD_DATE_ISO8601 = '$(date -u +"%Y-%m-%dT%H:%M:%SZ")';" > "src/shared/build-date.ts"
 
-RUN yarn --production --prefer-offline --network-timeout 100000
+RUN pnpm i
-RUN yarn build:prod
+RUN pnpm prebuild:prod
+RUN pnpm build:prod
 
 RUN rm -rf ./node_modules/import-sort-parser-typescript
 RUN rm -rf ./node_modules/typescript
 RUN rm -rf ./node_modules/npm
 
-RUN du -sh ./node_modules/* | sort -nr | grep '\dM.*'
+FROM node:alpine as runner
-
-FROM node:21-alpine as runner
 ENV NODE_ENV=production
 
 RUN apk update && apk add --no-cache curl vips-cpp && rm -rf /var/cache/apk/*

cliff.toml

@@ -0,0 +1,84 @@
+# git-cliff ~ configuration file
+# https://git-cliff.org/docs/configuration
+
+[remote.github]
+owner = "LemmyNet"
+repo = "lemmy-ui"
+# token = ""
+
+[changelog]
+# template for the changelog body
+# https://keats.github.io/tera/docs/#introduction
+body = """
+## What's Changed
+
+{%- if version %} in {{ version }}{%- endif -%}
+{% for commit in commits %}
+  {% if commit.remote.pr_title -%}
+    {%- set commit_message = commit.remote.pr_title -%}
+  {%- else -%}
+    {%- set commit_message = commit.message -%}
+  {%- endif -%}
+  * {{ commit_message | split(pat="\n") | first | trim }}\
+    {% if commit.remote.username %} by @{{ commit.remote.username }}{%- endif -%}
+    {% if commit.remote.pr_number %} in \
+      [#{{ commit.remote.pr_number }}]({{ self::remote_url() }}/pull/{{ commit.remote.pr_number }}) \
+    {%- endif %}
+{%- endfor -%}
+
+{%- if github -%}
+{% if github.contributors | filter(attribute="is_first_time", value=true) | length != 0 %}
+  {% raw %}\n{% endraw -%}
+  ## New Contributors
+{%- endif %}\
+{% for contributor in github.contributors | filter(attribute="is_first_time", value=true) %}
+  * @{{ contributor.username }} made their first contribution
+    {%- if contributor.pr_number %} in \
+      [#{{ contributor.pr_number }}]({{ self::remote_url() }}/pull/{{ contributor.pr_number }}) \
+    {%- endif %}
+{%- endfor -%}
+{%- endif -%}
+
+{% if version %}
+    {% if previous.version %}
+      **Full Changelog**: {{ self::remote_url() }}/compare/{{ previous.version }}...{{ version }}
+    {% endif %}
+{% else -%}
+  {% raw %}\n{% endraw %}
+{% endif %}
+
+{%- macro remote_url() -%}
+  https://github.com/{{ remote.github.owner }}/{{ remote.github.repo }}
+{%- endmacro -%}
+"""
+# remove the leading and trailing whitespace from the template
+trim = true
+# template for the changelog footer
+footer = """
+<!-- generated by git-cliff -->
+"""
+# postprocessors
+postprocessors = []
+
+[git]
+# parse the commits based on https://www.conventionalcommits.org
+conventional_commits = false
+# filter out the commits that are not conventional
+filter_unconventional = true
+# process each line of a commit as an individual commit
+split_commits = false
+# regex for preprocessing the commit messages
+commit_preprocessors = [
+  # remove issue numbers from commits
+  { pattern = '\((\w+\s)?#([0-9]+)\)', replace = "" },
+]
+commit_parsers = [
+  { field = "author.name", pattern = "renovate", skip = true },
+  { field = "message", pattern = "Upping version", skip = true },
+]
+# filter out the commits that are not matched by commit parsers
+filter_commits = false
+# sort the tags topologically
+topo_order = false
+# sort the commits inside sections by oldest/newest order
+sort_commits = "newest"

deploy.sh

@@ -9,7 +9,7 @@ new_tag="$1"
 # sudo docker push dessalines/lemmy-ui:$new_tag
 
 # Upgrade version
-yarn version --new-version $new_tag
+pnpm version $new_tag
 git push
 
 git tag $new_tag

dev.dockerfile

@@ -1,5 +1,6 @@
 FROM node:20-alpine as builder
-RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
+RUN apk update && apk add curl python3 build-base gcc wget git --no-cache
+RUN corepack enable pnpm
 
 WORKDIR /usr/src/app
 
@@ -8,8 +9,8 @@ ENV npm_config_target_platform=linux
 ENV npm_config_target_libc=musl
 
 # Cache deps
-COPY package.json yarn.lock ./
+COPY package.json pnpm-lock.yaml ./
-RUN yarn --prefer-offline --pure-lockfile
+RUN pnpm i --prefer-offline
 
 # Build
 COPY generate_translations.js \
@@ -24,9 +25,10 @@ COPY .git .git
 
 # Set UI version 
 RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts"
+RUN echo "export const BUILD_DATE_ISO8601 = '$(date -u +"%Y-%m-%dT%H:%M:%SZ")';" > "src/shared/build-date.ts"
 
-RUN yarn --prefer-offline
+RUN pnpm i --prefer-offline
-RUN yarn build:dev
+RUN pnpm build:dev
 
 FROM node:20-alpine as runner
 COPY --from=builder /usr/src/app/dist /app/dist

eslint.config.mjs

@@ -0,0 +1,95 @@
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import prettier from "eslint-plugin-prettier/recommended";
+import jsxa11y from "eslint-plugin-jsx-a11y";
+import inferno from "eslint-plugin-inferno";
+
+export default [
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettier,
+  {
+    plugins: {
+      inferno: inferno,
+      rules: inferno.configs.recommended,
+    },
+  },
+  {
+    plugins: {
+      "jsx-a11y": jsxa11y,
+    },
+    rules: jsxa11y.configs.recommended.rules,
+  },
+  {
+    languageOptions: {
+      parser: tseslint.parser,
+    },
+  },
+  // For some reason this has to be in its own block
+  {
+    ignores: [
+      "generate_translations.js",
+      "webpack.config.js",
+      "src/shared/build-config.js",
+      "src/api_tests",
+      "**/*.png",
+      "**/*.css",
+      "**/*.scss",
+      "**/*.svg",
+      "src/shared/translations/**",
+      "dist/*",
+      ".yalc/*",
+    ],
+  },
+  {
+    files: ["src/**/*.js", "src/**/*.mjs", "src/**/*.ts", "src/**/*.tsx"],
+    rules: {
+      "@typescript-eslint/ban-ts-comment": 0,
+      "@typescript-eslint/no-explicit-any": 0,
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
+      "explicit-module-boundary-types": 0,
+      "no-empty-function": 0,
+      "no-non-null-assertion": 0,
+      "arrow-body-style": 0,
+      curly: 0,
+      "eol-last": 0,
+      eqeqeq: "error",
+      "func-style": 0,
+      "import/no-duplicates": 0,
+      "max-statements": 0,
+      "max-params": 0,
+      "new-cap": 0,
+      "no-console": 0,
+      "no-duplicate-imports": 0,
+      "no-extra-parens": 0,
+      "no-return-assign": 0,
+      "no-throw-literal": 0,
+      "no-trailing-spaces": 0,
+      "no-unused-expressions": 0,
+      "no-useless-constructor": 0,
+      "no-useless-escape": 0,
+      "no-var": 0,
+      "prefer-const": "error",
+      "prefer-rest-params": 0,
+      "prettier/prettier": "error",
+      "quote-props": 0,
+      "unicorn/filename-case": 0,
+      "jsx-a11y/media-has-caption": 0,
+      "jsx-a11y/label-has-associated-control": 0,
+      "no-restricted-imports": [
+        "error",
+        {
+          patterns: [
+            {
+              group: ["assets/*", "client/*", "server/*", "shared/*"],
+              message: "Use relative import instead.",
+            },
+          ],
+        },
+      ],
+    },
+  },
+];

generate_changelog.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+set -e
+
+# Adding to CHANGELOG.md
+git cliff --output CHANGELOG.md
+prettier -w CHANGELOG.md

lemmy-translations

@@ -1 +1 @@
-Subproject commit c3e61706e2ff7977db83e964e3010f72cad5e408
+Subproject commit 2bde7acef9807d28cb13b6584fc63d7b8a457005

package.json

@@ -1,24 +1,23 @@
 {
   "name": "lemmy-ui",
   "description": "An isomorphic UI for lemmy",
-  "version": "0.19.3-rc.2",
+  "version": "0.19.6-beta.7",
   "author": "Dessalines <tyhou13@gmx.com>",
   "license": "AGPL-3.0",
   "scripts": {
     "analyze": "webpack --mode=none",
     "build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development",
     "build:prod": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=production",
-    "clean": "yarn run rimraf dist",
+    "clean": "pnpm rimraf dist",
-    "dev": "yarn build:dev --watch",
+    "dev": "node generate_translations.js && pnpm build:dev --watch",
-    "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
+    "lint": "pnpm translations:generate && tsc --noEmit && pnpm eslint --report-unused-disable-directives && pnpm prettier --check \"src/**/*.{ts,tsx,js,mjs,css,scss}\"",
-    "postinstall": "husky install",
+    "prebuild:dev": "pnpm clean && node generate_translations.js",
-    "prebuild:dev": "yarn clean && node generate_translations.js",
+    "prebuild:prod": "pnpm clean && node generate_translations.js",
-    "prebuild:prod": "yarn clean && node generate_translations.js",
+    "prepare": "husky",
-    "prepare": "husky install",
     "themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
     "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
     "translations:generate": "node generate_translations.js",
-    "translations:init": "git submodule init && yarn translations:update",
+    "translations:init": "git submodule init && pnpm translations:update",
     "translations:update": "git submodule update --remote --recursive"
   },
   "repository": "https://github.com/LemmyNet/lemmy-ui",
@@ -26,33 +25,33 @@
     "node": ">=8.9.0"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.24.7",
-    "@babel/plugin-proposal-decorators": "^7.23.7",
+    "@babel/plugin-transform-class-properties": "^7.25.4",
-    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/plugin-transform-runtime": "^7.25.4",
-    "@babel/plugin-transform-typescript": "^7.23.6",
+    "@babel/plugin-transform-typescript": "^7.25.2",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.24.7",
-    "@babel/runtime": "^7.23.8",
+    "@babel/runtime": "^7.25.4",
-    "@emoji-mart/data": "^1.1.0",
+    "@emoji-mart/data": "^1.2.1",
-    "@shortcm/qr-image": "^9.0.2",
     "autosize": "^6.0.1",
     "babel-loader": "^9.1.3",
     "babel-plugin-inferno": "^6.7.1",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "^5.3.3",
-    "check-password-strength": "^2.0.7",
+    "check-password-strength": "^2.0.10",
     "classnames": "^2.5.1",
     "clean-webpack-plugin": "^4.0.0",
-    "cookie": "^0.6.0",
+    "cookie": "^1.0.0",
+    "cookie-parser": "^1.4.6",
     "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^6.9.1",
+    "css-loader": "^7.1.2",
-    "date-fns": "^3.2.0",
+    "date-fns": "^4.0.0",
-    "emoji-mart": "^5.4.0",
+    "emoji-mart": "^5.6.0",
     "emoji-short-name": "^2.0.0",
-    "express": "~4.18.2",
+    "express": "~4.21.0",
+    "highlight.js": "^11.10.0",
     "history": "^5.3.0",
     "html-to-text": "^9.0.5",
-    "husky": "^8.0.3",
+    "i18next": "^23.14.0",
-    "i18next": "^23.7.16",
     "inferno": "^8.2.3",
     "inferno-create-element": "^8.2.3",
     "inferno-helmet": "^5.2.1",
@@ -61,70 +60,78 @@
     "inferno-router": "^8.2.3",
     "inferno-server": "^8.2.3",
     "jwt-decode": "^4.0.0",
-    "lemmy-js-client": "0.19.2-alpha.1",
+    "lemmy-js-client": "0.20.0-alpha.17",
     "lodash.isequal": "^4.5.0",
-    "markdown-it": "^14.0.0",
+    "markdown-it": "^14.1.0",
-    "markdown-it-bidi": "^0.1.0",
+    "markdown-it-bidi": "^0.2.0",
     "markdown-it-container": "^4.0.0",
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
-    "markdown-it-highlightjs": "^4.0.1",
+    "markdown-it-highlightjs": "^4.1.0",
     "markdown-it-html5-embed": "^1.0.0",
-    "markdown-it-ruby": "^0.1.1",
+    "markdown-it-ruby": "^1.0.0",
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
-    "mini-css-extract-plugin": "^2.7.7",
+    "mini-css-extract-plugin": "^2.9.1",
+    "qreator": "^9.3.0",
     "register-service-worker": "^1.7.2",
     "run-node-webpack-plugin": "^1.3.0",
     "rxjs": "^7.8.1",
-    "sanitize-html": "^2.11.0",
+    "sanitize-html": "^2.13.0",
-    "sass": "^1.70.0",
+    "sass": "^1.77.8",
-    "sass-loader": "^14.0.0",
+    "sass-loader": "^16.0.1",
     "serialize-javascript": "^6.0.2",
     "service-worker-webpack": "^1.0.0",
-    "sharp": "0.32.6",
+    "sharp": "0.33.5",
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
     "tributejs": "^5.1.3",
-    "webpack": "^5.89.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.25.2",
-    "@types/autosize": "^4.0.0",
+    "@eslint/js": "^9.9.1",
-    "@types/bootstrap": "^5.2.6",
+    "@types/autosize": "^4.0.3",
+    "@types/bootstrap": "^5.2.10",
     "@types/cookie": "^0.6.0",
-    "@types/express": "^4.17.17",
+    "@types/cookie-parser": "^1.4.7",
-    "@types/html-to-text": "^9.0.0",
+    "@types/express": "^4.17.21",
-    "@types/lodash.isequal": "^4.5.6",
+    "@types/html-to-text": "^9.0.4",
-    "@types/markdown-it": "^13.0.7",
+    "@types/lodash.isequal": "^4.5.8",
-    "@types/markdown-it-container": "^2.0.6",
+    "@types/markdown-it": "^14.1.2",
-    "@types/node": "^20.11.5",
+    "@types/markdown-it-container": "^2.0.10",
-    "@types/path-browserify": "^1.0.0",
+    "@types/node": "^22.5.0",
-    "@types/sanitize-html": "^2.9.0",
+    "@types/path-browserify": "^1.0.3",
-    "@types/serialize-javascript": "^5.0.1",
+    "@types/sanitize-html": "^2.13.0",
-    "@types/toastify-js": "^1.12.0",
+    "@types/serialize-javascript": "^5.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@types/toastify-js": "^1.12.3",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/parser": "^8.3.0",
-    "eslint-plugin-inferno": "^7.33.3",
+    "eslint": "^9.9.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-inferno": "^7.34.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "globals": "^15.9.0",
+    "husky": "^9.1.5",
     "import-sort-style-module": "^6.0.0",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.9",
-    "prettier": "^3.2.4",
+    "prettier": "^3.3.3",
     "prettier-plugin-import-sort": "^0.0.7",
-    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-organize-imports": "^4.0.0",
-    "prettier-plugin-packagejson": "^2.4.9",
+    "prettier-plugin-packagejson": "^2.5.2",
-    "rimraf": "^5.0.0",
+    "qs": "^6.13.0",
+    "rimraf": "^6.0.1",
     "sortpack": "^2.4.0",
-    "style-loader": "^3.3.4",
+    "style-loader": "^4.0.0",
-    "terser": "^5.27.0",
+    "terser": "^5.31.6",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4",
-    "typescript-language-server": "^4.3.1",
+    "typescript-eslint": "^8.3.0",
-    "webpack-bundle-analyzer": "^4.9.0",
+    "typescript-language-server": "^4.3.3",
-    "webpack-dev-server": "4.15.1"
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-dev-server": "5.1.0"
   },
   "lint-staged": {
     "*.{css, scss}": [
@@ -138,7 +145,7 @@
       "sortpack"
     ]
   },
-  "packageManager": "yarn@1.22.19",
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee",
   "engineStrict": true,
   "importSort": {
     ".js, .jsx, .ts, .tsx": {

renovate.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:recommended"],
+  "schedule": ["every weekend"],
+  "automerge": true,
+  "ignoreDeps": ["lemmy-js-client"]
+}

src/assets/css/main.css

@@ -1,3 +1,7 @@
+body {
+  overflow-y: scroll !important;
+}
+
 .navbar-expand-lg .navbar-nav .nav-link {
   padding-right: 0.75rem !important;
   padding-left: 0.75rem !important;
@@ -185,12 +189,18 @@ blockquote {
   margin-top: -4px;
 }
 
+/* comments */
 .new-comments {
   max-height: 50vh;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
+.comment-content ul,
+.comment-content ol {
+  margin-bottom: 1rem;
+}
+
 .comments {
   list-style: none;
   padding: 0;
@@ -451,3 +461,15 @@ br.big {
 .totp-link {
   width: fit-content;
 }
+
+.oauth-item details[open] .oauth-item-caret {
+  transform: rotate(90deg);
+}
+
+.default-oauth-providers-section > ul {
+  list-style: none;
+}
+
+em-emoji-picker {
+  width: 100%;
+}

src/assets/css/themes/_variables.darkly-pureblack.scss

@@ -43,7 +43,7 @@ $font-family-sans-serif:
   "Apple Color Emoji",
   "Segoe UI Emoji",
   "Segoe UI Symbol";
-$font-size-base: 0.9375rem;
+$font-size-base: 1rem;
 $h1-font-size: 3rem;
 $h2-font-size: 2.5rem;
 $h3-font-size: 2rem;

src/assets/css/themes/_variables.scss

@@ -1,3 +1,3 @@
 $link-decoration: none;
 $min-contrast-ratio: 3;
-$font-size-root: 93.75%;
+$font-size-root: 100%;

src/assets/css/themes/darkly-compact.css

@@ -40,8 +40,8 @@ hr.my-3 {
 }
 
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -85,28 +85,28 @@ hr.my-3 {
   --bs-danger-rgb: 231, 76, 60;
   --bs-light-rgb: 48, 48, 48;
   --bs-dark-rgb: 222, 226, 230;
-  --bs-primary-text-emphasis: #004b38;
+  --bs-primary-text-emphasis: rgb(0, 75.2, 56);
-  --bs-secondary-text-emphasis: #45484c;
+  --bs-secondary-text-emphasis: rgb(69.2, 72.4, 75.6);
-  --bs-success-text-emphasis: #004b38;
+  --bs-success-text-emphasis: rgb(0, 75.2, 56);
-  --bs-info-text-emphasis: #153d58;
+  --bs-info-text-emphasis: rgb(20.8, 60.8, 87.6);
-  --bs-warning-text-emphasis: #613e07;
+  --bs-warning-text-emphasis: rgb(97.2, 62.4, 7.2);
-  --bs-danger-text-emphasis: #5c1e18;
+  --bs-danger-text-emphasis: rgb(92.4, 30.4, 24);
   --bs-light-text-emphasis: #444;
   --bs-dark-text-emphasis: #444;
-  --bs-primary-bg-subtle: #ccf2e8;
+  --bs-primary-bg-subtle: rgb(204, 241.6, 232);
-  --bs-secondary-bg-subtle: #eff0f2;
+  --bs-secondary-bg-subtle: rgb(238.6, 240.2, 241.8);
-  --bs-success-bg-subtle: #ccf2e8;
+  --bs-success-bg-subtle: rgb(204, 241.6, 232);
-  --bs-info-bg-subtle: #d6eaf8;
+  --bs-info-bg-subtle: rgb(214.4, 234.4, 247.8);
-  --bs-warning-bg-subtle: #fdebd0;
+  --bs-warning-bg-subtle: rgb(252.6, 235.2, 207.6);
-  --bs-danger-bg-subtle: #fadbd8;
+  --bs-danger-bg-subtle: rgb(250.2, 219.2, 216);
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #99e4d1;
+  --bs-primary-border-subtle: rgb(153, 228.2, 209);
-  --bs-secondary-border-subtle: #dee1e5;
+  --bs-secondary-border-subtle: rgb(222.2, 225.4, 228.6);
-  --bs-success-border-subtle: #99e4d1;
+  --bs-success-border-subtle: rgb(153, 228.2, 209);
-  --bs-info-border-subtle: #aed6f1;
+  --bs-info-border-subtle: rgb(173.8, 213.8, 240.6);
-  --bs-warning-border-subtle: #fad7a0;
+  --bs-warning-border-subtle: rgb(250.2, 215.4, 160.2);
-  --bs-danger-border-subtle: #f5b7b1;
+  --bs-danger-border-subtle: rgb(245.4, 183.4, 177);
   --bs-light-border-subtle: #ebebeb;
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
@@ -114,7 +114,7 @@ hr.my-3 {
   --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-root-font-size: 93.75%;
+  --bs-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -137,7 +137,7 @@ hr.my-3 {
   --bs-link-color: #00bc8c;
   --bs-link-color-rgb: 0, 188, 140;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #009670;
+  --bs-link-hover-color: rgb(0, 150.4, 112);
   --bs-link-hover-color-rgb: 0, 150, 112;
   --bs-code-color: #d63384;
   --bs-highlight-color: #dee2e6;
@@ -182,44 +182,44 @@ hr.my-3 {
   --bs-tertiary-color-rgb: 222, 226, 230;
   --bs-tertiary-bg: #292929;
   --bs-tertiary-bg-rgb: 41, 41, 41;
-  --bs-primary-text-emphasis: #66d7ba;
+  --bs-primary-text-emphasis: rgb(102, 214.8, 186);
-  --bs-secondary-text-emphasis: #ced3d7;
+  --bs-secondary-text-emphasis: rgb(205.8, 210.6, 215.4);
-  --bs-success-text-emphasis: #66d7ba;
+  --bs-success-text-emphasis: rgb(102, 214.8, 186);
-  --bs-info-text-emphasis: #85c1e9;
+  --bs-info-text-emphasis: rgb(133.2, 193.2, 233.4);
-  --bs-warning-text-emphasis: #f8c471;
+  --bs-warning-text-emphasis: rgb(247.8, 195.6, 112.8);
-  --bs-danger-text-emphasis: #f1948a;
+  --bs-danger-text-emphasis: rgb(240.6, 147.6, 138);
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #00261c;
+  --bs-primary-bg-subtle: rgb(0, 37.6, 28);
-  --bs-secondary-bg-subtle: #232426;
+  --bs-secondary-bg-subtle: rgb(34.6, 36.2, 37.8);
-  --bs-success-bg-subtle: #00261c;
+  --bs-success-bg-subtle: rgb(0, 37.6, 28);
-  --bs-info-bg-subtle: #0a1e2c;
+  --bs-info-bg-subtle: rgb(10.4, 30.4, 43.8);
-  --bs-warning-bg-subtle: #311f04;
+  --bs-warning-bg-subtle: rgb(48.6, 31.2, 3.6);
-  --bs-danger-bg-subtle: #2e0f0c;
+  --bs-danger-bg-subtle: rgb(46.2, 15.2, 12);
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
-  --bs-primary-border-subtle: #007154;
+  --bs-primary-border-subtle: rgb(0, 112.8, 84);
-  --bs-secondary-border-subtle: #686d71;
+  --bs-secondary-border-subtle: rgb(103.8, 108.6, 113.4);
-  --bs-success-border-subtle: #007154;
+  --bs-success-border-subtle: rgb(0, 112.8, 84);
-  --bs-info-border-subtle: #1f5b83;
+  --bs-info-border-subtle: rgb(31.2, 91.2, 131.4);
-  --bs-warning-border-subtle: #925e0b;
+  --bs-warning-border-subtle: rgb(145.8, 93.6, 10.8);
-  --bs-danger-border-subtle: #8b2e24;
+  --bs-danger-border-subtle: rgb(138.6, 45.6, 36);
   --bs-light-border-subtle: #444;
   --bs-dark-border-subtle: #303030;
   --bs-heading-color: inherit;
-  --bs-link-color: #66d7ba;
+  --bs-link-color: rgb(102, 214.8, 186);
-  --bs-link-hover-color: #85dfc8;
+  --bs-link-hover-color: rgb(132.6, 222.84, 199.8);
   --bs-link-color-rgb: 102, 215, 186;
   --bs-link-hover-color-rgb: 133, 223, 200;
-  --bs-code-color: #e685b5;
+  --bs-code-color: rgb(230.4, 132.6, 181.2);
   --bs-highlight-color: #dee2e6;
   --bs-highlight-bg: #333;
   --bs-border-color: #444;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #66d7ba;
+  --bs-form-valid-color: rgb(102, 214.8, 186);
-  --bs-form-valid-border-color: #66d7ba;
+  --bs-form-valid-border-color: rgb(102, 214.8, 186);
-  --bs-form-invalid-color: #f1948a;
+  --bs-form-invalid-color: rgb(240.6, 147.6, 138);
-  --bs-form-invalid-border-color: #f1948a;
+  --bs-form-invalid-border-color: rgb(240.6, 147.6, 138);
 }
 
 *,
@@ -1951,13 +1951,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf2e8;
+  --bs-table-bg: rgb(204, 241.6, 232);
-  --bs-table-border-color: #a3c2ba;
+  --bs-table-border-color: rgb(163.2, 193.28, 185.6);
-  --bs-table-striped-bg: #c2e6dc;
+  --bs-table-striped-bg: rgb(193.8, 229.52, 220.4);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dad1;
+  --bs-table-active-bg: rgb(183.6, 217.44, 208.8);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde0d7;
+  --bs-table-hover-bg: rgb(188.7, 223.48, 214.6);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1965,13 +1965,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #eff0f2;
+  --bs-table-bg: rgb(238.6, 240.2, 241.8);
-  --bs-table-border-color: #bfc0c2;
+  --bs-table-border-color: rgb(190.88, 192.16, 193.44);
-  --bs-table-striped-bg: #e3e4e6;
+  --bs-table-striped-bg: rgb(226.67, 228.19, 229.71);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #d7d8da;
+  --bs-table-active-bg: rgb(214.74, 216.18, 217.62);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #dddee0;
+  --bs-table-hover-bg: rgb(220.705, 222.185, 223.665);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1979,13 +1979,13 @@ progress {
 
 .table-success {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf2e8;
+  --bs-table-bg: rgb(204, 241.6, 232);
-  --bs-table-border-color: #a3c2ba;
+  --bs-table-border-color: rgb(163.2, 193.28, 185.6);
-  --bs-table-striped-bg: #c2e6dc;
+  --bs-table-striped-bg: rgb(193.8, 229.52, 220.4);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dad1;
+  --bs-table-active-bg: rgb(183.6, 217.44, 208.8);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde0d7;
+  --bs-table-hover-bg: rgb(188.7, 223.48, 214.6);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1993,13 +1993,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #d6eaf8;
+  --bs-table-bg: rgb(214.4, 234.4, 247.8);
-  --bs-table-border-color: #abbbc6;
+  --bs-table-border-color: rgb(171.52, 187.52, 198.24);
-  --bs-table-striped-bg: #cbdeec;
+  --bs-table-striped-bg: rgb(203.68, 222.68, 235.41);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c1d3df;
+  --bs-table-active-bg: rgb(192.96, 210.96, 223.02);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c6d8e5;
+  --bs-table-hover-bg: rgb(198.32, 216.82, 229.215);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2007,13 +2007,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #000;
-  --bs-table-bg: #fdebd0;
+  --bs-table-bg: rgb(252.6, 235.2, 207.6);
-  --bs-table-border-color: #cabca6;
+  --bs-table-border-color: rgb(202.08, 188.16, 166.08);
-  --bs-table-striped-bg: #f0dfc6;
+  --bs-table-striped-bg: rgb(239.97, 223.44, 197.22);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e4d4bb;
+  --bs-table-active-bg: rgb(227.34, 211.68, 186.84);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ead9c0;
+  --bs-table-hover-bg: rgb(233.655, 217.56, 192.03);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2021,13 +2021,13 @@ progress {
 
 .table-danger {
   --bs-table-color: #000;
-  --bs-table-bg: #fadbd8;
+  --bs-table-bg: rgb(250.2, 219.2, 216);
-  --bs-table-border-color: #c8afad;
+  --bs-table-border-color: rgb(200.16, 175.36, 172.8);
-  --bs-table-striped-bg: #eed0cd;
+  --bs-table-striped-bg: rgb(237.69, 208.24, 205.2);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e1c5c2;
+  --bs-table-active-bg: rgb(225.18, 197.28, 194.4);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #e7cbc8;
+  --bs-table-hover-bg: rgb(231.435, 202.76, 199.8);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2036,12 +2036,12 @@ progress {
 .table-light {
   --bs-table-color: #fff;
   --bs-table-bg: #303030;
-  --bs-table-border-color: #595959;
+  --bs-table-border-color: rgb(89.4, 89.4, 89.4);
-  --bs-table-striped-bg: #3a3a3a;
+  --bs-table-striped-bg: rgb(58.35, 58.35, 58.35);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #454545;
+  --bs-table-active-bg: rgb(68.7, 68.7, 68.7);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #404040;
+  --bs-table-hover-bg: rgb(63.525, 63.525, 63.525);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2050,12 +2050,12 @@ progress {
 .table-dark {
   --bs-table-color: #000;
   --bs-table-bg: #dee2e6;
-  --bs-table-border-color: #b2b5b8;
+  --bs-table-border-color: rgb(177.6, 180.8, 184);
-  --bs-table-striped-bg: #d3d7db;
+  --bs-table-striped-bg: rgb(210.9, 214.7, 218.5);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c8cbcf;
+  --bs-table-active-bg: rgb(199.8, 203.4, 207);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cdd1d5;
+  --bs-table-hover-bg: rgb(205.35, 209.05, 212.75);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2155,7 +2155,7 @@ progress {
 .form-control:focus {
   color: #fff;
   background-color: #444;
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2173,7 +2173,7 @@ progress {
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
   opacity: 1;
 }
 .form-control::file-selector-button {
@@ -2300,7 +2300,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2309,7 +2309,7 @@ textarea.form-control-lg {
   background-image: none;
 }
 .form-select:disabled {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
 }
 .form-select:-moz-focusring {
   color: transparent;
@@ -2384,7 +2384,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2431,7 +2431,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380dec6'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28127.5, 221.5, 197.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2501,7 +2501,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #b3ebdd;
+  background-color: rgb(178.5, 234.9, 220.5);
 }
 .form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -2527,7 +2527,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #b3ebdd;
+  background-color: rgb(178.5, 234.9, 220.5);
 }
 .form-range::-moz-range-track {
   width: 100%;
@@ -2634,7 +2634,7 @@ textarea.form-control-lg {
 }
 .form-floating > :disabled ~ label::after,
 .form-floating > .form-control:disabled ~ label::after {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
 }
 
 .input-group {
@@ -2975,6 +2975,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2988,12 +2991,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00bc8c;
   --bs-btn-border-color: #00bc8c;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #26c69d;
+  --bs-btn-hover-bg: rgb(38.25, 198.05, 157.25);
-  --bs-btn-hover-border-color: #1ac398;
+  --bs-btn-hover-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-focus-shadow-rgb: 0, 160, 119;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #33c9a3;
+  --bs-btn-active-bg: rgb(51, 201.4, 163);
-  --bs-btn-active-border-color: #1ac398;
+  --bs-btn-active-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #00bc8c;
@@ -3005,12 +3008,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #adb5bd;
   --bs-btn-border-color: #adb5bd;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #b9c0c7;
+  --bs-btn-hover-bg: rgb(185.3, 192.1, 198.9);
-  --bs-btn-hover-border-color: #b5bcc4;
+  --bs-btn-hover-border-color: rgb(181.2, 188.4, 195.6);
   --bs-btn-focus-shadow-rgb: 147, 154, 161;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #bdc4ca;
+  --bs-btn-active-bg: rgb(189.4, 195.8, 202.2);
-  --bs-btn-active-border-color: #b5bcc4;
+  --bs-btn-active-border-color: rgb(181.2, 188.4, 195.6);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #adb5bd;
@@ -3022,12 +3025,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00bc8c;
   --bs-btn-border-color: #00bc8c;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #26c69d;
+  --bs-btn-hover-bg: rgb(38.25, 198.05, 157.25);
-  --bs-btn-hover-border-color: #1ac398;
+  --bs-btn-hover-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-focus-shadow-rgb: 0, 160, 119;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #33c9a3;
+  --bs-btn-active-bg: rgb(51, 201.4, 163);
-  --bs-btn-active-border-color: #1ac398;
+  --bs-btn-active-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #00bc8c;
@@ -3039,12 +3042,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #3498db;
   --bs-btn-border-color: #3498db;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #2c81ba;
+  --bs-btn-hover-bg: rgb(44.2, 129.2, 186.15);
-  --bs-btn-hover-border-color: #2a7aaf;
+  --bs-btn-hover-border-color: rgb(41.6, 121.6, 175.2);
   --bs-btn-focus-shadow-rgb: 82, 167, 224;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #2a7aaf;
+  --bs-btn-active-bg: rgb(41.6, 121.6, 175.2);
-  --bs-btn-active-border-color: #2772a4;
+  --bs-btn-active-border-color: rgb(39, 114, 164.25);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #3498db;
@@ -3056,12 +3059,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f39c12;
   --bs-btn-border-color: #f39c12;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f5ab36;
+  --bs-btn-hover-bg: rgb(244.8, 170.85, 53.55);
-  --bs-btn-hover-border-color: #f4a62a;
+  --bs-btn-hover-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-focus-shadow-rgb: 207, 133, 15;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f5b041;
+  --bs-btn-active-bg: rgb(245.4, 175.8, 65.4);
-  --bs-btn-active-border-color: #f4a62a;
+  --bs-btn-active-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #f39c12;
@@ -3073,12 +3076,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #e74c3c;
   --bs-btn-border-color: #e74c3c;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #c44133;
+  --bs-btn-hover-bg: rgb(196.35, 64.6, 51);
-  --bs-btn-hover-border-color: #b93d30;
+  --bs-btn-hover-border-color: rgb(184.8, 60.8, 48);
   --bs-btn-focus-shadow-rgb: 235, 103, 89;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #b93d30;
+  --bs-btn-active-bg: rgb(184.8, 60.8, 48);
-  --bs-btn-active-border-color: #ad392d;
+  --bs-btn-active-border-color: rgb(173.25, 57, 45);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #e74c3c;
@@ -3090,11 +3093,11 @@ textarea.form-control-lg {
   --bs-btn-bg: #303030;
   --bs-btn-border-color: #303030;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #292929;
+  --bs-btn-hover-bg: rgb(40.8, 40.8, 40.8);
-  --bs-btn-hover-border-color: #262626;
+  --bs-btn-hover-border-color: rgb(38.4, 38.4, 38.4);
   --bs-btn-focus-shadow-rgb: 79, 79, 79;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #262626;
+  --bs-btn-active-bg: rgb(38.4, 38.4, 38.4);
   --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;
@@ -3107,12 +3110,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #dee2e6;
   --bs-btn-border-color: #dee2e6;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #e3e6ea;
+  --bs-btn-hover-bg: rgb(226.95, 230.35, 233.75);
-  --bs-btn-hover-border-color: #e1e5e9;
+  --bs-btn-hover-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-focus-shadow-rgb: 189, 192, 196;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #e5e8eb;
+  --bs-btn-active-bg: rgb(228.6, 231.8, 235);
-  --bs-btn-active-border-color: #e1e5e9;
+  --bs-btn-active-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #dee2e6;
@@ -4499,12 +4502,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004b38'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%280, 75.2, 56%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #80dec6;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4562,7 +4564,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4580,7 +4581,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4591,11 +4592,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4604,27 +4605,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366d7ba'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28102, 214.8, 186%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366d7ba'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28102, 214.8, 186%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -4669,16 +4670,16 @@ textarea.form-control-lg {
   --bs-pagination-border-color: transparent;
   --bs-pagination-border-radius: var(--bs-border-radius);
   --bs-pagination-hover-color: #fff;
-  --bs-pagination-hover-bg: #00efb2;
+  --bs-pagination-hover-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-hover-border-color: transparent;
   --bs-pagination-focus-color: var(--bs-link-hover-color);
   --bs-pagination-focus-bg: var(--bs-secondary-bg);
   --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
   --bs-pagination-active-color: #fff;
-  --bs-pagination-active-bg: #00efb2;
+  --bs-pagination-active-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-active-border-color: transparent;
   --bs-pagination-disabled-color: #fff;
-  --bs-pagination-disabled-bg: #007053;
+  --bs-pagination-disabled-bg: rgb(0, 111.5, 83.0319148936);
   --bs-pagination-disabled-border-color: transparent;
   display: flex;
   padding-left: 0;
@@ -5498,7 +5499,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6063,20 +6063,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6696,14 +6688,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {

src/assets/css/themes/darkly-pureblack.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -45,28 +45,28 @@
   --bs-danger-rgb: 231, 76, 60;
   --bs-light-rgb: 17, 17, 17;
   --bs-dark-rgb: 222, 226, 230;
-  --bs-primary-text-emphasis: #004b38;
+  --bs-primary-text-emphasis: rgb(0, 75.2, 56);
-  --bs-secondary-text-emphasis: #292929;
+  --bs-secondary-text-emphasis: rgb(40.8, 40.8, 40.8);
-  --bs-success-text-emphasis: #004b38;
+  --bs-success-text-emphasis: rgb(0, 75.2, 56);
-  --bs-info-text-emphasis: #153d58;
+  --bs-info-text-emphasis: rgb(20.8, 60.8, 87.6);
-  --bs-warning-text-emphasis: #613e07;
+  --bs-warning-text-emphasis: rgb(97.2, 62.4, 7.2);
-  --bs-danger-text-emphasis: #5c1e18;
+  --bs-danger-text-emphasis: rgb(92.4, 30.4, 24);
   --bs-light-text-emphasis: #333;
   --bs-dark-text-emphasis: #333;
-  --bs-primary-bg-subtle: #ccf2e8;
+  --bs-primary-bg-subtle: rgb(204, 241.6, 232);
-  --bs-secondary-bg-subtle: #e0e0e0;
+  --bs-secondary-bg-subtle: rgb(224.4, 224.4, 224.4);
-  --bs-success-bg-subtle: #ccf2e8;
+  --bs-success-bg-subtle: rgb(204, 241.6, 232);
-  --bs-info-bg-subtle: #d6eaf8;
+  --bs-info-bg-subtle: rgb(214.4, 234.4, 247.8);
-  --bs-warning-bg-subtle: #fdebd0;
+  --bs-warning-bg-subtle: rgb(252.6, 235.2, 207.6);
-  --bs-danger-bg-subtle: #fadbd8;
+  --bs-danger-bg-subtle: rgb(250.2, 219.2, 216);
-  --bs-light-bg-subtle: #f6f6f7;
+  --bs-light-bg-subtle: rgb(245.5, 246, 246.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #99e4d1;
+  --bs-primary-border-subtle: rgb(153, 228.2, 209);
-  --bs-secondary-border-subtle: #c2c2c2;
+  --bs-secondary-border-subtle: rgb(193.8, 193.8, 193.8);
-  --bs-success-border-subtle: #99e4d1;
+  --bs-success-border-subtle: rgb(153, 228.2, 209);
-  --bs-info-border-subtle: #aed6f1;
+  --bs-info-border-subtle: rgb(173.8, 213.8, 240.6);
-  --bs-warning-border-subtle: #fad7a0;
+  --bs-warning-border-subtle: rgb(250.2, 215.4, 160.2);
-  --bs-danger-border-subtle: #f5b7b1;
+  --bs-danger-border-subtle: rgb(245.4, 183.4, 177);
   --bs-light-border-subtle: #ebebeb;
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 243, 243, 243;
@@ -74,9 +74,9 @@
   --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(243, 243, 243, 0.15), rgba(243, 243, 243, 0));
-  --bs-root-font-size: 93.75%;
+  --bs-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 0.9375rem;
+  --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
   --bs-body-line-height: 1.5;
   --bs-body-color: #ebebeb;
@@ -97,7 +97,7 @@
   --bs-link-color: #00bc8c;
   --bs-link-color-rgb: 0, 188, 140;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #009670;
+  --bs-link-hover-color: rgb(0, 150.4, 112);
   --bs-link-hover-color-rgb: 0, 150, 112;
   --bs-code-color: #d63384;
   --bs-highlight-color: #ebebeb;
@@ -140,46 +140,46 @@
   --bs-secondary-bg-rgb: 32, 32, 32;
   --bs-tertiary-color: rgba(222, 226, 230, 0.5);
   --bs-tertiary-color-rgb: 222, 226, 230;
-  --bs-tertiary-bg: #191919;
+  --bs-tertiary-bg: rgb(24.5, 24.5, 24.5);
   --bs-tertiary-bg-rgb: 25, 25, 25;
-  --bs-primary-text-emphasis: #66d7ba;
+  --bs-primary-text-emphasis: rgb(102, 214.8, 186);
-  --bs-secondary-text-emphasis: #a3a3a3;
+  --bs-secondary-text-emphasis: rgb(163.2, 163.2, 163.2);
-  --bs-success-text-emphasis: #66d7ba;
+  --bs-success-text-emphasis: rgb(102, 214.8, 186);
-  --bs-info-text-emphasis: #85c1e9;
+  --bs-info-text-emphasis: rgb(133.2, 193.2, 233.4);
-  --bs-warning-text-emphasis: #f8c471;
+  --bs-warning-text-emphasis: rgb(247.8, 195.6, 112.8);
-  --bs-danger-text-emphasis: #f1948a;
+  --bs-danger-text-emphasis: rgb(240.6, 147.6, 138);
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #00261c;
+  --bs-primary-bg-subtle: rgb(0, 37.6, 28);
-  --bs-secondary-bg-subtle: #141414;
+  --bs-secondary-bg-subtle: rgb(20.4, 20.4, 20.4);
-  --bs-success-bg-subtle: #00261c;
+  --bs-success-bg-subtle: rgb(0, 37.6, 28);
-  --bs-info-bg-subtle: #0a1e2c;
+  --bs-info-bg-subtle: rgb(10.4, 30.4, 43.8);
-  --bs-warning-bg-subtle: #311f04;
+  --bs-warning-bg-subtle: rgb(48.6, 31.2, 3.6);
-  --bs-danger-bg-subtle: #2e0f0c;
+  --bs-danger-bg-subtle: rgb(46.2, 15.2, 12);
   --bs-light-bg-subtle: #202020;
   --bs-dark-bg-subtle: #101010;
-  --bs-primary-border-subtle: #007154;
+  --bs-primary-border-subtle: rgb(0, 112.8, 84);
-  --bs-secondary-border-subtle: #3d3d3d;
+  --bs-secondary-border-subtle: rgb(61.2, 61.2, 61.2);
-  --bs-success-border-subtle: #007154;
+  --bs-success-border-subtle: rgb(0, 112.8, 84);
-  --bs-info-border-subtle: #1f5b83;
+  --bs-info-border-subtle: rgb(31.2, 91.2, 131.4);
-  --bs-warning-border-subtle: #925e0b;
+  --bs-warning-border-subtle: rgb(145.8, 93.6, 10.8);
-  --bs-danger-border-subtle: #8b2e24;
+  --bs-danger-border-subtle: rgb(138.6, 45.6, 36);
   --bs-light-border-subtle: #333;
   --bs-dark-border-subtle: #202020;
   --bs-heading-color: inherit;
-  --bs-link-color: #66d7ba;
+  --bs-link-color: rgb(102, 214.8, 186);
-  --bs-link-hover-color: #85dfc8;
+  --bs-link-hover-color: rgb(132.6, 222.84, 199.8);
   --bs-link-color-rgb: 102, 215, 186;
   --bs-link-hover-color-rgb: 133, 223, 200;
-  --bs-code-color: #e685b5;
+  --bs-code-color: rgb(230.4, 132.6, 181.2);
   --bs-highlight-color: #dee2e6;
   --bs-highlight-bg: #111;
   --bs-border-color: #333;
   --bs-border-color-translucent: rgba(243, 243, 243, 0.15);
-  --bs-form-valid-color: #66d7ba;
+  --bs-form-valid-color: rgb(102, 214.8, 186);
-  --bs-form-valid-border-color: #66d7ba;
+  --bs-form-valid-border-color: rgb(102, 214.8, 186);
-  --bs-form-invalid-color: #f1948a;
+  --bs-form-invalid-color: rgb(240.6, 147.6, 138);
-  --bs-form-invalid-border-color: #f1948a;
+  --bs-form-invalid-border-color: rgb(240.6, 147.6, 138);
 }
 
 *,
@@ -254,20 +254,20 @@ h3, .h3 {
 }
 
 h4, .h4 {
-  font-size: calc(1.265625rem + 0.1875vw);
+  font-size: calc(1.275rem + 0.3vw);
 }
 @media (min-width: 1200px) {
   h4, .h4 {
-    font-size: 1.40625rem;
+    font-size: 1.5rem;
   }
 }
 
 h5, .h5 {
-  font-size: 1.171875rem;
+  font-size: 1.25rem;
 }
 
 h6, .h6 {
-  font-size: 0.9375rem;
+  font-size: 1rem;
 }
 
 p {
@@ -594,7 +594,7 @@ progress {
 }
 
 .lead {
-  font-size: 1.171875rem;
+  font-size: 1.25rem;
   font-weight: 300;
 }
 
@@ -688,7 +688,7 @@ progress {
 
 .blockquote {
   margin-bottom: 1rem;
-  font-size: 1.171875rem;
+  font-size: 1.25rem;
 }
 .blockquote > :last-child {
   margin-bottom: 0;
@@ -1935,13 +1935,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf2e8;
+  --bs-table-bg: rgb(204, 241.6, 232);
-  --bs-table-border-color: #a3c2ba;
+  --bs-table-border-color: rgb(163.2, 193.28, 185.6);
-  --bs-table-striped-bg: #c2e6dc;
+  --bs-table-striped-bg: rgb(193.8, 229.52, 220.4);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dad1;
+  --bs-table-active-bg: rgb(183.6, 217.44, 208.8);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde0d7;
+  --bs-table-hover-bg: rgb(188.7, 223.48, 214.6);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1949,13 +1949,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #e0e0e0;
+  --bs-table-bg: rgb(224.4, 224.4, 224.4);
-  --bs-table-border-color: #b3b3b3;
+  --bs-table-border-color: rgb(179.52, 179.52, 179.52);
-  --bs-table-striped-bg: #d5d5d5;
+  --bs-table-striped-bg: rgb(213.18, 213.18, 213.18);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #cacaca;
+  --bs-table-active-bg: rgb(201.96, 201.96, 201.96);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cfcfcf;
+  --bs-table-hover-bg: rgb(207.57, 207.57, 207.57);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1963,13 +1963,13 @@ progress {
 
 .table-success {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf2e8;
+  --bs-table-bg: rgb(204, 241.6, 232);
-  --bs-table-border-color: #a3c2ba;
+  --bs-table-border-color: rgb(163.2, 193.28, 185.6);
-  --bs-table-striped-bg: #c2e6dc;
+  --bs-table-striped-bg: rgb(193.8, 229.52, 220.4);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dad1;
+  --bs-table-active-bg: rgb(183.6, 217.44, 208.8);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde0d7;
+  --bs-table-hover-bg: rgb(188.7, 223.48, 214.6);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1977,13 +1977,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #d6eaf8;
+  --bs-table-bg: rgb(214.4, 234.4, 247.8);
-  --bs-table-border-color: #abbbc6;
+  --bs-table-border-color: rgb(171.52, 187.52, 198.24);
-  --bs-table-striped-bg: #cbdeec;
+  --bs-table-striped-bg: rgb(203.68, 222.68, 235.41);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c1d3df;
+  --bs-table-active-bg: rgb(192.96, 210.96, 223.02);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c6d8e5;
+  --bs-table-hover-bg: rgb(198.32, 216.82, 229.215);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1991,13 +1991,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #000;
-  --bs-table-bg: #fdebd0;
+  --bs-table-bg: rgb(252.6, 235.2, 207.6);
-  --bs-table-border-color: #cabca6;
+  --bs-table-border-color: rgb(202.08, 188.16, 166.08);
-  --bs-table-striped-bg: #f0dfc6;
+  --bs-table-striped-bg: rgb(239.97, 223.44, 197.22);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e4d4bb;
+  --bs-table-active-bg: rgb(227.34, 211.68, 186.84);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ead9c0;
+  --bs-table-hover-bg: rgb(233.655, 217.56, 192.03);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2005,13 +2005,13 @@ progress {
 
 .table-danger {
   --bs-table-color: #000;
-  --bs-table-bg: #fadbd8;
+  --bs-table-bg: rgb(250.2, 219.2, 216);
-  --bs-table-border-color: #c8afad;
+  --bs-table-border-color: rgb(200.16, 175.36, 172.8);
-  --bs-table-striped-bg: #eed0cd;
+  --bs-table-striped-bg: rgb(237.69, 208.24, 205.2);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e1c5c2;
+  --bs-table-active-bg: rgb(225.18, 197.28, 194.4);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #e7cbc8;
+  --bs-table-hover-bg: rgb(231.435, 202.76, 199.8);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2020,12 +2020,12 @@ progress {
 .table-light {
   --bs-table-color: #f3f3f3;
   --bs-table-bg: #111;
-  --bs-table-border-color: #3e3e3e;
+  --bs-table-border-color: rgb(62.2, 62.2, 62.2);
-  --bs-table-striped-bg: #1c1c1c;
+  --bs-table-striped-bg: rgb(28.3, 28.3, 28.3);
   --bs-table-striped-color: #f3f3f3;
-  --bs-table-active-bg: #282828;
+  --bs-table-active-bg: rgb(39.6, 39.6, 39.6);
   --bs-table-active-color: #f3f3f3;
-  --bs-table-hover-bg: #222222;
+  --bs-table-hover-bg: rgb(33.95, 33.95, 33.95);
   --bs-table-hover-color: #f3f3f3;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2034,12 +2034,12 @@ progress {
 .table-dark {
   --bs-table-color: #000;
   --bs-table-bg: #dee2e6;
-  --bs-table-border-color: #b2b5b8;
+  --bs-table-border-color: rgb(177.6, 180.8, 184);
-  --bs-table-striped-bg: #d3d7db;
+  --bs-table-striped-bg: rgb(210.9, 214.7, 218.5);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c8cbcf;
+  --bs-table-active-bg: rgb(199.8, 203.4, 207);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cdd1d5;
+  --bs-table-hover-bg: rgb(205.35, 209.05, 212.75);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2095,13 +2095,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.171875rem;
+  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.8203125rem;
+  font-size: 0.875rem;
 }
 
 .form-text {
@@ -2114,7 +2114,7 @@ progress {
   display: block;
   width: 100%;
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #f3f3f3;
@@ -2139,7 +2139,7 @@ progress {
 .form-control:focus {
   color: #f3f3f3;
   background-color: #111;
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2205,7 +2205,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.8203125rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 .form-control-sm::file-selector-button {
@@ -2217,7 +2217,7 @@ progress {
 .form-control-lg {
   min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
   padding: 0.5rem 1rem;
-  font-size: 1.171875rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 .form-control-lg::file-selector-button {
@@ -2264,7 +2264,7 @@ textarea.form-control-lg {
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #f3f3f3;
@@ -2284,7 +2284,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2304,7 +2304,7 @@ textarea.form-control-lg {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-left: 0.5rem;
-  font-size: 0.8203125rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 
@@ -2312,7 +2312,7 @@ textarea.form-control-lg {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
-  font-size: 1.171875rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 
@@ -2322,7 +2322,7 @@ textarea.form-control-lg {
 
 .form-check {
   display: block;
-  min-height: 1.40625rem;
+  min-height: 1.5rem;
   padding-left: 1.5em;
   margin-bottom: 0.125rem;
 }
@@ -2368,7 +2368,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2415,7 +2415,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380dec6'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28127.5, 221.5, 197.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2485,7 +2485,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #b3ebdd;
+  background-color: rgb(178.5, 234.9, 220.5);
 }
 .form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -2511,7 +2511,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #b3ebdd;
+  background-color: rgb(178.5, 234.9, 220.5);
 }
 .form-range::-moz-range-track {
   width: 100%;
@@ -2653,7 +2653,7 @@ textarea.form-control-lg {
   display: flex;
   align-items: center;
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #202020;
@@ -2669,7 +2669,7 @@ textarea.form-control-lg {
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
   padding: 0.5rem 1rem;
-  font-size: 1.171875rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 
@@ -2678,7 +2678,7 @@ textarea.form-control-lg {
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
   padding: 0.25rem 0.5rem;
-  font-size: 0.8203125rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 
@@ -2728,7 +2728,7 @@ textarea.form-control-lg {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.8203125rem;
+  font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-success);
   border-radius: var(--bs-border-radius);
@@ -2818,7 +2818,7 @@ textarea.form-control-lg {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.8203125rem;
+  font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-danger);
   border-radius: var(--bs-border-radius);
@@ -2896,7 +2896,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.9375rem;
+  --bs-btn-font-size: 1rem;
   --bs-btn-font-weight: 400;
   --bs-btn-line-height: 1.5;
   --bs-btn-color: var(--bs-body-color);
@@ -2959,6 +2959,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2972,12 +2975,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00bc8c;
   --bs-btn-border-color: #00bc8c;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #26c69d;
+  --bs-btn-hover-bg: rgb(38.25, 198.05, 157.25);
-  --bs-btn-hover-border-color: #1ac398;
+  --bs-btn-hover-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-focus-shadow-rgb: 0, 160, 119;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #33c9a3;
+  --bs-btn-active-bg: rgb(51, 201.4, 163);
-  --bs-btn-active-border-color: #1ac398;
+  --bs-btn-active-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #00bc8c;
@@ -2989,12 +2992,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #666;
   --bs-btn-border-color: #666;
   --bs-btn-hover-color: #f3f3f3;
-  --bs-btn-hover-bg: #575757;
+  --bs-btn-hover-bg: rgb(86.7, 86.7, 86.7);
-  --bs-btn-hover-border-color: #525252;
+  --bs-btn-hover-border-color: rgb(81.6, 81.6, 81.6);
   --bs-btn-focus-shadow-rgb: 123, 123, 123;
   --bs-btn-active-color: #f3f3f3;
-  --bs-btn-active-bg: #525252;
+  --bs-btn-active-bg: rgb(81.6, 81.6, 81.6);
-  --bs-btn-active-border-color: #4d4d4d;
+  --bs-btn-active-border-color: rgb(76.5, 76.5, 76.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #f3f3f3;
   --bs-btn-disabled-bg: #666;
@@ -3006,12 +3009,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00bc8c;
   --bs-btn-border-color: #00bc8c;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #26c69d;
+  --bs-btn-hover-bg: rgb(38.25, 198.05, 157.25);
-  --bs-btn-hover-border-color: #1ac398;
+  --bs-btn-hover-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-focus-shadow-rgb: 0, 160, 119;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #33c9a3;
+  --bs-btn-active-bg: rgb(51, 201.4, 163);
-  --bs-btn-active-border-color: #1ac398;
+  --bs-btn-active-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #00bc8c;
@@ -3023,12 +3026,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #3498db;
   --bs-btn-border-color: #3498db;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #52a7e0;
+  --bs-btn-hover-bg: rgb(82.45, 167.45, 224.4);
-  --bs-btn-hover-border-color: #48a2df;
+  --bs-btn-hover-border-color: rgb(72.3, 162.3, 222.6);
   --bs-btn-focus-shadow-rgb: 44, 129, 186;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #5dade2;
+  --bs-btn-active-bg: rgb(92.6, 172.6, 226.2);
-  --bs-btn-active-border-color: #48a2df;
+  --bs-btn-active-border-color: rgb(72.3, 162.3, 222.6);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #3498db;
@@ -3040,12 +3043,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f39c12;
   --bs-btn-border-color: #f39c12;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f5ab36;
+  --bs-btn-hover-bg: rgb(244.8, 170.85, 53.55);
-  --bs-btn-hover-border-color: #f4a62a;
+  --bs-btn-hover-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-focus-shadow-rgb: 207, 133, 15;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f5b041;
+  --bs-btn-active-bg: rgb(245.4, 175.8, 65.4);
-  --bs-btn-active-border-color: #f4a62a;
+  --bs-btn-active-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #f39c12;
@@ -3057,12 +3060,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #e74c3c;
   --bs-btn-border-color: #e74c3c;
   --bs-btn-hover-color: #f3f3f3;
-  --bs-btn-hover-bg: #c44133;
+  --bs-btn-hover-bg: rgb(196.35, 64.6, 51);
-  --bs-btn-hover-border-color: #b93d30;
+  --bs-btn-hover-border-color: rgb(184.8, 60.8, 48);
   --bs-btn-focus-shadow-rgb: 233, 101, 87;
   --bs-btn-active-color: #f3f3f3;
-  --bs-btn-active-bg: #b93d30;
+  --bs-btn-active-bg: rgb(184.8, 60.8, 48);
-  --bs-btn-active-border-color: #ad392d;
+  --bs-btn-active-border-color: rgb(173.25, 57, 45);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #f3f3f3;
   --bs-btn-disabled-bg: #e74c3c;
@@ -3074,12 +3077,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #111;
   --bs-btn-border-color: #111;
   --bs-btn-hover-color: #f3f3f3;
-  --bs-btn-hover-bg: #0e0e0e;
+  --bs-btn-hover-bg: rgb(14.45, 14.45, 14.45);
-  --bs-btn-hover-border-color: #0e0e0e;
+  --bs-btn-hover-border-color: rgb(13.6, 13.6, 13.6);
   --bs-btn-focus-shadow-rgb: 51, 51, 51;
   --bs-btn-active-color: #f3f3f3;
-  --bs-btn-active-bg: #0e0e0e;
+  --bs-btn-active-bg: rgb(13.6, 13.6, 13.6);
-  --bs-btn-active-border-color: #0d0d0d;
+  --bs-btn-active-border-color: rgb(12.75, 12.75, 12.75);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #f3f3f3;
   --bs-btn-disabled-bg: #111;
@@ -3091,12 +3094,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #dee2e6;
   --bs-btn-border-color: #dee2e6;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #e3e6ea;
+  --bs-btn-hover-bg: rgb(226.95, 230.35, 233.75);
-  --bs-btn-hover-border-color: #e1e5e9;
+  --bs-btn-hover-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-focus-shadow-rgb: 189, 192, 196;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #e5e8eb;
+  --bs-btn-active-bg: rgb(228.6, 231.8, 235);
-  --bs-btn-active-border-color: #e1e5e9;
+  --bs-btn-active-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #dee2e6;
@@ -3264,14 +3267,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.171875rem;
+  --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.8203125rem;
+  --bs-btn-font-size: 0.875rem;
   --bs-btn-border-radius: var(--bs-border-radius-sm);
 }
 
@@ -3344,7 +3347,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.9375rem;
+  --bs-dropdown-font-size: 1rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: #111;
   --bs-dropdown-border-color: #202020;
@@ -3602,7 +3605,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.8203125rem;
+  font-size: 0.875rem;
   color: var(--bs-dropdown-header-color);
   white-space: nowrap;
 }
@@ -3869,15 +3872,15 @@ textarea.form-control-lg {
   --bs-navbar-hover-color: #f3f3f3;
   --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
   --bs-navbar-active-color: #f3f3f3;
-  --bs-navbar-brand-padding-y: 0.32421875rem;
+  --bs-navbar-brand-padding-y: 0.3125rem;
   --bs-navbar-brand-margin-end: 1rem;
-  --bs-navbar-brand-font-size: 1.171875rem;
+  --bs-navbar-brand-font-size: 1.25rem;
   --bs-navbar-brand-color: #f3f3f3;
   --bs-navbar-brand-hover-color: #f3f3f3;
   --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.171875rem;
+  --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(17, 17, 17, 0.1);
   --bs-navbar-toggler-border-radius: var(--bs-border-radius);
@@ -4487,12 +4490,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ebebeb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ebebeb' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004b38'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%280, 75.2, 56%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #80dec6;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4506,7 +4508,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.9375rem;
+  font-size: 1rem;
   color: var(--bs-accordion-btn-color);
   text-align: left;
   background-color: var(--bs-accordion-btn-bg);
@@ -4550,7 +4552,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4568,7 +4569,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4579,11 +4580,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4592,27 +4593,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366d7ba'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28102, 214.8, 186%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366d7ba'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28102, 214.8, 186%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -4650,23 +4651,23 @@ textarea.form-control-lg {
 .pagination {
   --bs-pagination-padding-x: 0.75rem;
   --bs-pagination-padding-y: 0.375rem;
-  --bs-pagination-font-size: 0.9375rem;
+  --bs-pagination-font-size: 1rem;
   --bs-pagination-color: #f3f3f3;
   --bs-pagination-bg: #00bc8c;
   --bs-pagination-border-width: 0;
   --bs-pagination-border-color: transparent;
   --bs-pagination-border-radius: var(--bs-border-radius);
   --bs-pagination-hover-color: #f3f3f3;
-  --bs-pagination-hover-bg: #00efb2;
+  --bs-pagination-hover-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-hover-border-color: transparent;
   --bs-pagination-focus-color: var(--bs-link-hover-color);
   --bs-pagination-focus-bg: var(--bs-secondary-bg);
   --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
   --bs-pagination-active-color: #f3f3f3;
-  --bs-pagination-active-bg: #00efb2;
+  --bs-pagination-active-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-active-border-color: transparent;
   --bs-pagination-disabled-color: #f3f3f3;
-  --bs-pagination-disabled-bg: #007053;
+  --bs-pagination-disabled-bg: rgb(0, 111.5, 83.0319148936);
   --bs-pagination-disabled-border-color: transparent;
   display: flex;
   padding-left: 0;
@@ -4729,14 +4730,14 @@ textarea.form-control-lg {
 .pagination-lg {
   --bs-pagination-padding-x: 1.5rem;
   --bs-pagination-padding-y: 0.75rem;
-  --bs-pagination-font-size: 1.171875rem;
+  --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.8203125rem;
+  --bs-pagination-font-size: 0.875rem;
   --bs-pagination-border-radius: var(--bs-border-radius-sm);
 }
 
@@ -4870,7 +4871,7 @@ textarea.form-control-lg {
 .progress,
 .progress-stacked {
   --bs-progress-height: 1rem;
-  --bs-progress-font-size: 0.703125rem;
+  --bs-progress-font-size: 0.75rem;
   --bs-progress-bg: #333;
   --bs-progress-border-radius: var(--bs-border-radius);
   --bs-progress-box-shadow: var(--bs-box-shadow-inset);
@@ -5486,7 +5487,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -5674,7 +5674,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.8203125rem;
+  --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);
@@ -5773,7 +5773,7 @@ textarea.form-control-lg {
 .popover {
   --bs-popover-zindex: 1070;
   --bs-popover-max-width: 276px;
-  --bs-popover-font-size: 0.8203125rem;
+  --bs-popover-font-size: 0.875rem;
   --bs-popover-bg: #111;
   --bs-popover-border-width: var(--bs-border-width);
   --bs-popover-border-color: var(--bs-border-color-translucent);
@@ -5782,7 +5782,7 @@ textarea.form-control-lg {
   --bs-popover-box-shadow: var(--bs-box-shadow);
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
-  --bs-popover-header-font-size: 0.9375rem;
+  --bs-popover-header-font-size: 1rem;
   --bs-popover-header-color: inherit;
   --bs-popover-header-bg: #111;
   --bs-popover-body-padding-x: 1rem;
@@ -6051,20 +6051,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f3f3'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f3f3'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f3f3'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f3f3'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f3f3'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f3f3f3'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6684,14 +6676,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {
@@ -8256,15 +8245,15 @@ textarea.form-control-lg {
 }
 
 .fs-4 {
-  font-size: calc(1.265625rem + 0.1875vw) !important;
+  font-size: calc(1.275rem + 0.3vw) !important;
 }
 
 .fs-5 {
-  font-size: 1.171875rem !important;
+  font-size: 1.25rem !important;
 }
 
 .fs-6 {
-  font-size: 0.9375rem !important;
+  font-size: 1rem !important;
 }
 
 .fst-italic {
@@ -11816,7 +11805,7 @@ textarea.form-control-lg {
     font-size: 2rem !important;
   }
   .fs-4 {
-    font-size: 1.40625rem !important;
+    font-size: 1.5rem !important;
   }
 }
 @media print {

src/assets/css/themes/darkly-red.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -45,28 +45,28 @@
   --bs-danger-rgb: 231, 76, 60;
   --bs-light-rgb: 48, 48, 48;
   --bs-dark-rgb: 222, 226, 230;
-  --bs-primary-text-emphasis: #162433;
+  --bs-primary-text-emphasis: rgb(22, 36, 50.8);
-  --bs-secondary-text-emphasis: #45484c;
+  --bs-secondary-text-emphasis: rgb(69.2, 72.4, 75.6);
-  --bs-success-text-emphasis: #004b38;
+  --bs-success-text-emphasis: rgb(0, 75.2, 56);
-  --bs-info-text-emphasis: #153d58;
+  --bs-info-text-emphasis: rgb(20.8, 60.8, 87.6);
-  --bs-warning-text-emphasis: #613e07;
+  --bs-warning-text-emphasis: rgb(97.2, 62.4, 7.2);
-  --bs-danger-text-emphasis: #5c1e18;
+  --bs-danger-text-emphasis: rgb(92.4, 30.4, 24);
   --bs-light-text-emphasis: #444;
   --bs-dark-text-emphasis: #444;
-  --bs-primary-bg-subtle: #d7dee5;
+  --bs-primary-bg-subtle: rgb(215, 222, 229.4);
-  --bs-secondary-bg-subtle: #eff0f2;
+  --bs-secondary-bg-subtle: rgb(238.6, 240.2, 241.8);
-  --bs-success-bg-subtle: #ccf2e8;
+  --bs-success-bg-subtle: rgb(204, 241.6, 232);
-  --bs-info-bg-subtle: #d6eaf8;
+  --bs-info-bg-subtle: rgb(214.4, 234.4, 247.8);
-  --bs-warning-bg-subtle: #fdebd0;
+  --bs-warning-bg-subtle: rgb(252.6, 235.2, 207.6);
-  --bs-danger-bg-subtle: #fadbd8;
+  --bs-danger-bg-subtle: rgb(250.2, 219.2, 216);
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #afbdcc;
+  --bs-primary-border-subtle: rgb(175, 189, 203.8);
-  --bs-secondary-border-subtle: #dee1e5;
+  --bs-secondary-border-subtle: rgb(222.2, 225.4, 228.6);
-  --bs-success-border-subtle: #99e4d1;
+  --bs-success-border-subtle: rgb(153, 228.2, 209);
-  --bs-info-border-subtle: #aed6f1;
+  --bs-info-border-subtle: rgb(173.8, 213.8, 240.6);
-  --bs-warning-border-subtle: #fad7a0;
+  --bs-warning-border-subtle: rgb(250.2, 215.4, 160.2);
-  --bs-danger-border-subtle: #f5b7b1;
+  --bs-danger-border-subtle: rgb(245.4, 183.4, 177);
   --bs-light-border-subtle: #ebebeb;
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
@@ -74,7 +74,7 @@
   --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-root-font-size: 93.75%;
+  --bs-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -97,7 +97,7 @@
   --bs-link-color: #e74c3c;
   --bs-link-color-rgb: 231, 76, 60;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #b93d30;
+  --bs-link-hover-color: rgb(184.8, 60.8, 48);
   --bs-link-hover-color-rgb: 185, 61, 48;
   --bs-code-color: #d63384;
   --bs-highlight-color: #dee2e6;
@@ -142,44 +142,44 @@
   --bs-tertiary-color-rgb: 222, 226, 230;
   --bs-tertiary-bg: #292929;
   --bs-tertiary-bg-rgb: 41, 41, 41;
-  --bs-primary-text-emphasis: #879cb2;
+  --bs-primary-text-emphasis: rgb(135, 156, 178.2);
-  --bs-secondary-text-emphasis: #ced3d7;
+  --bs-secondary-text-emphasis: rgb(205.8, 210.6, 215.4);
-  --bs-success-text-emphasis: #66d7ba;
+  --bs-success-text-emphasis: rgb(102, 214.8, 186);
-  --bs-info-text-emphasis: #85c1e9;
+  --bs-info-text-emphasis: rgb(133.2, 193.2, 233.4);
-  --bs-warning-text-emphasis: #f8c471;
+  --bs-warning-text-emphasis: rgb(247.8, 195.6, 112.8);
-  --bs-danger-text-emphasis: #f1948a;
+  --bs-danger-text-emphasis: rgb(240.6, 147.6, 138);
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #0b1219;
+  --bs-primary-bg-subtle: rgb(11, 18, 25.4);
-  --bs-secondary-bg-subtle: #232426;
+  --bs-secondary-bg-subtle: rgb(34.6, 36.2, 37.8);
-  --bs-success-bg-subtle: #00261c;
+  --bs-success-bg-subtle: rgb(0, 37.6, 28);
-  --bs-info-bg-subtle: #0a1e2c;
+  --bs-info-bg-subtle: rgb(10.4, 30.4, 43.8);
-  --bs-warning-bg-subtle: #311f04;
+  --bs-warning-bg-subtle: rgb(48.6, 31.2, 3.6);
-  --bs-danger-bg-subtle: #2e0f0c;
+  --bs-danger-bg-subtle: rgb(46.2, 15.2, 12);
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
-  --bs-primary-border-subtle: #21364c;
+  --bs-primary-border-subtle: rgb(33, 54, 76.2);
-  --bs-secondary-border-subtle: #686d71;
+  --bs-secondary-border-subtle: rgb(103.8, 108.6, 113.4);
-  --bs-success-border-subtle: #007154;
+  --bs-success-border-subtle: rgb(0, 112.8, 84);
-  --bs-info-border-subtle: #1f5b83;
+  --bs-info-border-subtle: rgb(31.2, 91.2, 131.4);
-  --bs-warning-border-subtle: #925e0b;
+  --bs-warning-border-subtle: rgb(145.8, 93.6, 10.8);
-  --bs-danger-border-subtle: #8b2e24;
+  --bs-danger-border-subtle: rgb(138.6, 45.6, 36);
   --bs-light-border-subtle: #444;
   --bs-dark-border-subtle: #303030;
   --bs-heading-color: inherit;
-  --bs-link-color: #879cb2;
+  --bs-link-color: rgb(135, 156, 178.2);
-  --bs-link-hover-color: #9fb0c1;
+  --bs-link-hover-color: rgb(159, 175.8, 193.56);
   --bs-link-color-rgb: 135, 156, 178;
-  --bs-link-hover-color-rgb: 159, 176, 193;
+  --bs-link-hover-color-rgb: 159, 176, 194;
-  --bs-code-color: #e685b5;
+  --bs-code-color: rgb(230.4, 132.6, 181.2);
   --bs-highlight-color: #dee2e6;
   --bs-highlight-bg: #333;
   --bs-border-color: #444;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #66d7ba;
+  --bs-form-valid-color: rgb(102, 214.8, 186);
-  --bs-form-valid-border-color: #66d7ba;
+  --bs-form-valid-border-color: rgb(102, 214.8, 186);
-  --bs-form-invalid-color: #f1948a;
+  --bs-form-invalid-color: rgb(240.6, 147.6, 138);
-  --bs-form-invalid-border-color: #f1948a;
+  --bs-form-invalid-border-color: rgb(240.6, 147.6, 138);
 }
 
 *,
@@ -1935,13 +1935,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #000;
-  --bs-table-bg: #d7dee5;
+  --bs-table-bg: rgb(215, 222, 229.4);
-  --bs-table-border-color: #acb2b7;
+  --bs-table-border-color: rgb(172, 177.6, 183.52);
-  --bs-table-striped-bg: #ccd3da;
+  --bs-table-striped-bg: rgb(204.25, 210.9, 217.93);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c2c8ce;
+  --bs-table-active-bg: rgb(193.5, 199.8, 206.46);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c7cdd4;
+  --bs-table-hover-bg: rgb(198.875, 205.35, 212.195);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1949,13 +1949,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #eff0f2;
+  --bs-table-bg: rgb(238.6, 240.2, 241.8);
-  --bs-table-border-color: #bfc0c2;
+  --bs-table-border-color: rgb(190.88, 192.16, 193.44);
-  --bs-table-striped-bg: #e3e4e6;
+  --bs-table-striped-bg: rgb(226.67, 228.19, 229.71);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #d7d8da;
+  --bs-table-active-bg: rgb(214.74, 216.18, 217.62);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #dddee0;
+  --bs-table-hover-bg: rgb(220.705, 222.185, 223.665);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1963,13 +1963,13 @@ progress {
 
 .table-success {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf2e8;
+  --bs-table-bg: rgb(204, 241.6, 232);
-  --bs-table-border-color: #a3c2ba;
+  --bs-table-border-color: rgb(163.2, 193.28, 185.6);
-  --bs-table-striped-bg: #c2e6dc;
+  --bs-table-striped-bg: rgb(193.8, 229.52, 220.4);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dad1;
+  --bs-table-active-bg: rgb(183.6, 217.44, 208.8);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde0d7;
+  --bs-table-hover-bg: rgb(188.7, 223.48, 214.6);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1977,13 +1977,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #d6eaf8;
+  --bs-table-bg: rgb(214.4, 234.4, 247.8);
-  --bs-table-border-color: #abbbc6;
+  --bs-table-border-color: rgb(171.52, 187.52, 198.24);
-  --bs-table-striped-bg: #cbdeec;
+  --bs-table-striped-bg: rgb(203.68, 222.68, 235.41);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c1d3df;
+  --bs-table-active-bg: rgb(192.96, 210.96, 223.02);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c6d8e5;
+  --bs-table-hover-bg: rgb(198.32, 216.82, 229.215);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1991,13 +1991,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #000;
-  --bs-table-bg: #fdebd0;
+  --bs-table-bg: rgb(252.6, 235.2, 207.6);
-  --bs-table-border-color: #cabca6;
+  --bs-table-border-color: rgb(202.08, 188.16, 166.08);
-  --bs-table-striped-bg: #f0dfc6;
+  --bs-table-striped-bg: rgb(239.97, 223.44, 197.22);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e4d4bb;
+  --bs-table-active-bg: rgb(227.34, 211.68, 186.84);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ead9c0;
+  --bs-table-hover-bg: rgb(233.655, 217.56, 192.03);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2005,13 +2005,13 @@ progress {
 
 .table-danger {
   --bs-table-color: #000;
-  --bs-table-bg: #fadbd8;
+  --bs-table-bg: rgb(250.2, 219.2, 216);
-  --bs-table-border-color: #c8afad;
+  --bs-table-border-color: rgb(200.16, 175.36, 172.8);
-  --bs-table-striped-bg: #eed0cd;
+  --bs-table-striped-bg: rgb(237.69, 208.24, 205.2);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e1c5c2;
+  --bs-table-active-bg: rgb(225.18, 197.28, 194.4);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #e7cbc8;
+  --bs-table-hover-bg: rgb(231.435, 202.76, 199.8);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2020,12 +2020,12 @@ progress {
 .table-light {
   --bs-table-color: #fff;
   --bs-table-bg: #303030;
-  --bs-table-border-color: #595959;
+  --bs-table-border-color: rgb(89.4, 89.4, 89.4);
-  --bs-table-striped-bg: #3a3a3a;
+  --bs-table-striped-bg: rgb(58.35, 58.35, 58.35);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #454545;
+  --bs-table-active-bg: rgb(68.7, 68.7, 68.7);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #404040;
+  --bs-table-hover-bg: rgb(63.525, 63.525, 63.525);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2034,12 +2034,12 @@ progress {
 .table-dark {
   --bs-table-color: #000;
   --bs-table-bg: #dee2e6;
-  --bs-table-border-color: #b2b5b8;
+  --bs-table-border-color: rgb(177.6, 180.8, 184);
-  --bs-table-striped-bg: #d3d7db;
+  --bs-table-striped-bg: rgb(210.9, 214.7, 218.5);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c8cbcf;
+  --bs-table-active-bg: rgb(199.8, 203.4, 207);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cdd1d5;
+  --bs-table-hover-bg: rgb(205.35, 209.05, 212.75);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2139,7 +2139,7 @@ progress {
 .form-control:focus {
   color: #fff;
   background-color: #444;
-  border-color: #9badbf;
+  border-color: rgb(155, 172.5, 191);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(55, 90, 127, 0.25);
 }
@@ -2157,7 +2157,7 @@ progress {
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
   opacity: 1;
 }
 .form-control::file-selector-button {
@@ -2284,7 +2284,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #9badbf;
+  border-color: rgb(155, 172.5, 191);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(55, 90, 127, 0.25);
 }
@@ -2293,7 +2293,7 @@ textarea.form-control-lg {
   background-image: none;
 }
 .form-select:disabled {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
 }
 .form-select:-moz-focusring {
   color: transparent;
@@ -2368,7 +2368,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #9badbf;
+  border-color: rgb(155, 172.5, 191);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(55, 90, 127, 0.25);
 }
@@ -2415,7 +2415,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239badbf'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28155, 172.5, 191%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2485,7 +2485,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #c3ced9;
+  background-color: rgb(195, 205.5, 216.6);
 }
 .form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -2511,7 +2511,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #c3ced9;
+  background-color: rgb(195, 205.5, 216.6);
 }
 .form-range::-moz-range-track {
   width: 100%;
@@ -2618,7 +2618,7 @@ textarea.form-control-lg {
 }
 .form-floating > :disabled ~ label::after,
 .form-floating > .form-control:disabled ~ label::after {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
 }
 
 .input-group {
@@ -2959,6 +2959,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2972,12 +2975,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #375a7f;
   --bs-btn-border-color: #375a7f;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #2f4d6c;
+  --bs-btn-hover-bg: rgb(46.75, 76.5, 107.95);
-  --bs-btn-hover-border-color: #2c4866;
+  --bs-btn-hover-border-color: rgb(44, 72, 101.6);
   --bs-btn-focus-shadow-rgb: 85, 115, 146;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #2c4866;
+  --bs-btn-active-bg: rgb(44, 72, 101.6);
-  --bs-btn-active-border-color: #29445f;
+  --bs-btn-active-border-color: rgb(41.25, 67.5, 95.25);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #375a7f;
@@ -2989,12 +2992,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #adb5bd;
   --bs-btn-border-color: #adb5bd;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #b9c0c7;
+  --bs-btn-hover-bg: rgb(185.3, 192.1, 198.9);
-  --bs-btn-hover-border-color: #b5bcc4;
+  --bs-btn-hover-border-color: rgb(181.2, 188.4, 195.6);
   --bs-btn-focus-shadow-rgb: 147, 154, 161;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #bdc4ca;
+  --bs-btn-active-bg: rgb(189.4, 195.8, 202.2);
-  --bs-btn-active-border-color: #b5bcc4;
+  --bs-btn-active-border-color: rgb(181.2, 188.4, 195.6);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #adb5bd;
@@ -3006,12 +3009,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00bc8c;
   --bs-btn-border-color: #00bc8c;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #26c69d;
+  --bs-btn-hover-bg: rgb(38.25, 198.05, 157.25);
-  --bs-btn-hover-border-color: #1ac398;
+  --bs-btn-hover-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-focus-shadow-rgb: 0, 160, 119;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #33c9a3;
+  --bs-btn-active-bg: rgb(51, 201.4, 163);
-  --bs-btn-active-border-color: #1ac398;
+  --bs-btn-active-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #00bc8c;
@@ -3023,12 +3026,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #3498db;
   --bs-btn-border-color: #3498db;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #2c81ba;
+  --bs-btn-hover-bg: rgb(44.2, 129.2, 186.15);
-  --bs-btn-hover-border-color: #2a7aaf;
+  --bs-btn-hover-border-color: rgb(41.6, 121.6, 175.2);
   --bs-btn-focus-shadow-rgb: 82, 167, 224;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #2a7aaf;
+  --bs-btn-active-bg: rgb(41.6, 121.6, 175.2);
-  --bs-btn-active-border-color: #2772a4;
+  --bs-btn-active-border-color: rgb(39, 114, 164.25);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #3498db;
@@ -3040,12 +3043,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f39c12;
   --bs-btn-border-color: #f39c12;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f5ab36;
+  --bs-btn-hover-bg: rgb(244.8, 170.85, 53.55);
-  --bs-btn-hover-border-color: #f4a62a;
+  --bs-btn-hover-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-focus-shadow-rgb: 207, 133, 15;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f5b041;
+  --bs-btn-active-bg: rgb(245.4, 175.8, 65.4);
-  --bs-btn-active-border-color: #f4a62a;
+  --bs-btn-active-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #f39c12;
@@ -3057,12 +3060,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #e74c3c;
   --bs-btn-border-color: #e74c3c;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #c44133;
+  --bs-btn-hover-bg: rgb(196.35, 64.6, 51);
-  --bs-btn-hover-border-color: #b93d30;
+  --bs-btn-hover-border-color: rgb(184.8, 60.8, 48);
   --bs-btn-focus-shadow-rgb: 235, 103, 89;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #b93d30;
+  --bs-btn-active-bg: rgb(184.8, 60.8, 48);
-  --bs-btn-active-border-color: #ad392d;
+  --bs-btn-active-border-color: rgb(173.25, 57, 45);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #e74c3c;
@@ -3074,11 +3077,11 @@ textarea.form-control-lg {
   --bs-btn-bg: #303030;
   --bs-btn-border-color: #303030;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #292929;
+  --bs-btn-hover-bg: rgb(40.8, 40.8, 40.8);
-  --bs-btn-hover-border-color: #262626;
+  --bs-btn-hover-border-color: rgb(38.4, 38.4, 38.4);
   --bs-btn-focus-shadow-rgb: 79, 79, 79;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #262626;
+  --bs-btn-active-bg: rgb(38.4, 38.4, 38.4);
   --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;
@@ -3091,12 +3094,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #dee2e6;
   --bs-btn-border-color: #dee2e6;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #e3e6ea;
+  --bs-btn-hover-bg: rgb(226.95, 230.35, 233.75);
-  --bs-btn-hover-border-color: #e1e5e9;
+  --bs-btn-hover-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-focus-shadow-rgb: 189, 192, 196;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #e5e8eb;
+  --bs-btn-active-bg: rgb(228.6, 231.8, 235);
-  --bs-btn-active-border-color: #e1e5e9;
+  --bs-btn-active-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #dee2e6;
@@ -4487,12 +4490,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23162433'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%2822, 36, 50.8%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #9badbf;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(55, 90, 127, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4550,7 +4552,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4568,7 +4569,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4579,11 +4580,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4592,27 +4593,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23879cb2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28135, 156, 178.2%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23879cb2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28135, 156, 178.2%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -4657,16 +4658,16 @@ textarea.form-control-lg {
   --bs-pagination-border-color: transparent;
   --bs-pagination-border-radius: var(--bs-border-radius);
   --bs-pagination-hover-color: #fff;
-  --bs-pagination-hover-bg: #00efb2;
+  --bs-pagination-hover-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-hover-border-color: transparent;
   --bs-pagination-focus-color: var(--bs-link-hover-color);
   --bs-pagination-focus-bg: var(--bs-secondary-bg);
   --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(55, 90, 127, 0.25);
   --bs-pagination-active-color: #fff;
-  --bs-pagination-active-bg: #00efb2;
+  --bs-pagination-active-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-active-border-color: transparent;
   --bs-pagination-disabled-color: #fff;
-  --bs-pagination-disabled-bg: #007053;
+  --bs-pagination-disabled-bg: rgb(0, 111.5, 83.0319148936);
   --bs-pagination-disabled-border-color: transparent;
   display: flex;
   padding-left: 0;
@@ -5486,7 +5487,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6051,20 +6051,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6684,14 +6676,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {

src/assets/css/themes/darkly.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -45,28 +45,28 @@
   --bs-danger-rgb: 231, 76, 60;
   --bs-light-rgb: 48, 48, 48;
   --bs-dark-rgb: 222, 226, 230;
-  --bs-primary-text-emphasis: #004b38;
+  --bs-primary-text-emphasis: rgb(0, 75.2, 56);
-  --bs-secondary-text-emphasis: #45484c;
+  --bs-secondary-text-emphasis: rgb(69.2, 72.4, 75.6);
-  --bs-success-text-emphasis: #004b38;
+  --bs-success-text-emphasis: rgb(0, 75.2, 56);
-  --bs-info-text-emphasis: #153d58;
+  --bs-info-text-emphasis: rgb(20.8, 60.8, 87.6);
-  --bs-warning-text-emphasis: #613e07;
+  --bs-warning-text-emphasis: rgb(97.2, 62.4, 7.2);
-  --bs-danger-text-emphasis: #5c1e18;
+  --bs-danger-text-emphasis: rgb(92.4, 30.4, 24);
   --bs-light-text-emphasis: #444;
   --bs-dark-text-emphasis: #444;
-  --bs-primary-bg-subtle: #ccf2e8;
+  --bs-primary-bg-subtle: rgb(204, 241.6, 232);
-  --bs-secondary-bg-subtle: #eff0f2;
+  --bs-secondary-bg-subtle: rgb(238.6, 240.2, 241.8);
-  --bs-success-bg-subtle: #ccf2e8;
+  --bs-success-bg-subtle: rgb(204, 241.6, 232);
-  --bs-info-bg-subtle: #d6eaf8;
+  --bs-info-bg-subtle: rgb(214.4, 234.4, 247.8);
-  --bs-warning-bg-subtle: #fdebd0;
+  --bs-warning-bg-subtle: rgb(252.6, 235.2, 207.6);
-  --bs-danger-bg-subtle: #fadbd8;
+  --bs-danger-bg-subtle: rgb(250.2, 219.2, 216);
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #99e4d1;
+  --bs-primary-border-subtle: rgb(153, 228.2, 209);
-  --bs-secondary-border-subtle: #dee1e5;
+  --bs-secondary-border-subtle: rgb(222.2, 225.4, 228.6);
-  --bs-success-border-subtle: #99e4d1;
+  --bs-success-border-subtle: rgb(153, 228.2, 209);
-  --bs-info-border-subtle: #aed6f1;
+  --bs-info-border-subtle: rgb(173.8, 213.8, 240.6);
-  --bs-warning-border-subtle: #fad7a0;
+  --bs-warning-border-subtle: rgb(250.2, 215.4, 160.2);
-  --bs-danger-border-subtle: #f5b7b1;
+  --bs-danger-border-subtle: rgb(245.4, 183.4, 177);
   --bs-light-border-subtle: #ebebeb;
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
@@ -74,7 +74,7 @@
   --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-root-font-size: 93.75%;
+  --bs-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -97,7 +97,7 @@
   --bs-link-color: #00bc8c;
   --bs-link-color-rgb: 0, 188, 140;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #009670;
+  --bs-link-hover-color: rgb(0, 150.4, 112);
   --bs-link-hover-color-rgb: 0, 150, 112;
   --bs-code-color: #d63384;
   --bs-highlight-color: #dee2e6;
@@ -142,44 +142,44 @@
   --bs-tertiary-color-rgb: 222, 226, 230;
   --bs-tertiary-bg: #292929;
   --bs-tertiary-bg-rgb: 41, 41, 41;
-  --bs-primary-text-emphasis: #66d7ba;
+  --bs-primary-text-emphasis: rgb(102, 214.8, 186);
-  --bs-secondary-text-emphasis: #ced3d7;
+  --bs-secondary-text-emphasis: rgb(205.8, 210.6, 215.4);
-  --bs-success-text-emphasis: #66d7ba;
+  --bs-success-text-emphasis: rgb(102, 214.8, 186);
-  --bs-info-text-emphasis: #85c1e9;
+  --bs-info-text-emphasis: rgb(133.2, 193.2, 233.4);
-  --bs-warning-text-emphasis: #f8c471;
+  --bs-warning-text-emphasis: rgb(247.8, 195.6, 112.8);
-  --bs-danger-text-emphasis: #f1948a;
+  --bs-danger-text-emphasis: rgb(240.6, 147.6, 138);
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #00261c;
+  --bs-primary-bg-subtle: rgb(0, 37.6, 28);
-  --bs-secondary-bg-subtle: #232426;
+  --bs-secondary-bg-subtle: rgb(34.6, 36.2, 37.8);
-  --bs-success-bg-subtle: #00261c;
+  --bs-success-bg-subtle: rgb(0, 37.6, 28);
-  --bs-info-bg-subtle: #0a1e2c;
+  --bs-info-bg-subtle: rgb(10.4, 30.4, 43.8);
-  --bs-warning-bg-subtle: #311f04;
+  --bs-warning-bg-subtle: rgb(48.6, 31.2, 3.6);
-  --bs-danger-bg-subtle: #2e0f0c;
+  --bs-danger-bg-subtle: rgb(46.2, 15.2, 12);
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
-  --bs-primary-border-subtle: #007154;
+  --bs-primary-border-subtle: rgb(0, 112.8, 84);
-  --bs-secondary-border-subtle: #686d71;
+  --bs-secondary-border-subtle: rgb(103.8, 108.6, 113.4);
-  --bs-success-border-subtle: #007154;
+  --bs-success-border-subtle: rgb(0, 112.8, 84);
-  --bs-info-border-subtle: #1f5b83;
+  --bs-info-border-subtle: rgb(31.2, 91.2, 131.4);
-  --bs-warning-border-subtle: #925e0b;
+  --bs-warning-border-subtle: rgb(145.8, 93.6, 10.8);
-  --bs-danger-border-subtle: #8b2e24;
+  --bs-danger-border-subtle: rgb(138.6, 45.6, 36);
   --bs-light-border-subtle: #444;
   --bs-dark-border-subtle: #303030;
   --bs-heading-color: inherit;
-  --bs-link-color: #66d7ba;
+  --bs-link-color: rgb(102, 214.8, 186);
-  --bs-link-hover-color: #85dfc8;
+  --bs-link-hover-color: rgb(132.6, 222.84, 199.8);
   --bs-link-color-rgb: 102, 215, 186;
   --bs-link-hover-color-rgb: 133, 223, 200;
-  --bs-code-color: #e685b5;
+  --bs-code-color: rgb(230.4, 132.6, 181.2);
   --bs-highlight-color: #dee2e6;
   --bs-highlight-bg: #333;
   --bs-border-color: #444;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #66d7ba;
+  --bs-form-valid-color: rgb(102, 214.8, 186);
-  --bs-form-valid-border-color: #66d7ba;
+  --bs-form-valid-border-color: rgb(102, 214.8, 186);
-  --bs-form-invalid-color: #f1948a;
+  --bs-form-invalid-color: rgb(240.6, 147.6, 138);
-  --bs-form-invalid-border-color: #f1948a;
+  --bs-form-invalid-border-color: rgb(240.6, 147.6, 138);
 }
 
 *,
@@ -1935,13 +1935,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf2e8;
+  --bs-table-bg: rgb(204, 241.6, 232);
-  --bs-table-border-color: #a3c2ba;
+  --bs-table-border-color: rgb(163.2, 193.28, 185.6);
-  --bs-table-striped-bg: #c2e6dc;
+  --bs-table-striped-bg: rgb(193.8, 229.52, 220.4);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dad1;
+  --bs-table-active-bg: rgb(183.6, 217.44, 208.8);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde0d7;
+  --bs-table-hover-bg: rgb(188.7, 223.48, 214.6);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1949,13 +1949,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #eff0f2;
+  --bs-table-bg: rgb(238.6, 240.2, 241.8);
-  --bs-table-border-color: #bfc0c2;
+  --bs-table-border-color: rgb(190.88, 192.16, 193.44);
-  --bs-table-striped-bg: #e3e4e6;
+  --bs-table-striped-bg: rgb(226.67, 228.19, 229.71);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #d7d8da;
+  --bs-table-active-bg: rgb(214.74, 216.18, 217.62);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #dddee0;
+  --bs-table-hover-bg: rgb(220.705, 222.185, 223.665);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1963,13 +1963,13 @@ progress {
 
 .table-success {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf2e8;
+  --bs-table-bg: rgb(204, 241.6, 232);
-  --bs-table-border-color: #a3c2ba;
+  --bs-table-border-color: rgb(163.2, 193.28, 185.6);
-  --bs-table-striped-bg: #c2e6dc;
+  --bs-table-striped-bg: rgb(193.8, 229.52, 220.4);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dad1;
+  --bs-table-active-bg: rgb(183.6, 217.44, 208.8);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde0d7;
+  --bs-table-hover-bg: rgb(188.7, 223.48, 214.6);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1977,13 +1977,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #d6eaf8;
+  --bs-table-bg: rgb(214.4, 234.4, 247.8);
-  --bs-table-border-color: #abbbc6;
+  --bs-table-border-color: rgb(171.52, 187.52, 198.24);
-  --bs-table-striped-bg: #cbdeec;
+  --bs-table-striped-bg: rgb(203.68, 222.68, 235.41);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c1d3df;
+  --bs-table-active-bg: rgb(192.96, 210.96, 223.02);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c6d8e5;
+  --bs-table-hover-bg: rgb(198.32, 216.82, 229.215);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1991,13 +1991,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #000;
-  --bs-table-bg: #fdebd0;
+  --bs-table-bg: rgb(252.6, 235.2, 207.6);
-  --bs-table-border-color: #cabca6;
+  --bs-table-border-color: rgb(202.08, 188.16, 166.08);
-  --bs-table-striped-bg: #f0dfc6;
+  --bs-table-striped-bg: rgb(239.97, 223.44, 197.22);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e4d4bb;
+  --bs-table-active-bg: rgb(227.34, 211.68, 186.84);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ead9c0;
+  --bs-table-hover-bg: rgb(233.655, 217.56, 192.03);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2005,13 +2005,13 @@ progress {
 
 .table-danger {
   --bs-table-color: #000;
-  --bs-table-bg: #fadbd8;
+  --bs-table-bg: rgb(250.2, 219.2, 216);
-  --bs-table-border-color: #c8afad;
+  --bs-table-border-color: rgb(200.16, 175.36, 172.8);
-  --bs-table-striped-bg: #eed0cd;
+  --bs-table-striped-bg: rgb(237.69, 208.24, 205.2);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e1c5c2;
+  --bs-table-active-bg: rgb(225.18, 197.28, 194.4);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #e7cbc8;
+  --bs-table-hover-bg: rgb(231.435, 202.76, 199.8);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2020,12 +2020,12 @@ progress {
 .table-light {
   --bs-table-color: #fff;
   --bs-table-bg: #303030;
-  --bs-table-border-color: #595959;
+  --bs-table-border-color: rgb(89.4, 89.4, 89.4);
-  --bs-table-striped-bg: #3a3a3a;
+  --bs-table-striped-bg: rgb(58.35, 58.35, 58.35);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #454545;
+  --bs-table-active-bg: rgb(68.7, 68.7, 68.7);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #404040;
+  --bs-table-hover-bg: rgb(63.525, 63.525, 63.525);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2034,12 +2034,12 @@ progress {
 .table-dark {
   --bs-table-color: #000;
   --bs-table-bg: #dee2e6;
-  --bs-table-border-color: #b2b5b8;
+  --bs-table-border-color: rgb(177.6, 180.8, 184);
-  --bs-table-striped-bg: #d3d7db;
+  --bs-table-striped-bg: rgb(210.9, 214.7, 218.5);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c8cbcf;
+  --bs-table-active-bg: rgb(199.8, 203.4, 207);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cdd1d5;
+  --bs-table-hover-bg: rgb(205.35, 209.05, 212.75);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2139,7 +2139,7 @@ progress {
 .form-control:focus {
   color: #fff;
   background-color: #444;
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2157,7 +2157,7 @@ progress {
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
   opacity: 1;
 }
 .form-control::file-selector-button {
@@ -2284,7 +2284,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2293,7 +2293,7 @@ textarea.form-control-lg {
   background-image: none;
 }
 .form-select:disabled {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
 }
 .form-select:-moz-focusring {
   color: transparent;
@@ -2368,7 +2368,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #80dec6;
+  border-color: rgb(127.5, 221.5, 197.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
 }
@@ -2415,7 +2415,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380dec6'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28127.5, 221.5, 197.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2485,7 +2485,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #b3ebdd;
+  background-color: rgb(178.5, 234.9, 220.5);
 }
 .form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -2511,7 +2511,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #b3ebdd;
+  background-color: rgb(178.5, 234.9, 220.5);
 }
 .form-range::-moz-range-track {
   width: 100%;
@@ -2618,7 +2618,7 @@ textarea.form-control-lg {
 }
 .form-floating > :disabled ~ label::after,
 .form-floating > .form-control:disabled ~ label::after {
-  background-color: #2b2b2b;
+  background-color: rgb(42.5, 42.5, 42.5);
 }
 
 .input-group {
@@ -2959,6 +2959,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2972,12 +2975,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00bc8c;
   --bs-btn-border-color: #00bc8c;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #26c69d;
+  --bs-btn-hover-bg: rgb(38.25, 198.05, 157.25);
-  --bs-btn-hover-border-color: #1ac398;
+  --bs-btn-hover-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-focus-shadow-rgb: 0, 160, 119;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #33c9a3;
+  --bs-btn-active-bg: rgb(51, 201.4, 163);
-  --bs-btn-active-border-color: #1ac398;
+  --bs-btn-active-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #00bc8c;
@@ -2989,12 +2992,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #adb5bd;
   --bs-btn-border-color: #adb5bd;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #b9c0c7;
+  --bs-btn-hover-bg: rgb(185.3, 192.1, 198.9);
-  --bs-btn-hover-border-color: #b5bcc4;
+  --bs-btn-hover-border-color: rgb(181.2, 188.4, 195.6);
   --bs-btn-focus-shadow-rgb: 147, 154, 161;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #bdc4ca;
+  --bs-btn-active-bg: rgb(189.4, 195.8, 202.2);
-  --bs-btn-active-border-color: #b5bcc4;
+  --bs-btn-active-border-color: rgb(181.2, 188.4, 195.6);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #adb5bd;
@@ -3006,12 +3009,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00bc8c;
   --bs-btn-border-color: #00bc8c;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #26c69d;
+  --bs-btn-hover-bg: rgb(38.25, 198.05, 157.25);
-  --bs-btn-hover-border-color: #1ac398;
+  --bs-btn-hover-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-focus-shadow-rgb: 0, 160, 119;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #33c9a3;
+  --bs-btn-active-bg: rgb(51, 201.4, 163);
-  --bs-btn-active-border-color: #1ac398;
+  --bs-btn-active-border-color: rgb(25.5, 194.7, 151.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #00bc8c;
@@ -3023,12 +3026,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #3498db;
   --bs-btn-border-color: #3498db;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #2c81ba;
+  --bs-btn-hover-bg: rgb(44.2, 129.2, 186.15);
-  --bs-btn-hover-border-color: #2a7aaf;
+  --bs-btn-hover-border-color: rgb(41.6, 121.6, 175.2);
   --bs-btn-focus-shadow-rgb: 82, 167, 224;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #2a7aaf;
+  --bs-btn-active-bg: rgb(41.6, 121.6, 175.2);
-  --bs-btn-active-border-color: #2772a4;
+  --bs-btn-active-border-color: rgb(39, 114, 164.25);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #3498db;
@@ -3040,12 +3043,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f39c12;
   --bs-btn-border-color: #f39c12;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #f5ab36;
+  --bs-btn-hover-bg: rgb(244.8, 170.85, 53.55);
-  --bs-btn-hover-border-color: #f4a62a;
+  --bs-btn-hover-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-focus-shadow-rgb: 207, 133, 15;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #f5b041;
+  --bs-btn-active-bg: rgb(245.4, 175.8, 65.4);
-  --bs-btn-active-border-color: #f4a62a;
+  --bs-btn-active-border-color: rgb(244.2, 165.9, 41.7);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #f39c12;
@@ -3057,12 +3060,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #e74c3c;
   --bs-btn-border-color: #e74c3c;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #c44133;
+  --bs-btn-hover-bg: rgb(196.35, 64.6, 51);
-  --bs-btn-hover-border-color: #b93d30;
+  --bs-btn-hover-border-color: rgb(184.8, 60.8, 48);
   --bs-btn-focus-shadow-rgb: 235, 103, 89;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #b93d30;
+  --bs-btn-active-bg: rgb(184.8, 60.8, 48);
-  --bs-btn-active-border-color: #ad392d;
+  --bs-btn-active-border-color: rgb(173.25, 57, 45);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #e74c3c;
@@ -3074,11 +3077,11 @@ textarea.form-control-lg {
   --bs-btn-bg: #303030;
   --bs-btn-border-color: #303030;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #292929;
+  --bs-btn-hover-bg: rgb(40.8, 40.8, 40.8);
-  --bs-btn-hover-border-color: #262626;
+  --bs-btn-hover-border-color: rgb(38.4, 38.4, 38.4);
   --bs-btn-focus-shadow-rgb: 79, 79, 79;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #262626;
+  --bs-btn-active-bg: rgb(38.4, 38.4, 38.4);
   --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;
@@ -3091,12 +3094,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #dee2e6;
   --bs-btn-border-color: #dee2e6;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #e3e6ea;
+  --bs-btn-hover-bg: rgb(226.95, 230.35, 233.75);
-  --bs-btn-hover-border-color: #e1e5e9;
+  --bs-btn-hover-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-focus-shadow-rgb: 189, 192, 196;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #e5e8eb;
+  --bs-btn-active-bg: rgb(228.6, 231.8, 235);
-  --bs-btn-active-border-color: #e1e5e9;
+  --bs-btn-active-border-color: rgb(225.3, 228.9, 232.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #dee2e6;
@@ -4487,12 +4490,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004b38'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%280, 75.2, 56%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #80dec6;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4550,7 +4552,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4568,7 +4569,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4579,11 +4580,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4592,27 +4593,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366d7ba'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28102, 214.8, 186%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366d7ba'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28102, 214.8, 186%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -4657,16 +4658,16 @@ textarea.form-control-lg {
   --bs-pagination-border-color: transparent;
   --bs-pagination-border-radius: var(--bs-border-radius);
   --bs-pagination-hover-color: #fff;
-  --bs-pagination-hover-bg: #00efb2;
+  --bs-pagination-hover-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-hover-border-color: transparent;
   --bs-pagination-focus-color: var(--bs-link-hover-color);
   --bs-pagination-focus-bg: var(--bs-secondary-bg);
   --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25);
   --bs-pagination-active-color: #fff;
-  --bs-pagination-active-bg: #00efb2;
+  --bs-pagination-active-bg: rgb(0, 239, 177.9787234043);
   --bs-pagination-active-border-color: transparent;
   --bs-pagination-disabled-color: #fff;
-  --bs-pagination-disabled-bg: #007053;
+  --bs-pagination-disabled-bg: rgb(0, 111.5, 83.0319148936);
   --bs-pagination-disabled-border-color: transparent;
   display: flex;
   padding-left: 0;
@@ -5486,7 +5487,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6051,20 +6051,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6684,14 +6676,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {

src/assets/css/themes/i386-dark.scss

@@ -1,4 +1,4 @@
-@import "variables.i386";
+@import "variables.i386-dark";
 @import "../../../../node_modules/bootstrap/scss/bootstrap";
 
 .btn-outline-secondary {

src/assets/css/themes/litely-compact.css

@@ -40,8 +40,8 @@ hr.my-3 {
 }
 
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -74,7 +74,7 @@ hr.my-3 {
   --bs-success: #6610f2;
   --bs-info: #007bff;
   --bs-warning: #ffc107;
-  --bs-danger: #873208;
+  --bs-danger: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-light: #f8f9fa;
   --bs-dark: #212529;
   --bs-primary-rgb: 241, 100, 30;
@@ -85,28 +85,28 @@ hr.my-3 {
   --bs-danger-rgb: 135, 50, 8;
   --bs-light-rgb: 248, 249, 250;
   --bs-dark-rgb: 33, 37, 41;
-  --bs-primary-text-emphasis: #60280c;
+  --bs-primary-text-emphasis: rgb(96.4, 40, 12);
-  --bs-secondary-text-emphasis: #00431c;
+  --bs-secondary-text-emphasis: rgb(0, 67.2, 28);
-  --bs-success-text-emphasis: #290661;
+  --bs-success-text-emphasis: rgb(40.8, 6.4, 96.8);
-  --bs-info-text-emphasis: #003166;
+  --bs-info-text-emphasis: rgb(0, 49.2, 102);
-  --bs-warning-text-emphasis: #664d03;
+  --bs-warning-text-emphasis: rgb(102, 77.2, 2.8);
-  --bs-danger-text-emphasis: #361403;
+  --bs-danger-text-emphasis: rgb(54.0376569038, 20.1740585774, 3.3623430962);
   --bs-light-text-emphasis: #495057;
   --bs-dark-text-emphasis: #495057;
-  --bs-primary-bg-subtle: #fce0d2;
+  --bs-primary-bg-subtle: rgb(252.2, 224, 210);
-  --bs-secondary-bg-subtle: #cceeda;
+  --bs-secondary-bg-subtle: rgb(204, 237.6, 218);
-  --bs-success-bg-subtle: #e0cffc;
+  --bs-success-bg-subtle: rgb(224.4, 207.2, 252.4);
-  --bs-info-bg-subtle: #cce5ff;
+  --bs-info-bg-subtle: rgb(204, 228.6, 255);
-  --bs-warning-bg-subtle: #fff3cd;
+  --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
-  --bs-danger-bg-subtle: #e7d6ce;
+  --bs-danger-bg-subtle: rgb(231.0188284519, 214.0870292887, 205.6811715481);
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #f9c1a5;
+  --bs-primary-border-subtle: rgb(249.4, 193, 165);
-  --bs-secondary-border-subtle: #99dcb5;
+  --bs-secondary-border-subtle: rgb(153, 220.2, 181);
-  --bs-success-border-subtle: #c29ffa;
+  --bs-success-border-subtle: rgb(193.8, 159.4, 249.8);
-  --bs-info-border-subtle: #99caff;
+  --bs-info-border-subtle: rgb(153, 202.2, 255);
-  --bs-warning-border-subtle: #ffe69c;
+  --bs-warning-border-subtle: rgb(255, 230.2, 155.8);
-  --bs-danger-border-subtle: #cfad9c;
+  --bs-danger-border-subtle: rgb(207.0376569038, 173.1740585774, 156.3623430962);
   --bs-light-border-subtle: #e9ecef;
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
@@ -114,7 +114,7 @@ hr.my-3 {
   --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif;
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-root-font-size: 93.75%;
+  --bs-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -137,7 +137,7 @@ hr.my-3 {
   --bs-link-color: #f1641e;
   --bs-link-color-rgb: 241, 100, 30;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #c15018;
+  --bs-link-hover-color: rgb(192.8, 80, 24);
   --bs-link-hover-color-rgb: 193, 80, 24;
   --bs-code-color: #d63384;
   --bs-highlight-color: #495057;
@@ -162,8 +162,8 @@ hr.my-3 {
   --bs-focus-ring-color: rgba(241, 100, 30, 0.25);
   --bs-form-valid-color: #007bff;
   --bs-form-valid-border-color: #007bff;
-  --bs-form-invalid-color: #873208;
+  --bs-form-invalid-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-form-invalid-border-color: #873208;
+  --bs-form-invalid-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
 }
 
 [data-bs-theme=dark] {
@@ -180,46 +180,46 @@ hr.my-3 {
   --bs-secondary-bg-rgb: 52, 58, 64;
   --bs-tertiary-color: rgba(222, 226, 230, 0.5);
   --bs-tertiary-color-rgb: 222, 226, 230;
-  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
   --bs-tertiary-bg-rgb: 43, 48, 53;
-  --bs-primary-text-emphasis: #f7a278;
+  --bs-primary-text-emphasis: rgb(246.6, 162, 120);
-  --bs-secondary-text-emphasis: #66cb90;
+  --bs-secondary-text-emphasis: rgb(102, 202.8, 144);
-  --bs-success-text-emphasis: #a370f7;
+  --bs-success-text-emphasis: rgb(163.2, 111.6, 247.2);
-  --bs-info-text-emphasis: #66b0ff;
+  --bs-info-text-emphasis: rgb(102, 175.8, 255);
-  --bs-warning-text-emphasis: #ffda6a;
+  --bs-warning-text-emphasis: rgb(255, 217.8, 106.2);
-  --bs-danger-text-emphasis: #b7846b;
+  --bs-danger-text-emphasis: rgb(183.0564853556, 132.2610878661, 107.0435146444);
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #301406;
+  --bs-primary-bg-subtle: rgb(48.2, 20, 6);
-  --bs-secondary-bg-subtle: #00220e;
+  --bs-secondary-bg-subtle: rgb(0, 33.6, 14);
-  --bs-success-bg-subtle: #140330;
+  --bs-success-bg-subtle: rgb(20.4, 3.2, 48.4);
-  --bs-info-bg-subtle: #001933;
+  --bs-info-bg-subtle: rgb(0, 24.6, 51);
-  --bs-warning-bg-subtle: #332701;
+  --bs-warning-bg-subtle: rgb(51, 38.6, 1.4);
-  --bs-danger-bg-subtle: #1b0a02;
+  --bs-danger-bg-subtle: rgb(27.0188284519, 10.0870292887, 1.6811715481);
   --bs-light-bg-subtle: #343a40;
   --bs-dark-bg-subtle: #2b2e31;
-  --bs-primary-border-subtle: #913c12;
+  --bs-primary-border-subtle: rgb(144.6, 60, 18);
-  --bs-secondary-border-subtle: #00652a;
+  --bs-secondary-border-subtle: rgb(0, 100.8, 42);
-  --bs-success-border-subtle: #3d0a91;
+  --bs-success-border-subtle: rgb(61.2, 9.6, 145.2);
-  --bs-info-border-subtle: #004a99;
+  --bs-info-border-subtle: rgb(0, 73.8, 153);
-  --bs-warning-border-subtle: #997404;
+  --bs-warning-border-subtle: rgb(153, 115.8, 4.2);
-  --bs-danger-border-subtle: #511e05;
+  --bs-danger-border-subtle: rgb(81.0564853556, 30.2610878661, 5.0435146444);
   --bs-light-border-subtle: #495057;
   --bs-dark-border-subtle: #343a40;
   --bs-heading-color: inherit;
-  --bs-link-color: #f7a278;
+  --bs-link-color: rgb(246.6, 162, 120);
-  --bs-link-hover-color: #f9b593;
+  --bs-link-hover-color: rgb(248.28, 180.6, 147);
   --bs-link-color-rgb: 247, 162, 120;
-  --bs-link-hover-color-rgb: 249, 181, 147;
+  --bs-link-hover-color-rgb: 248, 181, 147;
-  --bs-code-color: #e685b5;
+  --bs-code-color: rgb(230.4, 132.6, 181.2);
   --bs-highlight-color: #dee2e6;
-  --bs-highlight-bg: #664d03;
+  --bs-highlight-bg: rgb(102, 77.2, 2.8);
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #66cb90;
+  --bs-form-valid-color: rgb(102, 202.8, 144);
-  --bs-form-valid-border-color: #66cb90;
+  --bs-form-valid-border-color: rgb(102, 202.8, 144);
-  --bs-form-invalid-color: #e891a6;
+  --bs-form-invalid-color: rgb(231.6, 145.2, 165.6);
-  --bs-form-invalid-border-color: #e891a6;
+  --bs-form-invalid-border-color: rgb(231.6, 145.2, 165.6);
 }
 
 *,
@@ -1950,13 +1950,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #222;
-  --bs-table-bg: #fce0d2;
+  --bs-table-bg: rgb(252.2, 224, 210);
-  --bs-table-border-color: #d0baaf;
+  --bs-table-border-color: rgb(208.56, 186, 174.8);
-  --bs-table-striped-bg: #f1d7c9;
+  --bs-table-striped-bg: rgb(241.29, 214.5, 201.2);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e6cdc0;
+  --bs-table-active-bg: rgb(230.38, 205, 192.4);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #ecd2c5;
+  --bs-table-hover-bg: rgb(235.835, 209.75, 196.8);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1964,13 +1964,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #222;
-  --bs-table-bg: #cceeda;
+  --bs-table-bg: rgb(204, 237.6, 218);
-  --bs-table-border-color: #aac5b5;
+  --bs-table-border-color: rgb(170, 196.88, 181.2);
-  --bs-table-striped-bg: #c4e4d1;
+  --bs-table-striped-bg: rgb(195.5, 227.42, 208.8);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #bbdac8;
+  --bs-table-active-bg: rgb(187, 217.24, 199.6);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #bfdfcc;
+  --bs-table-hover-bg: rgb(191.25, 222.33, 204.2);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1978,13 +1978,13 @@ progress {
 
 .table-success {
   --bs-table-color: #222;
-  --bs-table-bg: #e0cffc;
+  --bs-table-bg: rgb(224.4, 207.2, 252.4);
-  --bs-table-border-color: #baacd0;
+  --bs-table-border-color: rgb(186.32, 172.56, 208.72);
-  --bs-table-striped-bg: #d7c6f1;
+  --bs-table-striped-bg: rgb(214.88, 198.54, 241.48);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #cdbee6;
+  --bs-table-active-bg: rgb(205.36, 189.88, 230.56);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #d2c2ec;
+  --bs-table-hover-bg: rgb(210.12, 194.21, 236.02);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1992,13 +1992,13 @@ progress {
 
 .table-info {
   --bs-table-color: #222;
-  --bs-table-bg: #cce5ff;
+  --bs-table-bg: rgb(204, 228.6, 255);
-  --bs-table-border-color: #aabed3;
+  --bs-table-border-color: rgb(170, 189.68, 210.8);
-  --bs-table-striped-bg: #c4dbf4;
+  --bs-table-striped-bg: rgb(195.5, 218.87, 243.95);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #bbd2e9;
+  --bs-table-active-bg: rgb(187, 209.14, 232.9);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #bfd6ee;
+  --bs-table-hover-bg: rgb(191.25, 214.005, 238.425);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2006,13 +2006,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #222;
-  --bs-table-bg: #fff3cd;
+  --bs-table-bg: rgb(255, 242.6, 205.4);
-  --bs-table-border-color: #d3c9ab;
+  --bs-table-border-color: rgb(210.8, 200.88, 171.12);
-  --bs-table-striped-bg: #f4e9c4;
+  --bs-table-striped-bg: rgb(243.95, 232.17, 196.83);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e9debc;
+  --bs-table-active-bg: rgb(232.9, 221.74, 188.26);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #eee3c0;
+  --bs-table-hover-bg: rgb(238.425, 226.955, 192.545);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2020,13 +2020,13 @@ progress {
 
 .table-danger {
   --bs-table-color: #222;
-  --bs-table-bg: #e7d6ce;
+  --bs-table-bg: rgb(231.0188284519, 214.0870292887, 205.6811715481);
-  --bs-table-border-color: #c0b2ac;
+  --bs-table-border-color: rgb(191.6150627615, 178.069623431, 171.3449372385);
-  --bs-table-striped-bg: #ddcdc5;
+  --bs-table-striped-bg: rgb(221.1678870293, 205.0826778243, 197.0971129707);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #d3c4bd;
+  --bs-table-active-bg: rgb(211.3169456067, 196.0783263598, 188.5130543933);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #d8c9c1;
+  --bs-table-hover-bg: rgb(216.242416318, 200.5805020921, 192.805083682);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2035,12 +2035,12 @@ progress {
 .table-light {
   --bs-table-color: #222;
   --bs-table-bg: #f8f9fa;
-  --bs-table-border-color: #cdcecf;
+  --bs-table-border-color: rgb(205.2, 206, 206.8);
-  --bs-table-striped-bg: #edeeef;
+  --bs-table-striped-bg: rgb(237.3, 238.25, 239.2);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e3e4e4;
+  --bs-table-active-bg: rgb(226.6, 227.5, 228.4);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #e8e9ea;
+  --bs-table-hover-bg: rgb(231.95, 232.875, 233.8);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2049,12 +2049,12 @@ progress {
 .table-dark {
   --bs-table-color: #fff;
   --bs-table-bg: #212529;
-  --bs-table-border-color: #4d5154;
+  --bs-table-border-color: rgb(77.4, 80.6, 83.8);
-  --bs-table-striped-bg: #2c3034;
+  --bs-table-striped-bg: rgb(44.1, 47.9, 51.7);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #373b3e;
+  --bs-table-active-bg: rgb(55.2, 58.8, 62.4);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #323539;
+  --bs-table-hover-bg: rgb(49.65, 53.35, 57.05);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2154,7 +2154,7 @@ progress {
 .form-control:focus {
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
 }
@@ -2299,7 +2299,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.75);
 }
@@ -2383,7 +2383,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
 }
@@ -2430,7 +2430,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f8b28f'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28248, 177.5, 142.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2500,7 +2500,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #fbd1bc;
+  background-color: rgb(250.8, 208.5, 187.5);
 }
 .form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -2526,7 +2526,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #fbd1bc;
+  background-color: rgb(250.8, 208.5, 187.5);
 }
 .form-range::-moz-range-track {
   width: 100%;
@@ -2849,7 +2849,7 @@ textarea.form-control-lg {
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: var(--bs-form-invalid-border-color);
   padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23873208'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -2868,7 +2868,7 @@ textarea.form-control-lg {
   border-color: var(--bs-form-invalid-border-color);
 }
 .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
-  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23873208'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e");
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29' stroke='none'/%3e%3c/svg%3e");
   padding-right: 4.125rem;
   background-position: right 0.75rem center, center right 2.25rem;
   background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -2974,6 +2974,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2987,12 +2990,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f1641e;
   --bs-btn-border-color: #f1641e;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #cd551a;
+  --bs-btn-hover-bg: rgb(204.85, 85, 25.5);
-  --bs-btn-hover-border-color: #c15018;
+  --bs-btn-hover-border-color: rgb(192.8, 80, 24);
   --bs-btn-focus-shadow-rgb: 243, 123, 64;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #c15018;
+  --bs-btn-active-bg: rgb(192.8, 80, 24);
-  --bs-btn-active-border-color: #b54b17;
+  --bs-btn-active-border-color: rgb(180.75, 75, 22.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #f1641e;
@@ -3004,12 +3007,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00a846;
   --bs-btn-border-color: #00a846;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #008f3c;
+  --bs-btn-hover-bg: rgb(0, 142.8, 59.5);
-  --bs-btn-hover-border-color: #008638;
+  --bs-btn-hover-border-color: rgb(0, 134.4, 56);
   --bs-btn-focus-shadow-rgb: 38, 181, 98;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #008638;
+  --bs-btn-active-bg: rgb(0, 134.4, 56);
-  --bs-btn-active-border-color: #007e35;
+  --bs-btn-active-border-color: rgb(0, 126, 52.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #00a846;
@@ -3021,12 +3024,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #6610f2;
   --bs-btn-border-color: #6610f2;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #570ece;
+  --bs-btn-hover-bg: rgb(86.7, 13.6, 205.7);
-  --bs-btn-hover-border-color: #520dc2;
+  --bs-btn-hover-border-color: rgb(81.6, 12.8, 193.6);
   --bs-btn-focus-shadow-rgb: 125, 52, 244;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #520dc2;
+  --bs-btn-active-bg: rgb(81.6, 12.8, 193.6);
-  --bs-btn-active-border-color: #4d0cb6;
+  --bs-btn-active-border-color: rgb(76.5, 12, 181.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #6610f2;
@@ -3038,12 +3041,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #007bff;
   --bs-btn-border-color: #007bff;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #0069d9;
+  --bs-btn-hover-bg: rgb(0, 104.55, 216.75);
-  --bs-btn-hover-border-color: #0062cc;
+  --bs-btn-hover-border-color: rgb(0, 98.4, 204);
   --bs-btn-focus-shadow-rgb: 38, 143, 255;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #0062cc;
+  --bs-btn-active-bg: rgb(0, 98.4, 204);
-  --bs-btn-active-border-color: #005cbf;
+  --bs-btn-active-border-color: rgb(0, 92.25, 191.25);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #007bff;
@@ -3055,12 +3058,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #ffc107;
   --bs-btn-border-color: #ffc107;
   --bs-btn-hover-color: #222;
-  --bs-btn-hover-bg: #ffca2c;
+  --bs-btn-hover-bg: rgb(255, 202.3, 44.2);
-  --bs-btn-hover-border-color: #ffc720;
+  --bs-btn-hover-border-color: rgb(255, 199.2, 31.8);
   --bs-btn-focus-shadow-rgb: 222, 169, 11;
   --bs-btn-active-color: #222;
-  --bs-btn-active-bg: #ffcd39;
+  --bs-btn-active-bg: rgb(255, 205.4, 56.6);
-  --bs-btn-active-border-color: #ffc720;
+  --bs-btn-active-border-color: rgb(255, 199.2, 31.8);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #222;
   --bs-btn-disabled-bg: #ffc107;
@@ -3069,19 +3072,19 @@ textarea.form-control-lg {
 
 .btn-danger {
   --bs-btn-color: #fff;
-  --bs-btn-bg: #873208;
+  --bs-btn-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-border-color: #873208;
+  --bs-btn-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #732b07;
+  --bs-btn-hover-bg: rgb(114.8300209205, 42.869874477, 7.1449790795);
-  --bs-btn-hover-border-color: #6c2806;
+  --bs-btn-hover-border-color: rgb(108.0753138075, 40.3481171548, 6.7246861925);
   --bs-btn-focus-shadow-rgb: 153, 81, 45;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #6c2806;
+  --bs-btn-active-bg: rgb(108.0753138075, 40.3481171548, 6.7246861925);
-  --bs-btn-active-border-color: #652606;
+  --bs-btn-active-border-color: rgb(101.3206066946, 37.8263598326, 6.3043933054);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #873208;
+  --bs-btn-disabled-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-disabled-border-color: #873208;
+  --bs-btn-disabled-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
 }
 
 .btn-light {
@@ -3089,12 +3092,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f8f9fa;
   --bs-btn-border-color: #f8f9fa;
   --bs-btn-hover-color: #222;
-  --bs-btn-hover-bg: #d3d4d5;
+  --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5);
-  --bs-btn-hover-border-color: #c6c7c8;
+  --bs-btn-hover-border-color: rgb(198.4, 199.2, 200);
   --bs-btn-focus-shadow-rgb: 216, 217, 218;
   --bs-btn-active-color: #222;
-  --bs-btn-active-bg: #c6c7c8;
+  --bs-btn-active-bg: rgb(198.4, 199.2, 200);
-  --bs-btn-active-border-color: #babbbc;
+  --bs-btn-active-border-color: rgb(186, 186.75, 187.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #222;
   --bs-btn-disabled-bg: #f8f9fa;
@@ -3106,12 +3109,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #212529;
   --bs-btn-border-color: #212529;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
-  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-focus-shadow-rgb: 66, 70, 73;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
-  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #212529;
@@ -3204,19 +3207,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-danger {
-  --bs-btn-color: #873208;
+  --bs-btn-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-border-color: #873208;
+  --bs-btn-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #873208;
+  --bs-btn-hover-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-hover-border-color: #873208;
+  --bs-btn-hover-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-focus-shadow-rgb: 135, 50, 8;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #873208;
+  --bs-btn-active-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-active-border-color: #873208;
+  --bs-btn-active-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
-  --bs-btn-disabled-color: #873208;
+  --bs-btn-disabled-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #873208;
+  --bs-btn-disabled-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-gradient: none;
 }
 
@@ -4498,12 +4501,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23495057'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2360280c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%2896.4, 40, 12%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #f8b28f;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4561,7 +4563,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4579,7 +4580,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4590,11 +4591,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4603,27 +4604,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7a278'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28246.6, 162, 120%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7a278'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28246.6, 162, 120%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -5497,7 +5498,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6062,20 +6062,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6695,14 +6687,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {
@@ -6857,8 +6846,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-danger:hover, .link-danger:focus {
-  color: RGBA(108, 40, 6, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(108, 40, 7, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(108, 40, 6, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(108, 40, 7, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-light {

src/assets/css/themes/litely-red.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -34,7 +34,7 @@
   --bs-success: #6610f2;
   --bs-info: #007bff;
   --bs-warning: #ffc107;
-  --bs-danger: #8c3409;
+  --bs-danger: rgb(139.8953974895, 52.2276150628, 8.7046025105);
   --bs-light: #f8f9fa;
   --bs-dark: #212529;
   --bs-primary-rgb: 241, 100, 30;
@@ -45,28 +45,28 @@
   --bs-danger-rgb: 140, 52, 9;
   --bs-light-rgb: 248, 249, 250;
   --bs-dark-rgb: 33, 37, 41;
-  --bs-primary-text-emphasis: #60280c;
+  --bs-primary-text-emphasis: rgb(96.4, 40, 12);
   --bs-secondary-text-emphasis: #500000;
-  --bs-success-text-emphasis: #290661;
+  --bs-success-text-emphasis: rgb(40.8, 6.4, 96.8);
-  --bs-info-text-emphasis: #003166;
+  --bs-info-text-emphasis: rgb(0, 49.2, 102);
-  --bs-warning-text-emphasis: #664d03;
+  --bs-warning-text-emphasis: rgb(102, 77.2, 2.8);
-  --bs-danger-text-emphasis: #381504;
+  --bs-danger-text-emphasis: rgb(55.9581589958, 20.8910460251, 3.4818410042);
   --bs-light-text-emphasis: #495057;
   --bs-dark-text-emphasis: #495057;
-  --bs-primary-bg-subtle: #fce0d2;
+  --bs-primary-bg-subtle: rgb(252.2, 224, 210);
   --bs-secondary-bg-subtle: #f4cccc;
-  --bs-success-bg-subtle: #e0cffc;
+  --bs-success-bg-subtle: rgb(224.4, 207.2, 252.4);
-  --bs-info-bg-subtle: #cce5ff;
+  --bs-info-bg-subtle: rgb(204, 228.6, 255);
-  --bs-warning-bg-subtle: #fff3cd;
+  --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
-  --bs-danger-bg-subtle: #e8d6ce;
+  --bs-danger-bg-subtle: rgb(231.9790794979, 214.4455230126, 205.7409205021);
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #f9c1a5;
+  --bs-primary-border-subtle: rgb(249.4, 193, 165);
   --bs-secondary-border-subtle: #e99999;
-  --bs-success-border-subtle: #c29ffa;
+  --bs-success-border-subtle: rgb(193.8, 159.4, 249.8);
-  --bs-info-border-subtle: #99caff;
+  --bs-info-border-subtle: rgb(153, 202.2, 255);
-  --bs-warning-border-subtle: #ffe69c;
+  --bs-warning-border-subtle: rgb(255, 230.2, 155.8);
-  --bs-danger-border-subtle: #d1ae9d;
+  --bs-danger-border-subtle: rgb(208.9581589958, 173.8910460251, 156.4818410042);
   --bs-light-border-subtle: #e9ecef;
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
@@ -74,7 +74,7 @@
   --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif;
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-root-font-size: 93.75%;
+  --bs-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -97,7 +97,7 @@
   --bs-link-color: #f1641e;
   --bs-link-color-rgb: 241, 100, 30;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #c15018;
+  --bs-link-hover-color: rgb(192.8, 80, 24);
   --bs-link-hover-color-rgb: 193, 80, 24;
   --bs-code-color: #d63384;
   --bs-highlight-color: #495057;
@@ -122,8 +122,8 @@
   --bs-focus-ring-color: rgba(241, 100, 30, 0.25);
   --bs-form-valid-color: #007bff;
   --bs-form-valid-border-color: #007bff;
-  --bs-form-invalid-color: #8c3409;
+  --bs-form-invalid-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
-  --bs-form-invalid-border-color: #8c3409;
+  --bs-form-invalid-border-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
 }
 
 [data-bs-theme=dark] {
@@ -140,46 +140,46 @@
   --bs-secondary-bg-rgb: 52, 58, 64;
   --bs-tertiary-color: rgba(222, 226, 230, 0.5);
   --bs-tertiary-color-rgb: 222, 226, 230;
-  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
   --bs-tertiary-bg-rgb: 43, 48, 53;
-  --bs-primary-text-emphasis: #f7a278;
+  --bs-primary-text-emphasis: rgb(246.6, 162, 120);
   --bs-secondary-text-emphasis: #de6666;
-  --bs-success-text-emphasis: #a370f7;
+  --bs-success-text-emphasis: rgb(163.2, 111.6, 247.2);
-  --bs-info-text-emphasis: #66b0ff;
+  --bs-info-text-emphasis: rgb(102, 175.8, 255);
-  --bs-warning-text-emphasis: #ffda6a;
+  --bs-warning-text-emphasis: rgb(255, 217.8, 106.2);
-  --bs-danger-text-emphasis: #ba856b;
+  --bs-danger-text-emphasis: rgb(185.9372384937, 133.3365690377, 107.2227615063);
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #301406;
+  --bs-primary-bg-subtle: rgb(48.2, 20, 6);
   --bs-secondary-bg-subtle: #280000;
-  --bs-success-bg-subtle: #140330;
+  --bs-success-bg-subtle: rgb(20.4, 3.2, 48.4);
-  --bs-info-bg-subtle: #001933;
+  --bs-info-bg-subtle: rgb(0, 24.6, 51);
-  --bs-warning-bg-subtle: #332701;
+  --bs-warning-bg-subtle: rgb(51, 38.6, 1.4);
-  --bs-danger-bg-subtle: #1c0a02;
+  --bs-danger-bg-subtle: rgb(27.9790794979, 10.4455230126, 1.7409205021);
   --bs-light-bg-subtle: #343a40;
   --bs-dark-bg-subtle: #2b2e31;
-  --bs-primary-border-subtle: #913c12;
+  --bs-primary-border-subtle: rgb(144.6, 60, 18);
   --bs-secondary-border-subtle: #780000;
-  --bs-success-border-subtle: #3d0a91;
+  --bs-success-border-subtle: rgb(61.2, 9.6, 145.2);
-  --bs-info-border-subtle: #004a99;
+  --bs-info-border-subtle: rgb(0, 73.8, 153);
-  --bs-warning-border-subtle: #997404;
+  --bs-warning-border-subtle: rgb(153, 115.8, 4.2);
-  --bs-danger-border-subtle: #541f05;
+  --bs-danger-border-subtle: rgb(83.9372384937, 31.3365690377, 5.2227615063);
   --bs-light-border-subtle: #495057;
   --bs-dark-border-subtle: #343a40;
   --bs-heading-color: inherit;
-  --bs-link-color: #f7a278;
+  --bs-link-color: rgb(246.6, 162, 120);
-  --bs-link-hover-color: #f9b593;
+  --bs-link-hover-color: rgb(248.28, 180.6, 147);
   --bs-link-color-rgb: 247, 162, 120;
-  --bs-link-hover-color-rgb: 249, 181, 147;
+  --bs-link-hover-color-rgb: 248, 181, 147;
-  --bs-code-color: #e685b5;
+  --bs-code-color: rgb(230.4, 132.6, 181.2);
   --bs-highlight-color: #dee2e6;
-  --bs-highlight-bg: #664d03;
+  --bs-highlight-bg: rgb(102, 77.2, 2.8);
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #66cb90;
+  --bs-form-valid-color: rgb(102, 202.8, 144);
-  --bs-form-valid-border-color: #66cb90;
+  --bs-form-valid-border-color: rgb(102, 202.8, 144);
-  --bs-form-invalid-color: #e891a6;
+  --bs-form-invalid-color: rgb(231.6, 145.2, 165.6);
-  --bs-form-invalid-border-color: #e891a6;
+  --bs-form-invalid-border-color: rgb(231.6, 145.2, 165.6);
 }
 
 *,
@@ -1934,13 +1934,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #222;
-  --bs-table-bg: #fce0d2;
+  --bs-table-bg: rgb(252.2, 224, 210);
-  --bs-table-border-color: #d0baaf;
+  --bs-table-border-color: rgb(208.56, 186, 174.8);
-  --bs-table-striped-bg: #f1d7c9;
+  --bs-table-striped-bg: rgb(241.29, 214.5, 201.2);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e6cdc0;
+  --bs-table-active-bg: rgb(230.38, 205, 192.4);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #ecd2c5;
+  --bs-table-hover-bg: rgb(235.835, 209.75, 196.8);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1950,11 +1950,11 @@ progress {
   --bs-table-color: #222;
   --bs-table-bg: #f4cccc;
   --bs-table-border-color: #caaaaa;
-  --bs-table-striped-bg: #eac4c4;
+  --bs-table-striped-bg: rgb(233.5, 195.5, 195.5);
   --bs-table-striped-color: #222;
   --bs-table-active-bg: #dfbbbb;
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #e4bfbf;
+  --bs-table-hover-bg: rgb(228.25, 191.25, 191.25);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1962,13 +1962,13 @@ progress {
 
 .table-success {
   --bs-table-color: #222;
-  --bs-table-bg: #e0cffc;
+  --bs-table-bg: rgb(224.4, 207.2, 252.4);
-  --bs-table-border-color: #baacd0;
+  --bs-table-border-color: rgb(186.32, 172.56, 208.72);
-  --bs-table-striped-bg: #d7c6f1;
+  --bs-table-striped-bg: rgb(214.88, 198.54, 241.48);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #cdbee6;
+  --bs-table-active-bg: rgb(205.36, 189.88, 230.56);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #d2c2ec;
+  --bs-table-hover-bg: rgb(210.12, 194.21, 236.02);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1976,13 +1976,13 @@ progress {
 
 .table-info {
   --bs-table-color: #222;
-  --bs-table-bg: #cce5ff;
+  --bs-table-bg: rgb(204, 228.6, 255);
-  --bs-table-border-color: #aabed3;
+  --bs-table-border-color: rgb(170, 189.68, 210.8);
-  --bs-table-striped-bg: #c4dbf4;
+  --bs-table-striped-bg: rgb(195.5, 218.87, 243.95);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #bbd2e9;
+  --bs-table-active-bg: rgb(187, 209.14, 232.9);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #bfd6ee;
+  --bs-table-hover-bg: rgb(191.25, 214.005, 238.425);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1990,13 +1990,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #222;
-  --bs-table-bg: #fff3cd;
+  --bs-table-bg: rgb(255, 242.6, 205.4);
-  --bs-table-border-color: #d3c9ab;
+  --bs-table-border-color: rgb(210.8, 200.88, 171.12);
-  --bs-table-striped-bg: #f4e9c4;
+  --bs-table-striped-bg: rgb(243.95, 232.17, 196.83);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e9debc;
+  --bs-table-active-bg: rgb(232.9, 221.74, 188.26);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #eee3c0;
+  --bs-table-hover-bg: rgb(238.425, 226.955, 192.545);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2004,13 +2004,13 @@ progress {
 
 .table-danger {
   --bs-table-color: #222;
-  --bs-table-bg: #e8d6ce;
+  --bs-table-bg: rgb(231.9790794979, 214.4455230126, 205.7409205021);
-  --bs-table-border-color: #c0b2ac;
+  --bs-table-border-color: rgb(192.3832635983, 178.35641841, 171.3927364017);
-  --bs-table-striped-bg: #decdc5;
+  --bs-table-striped-bg: rgb(222.080125523, 205.4232468619, 197.153874477);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #d4c4bd;
+  --bs-table-active-bg: rgb(212.1811715481, 196.4009707113, 188.5668284519);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #d9c9c1;
+  --bs-table-hover-bg: rgb(217.1306485356, 200.9121087866, 192.8603514644);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2019,12 +2019,12 @@ progress {
 .table-light {
   --bs-table-color: #222;
   --bs-table-bg: #f8f9fa;
-  --bs-table-border-color: #cdcecf;
+  --bs-table-border-color: rgb(205.2, 206, 206.8);
-  --bs-table-striped-bg: #edeeef;
+  --bs-table-striped-bg: rgb(237.3, 238.25, 239.2);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e3e4e4;
+  --bs-table-active-bg: rgb(226.6, 227.5, 228.4);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #e8e9ea;
+  --bs-table-hover-bg: rgb(231.95, 232.875, 233.8);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2033,12 +2033,12 @@ progress {
 .table-dark {
   --bs-table-color: #fff;
   --bs-table-bg: #212529;
-  --bs-table-border-color: #4d5154;
+  --bs-table-border-color: rgb(77.4, 80.6, 83.8);
-  --bs-table-striped-bg: #2c3034;
+  --bs-table-striped-bg: rgb(44.1, 47.9, 51.7);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #373b3e;
+  --bs-table-active-bg: rgb(55.2, 58.8, 62.4);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #323539;
+  --bs-table-hover-bg: rgb(49.65, 53.35, 57.05);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2138,7 +2138,7 @@ progress {
 .form-control:focus {
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
 }
@@ -2283,7 +2283,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.75);
 }
@@ -2367,7 +2367,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
 }
@@ -2414,7 +2414,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f8b28f'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28248, 177.5, 142.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2484,7 +2484,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #fbd1bc;
+  background-color: rgb(250.8, 208.5, 187.5);
 }
 .form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -2510,7 +2510,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #fbd1bc;
+  background-color: rgb(250.8, 208.5, 187.5);
 }
 .form-range::-moz-range-track {
   width: 100%;
@@ -2833,7 +2833,7 @@ textarea.form-control-lg {
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: var(--bs-form-invalid-border-color);
   padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%238c3409'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%238c3409' stroke='none'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='rgb%28139.8953974895, 52.2276150628, 8.7046025105%29'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='rgb%28139.8953974895, 52.2276150628, 8.7046025105%29' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -2852,7 +2852,7 @@ textarea.form-control-lg {
   border-color: var(--bs-form-invalid-border-color);
 }
 .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
-  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%238c3409'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%238c3409' stroke='none'/%3e%3c/svg%3e");
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='rgb%28139.8953974895, 52.2276150628, 8.7046025105%29'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='rgb%28139.8953974895, 52.2276150628, 8.7046025105%29' stroke='none'/%3e%3c/svg%3e");
   padding-right: 4.125rem;
   background-position: right 0.75rem center, center right 2.25rem;
   background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -2958,6 +2958,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2971,12 +2974,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f1641e;
   --bs-btn-border-color: #f1641e;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #cd551a;
+  --bs-btn-hover-bg: rgb(204.85, 85, 25.5);
-  --bs-btn-hover-border-color: #c15018;
+  --bs-btn-hover-border-color: rgb(192.8, 80, 24);
   --bs-btn-focus-shadow-rgb: 243, 123, 64;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #c15018;
+  --bs-btn-active-bg: rgb(192.8, 80, 24);
-  --bs-btn-active-border-color: #b54b17;
+  --bs-btn-active-border-color: rgb(180.75, 75, 22.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #f1641e;
@@ -3005,12 +3008,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #6610f2;
   --bs-btn-border-color: #6610f2;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #570ece;
+  --bs-btn-hover-bg: rgb(86.7, 13.6, 205.7);
-  --bs-btn-hover-border-color: #520dc2;
+  --bs-btn-hover-border-color: rgb(81.6, 12.8, 193.6);
   --bs-btn-focus-shadow-rgb: 125, 52, 244;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #520dc2;
+  --bs-btn-active-bg: rgb(81.6, 12.8, 193.6);
-  --bs-btn-active-border-color: #4d0cb6;
+  --bs-btn-active-border-color: rgb(76.5, 12, 181.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #6610f2;
@@ -3022,12 +3025,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #007bff;
   --bs-btn-border-color: #007bff;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #0069d9;
+  --bs-btn-hover-bg: rgb(0, 104.55, 216.75);
-  --bs-btn-hover-border-color: #0062cc;
+  --bs-btn-hover-border-color: rgb(0, 98.4, 204);
   --bs-btn-focus-shadow-rgb: 38, 143, 255;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #0062cc;
+  --bs-btn-active-bg: rgb(0, 98.4, 204);
-  --bs-btn-active-border-color: #005cbf;
+  --bs-btn-active-border-color: rgb(0, 92.25, 191.25);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #007bff;
@@ -3039,12 +3042,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #ffc107;
   --bs-btn-border-color: #ffc107;
   --bs-btn-hover-color: #222;
-  --bs-btn-hover-bg: #ffca2c;
+  --bs-btn-hover-bg: rgb(255, 202.3, 44.2);
-  --bs-btn-hover-border-color: #ffc720;
+  --bs-btn-hover-border-color: rgb(255, 199.2, 31.8);
   --bs-btn-focus-shadow-rgb: 222, 169, 11;
   --bs-btn-active-color: #222;
-  --bs-btn-active-bg: #ffcd39;
+  --bs-btn-active-bg: rgb(255, 205.4, 56.6);
-  --bs-btn-active-border-color: #ffc720;
+  --bs-btn-active-border-color: rgb(255, 199.2, 31.8);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #222;
   --bs-btn-disabled-bg: #ffc107;
@@ -3053,19 +3056,19 @@ textarea.form-control-lg {
 
 .btn-danger {
   --bs-btn-color: #fff;
-  --bs-btn-bg: #8c3409;
+  --bs-btn-bg: rgb(139.8953974895, 52.2276150628, 8.7046025105);
-  --bs-btn-border-color: #8c3409;
+  --bs-btn-border-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #772c08;
+  --bs-btn-hover-bg: rgb(118.9110878661, 44.3934728033, 7.3989121339);
-  --bs-btn-hover-border-color: #702a07;
+  --bs-btn-hover-border-color: rgb(111.9163179916, 41.7820920502, 6.9636820084);
-  --bs-btn-focus-shadow-rgb: 157, 82, 46;
+  --bs-btn-focus-shadow-rgb: 157, 83, 46;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #702a07;
+  --bs-btn-active-bg: rgb(111.9163179916, 41.7820920502, 6.9636820084);
-  --bs-btn-active-border-color: #692707;
+  --bs-btn-active-border-color: rgb(104.9215481172, 39.1707112971, 6.5284518828);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #8c3409;
+  --bs-btn-disabled-bg: rgb(139.8953974895, 52.2276150628, 8.7046025105);
-  --bs-btn-disabled-border-color: #8c3409;
+  --bs-btn-disabled-border-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
 }
 
 .btn-light {
@@ -3073,12 +3076,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f8f9fa;
   --bs-btn-border-color: #f8f9fa;
   --bs-btn-hover-color: #222;
-  --bs-btn-hover-bg: #d3d4d5;
+  --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5);
-  --bs-btn-hover-border-color: #c6c7c8;
+  --bs-btn-hover-border-color: rgb(198.4, 199.2, 200);
   --bs-btn-focus-shadow-rgb: 216, 217, 218;
   --bs-btn-active-color: #222;
-  --bs-btn-active-bg: #c6c7c8;
+  --bs-btn-active-bg: rgb(198.4, 199.2, 200);
-  --bs-btn-active-border-color: #babbbc;
+  --bs-btn-active-border-color: rgb(186, 186.75, 187.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #222;
   --bs-btn-disabled-bg: #f8f9fa;
@@ -3090,12 +3093,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #212529;
   --bs-btn-border-color: #212529;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
-  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-focus-shadow-rgb: 66, 70, 73;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
-  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #212529;
@@ -3188,19 +3191,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-danger {
-  --bs-btn-color: #8c3409;
+  --bs-btn-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
-  --bs-btn-border-color: #8c3409;
+  --bs-btn-border-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #8c3409;
+  --bs-btn-hover-bg: rgb(139.8953974895, 52.2276150628, 8.7046025105);
-  --bs-btn-hover-border-color: #8c3409;
+  --bs-btn-hover-border-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
   --bs-btn-focus-shadow-rgb: 140, 52, 9;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #8c3409;
+  --bs-btn-active-bg: rgb(139.8953974895, 52.2276150628, 8.7046025105);
-  --bs-btn-active-border-color: #8c3409;
+  --bs-btn-active-border-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
-  --bs-btn-disabled-color: #8c3409;
+  --bs-btn-disabled-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #8c3409;
+  --bs-btn-disabled-border-color: rgb(139.8953974895, 52.2276150628, 8.7046025105);
   --bs-gradient: none;
 }
 
@@ -4486,12 +4489,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23495057'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2360280c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%2896.4, 40, 12%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #f8b28f;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4549,7 +4551,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4567,7 +4568,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4578,11 +4579,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4591,27 +4592,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7a278'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28246.6, 162, 120%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7a278'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28246.6, 162, 120%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -5485,7 +5486,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6050,20 +6050,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6683,14 +6675,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {

src/assets/css/themes/litely.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -34,7 +34,7 @@
   --bs-success: #6610f2;
   --bs-info: #007bff;
   --bs-warning: #ffc107;
-  --bs-danger: #873208;
+  --bs-danger: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-light: #f8f9fa;
   --bs-dark: #212529;
   --bs-primary-rgb: 241, 100, 30;
@@ -45,28 +45,28 @@
   --bs-danger-rgb: 135, 50, 8;
   --bs-light-rgb: 248, 249, 250;
   --bs-dark-rgb: 33, 37, 41;
-  --bs-primary-text-emphasis: #60280c;
+  --bs-primary-text-emphasis: rgb(96.4, 40, 12);
-  --bs-secondary-text-emphasis: #00431c;
+  --bs-secondary-text-emphasis: rgb(0, 67.2, 28);
-  --bs-success-text-emphasis: #290661;
+  --bs-success-text-emphasis: rgb(40.8, 6.4, 96.8);
-  --bs-info-text-emphasis: #003166;
+  --bs-info-text-emphasis: rgb(0, 49.2, 102);
-  --bs-warning-text-emphasis: #664d03;
+  --bs-warning-text-emphasis: rgb(102, 77.2, 2.8);
-  --bs-danger-text-emphasis: #361403;
+  --bs-danger-text-emphasis: rgb(54.0376569038, 20.1740585774, 3.3623430962);
   --bs-light-text-emphasis: #495057;
   --bs-dark-text-emphasis: #495057;
-  --bs-primary-bg-subtle: #fce0d2;
+  --bs-primary-bg-subtle: rgb(252.2, 224, 210);
-  --bs-secondary-bg-subtle: #cceeda;
+  --bs-secondary-bg-subtle: rgb(204, 237.6, 218);
-  --bs-success-bg-subtle: #e0cffc;
+  --bs-success-bg-subtle: rgb(224.4, 207.2, 252.4);
-  --bs-info-bg-subtle: #cce5ff;
+  --bs-info-bg-subtle: rgb(204, 228.6, 255);
-  --bs-warning-bg-subtle: #fff3cd;
+  --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
-  --bs-danger-bg-subtle: #e7d6ce;
+  --bs-danger-bg-subtle: rgb(231.0188284519, 214.0870292887, 205.6811715481);
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #f9c1a5;
+  --bs-primary-border-subtle: rgb(249.4, 193, 165);
-  --bs-secondary-border-subtle: #99dcb5;
+  --bs-secondary-border-subtle: rgb(153, 220.2, 181);
-  --bs-success-border-subtle: #c29ffa;
+  --bs-success-border-subtle: rgb(193.8, 159.4, 249.8);
-  --bs-info-border-subtle: #99caff;
+  --bs-info-border-subtle: rgb(153, 202.2, 255);
-  --bs-warning-border-subtle: #ffe69c;
+  --bs-warning-border-subtle: rgb(255, 230.2, 155.8);
-  --bs-danger-border-subtle: #cfad9c;
+  --bs-danger-border-subtle: rgb(207.0376569038, 173.1740585774, 156.3623430962);
   --bs-light-border-subtle: #e9ecef;
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
@@ -74,7 +74,7 @@
   --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif;
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-root-font-size: 93.75%;
+  --bs-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -97,7 +97,7 @@
   --bs-link-color: #f1641e;
   --bs-link-color-rgb: 241, 100, 30;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #c15018;
+  --bs-link-hover-color: rgb(192.8, 80, 24);
   --bs-link-hover-color-rgb: 193, 80, 24;
   --bs-code-color: #d63384;
   --bs-highlight-color: #495057;
@@ -122,8 +122,8 @@
   --bs-focus-ring-color: rgba(241, 100, 30, 0.25);
   --bs-form-valid-color: #007bff;
   --bs-form-valid-border-color: #007bff;
-  --bs-form-invalid-color: #873208;
+  --bs-form-invalid-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-form-invalid-border-color: #873208;
+  --bs-form-invalid-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
 }
 
 [data-bs-theme=dark] {
@@ -140,46 +140,46 @@
   --bs-secondary-bg-rgb: 52, 58, 64;
   --bs-tertiary-color: rgba(222, 226, 230, 0.5);
   --bs-tertiary-color-rgb: 222, 226, 230;
-  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
   --bs-tertiary-bg-rgb: 43, 48, 53;
-  --bs-primary-text-emphasis: #f7a278;
+  --bs-primary-text-emphasis: rgb(246.6, 162, 120);
-  --bs-secondary-text-emphasis: #66cb90;
+  --bs-secondary-text-emphasis: rgb(102, 202.8, 144);
-  --bs-success-text-emphasis: #a370f7;
+  --bs-success-text-emphasis: rgb(163.2, 111.6, 247.2);
-  --bs-info-text-emphasis: #66b0ff;
+  --bs-info-text-emphasis: rgb(102, 175.8, 255);
-  --bs-warning-text-emphasis: #ffda6a;
+  --bs-warning-text-emphasis: rgb(255, 217.8, 106.2);
-  --bs-danger-text-emphasis: #b7846b;
+  --bs-danger-text-emphasis: rgb(183.0564853556, 132.2610878661, 107.0435146444);
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #301406;
+  --bs-primary-bg-subtle: rgb(48.2, 20, 6);
-  --bs-secondary-bg-subtle: #00220e;
+  --bs-secondary-bg-subtle: rgb(0, 33.6, 14);
-  --bs-success-bg-subtle: #140330;
+  --bs-success-bg-subtle: rgb(20.4, 3.2, 48.4);
-  --bs-info-bg-subtle: #001933;
+  --bs-info-bg-subtle: rgb(0, 24.6, 51);
-  --bs-warning-bg-subtle: #332701;
+  --bs-warning-bg-subtle: rgb(51, 38.6, 1.4);
-  --bs-danger-bg-subtle: #1b0a02;
+  --bs-danger-bg-subtle: rgb(27.0188284519, 10.0870292887, 1.6811715481);
   --bs-light-bg-subtle: #343a40;
   --bs-dark-bg-subtle: #2b2e31;
-  --bs-primary-border-subtle: #913c12;
+  --bs-primary-border-subtle: rgb(144.6, 60, 18);
-  --bs-secondary-border-subtle: #00652a;
+  --bs-secondary-border-subtle: rgb(0, 100.8, 42);
-  --bs-success-border-subtle: #3d0a91;
+  --bs-success-border-subtle: rgb(61.2, 9.6, 145.2);
-  --bs-info-border-subtle: #004a99;
+  --bs-info-border-subtle: rgb(0, 73.8, 153);
-  --bs-warning-border-subtle: #997404;
+  --bs-warning-border-subtle: rgb(153, 115.8, 4.2);
-  --bs-danger-border-subtle: #511e05;
+  --bs-danger-border-subtle: rgb(81.0564853556, 30.2610878661, 5.0435146444);
   --bs-light-border-subtle: #495057;
   --bs-dark-border-subtle: #343a40;
   --bs-heading-color: inherit;
-  --bs-link-color: #f7a278;
+  --bs-link-color: rgb(246.6, 162, 120);
-  --bs-link-hover-color: #f9b593;
+  --bs-link-hover-color: rgb(248.28, 180.6, 147);
   --bs-link-color-rgb: 247, 162, 120;
-  --bs-link-hover-color-rgb: 249, 181, 147;
+  --bs-link-hover-color-rgb: 248, 181, 147;
-  --bs-code-color: #e685b5;
+  --bs-code-color: rgb(230.4, 132.6, 181.2);
   --bs-highlight-color: #dee2e6;
-  --bs-highlight-bg: #664d03;
+  --bs-highlight-bg: rgb(102, 77.2, 2.8);
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #66cb90;
+  --bs-form-valid-color: rgb(102, 202.8, 144);
-  --bs-form-valid-border-color: #66cb90;
+  --bs-form-valid-border-color: rgb(102, 202.8, 144);
-  --bs-form-invalid-color: #e891a6;
+  --bs-form-invalid-color: rgb(231.6, 145.2, 165.6);
-  --bs-form-invalid-border-color: #e891a6;
+  --bs-form-invalid-border-color: rgb(231.6, 145.2, 165.6);
 }
 
 *,
@@ -1934,13 +1934,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #222;
-  --bs-table-bg: #fce0d2;
+  --bs-table-bg: rgb(252.2, 224, 210);
-  --bs-table-border-color: #d0baaf;
+  --bs-table-border-color: rgb(208.56, 186, 174.8);
-  --bs-table-striped-bg: #f1d7c9;
+  --bs-table-striped-bg: rgb(241.29, 214.5, 201.2);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e6cdc0;
+  --bs-table-active-bg: rgb(230.38, 205, 192.4);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #ecd2c5;
+  --bs-table-hover-bg: rgb(235.835, 209.75, 196.8);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1948,13 +1948,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #222;
-  --bs-table-bg: #cceeda;
+  --bs-table-bg: rgb(204, 237.6, 218);
-  --bs-table-border-color: #aac5b5;
+  --bs-table-border-color: rgb(170, 196.88, 181.2);
-  --bs-table-striped-bg: #c4e4d1;
+  --bs-table-striped-bg: rgb(195.5, 227.42, 208.8);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #bbdac8;
+  --bs-table-active-bg: rgb(187, 217.24, 199.6);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #bfdfcc;
+  --bs-table-hover-bg: rgb(191.25, 222.33, 204.2);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1962,13 +1962,13 @@ progress {
 
 .table-success {
   --bs-table-color: #222;
-  --bs-table-bg: #e0cffc;
+  --bs-table-bg: rgb(224.4, 207.2, 252.4);
-  --bs-table-border-color: #baacd0;
+  --bs-table-border-color: rgb(186.32, 172.56, 208.72);
-  --bs-table-striped-bg: #d7c6f1;
+  --bs-table-striped-bg: rgb(214.88, 198.54, 241.48);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #cdbee6;
+  --bs-table-active-bg: rgb(205.36, 189.88, 230.56);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #d2c2ec;
+  --bs-table-hover-bg: rgb(210.12, 194.21, 236.02);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1976,13 +1976,13 @@ progress {
 
 .table-info {
   --bs-table-color: #222;
-  --bs-table-bg: #cce5ff;
+  --bs-table-bg: rgb(204, 228.6, 255);
-  --bs-table-border-color: #aabed3;
+  --bs-table-border-color: rgb(170, 189.68, 210.8);
-  --bs-table-striped-bg: #c4dbf4;
+  --bs-table-striped-bg: rgb(195.5, 218.87, 243.95);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #bbd2e9;
+  --bs-table-active-bg: rgb(187, 209.14, 232.9);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #bfd6ee;
+  --bs-table-hover-bg: rgb(191.25, 214.005, 238.425);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1990,13 +1990,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #222;
-  --bs-table-bg: #fff3cd;
+  --bs-table-bg: rgb(255, 242.6, 205.4);
-  --bs-table-border-color: #d3c9ab;
+  --bs-table-border-color: rgb(210.8, 200.88, 171.12);
-  --bs-table-striped-bg: #f4e9c4;
+  --bs-table-striped-bg: rgb(243.95, 232.17, 196.83);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e9debc;
+  --bs-table-active-bg: rgb(232.9, 221.74, 188.26);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #eee3c0;
+  --bs-table-hover-bg: rgb(238.425, 226.955, 192.545);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2004,13 +2004,13 @@ progress {
 
 .table-danger {
   --bs-table-color: #222;
-  --bs-table-bg: #e7d6ce;
+  --bs-table-bg: rgb(231.0188284519, 214.0870292887, 205.6811715481);
-  --bs-table-border-color: #c0b2ac;
+  --bs-table-border-color: rgb(191.6150627615, 178.069623431, 171.3449372385);
-  --bs-table-striped-bg: #ddcdc5;
+  --bs-table-striped-bg: rgb(221.1678870293, 205.0826778243, 197.0971129707);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #d3c4bd;
+  --bs-table-active-bg: rgb(211.3169456067, 196.0783263598, 188.5130543933);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #d8c9c1;
+  --bs-table-hover-bg: rgb(216.242416318, 200.5805020921, 192.805083682);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2019,12 +2019,12 @@ progress {
 .table-light {
   --bs-table-color: #222;
   --bs-table-bg: #f8f9fa;
-  --bs-table-border-color: #cdcecf;
+  --bs-table-border-color: rgb(205.2, 206, 206.8);
-  --bs-table-striped-bg: #edeeef;
+  --bs-table-striped-bg: rgb(237.3, 238.25, 239.2);
   --bs-table-striped-color: #222;
-  --bs-table-active-bg: #e3e4e4;
+  --bs-table-active-bg: rgb(226.6, 227.5, 228.4);
   --bs-table-active-color: #222;
-  --bs-table-hover-bg: #e8e9ea;
+  --bs-table-hover-bg: rgb(231.95, 232.875, 233.8);
   --bs-table-hover-color: #222;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2033,12 +2033,12 @@ progress {
 .table-dark {
   --bs-table-color: #fff;
   --bs-table-bg: #212529;
-  --bs-table-border-color: #4d5154;
+  --bs-table-border-color: rgb(77.4, 80.6, 83.8);
-  --bs-table-striped-bg: #2c3034;
+  --bs-table-striped-bg: rgb(44.1, 47.9, 51.7);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #373b3e;
+  --bs-table-active-bg: rgb(55.2, 58.8, 62.4);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #323539;
+  --bs-table-hover-bg: rgb(49.65, 53.35, 57.05);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2138,7 +2138,7 @@ progress {
 .form-control:focus {
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
 }
@@ -2283,7 +2283,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.75);
 }
@@ -2367,7 +2367,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #f8b28f;
+  border-color: rgb(248, 177.5, 142.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
 }
@@ -2414,7 +2414,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f8b28f'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28248, 177.5, 142.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2484,7 +2484,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #fbd1bc;
+  background-color: rgb(250.8, 208.5, 187.5);
 }
 .form-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -2510,7 +2510,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #fbd1bc;
+  background-color: rgb(250.8, 208.5, 187.5);
 }
 .form-range::-moz-range-track {
   width: 100%;
@@ -2833,7 +2833,7 @@ textarea.form-control-lg {
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: var(--bs-form-invalid-border-color);
   padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23873208'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -2852,7 +2852,7 @@ textarea.form-control-lg {
   border-color: var(--bs-form-invalid-border-color);
 }
 .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
-  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23873208'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e");
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='rgb%28135.0941422594, 50.4351464435, 8.4058577406%29' stroke='none'/%3e%3c/svg%3e");
   padding-right: 4.125rem;
   background-position: right 0.75rem center, center right 2.25rem;
   background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -2958,6 +2958,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2971,12 +2974,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f1641e;
   --bs-btn-border-color: #f1641e;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #cd551a;
+  --bs-btn-hover-bg: rgb(204.85, 85, 25.5);
-  --bs-btn-hover-border-color: #c15018;
+  --bs-btn-hover-border-color: rgb(192.8, 80, 24);
   --bs-btn-focus-shadow-rgb: 243, 123, 64;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #c15018;
+  --bs-btn-active-bg: rgb(192.8, 80, 24);
-  --bs-btn-active-border-color: #b54b17;
+  --bs-btn-active-border-color: rgb(180.75, 75, 22.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #f1641e;
@@ -2988,12 +2991,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #00a846;
   --bs-btn-border-color: #00a846;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #008f3c;
+  --bs-btn-hover-bg: rgb(0, 142.8, 59.5);
-  --bs-btn-hover-border-color: #008638;
+  --bs-btn-hover-border-color: rgb(0, 134.4, 56);
   --bs-btn-focus-shadow-rgb: 38, 181, 98;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #008638;
+  --bs-btn-active-bg: rgb(0, 134.4, 56);
-  --bs-btn-active-border-color: #007e35;
+  --bs-btn-active-border-color: rgb(0, 126, 52.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #00a846;
@@ -3005,12 +3008,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #6610f2;
   --bs-btn-border-color: #6610f2;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #570ece;
+  --bs-btn-hover-bg: rgb(86.7, 13.6, 205.7);
-  --bs-btn-hover-border-color: #520dc2;
+  --bs-btn-hover-border-color: rgb(81.6, 12.8, 193.6);
   --bs-btn-focus-shadow-rgb: 125, 52, 244;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #520dc2;
+  --bs-btn-active-bg: rgb(81.6, 12.8, 193.6);
-  --bs-btn-active-border-color: #4d0cb6;
+  --bs-btn-active-border-color: rgb(76.5, 12, 181.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #6610f2;
@@ -3022,12 +3025,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #007bff;
   --bs-btn-border-color: #007bff;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #0069d9;
+  --bs-btn-hover-bg: rgb(0, 104.55, 216.75);
-  --bs-btn-hover-border-color: #0062cc;
+  --bs-btn-hover-border-color: rgb(0, 98.4, 204);
   --bs-btn-focus-shadow-rgb: 38, 143, 255;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #0062cc;
+  --bs-btn-active-bg: rgb(0, 98.4, 204);
-  --bs-btn-active-border-color: #005cbf;
+  --bs-btn-active-border-color: rgb(0, 92.25, 191.25);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #007bff;
@@ -3039,12 +3042,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #ffc107;
   --bs-btn-border-color: #ffc107;
   --bs-btn-hover-color: #222;
-  --bs-btn-hover-bg: #ffca2c;
+  --bs-btn-hover-bg: rgb(255, 202.3, 44.2);
-  --bs-btn-hover-border-color: #ffc720;
+  --bs-btn-hover-border-color: rgb(255, 199.2, 31.8);
   --bs-btn-focus-shadow-rgb: 222, 169, 11;
   --bs-btn-active-color: #222;
-  --bs-btn-active-bg: #ffcd39;
+  --bs-btn-active-bg: rgb(255, 205.4, 56.6);
-  --bs-btn-active-border-color: #ffc720;
+  --bs-btn-active-border-color: rgb(255, 199.2, 31.8);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #222;
   --bs-btn-disabled-bg: #ffc107;
@@ -3053,19 +3056,19 @@ textarea.form-control-lg {
 
 .btn-danger {
   --bs-btn-color: #fff;
-  --bs-btn-bg: #873208;
+  --bs-btn-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-border-color: #873208;
+  --bs-btn-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #732b07;
+  --bs-btn-hover-bg: rgb(114.8300209205, 42.869874477, 7.1449790795);
-  --bs-btn-hover-border-color: #6c2806;
+  --bs-btn-hover-border-color: rgb(108.0753138075, 40.3481171548, 6.7246861925);
   --bs-btn-focus-shadow-rgb: 153, 81, 45;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #6c2806;
+  --bs-btn-active-bg: rgb(108.0753138075, 40.3481171548, 6.7246861925);
-  --bs-btn-active-border-color: #652606;
+  --bs-btn-active-border-color: rgb(101.3206066946, 37.8263598326, 6.3043933054);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #873208;
+  --bs-btn-disabled-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-disabled-border-color: #873208;
+  --bs-btn-disabled-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
 }
 
 .btn-light {
@@ -3073,12 +3076,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #f8f9fa;
   --bs-btn-border-color: #f8f9fa;
   --bs-btn-hover-color: #222;
-  --bs-btn-hover-bg: #d3d4d5;
+  --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5);
-  --bs-btn-hover-border-color: #c6c7c8;
+  --bs-btn-hover-border-color: rgb(198.4, 199.2, 200);
   --bs-btn-focus-shadow-rgb: 216, 217, 218;
   --bs-btn-active-color: #222;
-  --bs-btn-active-bg: #c6c7c8;
+  --bs-btn-active-bg: rgb(198.4, 199.2, 200);
-  --bs-btn-active-border-color: #babbbc;
+  --bs-btn-active-border-color: rgb(186, 186.75, 187.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #222;
   --bs-btn-disabled-bg: #f8f9fa;
@@ -3090,12 +3093,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #212529;
   --bs-btn-border-color: #212529;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
-  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-focus-shadow-rgb: 66, 70, 73;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
-  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #212529;
@@ -3188,19 +3191,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-danger {
-  --bs-btn-color: #873208;
+  --bs-btn-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-border-color: #873208;
+  --bs-btn-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #873208;
+  --bs-btn-hover-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-hover-border-color: #873208;
+  --bs-btn-hover-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-focus-shadow-rgb: 135, 50, 8;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #873208;
+  --bs-btn-active-bg: rgb(135.0941422594, 50.4351464435, 8.4058577406);
-  --bs-btn-active-border-color: #873208;
+  --bs-btn-active-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(34, 34, 34, 0.125);
-  --bs-btn-disabled-color: #873208;
+  --bs-btn-disabled-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #873208;
+  --bs-btn-disabled-border-color: rgb(135.0941422594, 50.4351464435, 8.4058577406);
   --bs-gradient: none;
 }
 
@@ -4486,12 +4489,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23495057'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2360280c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%2896.4, 40, 12%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #f8b28f;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(241, 100, 30, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4549,7 +4551,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4567,7 +4568,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4578,11 +4579,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4591,27 +4592,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7a278'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28246.6, 162, 120%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7a278'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28246.6, 162, 120%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -5485,7 +5486,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6050,20 +6050,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6683,14 +6675,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {
@@ -6845,8 +6834,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-danger:hover, .link-danger:focus {
-  color: RGBA(108, 40, 6, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(108, 40, 7, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(108, 40, 6, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(108, 40, 7, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-light {

src/assets/css/themes/vaporwave-dark.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -45,27 +45,27 @@
   --bs-danger-rgb: 255, 95, 110;
   --bs-light-rgb: 68, 68, 68;
   --bs-dark-rgb: 235, 235, 235;
-  --bs-primary-text-emphasis: #661a4a;
+  --bs-primary-text-emphasis: rgb(102, 25.6, 74.4);
-  --bs-secondary-text-emphasis: #005266;
+  --bs-secondary-text-emphasis: rgb(0.4, 82, 101.6);
-  --bs-success-text-emphasis: #026640;
+  --bs-success-text-emphasis: rgb(2, 102, 64.4);
-  --bs-info-text-emphasis: #005266;
+  --bs-info-text-emphasis: rgb(0.4, 82, 101.6);
-  --bs-warning-text-emphasis: #66643c;
+  --bs-warning-text-emphasis: rgb(102, 100.4, 60);
   --bs-danger-text-emphasis: #66262c;
   --bs-light-text-emphasis: #444;
   --bs-dark-text-emphasis: #444;
-  --bs-primary-bg-subtle: #ffd9f1;
+  --bs-primary-bg-subtle: rgb(255, 216.8, 241.2);
-  --bs-secondary-bg-subtle: #ccf5ff;
+  --bs-secondary-bg-subtle: rgb(204.2, 245, 254.8);
-  --bs-success-bg-subtle: #cdffec;
+  --bs-success-bg-subtle: rgb(205, 255, 236.2);
-  --bs-info-bg-subtle: #ccf5ff;
+  --bs-info-bg-subtle: rgb(204.2, 245, 254.8);
-  --bs-warning-bg-subtle: #fffeea;
+  --bs-warning-bg-subtle: rgb(255, 254.2, 234);
   --bs-danger-bg-subtle: #ffdfe2;
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #ffb3e3;
+  --bs-primary-border-subtle: rgb(255, 178.6, 227.4);
-  --bs-secondary-border-subtle: #99ebff;
+  --bs-secondary-border-subtle: rgb(153.4, 235, 254.6);
-  --bs-success-border-subtle: #9bffd9;
+  --bs-success-border-subtle: rgb(155, 255, 217.4);
-  --bs-info-border-subtle: #99ebff;
+  --bs-info-border-subtle: rgb(153.4, 235, 254.6);
-  --bs-warning-border-subtle: #fffdd5;
+  --bs-warning-border-subtle: rgb(255, 253.4, 213);
   --bs-danger-border-subtle: #ffbfc5;
   --bs-light-border-subtle: #ebebeb;
   --bs-dark-border-subtle: #adb5bd;
@@ -74,7 +74,7 @@
   --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-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -97,7 +97,7 @@
   --bs-link-color: rgb(255, 64, 186);
   --bs-link-color-rgb: 255, 64, 186;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #cc3395;
+  --bs-link-hover-color: rgb(204, 51.2, 148.8);
   --bs-link-hover-color-rgb: 204, 51, 149;
   --bs-code-color: rgb(255, 64, 186);
   --bs-highlight-color: #ebebeb;
@@ -142,42 +142,42 @@
   --bs-tertiary-color-rgb: 222, 226, 230;
   --bs-tertiary-bg: #292929;
   --bs-tertiary-bg-rgb: 41, 41, 41;
-  --bs-primary-text-emphasis: #ff8cd6;
+  --bs-primary-text-emphasis: rgb(255, 140.4, 213.6);
-  --bs-secondary-text-emphasis: #67e1fe;
+  --bs-secondary-text-emphasis: rgb(102.6, 225, 254.4);
-  --bs-success-text-emphasis: #69ffc7;
+  --bs-success-text-emphasis: rgb(105, 255, 198.6);
-  --bs-info-text-emphasis: #67e1fe;
+  --bs-info-text-emphasis: rgb(102.6, 225, 254.4);
-  --bs-warning-text-emphasis: #fffdc0;
+  --bs-warning-text-emphasis: rgb(255, 252.6, 192);
   --bs-danger-text-emphasis: #ff9fa8;
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #330d25;
+  --bs-primary-bg-subtle: rgb(51, 12.8, 37.2);
-  --bs-secondary-bg-subtle: #002933;
+  --bs-secondary-bg-subtle: rgb(0.2, 41, 50.8);
-  --bs-success-bg-subtle: #013320;
+  --bs-success-bg-subtle: rgb(1, 51, 32.2);
-  --bs-info-bg-subtle: #002933;
+  --bs-info-bg-subtle: rgb(0.2, 41, 50.8);
-  --bs-warning-bg-subtle: #33321e;
+  --bs-warning-bg-subtle: rgb(51, 50.2, 30);
   --bs-danger-bg-subtle: #331316;
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
-  --bs-primary-border-subtle: #992670;
+  --bs-primary-border-subtle: rgb(153, 38.4, 111.6);
-  --bs-secondary-border-subtle: #017b98;
+  --bs-secondary-border-subtle: rgb(0.6, 123, 152.4);
-  --bs-success-border-subtle: #039961;
+  --bs-success-border-subtle: rgb(3, 153, 96.6);
-  --bs-info-border-subtle: #017b98;
+  --bs-info-border-subtle: rgb(0.6, 123, 152.4);
-  --bs-warning-border-subtle: #99975a;
+  --bs-warning-border-subtle: rgb(153, 150.6, 90);
   --bs-danger-border-subtle: #993942;
   --bs-light-border-subtle: #444;
   --bs-dark-border-subtle: #303030;
   --bs-heading-color: inherit;
-  --bs-link-color: #ff8cd6;
+  --bs-link-color: rgb(255, 140.4, 213.6);
-  --bs-link-hover-color: #ffa3de;
+  --bs-link-hover-color: rgb(255, 163.32, 221.88);
   --bs-link-color-rgb: 255, 140, 214;
   --bs-link-hover-color-rgb: 255, 163, 222;
-  --bs-code-color: #ff8cd6;
+  --bs-code-color: rgb(255, 140.4, 213.6);
   --bs-highlight-color: #dee2e6;
   --bs-highlight-bg: #888;
   --bs-border-color: #444;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #69ffc7;
+  --bs-form-valid-color: rgb(105, 255, 198.6);
-  --bs-form-valid-border-color: #69ffc7;
+  --bs-form-valid-border-color: rgb(105, 255, 198.6);
   --bs-form-invalid-color: #ff9fa8;
   --bs-form-invalid-border-color: #ff9fa8;
 }
@@ -1936,13 +1936,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #000;
-  --bs-table-bg: #ffd9f1;
+  --bs-table-bg: rgb(255, 216.8, 241.2);
-  --bs-table-border-color: #ccaec1;
+  --bs-table-border-color: rgb(204, 173.44, 192.96);
-  --bs-table-striped-bg: #f2cee5;
+  --bs-table-striped-bg: rgb(242.25, 205.96, 229.14);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e6c3d9;
+  --bs-table-active-bg: rgb(229.5, 195.12, 217.08);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ecc9df;
+  --bs-table-hover-bg: rgb(235.875, 200.54, 223.11);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1950,13 +1950,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf5ff;
+  --bs-table-bg: rgb(204.2, 245, 254.8);
-  --bs-table-border-color: #a3c4cc;
+  --bs-table-border-color: rgb(163.36, 196, 203.84);
-  --bs-table-striped-bg: #c2e9f2;
+  --bs-table-striped-bg: rgb(193.99, 232.75, 242.06);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dde6;
+  --bs-table-active-bg: rgb(183.78, 220.5, 229.32);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde3ec;
+  --bs-table-hover-bg: rgb(188.885, 226.625, 235.69);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1964,13 +1964,13 @@ progress {
 
 .table-success {
   --bs-table-color: #000;
-  --bs-table-bg: #cdffec;
+  --bs-table-bg: rgb(205, 255, 236.2);
-  --bs-table-border-color: #a4ccbd;
+  --bs-table-border-color: rgb(164, 204, 188.96);
-  --bs-table-striped-bg: #c3f2e0;
+  --bs-table-striped-bg: rgb(194.75, 242.25, 224.39);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b9e6d4;
+  --bs-table-active-bg: rgb(184.5, 229.5, 212.58);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #beecda;
+  --bs-table-hover-bg: rgb(189.625, 235.875, 218.485);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1978,13 +1978,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf5ff;
+  --bs-table-bg: rgb(204.2, 245, 254.8);
-  --bs-table-border-color: #a3c4cc;
+  --bs-table-border-color: rgb(163.36, 196, 203.84);
-  --bs-table-striped-bg: #c2e9f2;
+  --bs-table-striped-bg: rgb(193.99, 232.75, 242.06);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dde6;
+  --bs-table-active-bg: rgb(183.78, 220.5, 229.32);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde3ec;
+  --bs-table-hover-bg: rgb(188.885, 226.625, 235.69);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1992,13 +1992,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #000;
-  --bs-table-bg: #fffeea;
+  --bs-table-bg: rgb(255, 254.2, 234);
-  --bs-table-border-color: #cccbbb;
+  --bs-table-border-color: rgb(204, 203.36, 187.2);
-  --bs-table-striped-bg: #f2f1de;
+  --bs-table-striped-bg: rgb(242.25, 241.49, 222.3);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e6e5d3;
+  --bs-table-active-bg: rgb(229.5, 228.78, 210.6);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ecebd8;
+  --bs-table-hover-bg: rgb(235.875, 235.135, 216.45);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2007,12 +2007,12 @@ progress {
 .table-danger {
   --bs-table-color: #000;
   --bs-table-bg: #ffdfe2;
-  --bs-table-border-color: #ccb2b5;
+  --bs-table-border-color: rgb(204, 178.4, 180.8);
-  --bs-table-striped-bg: #f2d4d7;
+  --bs-table-striped-bg: rgb(242.25, 211.85, 214.7);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e6c9cb;
+  --bs-table-active-bg: rgb(229.5, 200.7, 203.4);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ecced1;
+  --bs-table-hover-bg: rgb(235.875, 206.275, 209.05);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2021,12 +2021,12 @@ progress {
 .table-light {
   --bs-table-color: #fff;
   --bs-table-bg: #444;
-  --bs-table-border-color: dimgray;
+  --bs-table-border-color: rgb(105.4, 105.4, 105.4);
-  --bs-table-striped-bg: #4d4d4d;
+  --bs-table-striped-bg: rgb(77.35, 77.35, 77.35);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #575757;
+  --bs-table-active-bg: rgb(86.7, 86.7, 86.7);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #525252;
+  --bs-table-hover-bg: rgb(82.025, 82.025, 82.025);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2036,11 +2036,11 @@ progress {
   --bs-table-color: #000;
   --bs-table-bg: #ebebeb;
   --bs-table-border-color: #bcbcbc;
-  --bs-table-striped-bg: #dfdfdf;
+  --bs-table-striped-bg: rgb(223.25, 223.25, 223.25);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #d4d4d4;
+  --bs-table-active-bg: rgb(211.5, 211.5, 211.5);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #d9d9d9;
+  --bs-table-hover-bg: rgb(217.375, 217.375, 217.375);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2141,7 +2141,7 @@ progress {
 .form-control:focus {
   color: #fff;
   background-color: #888;
-  border-color: #ffa0dd;
+  border-color: rgb(255, 159.5, 220.5);
   outline: 0;
   box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
 }
@@ -2288,7 +2288,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #ffa0dd;
+  border-color: rgb(255, 159.5, 220.5);
   outline: 0;
   box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
 }
@@ -2372,7 +2372,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #ffa0dd;
+  border-color: rgb(255, 159.5, 220.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
 }
@@ -2419,7 +2419,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffa0dd'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28255, 159.5, 220.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2491,7 +2491,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #ffc6ea;
+  background-color: rgb(255, 197.7, 234.3);
   background-image: var(--bs-gradient);
 }
 .form-range::-webkit-slider-runnable-track {
@@ -2521,7 +2521,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #ffc6ea;
+  background-color: rgb(255, 197.7, 234.3);
   background-image: var(--bs-gradient);
 }
 .form-range::-moz-range-track {
@@ -2763,7 +2763,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
 }
 
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
@@ -2782,7 +2782,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
 }
 
 .was-validated .form-control-color:valid, .form-control-color.is-valid {
@@ -2853,7 +2853,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
@@ -2872,7 +2872,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
 
 .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
@@ -2976,6 +2976,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2991,12 +2994,12 @@ textarea.form-control-lg {
   --bs-btn-bg: rgb(255, 64, 186);
   --bs-btn-border-color: rgb(255, 64, 186);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #d9369e;
+  --bs-btn-hover-bg: rgb(216.75, 54.4, 158.1);
-  --bs-btn-hover-border-color: #cc3395;
+  --bs-btn-hover-border-color: rgb(204, 51.2, 148.8);
   --bs-btn-focus-shadow-rgb: 255, 93, 196;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #cc3395;
+  --bs-btn-active-bg: rgb(204, 51.2, 148.8);
-  --bs-btn-active-border-color: #bf308c;
+  --bs-btn-active-border-color: rgb(191.25, 48, 139.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: rgb(255, 64, 186);
@@ -3008,12 +3011,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #01cdfe;
   --bs-btn-border-color: #01cdfe;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #27d5fe;
+  --bs-btn-hover-bg: rgb(39.1, 212.5, 254.15);
-  --bs-btn-hover-border-color: #1ad2fe;
+  --bs-btn-hover-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-focus-shadow-rgb: 1, 174, 216;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #34d7fe;
+  --bs-btn-active-bg: rgb(51.8, 215, 254.2);
-  --bs-btn-active-border-color: #1ad2fe;
+  --bs-btn-active-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #01cdfe;
@@ -3025,12 +3028,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #05ffa1;
   --bs-btn-border-color: #05ffa1;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #2bffaf;
+  --bs-btn-hover-bg: rgb(42.5, 255, 175.1);
-  --bs-btn-hover-border-color: #1effaa;
+  --bs-btn-hover-border-color: rgb(30, 255, 170.4);
   --bs-btn-focus-shadow-rgb: 4, 217, 137;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #37ffb4;
+  --bs-btn-active-bg: rgb(55, 255, 179.8);
-  --bs-btn-active-border-color: #1effaa;
+  --bs-btn-active-border-color: rgb(30, 255, 170.4);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #05ffa1;
@@ -3042,12 +3045,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #01cdfe;
   --bs-btn-border-color: #01cdfe;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #27d5fe;
+  --bs-btn-hover-bg: rgb(39.1, 212.5, 254.15);
-  --bs-btn-hover-border-color: #1ad2fe;
+  --bs-btn-hover-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-focus-shadow-rgb: 1, 174, 216;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #34d7fe;
+  --bs-btn-active-bg: rgb(51.8, 215, 254.2);
-  --bs-btn-active-border-color: #1ad2fe;
+  --bs-btn-active-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #01cdfe;
@@ -3059,12 +3062,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #fffb96;
   --bs-btn-border-color: #fffb96;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #fffca6;
+  --bs-btn-hover-bg: rgb(255, 251.6, 165.75);
-  --bs-btn-hover-border-color: #fffba1;
+  --bs-btn-hover-border-color: rgb(255, 251.4, 160.5);
   --bs-btn-focus-shadow-rgb: 217, 213, 128;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #fffcab;
+  --bs-btn-active-bg: rgb(255, 251.8, 171);
-  --bs-btn-active-border-color: #fffba1;
+  --bs-btn-active-border-color: rgb(255, 251.4, 160.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #fffb96;
@@ -3076,12 +3079,12 @@ textarea.form-control-lg {
   --bs-btn-bg: rgb(255, 95, 110);
   --bs-btn-border-color: rgb(255, 95, 110);
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #ff7784;
+  --bs-btn-hover-bg: rgb(255, 119, 131.75);
-  --bs-btn-hover-border-color: #ff6f7d;
+  --bs-btn-hover-border-color: rgb(255, 111, 124.5);
   --bs-btn-focus-shadow-rgb: 217, 81, 94;
   --bs-btn-active-color: #000;
   --bs-btn-active-bg: #ff7f8b;
-  --bs-btn-active-border-color: #ff6f7d;
+  --bs-btn-active-border-color: rgb(255, 111, 124.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: rgb(255, 95, 110);
@@ -3093,11 +3096,11 @@ textarea.form-control-lg {
   --bs-btn-bg: #444;
   --bs-btn-border-color: #444;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #3a3a3a;
+  --bs-btn-hover-bg: rgb(57.8, 57.8, 57.8);
-  --bs-btn-hover-border-color: #363636;
+  --bs-btn-hover-border-color: rgb(54.4, 54.4, 54.4);
   --bs-btn-focus-shadow-rgb: 96, 96, 96;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #363636;
+  --bs-btn-active-bg: rgb(54.4, 54.4, 54.4);
   --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;
@@ -4527,12 +4530,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ebebeb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ebebeb' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23661a4a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%28102, 25.6, 74.4%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #ffa0dd;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4590,7 +4592,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4608,7 +4609,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4619,11 +4620,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4632,27 +4633,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8cd6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 140.4, 213.6%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8cd6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 140.4, 213.6%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -5530,7 +5531,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6098,20 +6098,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6737,14 +6729,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {

src/assets/css/themes/vaporwave-light.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * Bootstrap  v5.3.2 (https://getbootstrap.com/)
+ * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root,
@@ -35,7 +35,7 @@
   --bs-info: #01cdfe;
   --bs-warning: #fffb96;
   --bs-danger: rgb(255, 95, 110);
-  --bs-light: #dadee3;
+  --bs-light: rgb(217.6474137931, 222.175, 226.7025862069);
   --bs-dark: #212529;
   --bs-primary-rgb: 255, 64, 186;
   --bs-secondary-rgb: 1, 205, 254;
@@ -45,27 +45,27 @@
   --bs-danger-rgb: 255, 95, 110;
   --bs-light-rgb: 218, 222, 227;
   --bs-dark-rgb: 33, 37, 41;
-  --bs-primary-text-emphasis: #661a4a;
+  --bs-primary-text-emphasis: rgb(102, 25.6, 74.4);
-  --bs-secondary-text-emphasis: #005266;
+  --bs-secondary-text-emphasis: rgb(0.4, 82, 101.6);
-  --bs-success-text-emphasis: #026640;
+  --bs-success-text-emphasis: rgb(2, 102, 64.4);
-  --bs-info-text-emphasis: #005266;
+  --bs-info-text-emphasis: rgb(0.4, 82, 101.6);
-  --bs-warning-text-emphasis: #66643c;
+  --bs-warning-text-emphasis: rgb(102, 100.4, 60);
   --bs-danger-text-emphasis: #66262c;
   --bs-light-text-emphasis: #495057;
   --bs-dark-text-emphasis: #495057;
-  --bs-primary-bg-subtle: #ffd9f1;
+  --bs-primary-bg-subtle: rgb(255, 216.8, 241.2);
-  --bs-secondary-bg-subtle: #ccf5ff;
+  --bs-secondary-bg-subtle: rgb(204.2, 245, 254.8);
-  --bs-success-bg-subtle: #cdffec;
+  --bs-success-bg-subtle: rgb(205, 255, 236.2);
-  --bs-info-bg-subtle: #ccf5ff;
+  --bs-info-bg-subtle: rgb(204.2, 245, 254.8);
-  --bs-warning-bg-subtle: #fffeea;
+  --bs-warning-bg-subtle: rgb(255, 254.2, 234);
   --bs-danger-bg-subtle: #ffdfe2;
-  --bs-light-bg-subtle: #fcfcfd;
+  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
   --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #ffb3e3;
+  --bs-primary-border-subtle: rgb(255, 178.6, 227.4);
-  --bs-secondary-border-subtle: #99ebff;
+  --bs-secondary-border-subtle: rgb(153.4, 235, 254.6);
-  --bs-success-border-subtle: #9bffd9;
+  --bs-success-border-subtle: rgb(155, 255, 217.4);
-  --bs-info-border-subtle: #99ebff;
+  --bs-info-border-subtle: rgb(153.4, 235, 254.6);
-  --bs-warning-border-subtle: #fffdd5;
+  --bs-warning-border-subtle: rgb(255, 253.4, 213);
   --bs-danger-border-subtle: #ffbfc5;
   --bs-light-border-subtle: #e9ecef;
   --bs-dark-border-subtle: #adb5bd;
@@ -74,7 +74,7 @@
   --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-root-font-size: 100%;
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
@@ -97,11 +97,11 @@
   --bs-link-color: rgb(255, 64, 186);
   --bs-link-color-rgb: 255, 64, 186;
   --bs-link-decoration: none;
-  --bs-link-hover-color: #cc3395;
+  --bs-link-hover-color: rgb(204, 51.2, 148.8);
   --bs-link-hover-color-rgb: 204, 51, 149;
   --bs-code-color: rgb(255, 64, 186);
   --bs-highlight-color: #495057;
-  --bs-highlight-bg: #fffeea;
+  --bs-highlight-bg: rgb(255, 254.2, 234);
   --bs-border-width: 1px;
   --bs-border-style: solid;
   --bs-border-color: #dee2e6;
@@ -140,44 +140,44 @@
   --bs-secondary-bg-rgb: 52, 58, 64;
   --bs-tertiary-color: rgba(222, 226, 230, 0.5);
   --bs-tertiary-color-rgb: 222, 226, 230;
-  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
   --bs-tertiary-bg-rgb: 43, 48, 53;
-  --bs-primary-text-emphasis: #ff8cd6;
+  --bs-primary-text-emphasis: rgb(255, 140.4, 213.6);
-  --bs-secondary-text-emphasis: #67e1fe;
+  --bs-secondary-text-emphasis: rgb(102.6, 225, 254.4);
-  --bs-success-text-emphasis: #69ffc7;
+  --bs-success-text-emphasis: rgb(105, 255, 198.6);
-  --bs-info-text-emphasis: #67e1fe;
+  --bs-info-text-emphasis: rgb(102.6, 225, 254.4);
-  --bs-warning-text-emphasis: #fffdc0;
+  --bs-warning-text-emphasis: rgb(255, 252.6, 192);
   --bs-danger-text-emphasis: #ff9fa8;
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #330d25;
+  --bs-primary-bg-subtle: rgb(51, 12.8, 37.2);
-  --bs-secondary-bg-subtle: #002933;
+  --bs-secondary-bg-subtle: rgb(0.2, 41, 50.8);
-  --bs-success-bg-subtle: #013320;
+  --bs-success-bg-subtle: rgb(1, 51, 32.2);
-  --bs-info-bg-subtle: #002933;
+  --bs-info-bg-subtle: rgb(0.2, 41, 50.8);
-  --bs-warning-bg-subtle: #33321e;
+  --bs-warning-bg-subtle: rgb(51, 50.2, 30);
   --bs-danger-bg-subtle: #331316;
   --bs-light-bg-subtle: #343a40;
   --bs-dark-bg-subtle: #1a1d20;
-  --bs-primary-border-subtle: #992670;
+  --bs-primary-border-subtle: rgb(153, 38.4, 111.6);
-  --bs-secondary-border-subtle: #017b98;
+  --bs-secondary-border-subtle: rgb(0.6, 123, 152.4);
-  --bs-success-border-subtle: #039961;
+  --bs-success-border-subtle: rgb(3, 153, 96.6);
-  --bs-info-border-subtle: #017b98;
+  --bs-info-border-subtle: rgb(0.6, 123, 152.4);
-  --bs-warning-border-subtle: #99975a;
+  --bs-warning-border-subtle: rgb(153, 150.6, 90);
   --bs-danger-border-subtle: #993942;
   --bs-light-border-subtle: #495057;
   --bs-dark-border-subtle: #343a40;
   --bs-heading-color: inherit;
-  --bs-link-color: #ff8cd6;
+  --bs-link-color: rgb(255, 140.4, 213.6);
-  --bs-link-hover-color: #ffa3de;
+  --bs-link-hover-color: rgb(255, 163.32, 221.88);
   --bs-link-color-rgb: 255, 140, 214;
   --bs-link-hover-color-rgb: 255, 163, 222;
-  --bs-code-color: #ff8cd6;
+  --bs-code-color: rgb(255, 140.4, 213.6);
   --bs-highlight-color: #dee2e6;
-  --bs-highlight-bg: #66643c;
+  --bs-highlight-bg: rgb(102, 100.4, 60);
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #69ffc7;
+  --bs-form-valid-color: rgb(105, 255, 198.6);
-  --bs-form-valid-border-color: #69ffc7;
+  --bs-form-valid-border-color: rgb(105, 255, 198.6);
   --bs-form-invalid-color: #ff9fa8;
   --bs-form-invalid-border-color: #ff9fa8;
 }
@@ -1935,13 +1935,13 @@ progress {
 
 .table-primary {
   --bs-table-color: #000;
-  --bs-table-bg: #ffd9f1;
+  --bs-table-bg: rgb(255, 216.8, 241.2);
-  --bs-table-border-color: #ccaec1;
+  --bs-table-border-color: rgb(204, 173.44, 192.96);
-  --bs-table-striped-bg: #f2cee5;
+  --bs-table-striped-bg: rgb(242.25, 205.96, 229.14);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e6c3d9;
+  --bs-table-active-bg: rgb(229.5, 195.12, 217.08);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ecc9df;
+  --bs-table-hover-bg: rgb(235.875, 200.54, 223.11);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1949,13 +1949,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf5ff;
+  --bs-table-bg: rgb(204.2, 245, 254.8);
-  --bs-table-border-color: #a3c4cc;
+  --bs-table-border-color: rgb(163.36, 196, 203.84);
-  --bs-table-striped-bg: #c2e9f2;
+  --bs-table-striped-bg: rgb(193.99, 232.75, 242.06);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dde6;
+  --bs-table-active-bg: rgb(183.78, 220.5, 229.32);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde3ec;
+  --bs-table-hover-bg: rgb(188.885, 226.625, 235.69);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1963,13 +1963,13 @@ progress {
 
 .table-success {
   --bs-table-color: #000;
-  --bs-table-bg: #cdffec;
+  --bs-table-bg: rgb(205, 255, 236.2);
-  --bs-table-border-color: #a4ccbd;
+  --bs-table-border-color: rgb(164, 204, 188.96);
-  --bs-table-striped-bg: #c3f2e0;
+  --bs-table-striped-bg: rgb(194.75, 242.25, 224.39);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b9e6d4;
+  --bs-table-active-bg: rgb(184.5, 229.5, 212.58);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #beecda;
+  --bs-table-hover-bg: rgb(189.625, 235.875, 218.485);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1977,13 +1977,13 @@ progress {
 
 .table-info {
   --bs-table-color: #000;
-  --bs-table-bg: #ccf5ff;
+  --bs-table-bg: rgb(204.2, 245, 254.8);
-  --bs-table-border-color: #a3c4cc;
+  --bs-table-border-color: rgb(163.36, 196, 203.84);
-  --bs-table-striped-bg: #c2e9f2;
+  --bs-table-striped-bg: rgb(193.99, 232.75, 242.06);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #b8dde6;
+  --bs-table-active-bg: rgb(183.78, 220.5, 229.32);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #bde3ec;
+  --bs-table-hover-bg: rgb(188.885, 226.625, 235.69);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -1991,13 +1991,13 @@ progress {
 
 .table-warning {
   --bs-table-color: #000;
-  --bs-table-bg: #fffeea;
+  --bs-table-bg: rgb(255, 254.2, 234);
-  --bs-table-border-color: #cccbbb;
+  --bs-table-border-color: rgb(204, 203.36, 187.2);
-  --bs-table-striped-bg: #f2f1de;
+  --bs-table-striped-bg: rgb(242.25, 241.49, 222.3);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e6e5d3;
+  --bs-table-active-bg: rgb(229.5, 228.78, 210.6);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ecebd8;
+  --bs-table-hover-bg: rgb(235.875, 235.135, 216.45);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2006,12 +2006,12 @@ progress {
 .table-danger {
   --bs-table-color: #000;
   --bs-table-bg: #ffdfe2;
-  --bs-table-border-color: #ccb2b5;
+  --bs-table-border-color: rgb(204, 178.4, 180.8);
-  --bs-table-striped-bg: #f2d4d7;
+  --bs-table-striped-bg: rgb(242.25, 211.85, 214.7);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #e6c9cb;
+  --bs-table-active-bg: rgb(229.5, 200.7, 203.4);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #ecced1;
+  --bs-table-hover-bg: rgb(235.875, 206.275, 209.05);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2019,13 +2019,13 @@ progress {
 
 .table-light {
   --bs-table-color: #000;
-  --bs-table-bg: #dadee3;
+  --bs-table-bg: rgb(217.6474137931, 222.175, 226.7025862069);
-  --bs-table-border-color: #aeb2b6;
+  --bs-table-border-color: rgb(174.1179310345, 177.74, 181.3620689655);
-  --bs-table-striped-bg: #cfd3d8;
+  --bs-table-striped-bg: rgb(206.7650431034, 211.06625, 215.3674568966);
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #c4c8cc;
+  --bs-table-active-bg: rgb(195.8826724138, 199.9575, 204.0323275862);
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #cacdd2;
+  --bs-table-hover-bg: rgb(201.3238577586, 205.511875, 209.6998922414);
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2034,12 +2034,12 @@ progress {
 .table-dark {
   --bs-table-color: #fff;
   --bs-table-bg: #212529;
-  --bs-table-border-color: #4d5154;
+  --bs-table-border-color: rgb(77.4, 80.6, 83.8);
-  --bs-table-striped-bg: #2c3034;
+  --bs-table-striped-bg: rgb(44.1, 47.9, 51.7);
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #373b3e;
+  --bs-table-active-bg: rgb(55.2, 58.8, 62.4);
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #323539;
+  --bs-table-hover-bg: rgb(49.65, 53.35, 57.05);
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2140,7 +2140,7 @@ progress {
 .form-control:focus {
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
-  border-color: #ffa0dd;
+  border-color: rgb(255, 159.5, 220.5);
   outline: 0;
   box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
 }
@@ -2287,7 +2287,7 @@ textarea.form-control-lg {
   }
 }
 .form-select:focus {
-  border-color: #ffa0dd;
+  border-color: rgb(255, 159.5, 220.5);
   outline: 0;
   box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
 }
@@ -2371,7 +2371,7 @@ textarea.form-control-lg {
   filter: brightness(90%);
 }
 .form-check-input:focus {
-  border-color: #ffa0dd;
+  border-color: rgb(255, 159.5, 220.5);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
 }
@@ -2418,7 +2418,7 @@ textarea.form-control-lg {
   }
 }
 .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffa0dd'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28255, 159.5, 220.5%29'/%3e%3c/svg%3e");
 }
 .form-switch .form-check-input:checked {
   background-position: right center;
@@ -2490,7 +2490,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-webkit-slider-thumb:active {
-  background-color: #ffc6ea;
+  background-color: rgb(255, 197.7, 234.3);
   background-image: var(--bs-gradient);
 }
 .form-range::-webkit-slider-runnable-track {
@@ -2520,7 +2520,7 @@ textarea.form-control-lg {
   }
 }
 .form-range::-moz-range-thumb:active {
-  background-color: #ffc6ea;
+  background-color: rgb(255, 197.7, 234.3);
   background-image: var(--bs-gradient);
 }
 .form-range::-moz-range-track {
@@ -2762,7 +2762,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
 }
 
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
@@ -2781,7 +2781,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
 }
 
 .was-validated .form-control-color:valid, .form-control-color.is-valid {
@@ -2852,7 +2852,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
@@ -2871,7 +2871,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
 
 .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
@@ -2975,6 +2975,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--bs-btn-disabled-color);
   pointer-events: none;
@@ -2990,12 +2993,12 @@ textarea.form-control-lg {
   --bs-btn-bg: rgb(255, 64, 186);
   --bs-btn-border-color: rgb(255, 64, 186);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #d9369e;
+  --bs-btn-hover-bg: rgb(216.75, 54.4, 158.1);
-  --bs-btn-hover-border-color: #cc3395;
+  --bs-btn-hover-border-color: rgb(204, 51.2, 148.8);
   --bs-btn-focus-shadow-rgb: 255, 93, 196;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #cc3395;
+  --bs-btn-active-bg: rgb(204, 51.2, 148.8);
-  --bs-btn-active-border-color: #bf308c;
+  --bs-btn-active-border-color: rgb(191.25, 48, 139.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: rgb(255, 64, 186);
@@ -3007,12 +3010,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #01cdfe;
   --bs-btn-border-color: #01cdfe;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #27d5fe;
+  --bs-btn-hover-bg: rgb(39.1, 212.5, 254.15);
-  --bs-btn-hover-border-color: #1ad2fe;
+  --bs-btn-hover-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-focus-shadow-rgb: 1, 174, 216;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #34d7fe;
+  --bs-btn-active-bg: rgb(51.8, 215, 254.2);
-  --bs-btn-active-border-color: #1ad2fe;
+  --bs-btn-active-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #01cdfe;
@@ -3024,12 +3027,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #05ffa1;
   --bs-btn-border-color: #05ffa1;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #2bffaf;
+  --bs-btn-hover-bg: rgb(42.5, 255, 175.1);
-  --bs-btn-hover-border-color: #1effaa;
+  --bs-btn-hover-border-color: rgb(30, 255, 170.4);
   --bs-btn-focus-shadow-rgb: 4, 217, 137;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #37ffb4;
+  --bs-btn-active-bg: rgb(55, 255, 179.8);
-  --bs-btn-active-border-color: #1effaa;
+  --bs-btn-active-border-color: rgb(30, 255, 170.4);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #05ffa1;
@@ -3041,12 +3044,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #01cdfe;
   --bs-btn-border-color: #01cdfe;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #27d5fe;
+  --bs-btn-hover-bg: rgb(39.1, 212.5, 254.15);
-  --bs-btn-hover-border-color: #1ad2fe;
+  --bs-btn-hover-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-focus-shadow-rgb: 1, 174, 216;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #34d7fe;
+  --bs-btn-active-bg: rgb(51.8, 215, 254.2);
-  --bs-btn-active-border-color: #1ad2fe;
+  --bs-btn-active-border-color: rgb(26.4, 210, 254.1);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #01cdfe;
@@ -3058,12 +3061,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #fffb96;
   --bs-btn-border-color: #fffb96;
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #fffca6;
+  --bs-btn-hover-bg: rgb(255, 251.6, 165.75);
-  --bs-btn-hover-border-color: #fffba1;
+  --bs-btn-hover-border-color: rgb(255, 251.4, 160.5);
   --bs-btn-focus-shadow-rgb: 217, 213, 128;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #fffcab;
+  --bs-btn-active-bg: rgb(255, 251.8, 171);
-  --bs-btn-active-border-color: #fffba1;
+  --bs-btn-active-border-color: rgb(255, 251.4, 160.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: #fffb96;
@@ -3075,12 +3078,12 @@ textarea.form-control-lg {
   --bs-btn-bg: rgb(255, 95, 110);
   --bs-btn-border-color: rgb(255, 95, 110);
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #ff7784;
+  --bs-btn-hover-bg: rgb(255, 119, 131.75);
-  --bs-btn-hover-border-color: #ff6f7d;
+  --bs-btn-hover-border-color: rgb(255, 111, 124.5);
   --bs-btn-focus-shadow-rgb: 217, 81, 94;
   --bs-btn-active-color: #000;
   --bs-btn-active-bg: #ff7f8b;
-  --bs-btn-active-border-color: #ff6f7d;
+  --bs-btn-active-border-color: rgb(255, 111, 124.5);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
   --bs-btn-disabled-bg: rgb(255, 95, 110);
@@ -3089,19 +3092,19 @@ textarea.form-control-lg {
 
 .btn-light {
   --bs-btn-color: #000;
-  --bs-btn-bg: #dadee3;
+  --bs-btn-bg: rgb(217.6474137931, 222.175, 226.7025862069);
-  --bs-btn-border-color: #dadee3;
+  --bs-btn-border-color: rgb(217.6474137931, 222.175, 226.7025862069);
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #b9bdc1;
+  --bs-btn-hover-bg: rgb(185.0003017241, 188.84875, 192.6971982759);
-  --bs-btn-hover-border-color: #aeb2b6;
+  --bs-btn-hover-border-color: rgb(174.1179310345, 177.74, 181.3620689655);
   --bs-btn-focus-shadow-rgb: 185, 189, 193;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #aeb2b6;
+  --bs-btn-active-bg: rgb(174.1179310345, 177.74, 181.3620689655);
-  --bs-btn-active-border-color: #a4a7aa;
+  --bs-btn-active-border-color: rgb(163.2355603448, 166.63125, 170.0269396552);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: #dadee3;
+  --bs-btn-disabled-bg: rgb(217.6474137931, 222.175, 226.7025862069);
-  --bs-btn-disabled-border-color: #dadee3;
+  --bs-btn-disabled-border-color: rgb(217.6474137931, 222.175, 226.7025862069);
 }
 
 .btn-dark {
@@ -3109,12 +3112,12 @@ textarea.form-control-lg {
   --bs-btn-bg: #212529;
   --bs-btn-border-color: #212529;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
-  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-focus-shadow-rgb: 66, 70, 73;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
-  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #212529;
@@ -3224,19 +3227,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-light {
-  --bs-btn-color: #dadee3;
+  --bs-btn-color: rgb(217.6474137931, 222.175, 226.7025862069);
-  --bs-btn-border-color: #dadee3;
+  --bs-btn-border-color: rgb(217.6474137931, 222.175, 226.7025862069);
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #dadee3;
+  --bs-btn-hover-bg: rgb(217.6474137931, 222.175, 226.7025862069);
-  --bs-btn-hover-border-color: #dadee3;
+  --bs-btn-hover-border-color: rgb(217.6474137931, 222.175, 226.7025862069);
   --bs-btn-focus-shadow-rgb: 218, 222, 227;
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #dadee3;
+  --bs-btn-active-bg: rgb(217.6474137931, 222.175, 226.7025862069);
-  --bs-btn-active-border-color: #dadee3;
+  --bs-btn-active-border-color: rgb(217.6474137931, 222.175, 226.7025862069);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #dadee3;
+  --bs-btn-disabled-color: rgb(217.6474137931, 222.175, 226.7025862069);
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #dadee3;
+  --bs-btn-disabled-border-color: rgb(217.6474137931, 222.175, 226.7025862069);
   --bs-gradient: none;
 }
 
@@ -4526,12 +4529,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23495057'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23661a4a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%28102, 25.6, 74.4%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #ffa0dd;
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 64, 186, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -4589,7 +4591,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--bs-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--bs-accordion-btn-focus-box-shadow);
 }
@@ -4607,7 +4608,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--bs-accordion-border-radius);
   border-top-right-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--bs-accordion-inner-border-radius);
   border-top-right-radius: var(--bs-accordion-inner-border-radius);
 }
@@ -4618,11 +4619,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
   border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--bs-accordion-border-radius);
   border-bottom-left-radius: var(--bs-accordion-border-radius);
 }
@@ -4631,27 +4632,27 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
+.accordion-flush > .accordion-item {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
 [data-bs-theme=dark] .accordion-button::after {
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8cd6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 140.4, 213.6%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8cd6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 140.4, 213.6%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
 .breadcrumb {
@@ -5529,7 +5530,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -6097,20 +6097,12 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
 }
 
 .carousel-indicators {
@@ -6736,14 +6728,11 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
-  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
-  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
-  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
 }
 
 .offcanvas-title {
@@ -6907,8 +6896,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(225, 229, 233, var(--bs-link-opacity, 1)) !important;
+  color: RGBA(225, 229, 232, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(225, 229, 233, var(--bs-link-underline-opacity, 1)) !important;
+  text-decoration-color: RGBA(225, 229, 232, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-dark {

src/assets/symbols.svg

@@ -60,6 +60,10 @@
     <symbol id="icon-add" viewBox="0 0 32 32" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
       <path d="M14.5,14.501l-10.502,0c-0.828,0 -1.5,0.673 -1.5,1.5c0,0.828 0.672,1.5 1.5,1.5l10.502,0l-0.001,10.502c0,0.828 0.672,1.5 1.5,1.501c0.828,-0 1.5,-0.673 1.5,-1.5l0.001,-10.503l10.502,0c0.828,0 1.5,-0.672 1.5,-1.5c0,-0.827 -0.672,-1.5 -1.5,-1.5l-10.502,0l0.001,-10.501c-0,-0.828 -0.672,-1.501 -1.5,-1.501c-0.828,0 -1.5,0.672 -1.5,1.5l-0.001,10.502Z"/>
     </symbol>
+    <symbol id="icon-video" viewBox="0 0 256 256">
+      <rect width="256" height="256" fill="none"/>
+      <polygon points="160 112 112 80 112 144 160 112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><rect x="32" y="48" width="192" height="128" rx="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="32" y1="208" x2="224" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    </symbol>
     <symbol id="icon-play" viewBox="0 0 24 24">
       <path d="M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z"/>
     </symbol>
@@ -170,8 +174,11 @@
     <symbol id="icon-message-square" viewBox="0 0 24 24">
       <path d="M22 15v-10c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-14c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v16c0 0.256 0.098 0.512 0.293 0.707 0.391 0.391 1.024 0.391 1.414 0l3.707-3.707h11.586c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121zM20 15c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.526 0.112-0.707 0.293l-2.293 2.293v-13.586c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"/>
     </symbol>
-    <symbol id="icon-image" viewBox="0 0 24 24">
+    <symbol id="icon-image" viewBox="0 0 256 256">
-      <path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354 0.216-0.146 0.354-0.146 0.262 0.055 0.354 0.146 0.146 0.216 0.146 0.354zM7.414 20l8.586-8.586 4 4v3.586c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293zM20 12.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0l-10.644 10.644c-0.135-0.050-0.255-0.129-0.356-0.23-0.182-0.182-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"/>
+      <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z" />
+    </symbol>
+    <symbol id="icon-image-broken" viewBox="0 0 256 256">
+      <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM112.41,157.47,98.23,200H40V172l52-52,30.42,30.42L117,152.57A8,8,0,0,0,112.41,157.47ZM216,82.23,173.47,96.41a8,8,0,0,0-4.9,4.62l-14.72,36.82L138.58,144l-35.27-35.27a16,16,0,0,0-22.62,0L40,149.37V56H216Zm12.68,33a8,8,0,0,0-7.21-1.1l-23.8,7.94a8,8,0,0,0-4.9,4.61l-14.31,35.77-35.77,14.31a8,8,0,0,0-4.61,4.9l-7.94,23.8A8,8,0,0,0,137.73,216H216a16,16,0,0,0,16-16V121.73A8,8,0,0,0,228.68,115.24ZM216,200H148.83l3.25-9.75,35.51-14.2a8.07,8.07,0,0,0,4.46-4.46l14.2-35.51,9.75-3.25Z" />
     </symbol>
     <symbol id="icon-external-link" viewBox="0 0 24 24">
       <path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"/>
@@ -279,5 +286,27 @@
       <path d="M11 21C4 21 4 18 4 18V12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       <path d="M19 22V16M19 16L22 19M19 16L16 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
+    <symbol id="icon-globe" viewBox="0 0 256 256">
+      <rect width="256" height="256" fill="none"/>
+      <circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <path d="M88,128c0,37.46,13.33,70.92,34.28,93.49a7.77,7.77,0,0,0,11.44,0C154.67,198.92,168,165.46,168,128s-13.33-70.92-34.28-93.49a7.77,7.77,0,0,0-11.44,0C101.33,57.08,88,90.54,88,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="37.46" y1="96" x2="218.54" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="37.46" y1="160" x2="218.54" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    </symbol>
+    <symbol id="icon-house" viewBox="0 0 256 256">
+      <rect width="256" height="256" fill="none"/>
+      <path d="M216,216V115.54a8,8,0,0,0-2.62-5.92l-80-75.54a8,8,0,0,0-10.77,0l-80,75.54A8,8,0,0,0,40,115.54V216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="16" y1="216" x2="240" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <path d="M152,216V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    </symbol>
+    <symbol id="icon-info" fill="currentColor" viewBox="0 0 256 256">
+      <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" />
+    </symbol>
+    <symbol id="icon-history" viewBox="0 0 256 256">
+      <path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z" />
+    </symbol>
+    <symbol id="icon-caret-right" fill="currentColor" viewBox="0 0 256 256">
+      <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" />
+    </symbol>
   </defs>
 </svg>

src/client/index.tsx

@@ -1,16 +1,29 @@
-import { initializeSite, setupDateFns } from "@utils/app";
+import { initializeSite } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { BrowserRouter } from "inferno-router";
-import { App } from "../shared/components/app/app";
+import App from "../shared/components/app/app";
+import { lazyHighlightjs } from "../shared/lazy-highlightjs";
+import { loadUserLanguage } from "../shared/services/I18NextService";
+import { verifyDynamicImports } from "../shared/dynamic-imports";
+import { setupEmojiDataModel } from "../shared/markdown";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
 import "bootstrap/js/dist/modal";
 
 async function startClient() {
+  // Allows to test imports from the browser console.
+  window.checkLazyScripts = () => {
+    verifyDynamicImports(true).then(x => console.log(x));
+  };
+
+  window.history.scrollRestoration = "manual";
+
   initializeSite(window.isoData.site_res);
 
-  await setupDateFns();
+  lazyHighlightjs.enableLazyLoading();
+
+  await Promise.all([loadUserLanguage(), setupEmojiDataModel()]);
 
   const wrapper = (
     <BrowserRouter>
@@ -22,6 +35,8 @@ async function startClient() {
 
   if (root) {
     hydrate(wrapper, root);
+
+    root.dispatchEvent(new CustomEvent("lemmy-hydrated", { bubbles: true }));
   }
 }
 

src/server/handlers/catch-all-handler.tsx

@@ -3,9 +3,10 @@ import { getHttpBaseInternal } from "@utils/env";
 import { ErrorPageData } from "@utils/types";
 import type { Request, Response } from "express";
 import { StaticRouter, matchPath } from "inferno-router";
+import { Match } from "inferno-router/dist/Route";
 import { renderToString } from "inferno-server";
 import { GetSiteResponse, LemmyHttp } from "lemmy-js-client";
-import { App } from "../../shared/components/app/app";
+import App from "../../shared/components/app/app";
 import {
   InitialFetchRequest,
   IsoDataOptionalSite,
@@ -20,10 +21,33 @@ import { createSsrHtml } from "../utils/create-ssr-html";
 import { getErrorPageData } from "../utils/get-error-page-data";
 import { setForwardedHeaders } from "../utils/set-forwarded-headers";
 import { getJwtCookie } from "../utils/has-jwt-cookie";
+import {
+  I18NextService,
+  LanguageService,
+  UserService,
+} from "../../shared/services/";
+import { parsePath } from "history";
+import { getQueryString } from "@utils/helpers";
+import { adultConsentCookieKey } from "../../shared/config";
 
 export default async (req: Request, res: Response) => {
   try {
-    const activeRoute = routes.find(route => matchPath(req.path, route));
+    const languages: string[] =
+      req.headers["accept-language"]
+        ?.split(",")
+        .map(x => {
+          const [head, tail] = x.split(/;\s*q?\s*=?/); // at ";", remove "q="
+          const q = Number(tail ?? 1); // no q means q=1
+          return { lang: head.trim(), q: Number.isNaN(q) ? 0 : q };
+        })
+        .filter(x => x.lang)
+        .sort((a, b) => b.q - a.q)
+        .map(x => (x.lang === "*" ? "en" : x.lang)) ?? [];
+
+    let match: Match<any> | null | undefined;
+    const activeRoute = routes.find(
+      route => (match = matchPath(req.path, route)),
+    );
 
     const headers = setForwardedHeaders(req.headers);
     const auth = getJwtCookie(req.headers);
@@ -32,7 +56,7 @@ export default async (req: Request, res: Response) => {
       new LemmyHttp(getHttpBaseInternal(), { headers }),
     );
 
-    const { path, url, query } = req;
+    const { path, url } = req;
 
     // Get site data first
     // This bypasses errors, so that the client can hit the error on its own,
@@ -54,25 +78,38 @@ export default async (req: Request, res: Response) => {
     }
 
     if (!auth && isAuthPath(path)) {
-      return res.redirect(`/login?prev=${encodeURIComponent(url)}`);
+      return res.redirect(`/login${getQueryString({ prev: url })}`);
     }
 
     if (try_site.state === "success") {
       site = try_site.data;
       initializeSite(site);
+      LanguageService.updateLanguages(languages);
 
       if (path !== "/setup" && !site.site_view.local_site.site_setup) {
         return res.redirect("/setup");
       }
 
-      if (site && activeRoute?.fetchInitialData) {
+      if (site && activeRoute?.fetchInitialData && match) {
-        const initialFetchReq: InitialFetchRequest = {
+        const { search } = parsePath(url);
+        const initialFetchReq: InitialFetchRequest<Record<string, any>> = {
           path,
-          query,
+          query: activeRoute.getQueryParams?.(search, site) ?? {},
+          match,
           site,
           headers,
         };
 
+        if (process.env.NODE_ENV === "development") {
+          setTimeout(() => {
+            // Intentionally (likely) break things if fetchInitialData tries to
+            // use global state after the first await of an unresolved promise.
+            // This simulates another request entering or leaving this
+            // "success" block.
+            UserService.Instance.myUserInfo = undefined;
+            I18NextService.i18n.changeLanguage("cimode");
+          });
+        }
         routeData = await activeRoute.fetchInitialData(initialFetchReq);
       }
 
@@ -106,6 +143,9 @@ export default async (req: Request, res: Response) => {
       site_res: site,
       routeData,
       errorPageData,
+      showAdultConsentModal:
+        !!site?.site_view.site.content_warning &&
+        !(site.my_user || req.cookies[adultConsentCookieKey]),
     };
 
     const wrapper = (
@@ -114,9 +154,20 @@ export default async (req: Request, res: Response) => {
       </StaticRouter>
     );
 
+    // Another request could have initialized a new site.
+    initializeSite(site);
+    LanguageService.updateLanguages(languages);
+
     const root = renderToString(wrapper);
 
-    res.send(await createSsrHtml(root, isoData, res.locals.cspNonce));
+    res.send(
+      await createSsrHtml(
+        root,
+        isoData,
+        res.locals.cspNonce,
+        LanguageService.userLanguages,
+      ),
+    );
   } catch (err) {
     // If an error is caught here, the error page couldn't even be rendered
     console.error(err);

src/server/handlers/security-handler.ts

@@ -1,17 +1,20 @@
 import type { Response } from "express";
+import { BUILD_DATE_ISO8601 } from "../../shared/build-date";
+import { parseISO } from "date-fns";
 
 export default async ({ res }: { res: Response }) => {
+  const buildDatePlusYear = parseISO(BUILD_DATE_ISO8601);
+
+  // Add a year to the build date
+  buildDatePlusYear.setFullYear(new Date().getFullYear() + 1);
+
+  const yearFromNow = buildDatePlusYear.toISOString();
+
   res.setHeader("content-type", "text/plain; charset=utf-8");
 
   res.send(
-    `Contact: mailto:security@lemmy.ml
+    `Contact: https://github.com/LemmyNet/lemmy-ui/security/advisories/new
-  Contact: mailto:admin@` +
+  Expires: ${yearFromNow}
-      process.env.LEMMY_UI_LEMMY_EXTERNAL_HOST +
-      `
-  Contact: mailto:security@` +
-      process.env.LEMMY_UI_LEMMY_EXTERNAL_HOST +
-      `
-  Expires: 2024-01-01T04:59:00.000Z
   `,
   );
 };

src/server/index.tsx

@@ -13,8 +13,11 @@ import ThemeHandler from "./handlers/theme-handler";
 import ThemesListHandler from "./handlers/themes-list-handler";
 import { setCacheControl, setDefaultCsp } from "./middleware";
 import CodeThemeHandler from "./handlers/code-theme-handler";
+import { verifyDynamicImports } from "../shared/dynamic-imports";
+import cookieParser from "cookie-parser";
 
 const server = express();
+server.use(cookieParser());
 
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
   ? process.env["LEMMY_UI_HOST"].split(":")
@@ -54,6 +57,8 @@ server.get("/css/themelist", ThemesListHandler);
 server.get("/*", CatchAllHandler);
 
 const listener = server.listen(Number(port), hostname, () => {
+  verifyDynamicImports(true);
+
   setupDateFns();
   console.log(
     `Lemmy-ui v${VERSION} started listening on http://${hostname}:${port}`,

src/server/utils/build-themes-list.ts

@@ -14,7 +14,7 @@ const themes: ReadonlyArray<string> = [
   "litely-compact",
   "vaporwave-dark",
   "vaporwave-light",
-  "i386",
+  "i386-dark",
 ];
 
 export async function buildThemeList(): Promise<ReadonlyArray<string>> {

src/server/utils/create-ssr-html.tsx

@@ -7,6 +7,8 @@ import { favIconPngUrl, favIconUrl } from "../../shared/config";
 import { IsoDataOptionalSite } from "../../shared/interfaces";
 import { buildThemeList } from "./build-themes-list";
 import { fetchIconPng } from "./fetch-icon-png";
+import { findTranslationChunkNames } from "../../shared/services/I18NextService";
+import { findDateFnsChunkNames } from "../../shared/utils/app/setup-date-fns";
 
 const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
 
@@ -16,6 +18,7 @@ export async function createSsrHtml(
   root: string,
   isoData: IsoDataOptionalSite,
   cspNonce: string,
+  userLanguages: readonly string[],
 ) {
   const site = isoData.site_res;
 
@@ -30,6 +33,7 @@ export async function createSsrHtml(
   );
 
   if (!appleTouchIcon) {
+    try {
       appleTouchIcon = site?.site_view.site.icon
         ? `data:image/png;base64,${await sharp(
             await fetchIconPng(site.site_view.site.icon),
@@ -46,6 +50,12 @@ export async function createSsrHtml(
             .toBuffer()
             .then(buf => buf.toString("base64"))}`
         : favIconPngUrl;
+    } catch {
+      console.log(
+        "Could not fetch site logo for apple touch icon. Using default icon.",
+      );
+      appleTouchIcon = favIconPngUrl;
+    }
   }
 
   const erudaStr =
@@ -63,11 +73,28 @@ export async function createSsrHtml(
 
   const helmet = Helmet.renderStatic();
 
+  const lazyScripts = [
+    ...findTranslationChunkNames(userLanguages),
+    ...findDateFnsChunkNames(userLanguages),
+  ]
+    .filter(x => x !== undefined)
+    .map(x => `${getStaticDir()}/js/${x}.client.js`)
+    .map(x => `<link rel="preload" as="script" href="${x}" />`)
+    .join("");
+
   return `
     <!DOCTYPE html>
     <html ${helmet.htmlAttributes.toString()}>
     <head>
-    <script nonce="${cspNonce}">window.isoData = ${serialize(isoData)}</script>
+    <script nonce="${cspNonce}">
+    window.isoData = ${serialize(isoData)};
+
+    if (!document.documentElement.hasAttribute("data-bs-theme")) {
+      const light = window.matchMedia("(prefers-color-scheme: light)").matches;
+      document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");
+    }
+    </script>
+    ${lazyScripts}
   
     <!-- A remote debugging utility for mobile -->
     ${erudaStr}
@@ -78,6 +105,17 @@ export async function createSsrHtml(
     ${helmet.title.toString()}
     ${helmet.meta.toString()}
   
+    <style>
+    #app[data-adult-consent] {
+      filter: blur(10px);
+      -webkit-filter: blur(10px);
+      -moz-filter: blur(10px);
+      -o-filter: blur(10px);
+      -ms-filter: blur(10px);
+      pointer-events: none;
+    }
+    </style>
+
     <!-- Required meta tags -->
     <meta name="Description" content="Lemmy">
     <meta charset="utf-8">

src/server/utils/generate-manifest-json.ts

@@ -1,20 +1,55 @@
-import { readFile } from "fs/promises";
 import { Site } from "lemmy-js-client";
-import path from "path";
 import { fetchIconPng } from "./fetch-icon-png";
+import { getStaticDir } from "@utils/env";
 
+type Icon = { sizes: string; src: string; type: string; purpose: string };
 const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];
+let icons: Icon[] | null = null;
 
-const defaultLogoPathDirectory = path.join(
+function mapIcon(src: string, size: number): Icon {
-  process.cwd(),
+  return {
-  "dist",
+    sizes: `${size}x${size}`,
-  "assets",
+    type: "image/png",
-  "icons",
+    src,
+    purpose: "any maskable",
+  };
+}
+
+function generateDefaultIcons() {
+  return iconSizes.map(size =>
+    mapIcon(`${getStaticDir()}/assets/icons/icon-${size}x${size}.png`, size),
   );
+}
 
 export default async function (site: Site) {
+  if (!icons) {
+    try {
       const icon = site.icon ? await fetchIconPng(site.icon) : null;
 
+      if (icon) {
+        icons = await Promise.all(
+          iconSizes.map(async size => {
+            const sharp = (await import("sharp")).default;
+            const src = `data:image/png:base64,${await sharp(icon)
+              .resize(size, size)
+              .png()
+              .toBuffer()
+              .then(buf => buf.toString("base64"))}`;
+
+            return mapIcon(src, size);
+          }),
+        );
+      } else {
+        icons = generateDefaultIcons();
+      }
+    } catch {
+      console.log(
+        `Failed to fetch site logo for manifest icon. Using default icon`,
+      );
+      icons = generateDefaultIcons();
+    }
+  }
+
   return {
     name: site.name,
     description: site.description ?? "A link aggregator for the fediverse",
@@ -24,29 +59,7 @@ export default async function (site: Site) {
     id: "/",
     background_color: "#222222",
     theme_color: "#222222",
-    icons: await Promise.all(
+    icons,
-      iconSizes.map(async size => {
-        let src = await readFile(
-          path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`),
-        ).then(buf => buf.toString("base64"));
-
-        if (icon) {
-          const sharp = (await import("sharp")).default;
-          src = await sharp(icon)
-            .resize(size, size)
-            .png()
-            .toBuffer()
-            .then(buf => buf.toString("base64"));
-        }
-
-        return {
-          sizes: `${size}x${size}`,
-          type: "image/png",
-          src: `data:image/png;base64,${src}`,
-          purpose: "any maskable",
-        };
-      }),
-    ),
     shortcuts: [
       {
         name: "Search",

src/shared/build-config.d.ts

@@ -0,0 +1,2 @@
+export const bundledSyntaxHighlighters: ["plaintext", ...string[]];
+export const lazySyntaxHighlighters: string[] | "*";

src/shared/build-config.js

@@ -0,0 +1,26 @@
+// Don't import/require things here. This file is also imported in
+// webpack.config.js. Needs dev server restart to apply changes.
+
+/** Bundled highlighters can be autodetected in markdown.
+ * @type ["plaintext", ...string[]] **/
+// prettier-ignore
+const bundledSyntaxHighlighters = [
+  "plaintext",
+  // The 'Common' set of highlight.js languages.
+  "bash", "c", "cpp", "csharp", "css", "diff", "go", "graphql", "ini", "java",
+  "javascript", "json", "kotlin", "less", "lua", "makefile", "markdown",
+  "objectivec", "perl", "php-template", "php", "python-repl", "python", "r",
+  "ruby", "rust", "scss", "shell", "sql", "swift", "typescript", "vbnet",
+  "wasm", "xml", "yaml",
+];
+
+/** Lazy highlighters can't be autodetected, they have to be explicitly specified
+ * as the language. (e.g. ```dockerfile ...)
+ * "*" enables all non-bundled languages
+ * @type string[] | "*" **/
+const lazySyntaxHighlighters = "*";
+
+module.exports = {
+  bundledSyntaxHighlighters,
+  lazySyntaxHighlighters,
+};

src/shared/build-date.ts

@@ -0,0 +1 @@
+export const BUILD_DATE_ISO8601 = "2024-01-22T13:58:48Z";

src/shared/components/app/app.tsx

@@ -1,6 +1,5 @@
 import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app";
-import { dataBsTheme } from "@utils/browser";
+import { Component, createRef, linkEvent } from "inferno";
-import { Component, RefObject, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { IsoDataOptionalSite } from "../../interfaces";
@@ -14,51 +13,35 @@ import { Navbar } from "./navbar";
 import "./styles.scss";
 import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
-import { CodeTheme } from "./code-theme";
+import AdultConsentModal from "../common/modal/adult-consent-modal";
+import { destroyTippy, setupTippy } from "../../tippy";
 
-export class App extends Component<any, any> {
+function handleJumpToContent(app: App, event: any) {
-  private isoData: IsoDataOptionalSite = setIsoData(this.context);
-  private readonly mainContentRef: RefObject<HTMLElement>;
-  constructor(props: any, context: any) {
-    super(props, context);
-    this.mainContentRef = createRef();
-  }
-
-  handleJumpToContent(event) {
   event.preventDefault();
-    this.mainContentRef.current?.focus();
+  app.contentRef.current?.focus();
 }
 
-  render() {
+export default class App extends Component<any, any> {
-    const siteRes = this.isoData.site_res;
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
-    const siteView = siteRes?.site_view;
+  private readonly rootRef = createRef<HTMLDivElement>();
+  readonly contentRef = createRef<HTMLDivElement>();
 
-    return (
+  componentDidMount() {
-      <>
+    setupTippy(this.rootRef);
-        <Provider i18next={I18NextService.i18n}>
+  }
-          <div
+
-            id="app"
+  componentWillUnmount() {
-            className="lemmy-site"
+    destroyTippy();
-            data-bs-theme={dataBsTheme(siteRes)}
+  }
-          >
+
-            <button
+  routes = routes.map(
-              type="button"
+    ({
-              className="btn skip-link bg-light position-absolute start-0 z-3"
+      path,
-              onClick={linkEvent(this, this.handleJumpToContent)}
+      component: RouteComponent,
-            >
+      fetchInitialData,
-              {I18NextService.i18n.t("jump_to_content", "Jump to content")}
+      getQueryParams,
-            </button>
+      mountedSameRouteNavKey,
-            {siteView && (
+    }) => (
-              <>
-                <Theme defaultTheme={siteView.local_site.default_theme} />
-                <CodeTheme />
-              </>
-            )}
-            <Navbar siteRes={siteRes} />
-            <div className="mt-4 p-0 fl-1">
-              <Switch>
-                {routes.map(
-                  ({ path, component: RouteComponent, fetchInitialData }) => (
       <Route
         key={path}
         path={path}
@@ -68,20 +51,38 @@ export class App extends Component<any, any> {
             FirstLoadService.falsify();
           }
 
+          let queryProps = routeProps;
+          if (getQueryParams && this.isoData.site_res) {
+            // ErrorGuard will not render its children when
+            // site_res is missing, this guarantees that props
+            // will always contain the query params.
+            queryProps = {
+              ...routeProps,
+              ...getQueryParams(
+                routeProps.location.search,
+                this.isoData.site_res,
+              ),
+            };
+          }
+
+          // When key is location.key the component will be recreated when
+          // navigating to itself. This is usesful to e.g. reset forms.
+          const key = mountedSameRouteNavKey ?? routeProps.location.key;
+
           return (
             <ErrorGuard>
-                            <div tabIndex={-1}>
+              <div tabIndex={-1} ref={this.contentRef}>
                 {RouteComponent &&
                   (isAuthPath(path ?? "") ? (
                     <AuthGuard {...routeProps}>
-                                    <RouteComponent {...routeProps} />
+                      <RouteComponent key={key} {...queryProps} />
                     </AuthGuard>
                   ) : isAnonymousPath(path ?? "") ? (
                     <AnonymousGuard>
-                                    <RouteComponent {...routeProps} />
+                      <RouteComponent key={key} {...queryProps} />
                     </AnonymousGuard>
                   ) : (
-                                  <RouteComponent {...routeProps} />
+                    <RouteComponent key={key} {...queryProps} />
                   ))}
               </div>
             </ErrorGuard>
@@ -89,14 +90,48 @@ export class App extends Component<any, any> {
         }}
       />
     ),
+  );
+
+  render() {
+    const siteRes = this.isoData.site_res;
+    const siteView = siteRes?.site_view;
+
+    return (
+      <Provider i18next={I18NextService.i18n}>
+        {/* This fragment is required to avoid an SSR error*/}
+        <>
+          {this.isoData.showAdultConsentModal && (
+            <AdultConsentModal
+              contentWarning={siteView!.site.content_warning!}
+            />
           )}
+          <div
+            id="app"
+            className="lemmy-site"
+            ref={this.rootRef}
+            data-adult-consent={this.isoData.showAdultConsentModal || null}
+          >
+            <button
+              type="button"
+              className="btn skip-link bg-light position-absolute start-0 z-3"
+              onClick={linkEvent(this, handleJumpToContent)}
+            >
+              {I18NextService.i18n.t("jump_to_content", "Jump to content")}
+            </button>
+            {siteView && (
+              <Theme defaultTheme={siteView.local_site.default_theme} />
+            )}
+            <Navbar siteRes={siteRes} />
+            <div className="mt-4 p-0 fl-1">
+              <Switch>
+                {this.routes}
                 <Route component={ErrorPage} />
               </Switch>
             </div>
             <Footer site={siteRes} />
           </div>
-        </Provider>
         </>
+      </Provider>
     );
   }
 }

src/shared/components/app/code-theme.tsx

@@ -1,9 +1,19 @@
+import { dataBsTheme } from "@utils/browser";
 import { Component } from "inferno";
+import { Helmet } from "inferno-helmet";
 
-export class CodeTheme extends Component {
+interface CodeThemeProps {
+  theme: string;
+}
+
+export class CodeTheme extends Component<CodeThemeProps, any> {
   render() {
+    const { theme } = this.props;
+    const hasTheme = theme !== "browser" && theme !== "browser-compact";
+
+    if (!hasTheme) {
       return (
-      <>
+        <Helmet>
           <link
             rel="stylesheet"
             type="text/css"
@@ -16,7 +26,26 @@ export class CodeTheme extends Component {
             href={`/css/code-themes/atom-one-dark.css`}
             media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
           />
-      </>
+        </Helmet>
+      );
+    }
+
+    return (
+      <Helmet>
+        {dataBsTheme(theme) === "dark" ? (
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href={`/css/code-themes/atom-one-dark.css`}
+          />
+        ) : (
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href={`/css/code-themes/atom-one-light.css`}
+          />
+        )}
+      </Helmet>
     );
   }
 }

src/shared/components/app/navbar.tsx

@@ -15,6 +15,7 @@ import { toast } from "../../toast";
 import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
 import { Subscription } from "rxjs";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface NavbarProps {
   siteRes?: GetSiteResponse;
@@ -42,6 +43,7 @@ function handleLogOut(i: Navbar) {
   handleCollapseClick(i);
 }
 
+@tippyMixin
 export class Navbar extends Component<NavbarProps, NavbarState> {
   collapseButtonRef = createRef<HTMLButtonElement>();
   mobileMenuRef = createRef<HTMLDivElement>();
@@ -61,7 +63,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     this.handleOutsideMenuClick = this.handleOutsideMenuClick.bind(this);
   }
 
-  async componentDidMount() {
+  async componentWillMount() {
     // Subscribe to jwt changes
     if (isBrowser()) {
       // On the first load, check the unreads
@@ -78,7 +80,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
         UnreadCounterService.Instance.unreadApplicationCountSubject.subscribe(
           unreadApplicationCount => this.setState({ unreadApplicationCount }),
         );
-      this.requestNotificationPermission();
 
       document.addEventListener("mouseup", this.handleOutsideMenuClick);
     }
@@ -468,7 +469,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
 
   requestNotificationPermission() {
     if (UserService.Instance.myUserInfo) {
-      document.addEventListener("DOMContentLoaded", function () {
+      document.addEventListener("lemmy-hydrated", function () {
         if (!Notification) {
           toast(I18NextService.i18n.t("notifications_error"), "danger");
           return;

src/shared/components/app/theme.tsx

@@ -1,42 +1,129 @@
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
 import { UserService } from "../../services";
+import { dataBsTheme, isBrowser } from "@utils/browser";
+import { CodeTheme } from "./code-theme";
 
 interface Props {
   defaultTheme: string;
 }
 
-export class Theme extends Component<Props> {
+interface State {
-  render() {
+  themeOverride?: string;
-    const user = UserService.Instance.myUserInfo;
+  graceTheme?: string;
-    const hasTheme = user?.local_user_view.local_user.theme !== "browser";
+}
 
-    if (user && hasTheme) {
+export class Theme extends Component<Props, State> {
+  private lightQuery?: MediaQueryList;
+  constructor(props, context) {
+    super(props, context);
+    if (isBrowser()) {
+      window.addEventListener("refresh-theme", this.eventListener);
+      window.addEventListener("set-theme-override", this.eventListener);
+      this.lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+      this.lightQuery.addEventListener("change", this.eventListener);
+    }
+  }
+
+  private graceTimer;
+  private eventListener = e => {
+    if (e.type === "refresh-theme" || e.type === "change") {
+      this.forceUpdate();
+    } else if (e.type === "set-theme-override") {
+      if (e.detail?.theme) {
+        this.setState({
+          themeOverride: e.detail.theme,
+          graceTheme: this.state?.themeOverride ?? this.currentTheme(),
+        });
+        // Keep both themes enabled for one second. Avoids unstyled flashes.
+        clearTimeout(this.graceTimer);
+        this.graceTimer = setTimeout(() => {
+          this.setState({ graceTheme: undefined });
+        }, 1000);
+      } else {
+        this.setState({ themeOverride: undefined, graceTheme: undefined });
+      }
+    }
+  };
+
+  componentWillUnmount(): void {
+    if (isBrowser()) {
+      window.removeEventListener("refresh-theme", this.eventListener);
+      this.lightQuery?.removeEventListener("change", this.eventListener);
+    }
+  }
+
+  currentTheme(): string {
+    const user = UserService.Instance.myUserInfo;
+    const userTheme = user?.local_user_view.local_user.theme;
+    return userTheme ?? "browser";
+  }
+
+  render() {
+    if (this.state?.themeOverride) {
+      if (!this.state.graceTheme) {
+        return this.renderTheme(this.state.themeOverride);
+      }
+      // Render both themes to prevent rendering without theme.
+      return [
+        this.renderTheme(this.state.graceTheme ?? this.currentTheme()),
+        this.renderTheme(this.state.themeOverride),
+      ];
+    }
+
+    return this.renderTheme(this.currentTheme());
+  }
+
+  renderTheme(theme: string) {
+    const hasTheme = theme !== "browser" && theme !== "browser-compact";
+
+    const detectedBsTheme = {};
+    if (this.lightQuery) {
+      detectedBsTheme["data-bs-theme"] = this.lightQuery.matches
+        ? "light"
+        : "dark";
+    }
+
+    if (theme && hasTheme) {
       return (
-        <Helmet>
+        <>
+          <Helmet htmlAttributes={{ "data-bs-theme": dataBsTheme(theme) }}>
             <link
               rel="stylesheet"
               type="text/css"
-            href={`/css/themes/${user.local_user_view.local_user.theme}.css`}
+              href={`/css/themes/${theme}.css`}
             />
           </Helmet>
+          <CodeTheme theme={theme} />
+        </>
       );
     } else if (
       this.props.defaultTheme !== "browser" &&
       this.props.defaultTheme !== "browser-compact"
     ) {
       return (
-        <Helmet>
+        <>
+          <Helmet
+            htmlAttributes={{
+              "data-bs-theme": dataBsTheme(this.props.defaultTheme),
+            }}
+          >
             <link
               rel="stylesheet"
               type="text/css"
               href={`/css/themes/${this.props.defaultTheme}.css`}
             />
           </Helmet>
+          <CodeTheme theme={this.props.defaultTheme} />
+        </>
       );
-    } else if (this.props.defaultTheme === "browser-compact") {
+    } else if (
+      this.props.defaultTheme === "browser-compact" ||
+      theme === "browser-compact"
+    ) {
       return (
-        <Helmet>
+        <>
+          <Helmet htmlAttributes={detectedBsTheme}>
             <link
               rel="stylesheet"
               type="text/css"
@@ -52,10 +139,13 @@ export class Theme extends Component<Props> {
               media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
             />
           </Helmet>
+          <CodeTheme theme="browser-compact" />
+        </>
       );
     } else {
       return (
-        <Helmet>
+        <>
+          <Helmet htmlAttributes={detectedBsTheme}>
             <link
               rel="stylesheet"
               type="text/css"
@@ -71,6 +161,8 @@ export class Theme extends Component<Props> {
               media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
             />
           </Helmet>
+          <CodeTheme theme="browser" />
+        </>
       );
     }
   }

src/shared/components/comment/comment-form.tsx

@@ -2,18 +2,23 @@ import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
-import { CreateComment, EditComment, Language } from "lemmy-js-client";
+import {
+  CommentResponse,
+  CreateComment,
+  EditComment,
+  Language,
+} from "lemmy-js-client";
 import { CommentNodeI } from "../../interfaces";
 import { I18NextService, UserService } from "../../services";
 import { Icon } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import { RequestState } from "../../services/HttpService";
 
 interface CommentFormProps {
   /**
    * Can either be the parent, or the editable comment. The right side is a postId.
    */
   node: CommentNodeI | number;
-  finished?: boolean;
   edit?: boolean;
   disabled?: boolean;
   focus?: boolean;
@@ -21,7 +26,9 @@ interface CommentFormProps {
   allLanguages: Language[];
   siteLanguages: number[];
   containerClass?: string;
-  onUpsertComment(form: EditComment | CreateComment): void;
+  onUpsertComment(
+    form: EditComment | CreateComment,
+  ): Promise<RequestState<CommentResponse>>;
 }
 
 export class CommentForm extends Component<CommentFormProps, any> {
@@ -50,7 +57,6 @@ export class CommentForm extends Component<CommentFormProps, any> {
             initialContent={initialContent}
             showLanguage
             buttonTitle={this.buttonTitle}
-            finished={this.props.finished}
             replyType={typeof this.props.node !== "number"}
             focus={this.props.focus}
             disabled={this.props.disabled}
@@ -68,6 +74,9 @@ export class CommentForm extends Component<CommentFormProps, any> {
               <Link className="alert-link" to="/login">
                 #
               </Link>
+              <Link className="alert-link" to="/signup">
+                #
+              </Link>
             </T>
           </div>
         )}
@@ -83,19 +92,23 @@ export class CommentForm extends Component<CommentFormProps, any> {
         : capitalizeFirstLetter(I18NextService.i18n.t("reply"));
   }
 
-  handleCommentSubmit(content: string, language_id?: number) {
+  async handleCommentSubmit(
+    content: string,
+    language_id?: number,
+  ): Promise<boolean> {
     const { node, onUpsertComment, edit } = this.props;
+    let response: RequestState<CommentResponse>;
+
     if (typeof node === "number") {
       const post_id = node;
-      onUpsertComment({
+      response = await onUpsertComment({
         content,
         post_id,
         language_id,
       });
-    } else {
+    } else if (edit) {
-      if (edit) {
       const comment_id = node.comment_view.comment.id;
-        onUpsertComment({
+      response = await onUpsertComment({
         content,
         comment_id,
         language_id,
@@ -103,13 +116,14 @@ export class CommentForm extends Component<CommentFormProps, any> {
     } else {
       const post_id = node.comment_view.post.id;
       const parent_id = node.comment_view.comment.id;
-        this.props.onUpsertComment({
+      response = await onUpsertComment({
         content,
         parent_id,
         post_id,
         language_id,
       });
     }
-    }
+
+    return response.state !== "failed";
   }
 }

src/shared/components/comment/comment-node.tsx

@@ -1,8 +1,8 @@
-import { colorList, getCommentParentId, showScores } from "@utils/app";
+import { colorList, getCommentParentId } from "@utils/app";
 import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
 import classNames from "classnames";
 import { isBefore, parseISO, subMinutes } from "date-fns";
-import { Component, InfernoNode, linkEvent } from "inferno";
+import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import {
   AddAdmin,
@@ -13,7 +13,6 @@ import {
   CommentId,
   CommentReplyView,
   CommentResponse,
-  CommentView,
   CommunityModeratorView,
   CreateComment,
   CreateCommentLike,
@@ -23,6 +22,7 @@ import {
   EditComment,
   GetComments,
   Language,
+  LocalUserVoteDisplayMode,
   MarkCommentReplyAsRead,
   MarkPersonMentionAsRead,
   PersonMentionView,
@@ -33,16 +33,16 @@ import {
   SaveComment,
   TransferCommunity,
 } from "lemmy-js-client";
-import deepEqual from "lodash.isequal";
 import { commentTreeMaxDepth } from "../../config";
 import {
   CommentNodeI,
+  CommentNodeView,
   CommentViewType,
   VoteContentType,
 } from "../../interfaces";
 import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { UserBadges } from "../common/user-badges";
@@ -51,9 +51,10 @@ import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { CommentForm } from "./comment-form";
 import { CommentNodes } from "./comment-nodes";
-import { BanUpdateForm } from "../common/mod-action-form-modal";
+import { BanUpdateForm } from "../common/modal/mod-action-form-modal";
 import CommentActionDropdown from "../common/content-actions/comment-action-dropdown";
 import { RequestState } from "../../services/HttpService";
+import { VoteDisplay } from "../common/vote-display";
 
 type CommentNodeState = {
   showReply: boolean;
@@ -80,11 +81,11 @@ interface CommentNodeProps {
   showContext?: boolean;
   showCommunity?: boolean;
   enableDownvotes?: boolean;
+  voteDisplayMode: LocalUserVoteDisplayMode;
   viewType: CommentViewType;
   allLanguages: Language[];
   siteLanguages: number[];
   hideImages?: boolean;
-  finished: Map<CommentId, boolean | undefined>;
   onSaveComment(form: SaveComment): Promise<void>;
   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
   onPersonMentionRead(form: MarkPersonMentionAsRead): void;
@@ -117,6 +118,7 @@ function handleToggleViewSource(i: CommentNode) {
   }));
 }
 
+@tippyMixin
 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   state: CommentNodeState = {
     showReply: false,
@@ -135,6 +137,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     super(props, context);
 
     this.handleReplyCancel = this.handleReplyCancel.bind(this);
+    this.handleCreateComment = this.handleCreateComment.bind(this);
+    this.handleEditComment = this.handleEditComment.bind(this);
     this.handleReportComment = this.handleReportComment.bind(this);
     this.handleRemoveComment = this.handleRemoveComment.bind(this);
     this.handleReplyClick = this.handleReplyClick.bind(this);
@@ -152,7 +156,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     this.handleTransferCommunity = this.handleTransferCommunity.bind(this);
   }
 
-  get commentView(): CommentView {
+  get commentView(): CommentNodeView {
     return this.props.node.comment_view;
   }
 
@@ -160,22 +164,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return this.commentView.comment.id;
   }
 
-  componentWillReceiveProps(
-    nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps>,
-  ): void {
-    if (!deepEqual(this.props, nextProps)) {
-      this.setState({
-        showEdit: false,
-        showAdvanced: false,
-        createOrEditCommentLoading: false,
-        upvoteLoading: false,
-        downvoteLoading: false,
-        readLoading: false,
-        fetchChildrenLoading: false,
-      });
-    }
-  }
-
   render() {
     const node = this.props.node;
     const cv = this.commentView;
@@ -188,6 +176,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       post,
       counts,
       my_vote,
+      banned_from_community,
     } = this.commentView;
 
     const moreRepliesBorderColor = this.props.node.depth
@@ -262,20 +251,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               {/* This is an expanding spacer for mobile */}
               <div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
 
-              {showScores() && (
+              <VoteDisplay
-                <>
+                voteDisplayMode={this.props.voteDisplayMode}
-                  <span
+                myVote={my_vote}
-                    className={`me-1 fw-bold ${this.scoreColor}`}
+                counts={counts}
-                    aria-label={I18NextService.i18n.t("number_of_points", {
+              />
-                      count: Number(counts.score),
-                      formattedCount: numToSI(counts.score),
-                    })}
-                  >
-                    {numToSI(counts.score)}
-                  </span>
-                  <span className="me-1">•</span>
-                </>
-              )}
               <span>
                 <MomentTime published={published} updated={updated} />
               </span>
@@ -287,12 +267,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 edit
                 onReplyCancel={this.handleReplyCancel}
                 disabled={this.props.locked}
-                finished={this.props.finished.get(id)}
                 focus
                 allLanguages={this.props.allLanguages}
                 siteLanguages={this.props.siteLanguages}
                 containerClass="comment-comment-container"
-                onUpsertComment={this.props.onEditComment}
+                onUpsertComment={this.handleEditComment}
               />
             )}
             {!this.state.showEdit && !this.state.collapsed && (
@@ -305,13 +284,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       className="md-div"
                       dangerouslySetInnerHTML={
                         this.props.hideImages
-                          ? mdToHtmlNoImages(this.commentUnlessRemoved)
+                          ? mdToHtmlNoImages(this.commentUnlessRemoved, () =>
-                          : mdToHtml(this.commentUnlessRemoved)
+                              this.forceUpdate(),
+                            )
+                          : mdToHtml(this.commentUnlessRemoved, () =>
+                              this.forceUpdate(),
+                            )
                       }
                     />
                   )}
                 </div>
-                <div className="comment-bottom-btns d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold mt-1">
+                <div className="comment-bottom-btns d-flex justify-content-start column-gap-1.5 flex-wrap text-muted fw-bold mt-1 align-items-center">
                   {this.props.showContext && this.getLinkButton()}
                   {this.props.markable && (
                     <button
@@ -340,15 +323,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       )}
                     </button>
                   )}
-                  {UserService.Instance.myUserInfo && !this.props.viewOnly && (
+                  {UserService.Instance.myUserInfo &&
+                    !(this.props.viewOnly || banned_from_community) && (
                       <>
                         <VoteButtonsCompact
                           voteContentType={VoteContentType.Comment}
                           id={id}
                           onVote={this.props.onCommentVote}
                           enableDownvotes={this.props.enableDownvotes}
+                          voteDisplayMode={this.props.voteDisplayMode}
                           counts={counts}
-                        my_vote={my_vote}
+                          myVote={my_vote}
                         />
                         <button
                           type="button"
@@ -423,12 +408,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             node={node}
             onReplyCancel={this.handleReplyCancel}
             disabled={this.props.locked}
-            finished={this.props.finished.get(id)}
             focus
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
             containerClass="comment-comment-container"
-            onUpsertComment={this.props.onCreateComment}
+            onUpsertComment={this.handleCreateComment}
           />
         )}
         {!this.state.collapsed && node.children.length > 0 && (
@@ -438,13 +422,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             moderators={this.props.moderators}
             admins={this.props.admins}
             enableDownvotes={this.props.enableDownvotes}
+            voteDisplayMode={this.props.voteDisplayMode}
             viewType={this.props.viewType}
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
             hideImages={this.props.hideImages}
             isChild={!this.props.isTopLevel}
             depth={this.props.node.depth + 1}
-            finished={this.props.finished}
             onCommentReplyRead={this.props.onCommentReplyRead}
             onPersonMentionRead={this.props.onPersonMentionRead}
             onCreateComment={this.props.onCreateComment}
@@ -495,23 +479,25 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       ? I18NextService.i18n.t("show_context")
       : I18NextService.i18n.t("link");
 
-    // The context button should show the parent comment by default
-    const parentCommentId = getCommentParentId(cv.comment) ?? cv.comment.id;
-
     return (
       <>
         <Link
           className={classnames}
-          to={`/comment/${parentCommentId}`}
+          to={`/post/${cv.post.id}/${
+            (this.props.showContext && getCommentParentId(cv.comment)) ||
+            cv.comment.id
+          }`}
           title={title}
         >
           <Icon icon="link" classes="icon-inline" />
         </Link>
-        {!cv.comment.local && (
+        <a
-          <a className={classnames} title={title} href={cv.comment.ap_id}>
+          className={classnames}
+          title={I18NextService.i18n.t("link")}
+          href={cv.comment.ap_id}
+        >
           <Icon icon="fedilink" classes="icon-inline" />
         </a>
-        )}
       </>
     );
   }
@@ -527,35 +513,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return this.commentView.creator.id === this.commentView.post.creator_id;
   }
 
-  get scoreColor() {
-    if (this.commentView.my_vote === 1) {
-      return "text-info";
-    } else if (this.commentView.my_vote === -1) {
-      return "text-danger";
-    } else {
-      return "text-muted";
-    }
-  }
-
-  get pointsTippy(): string {
-    const points = I18NextService.i18n.t("number_of_points", {
-      count: Number(this.commentView.counts.score),
-      formattedCount: numToSI(this.commentView.counts.score),
-    });
-
-    const upvotes = I18NextService.i18n.t("number_of_upvotes", {
-      count: Number(this.commentView.counts.upvotes),
-      formattedCount: numToSI(this.commentView.counts.upvotes),
-    });
-
-    const downvotes = I18NextService.i18n.t("number_of_downvotes", {
-      count: Number(this.commentView.counts.downvotes),
-      formattedCount: numToSI(this.commentView.counts.downvotes),
-    });
-
-    return `${points} • ${upvotes} • ${downvotes}`;
-  }
-
   get expandText(): string {
     return this.state.collapsed
       ? I18NextService.i18n.t("expand")
@@ -583,16 +540,32 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     this.setState({ showReply: false, showEdit: false });
   }
 
-  isPersonMentionType(
+  async handleCreateComment(
-    item: CommentView | PersonMentionView | CommentReplyView,
+    form: CreateComment,
-  ): item is PersonMentionView {
+  ): Promise<RequestState<CommentResponse>> {
-    return (item as PersonMentionView).person_mention?.id !== undefined;
+    const res = await this.props.onCreateComment(form);
+    if (res.state !== "failed") {
+      this.setState({ showReply: false, showEdit: false });
+    }
+    return res;
   }
 
-  isCommentReplyType(
+  async handleEditComment(
-    item: CommentView | PersonMentionView | CommentReplyView,
+    form: EditComment,
-  ): item is CommentReplyView {
+  ): Promise<RequestState<CommentResponse>> {
-    return (item as CommentReplyView).comment_reply?.id !== undefined;
+    const res = await this.props.onEditComment(form);
+    if (res.state !== "failed") {
+      this.setState({ showReply: false, showEdit: false });
+    }
+    return res;
+  }
+
+  isPersonMentionType(item: CommentNodeView): item is PersonMentionView {
+    return item.person_mention?.id !== undefined;
+  }
+
+  isCommentReplyType(item: CommentNodeView): item is CommentReplyView {
+    return item.comment_reply?.id !== undefined;
   }
 
   get isCommentNew(): boolean {
@@ -603,12 +576,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
   handleCommentCollapse(i: CommentNode) {
     i.setState({ collapsed: !i.state.collapsed });
-    setupTippy();
   }
 
   handleShowAdvanced(i: CommentNode) {
     i.setState({ showAdvanced: !i.state.showAdvanced });
-    setupTippy();
   }
 
   async handleSaveComment() {
@@ -666,7 +637,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   async handleBanFromCommunity({
     daysUntilExpires,
     reason,
-    shouldRemove,
+    shouldRemoveOrRestoreData,
   }: BanUpdateForm) {
     const {
       creator: { id: person_id },
@@ -675,10 +646,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     } = this.commentView;
 
     const ban = !creator_banned_from_community;
-
     // If its an unban, restore all their data
     if (ban === false) {
-      shouldRemove = false;
+      shouldRemoveOrRestoreData = true;
     }
     const expires = futureDaysToUnixTime(daysUntilExpires);
 
@@ -686,7 +656,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       community_id,
       person_id,
       ban,
-      remove_data: shouldRemove,
+      remove_or_restore_data: shouldRemoveOrRestoreData,
       reason,
       expires,
     });
@@ -695,7 +665,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   async handleBanFromSite({
     daysUntilExpires,
     reason,
-    shouldRemove,
+    shouldRemoveOrRestoreData,
   }: BanUpdateForm) {
     const {
       creator: { id: person_id, banned },
@@ -705,14 +675,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     // If its an unban, restore all their data
     if (ban === false) {
-      shouldRemove = false;
+      shouldRemoveOrRestoreData = true;
     }
     const expires = futureDaysToUnixTime(daysUntilExpires);
 
     this.props.onBanPerson({
       person_id,
       ban,
-      remove_data: shouldRemove,
+      remove_or_restore_data: shouldRemoveOrRestoreData,
       reason,
       expires,
     });

src/shared/components/comment/comment-nodes.tsx

@@ -7,7 +7,6 @@ import {
   BanFromCommunity,
   BanPerson,
   BlockPerson,
-  CommentId,
   CommentResponse,
   CommunityModeratorView,
   CreateComment,
@@ -18,6 +17,7 @@ import {
   EditComment,
   GetComments,
   Language,
+  LocalUserVoteDisplayMode,
   MarkCommentReplyAsRead,
   MarkPersonMentionAsRead,
   PersonView,
@@ -44,13 +44,13 @@ interface CommentNodesProps {
   showContext?: boolean;
   showCommunity?: boolean;
   enableDownvotes?: boolean;
+  voteDisplayMode: LocalUserVoteDisplayMode;
   viewType: CommentViewType;
   allLanguages: Language[];
   siteLanguages: number[];
   hideImages?: boolean;
   isChild?: boolean;
   depth?: number;
-  finished: Map<CommentId, boolean | undefined>;
   onSaveComment(form: SaveComment): Promise<void>;
   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
   onPersonMentionRead(form: MarkPersonMentionAsRead): void;
@@ -115,13 +115,13 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
               showContext={this.props.showContext}
               showCommunity={this.props.showCommunity}
               enableDownvotes={this.props.enableDownvotes}
+              voteDisplayMode={this.props.voteDisplayMode}
               viewType={this.props.viewType}
               allLanguages={this.props.allLanguages}
               siteLanguages={this.props.siteLanguages}
               hideImages={this.props.hideImages}
               onCommentReplyRead={this.props.onCommentReplyRead}
               onPersonMentionRead={this.props.onPersonMentionRead}
-              finished={this.props.finished}
               onCreateComment={this.props.onCreateComment}
               onEditComment={this.props.onEditComment}
               onCommentVote={this.props.onCommentVote}

src/shared/components/comment/comment-report.tsx

@@ -3,6 +3,7 @@ import { T } from "inferno-i18next-dess";
 import {
   CommentReportView,
   CommentView,
+  LocalUserVoteDisplayMode,
   ResolveCommentReport,
 } from "lemmy-js-client";
 import { CommentNodeI, CommentViewType } from "../../interfaces";
@@ -11,9 +12,12 @@ import { Icon, Spinner } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 import { CommentNode } from "./comment-node";
 import { EMPTY_REQUEST } from "../../services/HttpService";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface CommentReportProps {
   report: CommentReportView;
+  enableDownvotes?: boolean;
+  voteDisplayMode: LocalUserVoteDisplayMode;
   onResolveReport(form: ResolveCommentReport): void;
 }
 
@@ -21,6 +25,7 @@ interface CommentReportState {
   loading: boolean;
 }
 
+@tippyMixin
 export class CommentReport extends Component<
   CommentReportProps,
   CommentReportState
@@ -63,6 +68,7 @@ export class CommentReport extends Component<
       saved: false,
       creator_blocked: false,
       my_vote: r.my_vote,
+      banned_from_community: false,
     };
 
     const node: CommentNodeI = {
@@ -76,14 +82,14 @@ export class CommentReport extends Component<
         <CommentNode
           node={node}
           viewType={CommentViewType.Flat}
-          enableDownvotes={true}
+          enableDownvotes={this.props.enableDownvotes}
+          voteDisplayMode={this.props.voteDisplayMode}
           viewOnly={true}
           showCommunity={true}
           allLanguages={[]}
           siteLanguages={[]}
           hideImages
           // All of these are unused, since its viewonly
-          finished={new Map()}
           onSaveComment={async () => {}}
           onBlockPerson={async () => {}}
           onDeleteComment={async () => {}}

src/shared/components/common/anonymous-guard.tsx

@@ -1,30 +1,25 @@
 import { Component } from "inferno";
 import { UserService } from "../../services";
 import { Spinner } from "./icon";
+import { isBrowser } from "@utils/browser";
 
-interface AnonymousGuardState {
+class AnonymousGuard extends Component<any, any> {
-  hasRedirected: boolean;
-}
-
-class AnonymousGuard extends Component<any, AnonymousGuardState> {
-  state = {
-    hasRedirected: false,
-  } as AnonymousGuardState;
-
   constructor(props: any, context: any) {
     super(props, context);
   }
 
-  componentDidMount() {
+  hasAuth() {
-    if (UserService.Instance.myUserInfo) {
+    return UserService.Instance.myUserInfo;
+  }
+
+  componentWillMount() {
+    if (this.hasAuth() && isBrowser()) {
       this.context.router.history.replace(`/`);
-    } else {
-      this.setState({ hasRedirected: true });
     }
   }
 
   render() {
-    return this.state.hasRedirected ? this.props.children : <Spinner />;
+    return !this.hasAuth() ? this.props.children : <Spinner />;
   }
 }
 

src/shared/components/common/auth-guard.tsx

@@ -2,19 +2,13 @@ import { Component } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { UserService } from "../../services";
 import { Spinner } from "./icon";
-
+import { getQueryString } from "@utils/helpers";
-interface AuthGuardState {
+import { isBrowser } from "@utils/browser";
-  hasRedirected: boolean;
-}
 
 class AuthGuard extends Component<
   RouteComponentProps<Record<string, string>>,
-  AuthGuardState
+  any
 > {
-  state = {
-    hasRedirected: false,
-  } as AuthGuardState;
-
   constructor(
     props: RouteComponentProps<Record<string, string>>,
     context: any,
@@ -22,19 +16,21 @@ class AuthGuard extends Component<
     super(props, context);
   }
 
-  componentDidMount() {
+  hasAuth() {
-    if (!UserService.Instance.myUserInfo) {
+    return UserService.Instance.myUserInfo;
+  }
+
+  componentWillMount() {
+    if (!this.hasAuth() && isBrowser()) {
       const { pathname, search } = this.props.location;
       this.context.router.history.replace(
-        `/login?prev=${encodeURIComponent(pathname + search)}`,
+        `/login${getQueryString({ prev: pathname + search })}`,
       );
-    } else {
-      this.setState({ hasRedirected: true });
     }
   }
 
   render() {
-    return this.state.hasRedirected ? this.props.children : <Spinner />;
+    return this.hasAuth() ? this.props.children : <Spinner />;
   }
 }
 

src/shared/components/common/badges.tsx

@@ -112,12 +112,20 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
         </>
       )}
       {isCommunityAggregates(counts) && (
+        <>
+          <li className="list-inline-item badge text-bg-secondary">
+            {I18NextService.i18n.t("number_of_local_subscribers", {
+              count: Number(counts.subscribers_local),
+              formattedCount: numToSI(counts.subscribers_local),
+            })}
+          </li>
           <li className="list-inline-item badge text-bg-secondary">
             {I18NextService.i18n.t("number_of_subscribers", {
               count: Number(counts.subscribers),
               formattedCount: numToSI(counts.subscribers),
             })}
           </li>
+        </>
       )}
       <li className="list-inline-item badge text-bg-secondary">
         {I18NextService.i18n.t("number_of_posts", {

src/shared/components/common/comment-sort-select.tsx

@@ -47,13 +47,13 @@ export class CommentSortSelect extends Component<
           <option disabled aria-hidden="true">
             {I18NextService.i18n.t("sort_type")}
           </option>
-          <option value={"Hot"}>{I18NextService.i18n.t("hot")}</option>,
+          <option value="Hot">{I18NextService.i18n.t("hot")}</option>
-          <option value={"Controversial"}>
+          <option value="Controversial">
             {I18NextService.i18n.t("controversial")}
           </option>
-          <option value={"Top"}>{I18NextService.i18n.t("top")}</option>,
+          <option value="Top">{I18NextService.i18n.t("top")}</option>
-          <option value={"New"}>{I18NextService.i18n.t("new")}</option>
+          <option value="New">{I18NextService.i18n.t("new")}</option>
-          <option value={"Old"}>{I18NextService.i18n.t("old")}</option>
+          <option value="Old">{I18NextService.i18n.t("old")}</option>
         </select>
         <a
           className="sort-select-help text-muted"

src/shared/components/common/content-actions/action-button.tsx

@@ -1,6 +1,7 @@
 import { Component, linkEvent } from "inferno";
 import { Icon, Spinner } from "../icon";
 import classNames from "classnames";
+import { tippyMixin } from "../../mixins/tippy-mixin";
 
 interface ActionButtonPropsBase {
   label: string;
@@ -34,6 +35,7 @@ async function handleClick(i: ActionButton) {
   i.setState({ loading: false });
 }
 
+@tippyMixin
 export default class ActionButton extends Component<
   ActionButtonProps,
   ActionButtonState

src/shared/components/common/content-actions/content-action-dropdown.tsx

@@ -3,28 +3,25 @@ import { I18NextService, UserService } from "../../../services";
 import { Icon } from "../icon";
 import { CrossPostParams } from "@utils/types";
 import CrossPostButton from "./cross-post-button";
-import {
+import { CommunityModeratorView, PersonView, PostView } from "lemmy-js-client";
-  CommentView,
-  CommunityModeratorView,
-  PersonView,
-  PostView,
-} from "lemmy-js-client";
 import {
   amAdmin,
   amCommunityCreator,
   amMod,
   canAdmin,
   canMod,
-  isBanned,
 } from "@utils/roles";
 import ActionButton from "./action-button";
 import classNames from "classnames";
 import { Link } from "inferno-router";
-import ConfirmationModal from "../confirmation-modal";
+import ConfirmationModal from "../modal/confirmation-modal";
-import ViewVotesModal from "../view-votes-modal";
+import ViewVotesModal from "../modal/view-votes-modal";
-import ModActionFormModal, { BanUpdateForm } from "../mod-action-form-modal";
+import ModActionFormModal, {
-import { BanType, PurgeType } from "../../../interfaces";
+  BanUpdateForm,
+} from "../modal/mod-action-form-modal";
+import { BanType, CommentNodeView, PurgeType } from "../../../interfaces";
 import { getApubName, hostname } from "@utils/helpers";
+import { tippyMixin } from "../../mixins/tippy-mixin";
 
 interface ContentActionDropdownPropsBase {
   onSave: () => Promise<void>;
@@ -46,7 +43,7 @@ interface ContentActionDropdownPropsBase {
 
 export type ContentCommentProps = {
   type: "comment";
-  commentView: CommentView;
+  commentView: CommentNodeView;
   onReply: () => void;
   onDistinguish: () => Promise<void>;
 } & ContentActionDropdownPropsBase;
@@ -58,29 +55,42 @@ export type ContentPostProps = {
   onLock: () => Promise<void>;
   onFeatureLocal: () => Promise<void>;
   onFeatureCommunity: () => Promise<void>;
+  onHidePost: () => Promise<void>;
 } & ContentActionDropdownPropsBase;
 
 type ContentActionDropdownProps = ContentCommentProps | ContentPostProps;
 
-const dialogTypes = [
+type DialogType =
-  "showBanDialog",
+  | "BanDialog"
-  "showRemoveDialog",
+  | "RemoveDialog"
-  "showPurgeDialog",
+  | "PurgeDialog"
-  "showReportDialog",
+  | "ReportDialog"
-  "showTransferCommunityDialog",
+  | "TransferCommunityDialog"
-  "showAppointModDialog",
+  | "AppointModDialog"
-  "showAppointAdminDialog",
+  | "AppointAdminDialog"
-  "showViewVotesDialog",
+  | "ViewVotesDialog";
-] as const;
 
-type DialogType = (typeof dialogTypes)[number];
+type ActionTypeState = {
-
-type ContentActionDropdownState = {
   banType?: BanType;
   purgeType?: PurgeType;
-  mounted: boolean;
+};
-} & { [key in DialogType]: boolean };
 
+type ShowState = {
+  [key in `show${DialogType}`]: boolean;
+};
+
+type RenderState = {
+  [key in `render${DialogType}`]: boolean;
+};
+
+type DropdownState = { dropdownOpenedOnce: boolean };
+
+type ContentActionDropdownState = ActionTypeState &
+  ShowState &
+  RenderState &
+  DropdownState;
+
+@tippyMixin
 export default class ContentActionDropdown extends Component<
   ContentActionDropdownProps,
   ContentActionDropdownState
@@ -94,7 +104,15 @@ export default class ContentActionDropdown extends Component<
     showReportDialog: false,
     showTransferCommunityDialog: false,
     showViewVotesDialog: false,
-    mounted: false,
+    renderAppointAdminDialog: false,
+    renderAppointModDialog: false,
+    renderBanDialog: false,
+    renderPurgeDialog: false,
+    renderRemoveDialog: false,
+    renderReportDialog: false,
+    renderTransferCommunityDialog: false,
+    renderViewVotesDialog: false,
+    dropdownOpenedOnce: false,
   };
 
   constructor(props: ContentActionDropdownProps, context: any) {
@@ -115,10 +133,7 @@ export default class ContentActionDropdown extends Component<
     this.toggleAppointAdminShow = this.toggleAppointAdminShow.bind(this);
     this.toggleViewVotesShow = this.toggleViewVotesShow.bind(this);
     this.wrapHandler = this.wrapHandler.bind(this);
-  }
+    this.handleDropdownToggleClick = this.handleDropdownToggleClick.bind(this);
-
-  componentDidMount() {
-    this.setState({ mounted: true });
   }
 
   render() {
@@ -140,12 +155,32 @@ export default class ContentActionDropdown extends Component<
       type === "post"
         ? `post-actions-dropdown-${id}`
         : `comment-actions-dropdown-${id}`;
-    const creatorBannedFromLocal = isBanned(creator);
+    const creatorBannedFromLocal = creator.banned;
     const showToggleAdmin = !creatorBannedFromLocal && creator.local;
     const canAppointCommunityMod =
       (amMod(community.id) || (amAdmin() && community.local)) &&
       !creator_banned_from_community;
 
+    const modHistoryUserTranslation = I18NextService.i18n.t(
+      "user_moderation_history",
+      { user: creator.name },
+    );
+
+    // The link and translation string for the item
+    const { modHistoryItemLink, modHistoryItemTranslation } =
+      type === "post"
+        ? {
+            modHistoryItemLink: `/modlog?postId=${id}`,
+            modHistoryItemTranslation: I18NextService.i18n.t(
+              "post_moderation_history",
+            ),
+          }
+        : {
+            modHistoryItemLink: `/modlog?commentId=${id}`,
+            modHistoryItemTranslation: I18NextService.i18n.t(
+              "comment_moderation_history",
+            ),
+          };
     return (
       <>
         {type === "comment" && (
@@ -176,11 +211,27 @@ export default class ContentActionDropdown extends Component<
             aria-expanded="false"
             aria-controls={dropdownId}
             aria-label={I18NextService.i18n.t("more")}
+            onClick={this.handleDropdownToggleClick}
           >
             <Icon icon="more-vertical" inline />
           </button>
 
           <ul className="dropdown-menu" id={dropdownId}>
+            {this.state.dropdownOpenedOnce && (
+              <>
+                {type === "post" && (
+                  <li>
+                    <ActionButton
+                      icon={this.props.postView.hidden ? "eye" : "eye-slash"}
+                      label={I18NextService.i18n.t(
+                        this.props.postView.hidden
+                          ? "unhide_post"
+                          : "hide_post",
+                      )}
+                      onClick={this.props.onHidePost}
+                    />
+                  </li>
+                )}
                 {this.amCreator ? (
                   <>
                     <li>
@@ -317,6 +368,28 @@ export default class ContentActionDropdown extends Component<
                       />
                     </li>
                   )}
+                <li>
+                  <Link
+                    className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+                    to={`/modlog?userId=${creator.id}`}
+                    title={modHistoryUserTranslation}
+                    aria-label={modHistoryUserTranslation}
+                    data-tippy-content={modHistoryUserTranslation}
+                  >
+                    <Icon icon="history" inline classes="me-2" />
+                    {modHistoryUserTranslation}
+                  </Link>
+                  <Link
+                    className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+                    to={modHistoryItemLink}
+                    title={modHistoryItemTranslation}
+                    aria-label={modHistoryItemTranslation}
+                    data-tippy-content={modHistoryItemTranslation}
+                  >
+                    <Icon icon="history" inline classes="me-2" />
+                    {modHistoryItemTranslation}
+                  </Link>
+                </li>
                 {(this.canMod || this.canAdmin) && (
                   <li>
                     <ActionButton
@@ -328,7 +401,9 @@ export default class ContentActionDropdown extends Component<
                               type === "post" ? "post" : "comment",
                             )}`
                           : I18NextService.i18n.t(
-                          type === "post" ? "remove_post" : "remove_comment",
+                              type === "post"
+                                ? "remove_post"
+                                : "remove_comment",
                             )
                       }
                       icon={removed ? "restore" : "x"}
@@ -353,10 +428,14 @@ export default class ContentActionDropdown extends Component<
                                 ? "unban_from_community"
                                 : "ban_from_community",
                             )}
-                        icon={creator_banned_from_community ? "unban" : "ban"}
+                            icon={
+                              creator_banned_from_community ? "unban" : "ban"
+                            }
                             noLoading
                             iconClass={`text-${
-                          creator_banned_from_community ? "success" : "danger"
+                              creator_banned_from_community
+                                ? "success"
+                                : "danger"
                             }`}
                           />
                         </li>
@@ -380,7 +459,8 @@ export default class ContentActionDropdown extends Component<
                       )}
                     </>
                   )}
-            {(amCommunityCreator(this.id, moderators) || this.canAdmin) &&
+                {(amCommunityCreator(creator.id, moderators) ||
+                  this.canAdmin) &&
                   creator_is_moderator && (
                     <li>
                       <ActionButton
@@ -453,6 +533,8 @@ export default class ContentActionDropdown extends Component<
                     )}
                   </>
                 )}
+              </>
+            )}
           </ul>
         </div>
         {this.moderationDialogs}
@@ -460,28 +542,34 @@ export default class ContentActionDropdown extends Component<
     );
   }
 
+  handleDropdownToggleClick() {
+    // This only renders the dropdown. Bootstrap handles the show/hide part.
+    this.setState({ dropdownOpenedOnce: true });
+  }
+
   toggleModDialogShow(
     dialogType: DialogType,
-    stateOverride: Partial<ContentActionDropdownState> = {},
+    stateOverride: Partial<ActionTypeState> = {},
   ) {
-    this.setState(prev => ({
+    const showKey: keyof ShowState = `show${dialogType}`;
-      ...prev,
+    const renderKey: keyof RenderState = `render${dialogType}`;
-      [dialogType]: !prev[dialogType],
+    this.setState<keyof ShowState>({
-      ...dialogTypes
+      showBanDialog: false,
-        .filter(dt => dt !== dialogType)
+      showRemoveDialog: false,
-        .reduce(
+      showPurgeDialog: false,
-          (acc, dt) => ({
+      showReportDialog: false,
-            ...acc,
+      showTransferCommunityDialog: false,
-            [dt]: false,
+      showAppointModDialog: false,
-          }),
+      showAppointAdminDialog: false,
-          {},
+      showViewVotesDialog: false,
-        ),
+      [showKey]: !this.state[showKey],
+      [renderKey]: true, // for fade out just keep rendering after show becomes false
       ...stateOverride,
-    }));
+    });
   }
 
   hideAllDialogs() {
-    this.setState({
+    this.setState<keyof ShowState>({
       showBanDialog: false,
       showPurgeDialog: false,
       showRemoveDialog: false,
@@ -494,52 +582,52 @@ export default class ContentActionDropdown extends Component<
   }
 
   toggleReportDialogShow() {
-    this.toggleModDialogShow("showReportDialog");
+    this.toggleModDialogShow("ReportDialog");
   }
 
   toggleRemoveShow() {
-    this.toggleModDialogShow("showRemoveDialog");
+    this.toggleModDialogShow("RemoveDialog");
   }
 
   toggleBanFromCommunityShow() {
-    this.toggleModDialogShow("showBanDialog", {
+    this.toggleModDialogShow("BanDialog", {
       banType: BanType.Community,
     });
   }
 
   toggleBanFromSiteShow() {
-    this.toggleModDialogShow("showBanDialog", {
+    this.toggleModDialogShow("BanDialog", {
       banType: BanType.Site,
     });
   }
 
   togglePurgePersonShow() {
-    this.toggleModDialogShow("showPurgeDialog", {
+    this.toggleModDialogShow("PurgeDialog", {
       purgeType: PurgeType.Person,
     });
   }
 
   togglePurgeContentShow() {
-    this.toggleModDialogShow("showPurgeDialog", {
+    this.toggleModDialogShow("PurgeDialog", {
       purgeType:
         this.props.type === "post" ? PurgeType.Post : PurgeType.Comment,
     });
   }
 
   toggleTransferCommunityShow() {
-    this.toggleModDialogShow("showTransferCommunityDialog");
+    this.toggleModDialogShow("TransferCommunityDialog");
   }
 
   toggleAppointModShow() {
-    this.toggleModDialogShow("showAppointModDialog");
+    this.toggleModDialogShow("AppointModDialog");
   }
 
   toggleAppointAdminShow() {
-    this.toggleModDialogShow("showAppointAdminDialog");
+    this.toggleModDialogShow("AppointAdminDialog");
   }
 
   toggleViewVotesShow() {
-    this.toggleModDialogShow("showViewVotesDialog");
+    this.toggleModDialogShow("ViewVotesDialog");
   }
 
   get moderationDialogs() {
@@ -554,7 +642,14 @@ export default class ContentActionDropdown extends Component<
       showAppointModDialog,
       showAppointAdminDialog,
       showViewVotesDialog,
-      mounted,
+      renderBanDialog,
+      renderPurgeDialog,
+      renderRemoveDialog,
+      renderReportDialog,
+      renderTransferCommunityDialog,
+      renderAppointModDialog,
+      renderAppointAdminDialog,
+      renderViewVotesDialog,
     } = this.state;
     const {
       removed,
@@ -578,10 +673,9 @@ export default class ContentActionDropdown extends Component<
       type,
     } = this.props;
 
-    // Wait until componentDidMount runs (which only happens on the browser) to prevent sending over a gratuitous amount of markup
     return (
-      mounted && (
       <>
+        {renderRemoveDialog && (
           <ModActionFormModal
             onSubmit={this.wrapHandler(onRemove)}
             modActionType={
@@ -591,6 +685,8 @@ export default class ContentActionDropdown extends Component<
             onCancel={this.hideAllDialogs}
             show={showRemoveDialog}
           />
+        )}
+        {renderBanDialog && (
           <ModActionFormModal
             onSubmit={this.wrapHandler(
               banType === BanType.Community
@@ -612,6 +708,8 @@ export default class ContentActionDropdown extends Component<
             community={community}
             show={showBanDialog}
           />
+        )}
+        {renderReportDialog && (
           <ModActionFormModal
             onSubmit={this.wrapHandler(onReport)}
             modActionType={
@@ -620,6 +718,8 @@ export default class ContentActionDropdown extends Component<
             onCancel={this.hideAllDialogs}
             show={showReportDialog}
           />
+        )}
+        {renderPurgeDialog && (
           <ModActionFormModal
             onSubmit={this.wrapHandler(
               purgeType === PurgeType.Person ? onPurgeUser : onPurgeContent,
@@ -635,6 +735,8 @@ export default class ContentActionDropdown extends Component<
             onCancel={this.hideAllDialogs}
             show={showPurgeDialog}
           />
+        )}
+        {renderTransferCommunityDialog && (
           <ConfirmationModal
             show={showTransferCommunityDialog}
             message={I18NextService.i18n.t("transfer_community_are_you_sure", {
@@ -645,6 +747,8 @@ export default class ContentActionDropdown extends Component<
             onNo={this.hideAllDialogs}
             onYes={this.wrapHandler(onTransferCommunity)}
           />
+        )}
+        {renderAppointModDialog && (
           <ConfirmationModal
             show={showAppointModDialog}
             message={I18NextService.i18n.t(
@@ -653,7 +757,7 @@ export default class ContentActionDropdown extends Component<
                 : "appoint_as_mod_are_you_sure",
               {
                 user: getApubName(creator),
-                community: getApubName(creator),
+                community: getApubName(community),
               },
             )}
             loadingMessage={I18NextService.i18n.t(
@@ -662,6 +766,8 @@ export default class ContentActionDropdown extends Component<
             onNo={this.hideAllDialogs}
             onYes={this.wrapHandler(onAppointCommunityMod)}
           />
+        )}
+        {renderAppointAdminDialog && (
           <ConfirmationModal
             show={showAppointAdminDialog}
             message={I18NextService.i18n.t(
@@ -679,14 +785,16 @@ export default class ContentActionDropdown extends Component<
             onNo={this.hideAllDialogs}
             onYes={this.wrapHandler(onAppointAdmin)}
           />
+        )}
+        {renderViewVotesDialog && (
           <ViewVotesModal
             type={type}
             id={id}
             show={showViewVotesDialog}
             onCancel={this.hideAllDialogs}
           />
+        )}
       </>
-      )
     );
   }
 
@@ -778,12 +886,6 @@ export default class ContentActionDropdown extends Component<
     );
   }
 
-  get id() {
-    return this.props.type === "post"
-      ? this.props.postView.creator.id
-      : this.props.commentView.creator.id;
-  }
-
   wrapHandler(handler: (arg?: any) => Promise<void>) {
     return async (arg?: any) => {
       await handler(arg);

src/shared/components/common/emoji-picker.tsx

@@ -2,6 +2,7 @@ import { Component, linkEvent } from "inferno";
 import { I18NextService } from "../../services";
 import { EmojiMart } from "./emoji-mart";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface EmojiPickerProps {
   onEmojiClick?(val: any): any;
@@ -12,10 +13,13 @@ interface EmojiPickerState {
   showPicker: boolean;
 }
 
-function closeEmojiMartOnEsc(i, event): void {
+function closeEmojiMartOnEsc(i: EmojiPicker, event: KeyboardEvent): void {
-  event.key === "Escape" && i.setState({ showPicker: false });
+  if (event.key === "Escape") {
+    i.setState({ showPicker: false });
+  }
 }
 
+@tippyMixin
 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
   private emptyState: EmojiPickerState = {
     showPicker: false,
@@ -70,9 +74,11 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     e.preventDefault();
     i.setState({ showPicker: !i.state.showPicker });
 
-    i.state.showPicker
+    if (i.state.showPicker) {
-      ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
+      document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
-      : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
+    } else {
+      document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
+    }
   }
 
   handleEmojiClick(e: any) {

src/shared/components/common/image-upload-form.tsx

@@ -36,7 +36,7 @@ export class ImageUploadForm extends Component<
       <form className="image-upload-form d-inline">
         {this.props.imageSrc && (
           <span className="d-inline-block position-relative mb-2">
-            {/* TODO: Create "Current Iamge" translation for alt text */}
+            {/* TODO: Create "Current Image" translation for alt text */}
             <img
               alt=""
               src={this.props.imageSrc}
@@ -77,8 +77,6 @@ export class ImageUploadForm extends Component<
     i.setState({ loading: true });
 
     HttpService.client.uploadImage({ image }).then(res => {
-      console.log("pictrs upload:");
-      console.log(res);
       if (res.state === "success") {
         if (res.data.msg === "ok") {
           i.props.onUpload(res.data.url as string);

src/shared/components/common/loading-skeleton.tsx

@@ -0,0 +1,84 @@
+import { Component } from "inferno";
+
+interface LoadingSkeletonProps {
+  itemCount?: number;
+}
+
+interface LoadingSkeletonLineProps {
+  size: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+}
+
+class LoadingSkeletonLine extends Component<LoadingSkeletonLineProps, any> {
+  render() {
+    const className = "placeholder placeholder-lg col-" + this.props.size;
+    return (
+      <p className="placeholder-glow m-0">
+        <span className={`${className} h-100`} />
+      </p>
+    );
+  }
+}
+
+export class PostsLoadingSkeleton extends Component<LoadingSkeletonProps, any> {
+  render() {
+    return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
+      <PostsLoadingSkeletonItem key={index} />
+    ));
+  }
+}
+
+class PostThumbnailLoadingSkeleton extends Component<any, any> {
+  render() {
+    return (
+      <div className="thumbnail rounded d-flex justify-content-center placeholder-glow">
+        <span className="placeholder placeholder-lg h-100 w-100 rounded" />
+      </div>
+    );
+  }
+}
+
+class PostsLoadingSkeletonItem extends Component<any, any> {
+  render() {
+    return (
+      <div className="my-3">
+        <div className="col flex-grow-1">
+          <div className="row">
+            <div className="col flex-grow-0 order-last order-sm-first">
+              <PostThumbnailLoadingSkeleton />
+            </div>
+            <div className="col flex-grow-1">
+              <LoadingSkeletonLine size={12} />
+              <LoadingSkeletonLine size={8} />
+              <LoadingSkeletonLine size={4} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export class CommentsLoadingSkeleton extends Component<any, any> {
+  render() {
+    return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
+      <CommentsLoadingSkeletonItem key={index} />
+    ));
+  }
+}
+
+class CommentsLoadingSkeletonItem extends Component<any, any> {
+  render() {
+    return (
+      <div className="col flex-grow-1 my-2 p-2">
+        <div className="row">
+          <div className="col flex-grow-1">
+            <LoadingSkeletonLine size={6} />
+            <LoadingSkeletonLine size={12} />
+            <LoadingSkeletonLine size={7} />
+            <LoadingSkeletonLine size={4} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/shared/components/common/markdown-textarea.tsx

@@ -15,7 +15,7 @@ import {
 } from "../../config";
 import { customEmojisLookup, mdToHtml, setupTribute } from "../../markdown";
 import { HttpService, I18NextService, UserService } from "../../services";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
@@ -41,15 +41,15 @@ interface MarkdownTextAreaProps {
   replyType?: boolean;
   focus?: boolean;
   disabled?: boolean;
-  finished?: boolean;
   /**
    * Whether to show the language selector
    */
   showLanguage?: boolean;
   hideNavigationWarnings?: boolean;
   onContentChange?(val: string): void;
+  onContentBlur?(val: string): void;
   onReplyCancel?(): void;
-  onSubmit?(content: string, languageId?: number): void;
+  onSubmit?(content: string, languageId?: number): Promise<boolean>;
   allLanguages: Language[]; // TODO should probably be nullable
   siteLanguages: number[]; // TODO same
 }
@@ -68,6 +68,7 @@ interface MarkdownTextAreaState {
   submitted: boolean;
 }
 
+@tippyMixin
 export class MarkdownTextArea extends Component<
   MarkdownTextAreaProps,
   MarkdownTextAreaState
@@ -75,8 +76,6 @@ export class MarkdownTextArea extends Component<
   private id = `markdown-textarea-${randomStr()}`;
   private formId = `markdown-form-${randomStr()}`;
 
-  private tribute: any;
-
   state: MarkdownTextAreaState = {
     content: this.props.initialContent,
     languageId: this.props.initialLanguageId,
@@ -90,17 +89,15 @@ export class MarkdownTextArea extends Component<
 
     this.handleLanguageChange = this.handleLanguageChange.bind(this);
     this.handleEmoji = this.handleEmoji.bind(this);
+  }
 
+  async componentDidMount() {
     if (isBrowser()) {
-      this.tribute = setupTribute();
+      const tribute = await setupTribute();
-    }
-  }
-
-  componentDidMount() {
       const textarea: any = document.getElementById(this.id);
       if (textarea) {
         autosize(textarea);
-      this.tribute.attach(textarea);
+        tribute.attach(textarea);
         textarea.addEventListener("tribute-replaced", () => {
           this.setState({ content: textarea.value });
           autosize.update(textarea);
@@ -111,29 +108,8 @@ export class MarkdownTextArea extends Component<
         if (this.props.focus) {
           textarea.focus();
         }
-
-      // TODO this is slow for some reason
-      setupTippy();
       }
     }
-
-  componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
-    if (nextProps.finished) {
-      this.setState({
-        previewMode: false,
-        imageUploadStatus: undefined,
-        loading: false,
-        content: undefined,
-      });
-      if (this.props.replyType) {
-        this.props.onReplyCancel?.();
-      }
-
-      const textarea: any = document.getElementById(this.id);
-      const form: any = document.getElementById(this.formId);
-      form.reset();
-      setTimeout(() => autosize.update(textarea), 10);
-    }
   }
 
   render() {
@@ -149,13 +125,14 @@ export class MarkdownTextArea extends Component<
           message={I18NextService.i18n.t("block_leaving")}
           when={
             !this.props.hideNavigationWarnings &&
-            !!this.state.content &&
+            ((!!this.state.content && !this.state.submitted) ||
-            !this.state.submitted
+              this.state.loading)
           }
         />
         <div className="mb-3 row">
           <div className="col-12">
             <div className="rounded bg-light border">
+              {!this.state.previewMode && (
                 <div
                   className={classNames("d-flex flex-wrap border-bottom", {
                     "no-click": this.isDisabled,
@@ -206,7 +183,10 @@ export class MarkdownTextArea extends Component<
                   {this.getFormatButton("quote", this.handleInsertQuote)}
                   {this.getFormatButton("list", this.handleInsertList)}
                   {this.getFormatButton("code", this.handleInsertCode)}
-                {this.getFormatButton("subscript", this.handleInsertSubscript)}
+                  {this.getFormatButton(
+                    "subscript",
+                    this.handleInsertSubscript,
+                  )}
                   {this.getFormatButton(
                     "superscript",
                     this.handleInsertSuperscript,
@@ -221,7 +201,7 @@ export class MarkdownTextArea extends Component<
                     <Icon icon="help-circle" classes="icon-inline" />
                   </a>
                 </div>
-
+              )}
               <div>
                 <textarea
                   id={this.id}
@@ -233,6 +213,7 @@ export class MarkdownTextArea extends Component<
                   )}
                   value={this.state.content}
                   onInput={linkEvent(this, this.handleContentChange)}
+                  onBlur={linkEvent(this, this.handleContentBlur)}
                   onPaste={linkEvent(this, this.handlePaste)}
                   onKeyDown={linkEvent(this, this.handleKeyBinds)}
                   required
@@ -242,11 +223,14 @@ export class MarkdownTextArea extends Component<
                     this.props.maxLength ?? markdownFieldCharacterLimit
                   }
                   placeholder={this.props.placeholder}
+                  spellCheck
                 />
                 {this.state.previewMode && this.state.content && (
                   <div
                     className="card border-secondary card-body md-div"
-                    dangerouslySetInnerHTML={mdToHtml(this.state.content)}
+                    dangerouslySetInnerHTML={mdToHtml(this.state.content, () =>
+                      this.forceUpdate(),
+                    )}
                   />
                 )}
                 {this.state.imageUploadStatus &&
@@ -273,29 +257,14 @@ export class MarkdownTextArea extends Component<
           </div>
 
           <div className="col-12 d-flex align-items-center flex-wrap mt-2">
-            {this.props.showLanguage && (
+            {this.props.buttonTitle && (
-              <LanguageSelect
-                iconVersion
-                allLanguages={this.props.allLanguages}
-                selectedLanguageIds={
-                  languageId ? Array.of(languageId) : undefined
-                }
-                siteLanguages={this.props.siteLanguages}
-                onChange={this.handleLanguageChange}
-                disabled={this.isDisabled}
-              />
-            )}
-
-            {/* A flex expander */}
-            <div className="flex-grow-1"></div>
-
-            {this.props.replyType && (
               <button
-                type="button"
+                type="submit"
                 className="btn btn-sm btn-secondary ms-2"
-                onClick={linkEvent(this, this.handleReplyCancel)}
+                disabled={this.isDisabled || !this.state.content}
               >
-                {I18NextService.i18n.t("cancel")}
+                {this.state.loading && <Spinner className="me-1" />}
+                {this.props.buttonTitle}
               </button>
             )}
             <button
@@ -310,16 +279,31 @@ export class MarkdownTextArea extends Component<
                 ? I18NextService.i18n.t("edit")
                 : I18NextService.i18n.t("preview")}
             </button>
-            {this.props.buttonTitle && (
+            {this.props.replyType && (
               <button
-                type="submit"
+                type="button"
                 className="btn btn-sm btn-secondary ms-2"
-                disabled={this.isDisabled || !this.state.content}
+                onClick={linkEvent(this, this.handleReplyCancel)}
               >
-                {this.state.loading && <Spinner className="me-1" />}
+                {I18NextService.i18n.t("cancel")}
-                {this.props.buttonTitle}
               </button>
             )}
+
+            {/* A flex expander */}
+            <div className="flex-grow-1"></div>
+
+            {this.props.showLanguage && (
+              <LanguageSelect
+                iconVersion
+                allLanguages={this.props.allLanguages}
+                selectedLanguageIds={
+                  languageId ? Array.of(languageId) : undefined
+                }
+                siteLanguages={this.props.siteLanguages}
+                onChange={this.handleLanguageChange}
+                disabled={this.isDisabled}
+              />
+            )}
           </div>
         </div>
       </form>
@@ -465,7 +449,7 @@ export class MarkdownTextArea extends Component<
             }));
           }),
         );
-      } catch (e) {
+      } catch {
         errorOccurred = true;
       }
     }
@@ -473,8 +457,6 @@ export class MarkdownTextArea extends Component<
 
   async uploadSingleImage(i: MarkdownTextArea, image: File) {
     const res = await HttpService.client.uploadImage({ image });
-    console.log("pictrs upload:");
-    console.log(res);
     if (res.state === "success") {
       if (res.data.msg === "ok") {
         const imageMarkdown = `![](${res.data.url})`;
@@ -512,6 +494,10 @@ export class MarkdownTextArea extends Component<
     i.contentChange();
   }
 
+  handleContentBlur(i: MarkdownTextArea, event: any) {
+    i.props.onContentBlur?.(event.target.value);
+  }
+
   // Keybind handler
   // Keybinds inspired by github comment area
   handleKeyBinds(i: MarkdownTextArea, event: KeyboardEvent) {
@@ -569,11 +555,15 @@ export class MarkdownTextArea extends Component<
     this.setState({ languageId: val[0] });
   }
 
-  handleSubmit(i: MarkdownTextArea, event: any) {
+  async handleSubmit(i: MarkdownTextArea, event: any) {
     event.preventDefault();
     if (i.state.content) {
       i.setState({ loading: true, submitted: true });
-      i.props.onSubmit?.(i.state.content, i.state.languageId);
+      const success = await i.props.onSubmit?.(
+        i.state.content,
+        i.state.languageId,
+      );
+      i.setState({ loading: false, submitted: success ?? true });
     }
   }
 
@@ -770,7 +760,9 @@ export class MarkdownTextArea extends Component<
   getSelectedText(): string {
     const { selectionStart: start, selectionEnd: end } =
       document.getElementById(this.id) as any;
-    return start !== end ? this.state.content?.substring(start, end) ?? "" : "";
+    return start !== end
+      ? (this.state.content?.substring(start, end) ?? "")
+      : "";
   }
 
   get isDisabled() {

src/shared/components/common/media-uploads.tsx

@@ -0,0 +1,106 @@
+import { Component, InfernoNode, linkEvent } from "inferno";
+import { ListMediaResponse, LocalImage } from "lemmy-js-client";
+import { HttpService, I18NextService } from "../../services";
+import { PersonListing } from "../person/person-listing";
+import { tippyMixin } from "../mixins/tippy-mixin";
+import { MomentTime } from "./moment-time";
+import { PictrsImage } from "./pictrs-image";
+import { getHttpBase } from "@utils/env";
+import { toast } from "../../toast";
+
+interface Props {
+  uploads: ListMediaResponse;
+  showUploader?: boolean;
+}
+
+@tippyMixin
+export class MediaUploads extends Component<Props, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & Props>,
+  ): void {
+    if (this.props !== nextProps) {
+      this.setState({ loading: false });
+    }
+  }
+
+  render() {
+    const images = this.props.uploads.images;
+
+    return (
+      <div className="media-uploads table-responsive">
+        <table className="table">
+          <thead>
+            <tr>
+              {this.props.showUploader && (
+                <th>{I18NextService.i18n.t("uploader")}</th>
+              )}
+              <th colSpan={3}>{I18NextService.i18n.t("time")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {images.map(i => (
+              <tr key={i.local_image.pictrs_alias}>
+                {this.props.showUploader && (
+                  <td>
+                    <PersonListing person={i.person} />
+                  </td>
+                )}
+                <td>
+                  <MomentTime published={i.local_image.published} />
+                </td>
+                <td>
+                  <PictrsImage
+                    src={buildImageUrl(i.local_image.pictrs_alias)}
+                  />
+                </td>
+                <td>{this.deleteImageBtn(i.local_image)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  deleteImageBtn(image: LocalImage) {
+    return (
+      <button
+        onClick={linkEvent(image, this.handleDeleteImage)}
+        className="btn btn-danger"
+      >
+        {I18NextService.i18n.t("delete")}
+      </button>
+    );
+  }
+
+  async handleDeleteImage(image: LocalImage) {
+    const form = {
+      token: image.pictrs_delete_token,
+      filename: image.pictrs_alias,
+    };
+    const res = await HttpService.client.deleteImage(form);
+    const filename = image.pictrs_alias;
+    if (res.state === "success") {
+      const deletePictureText = I18NextService.i18n.t("picture_deleted", {
+        filename,
+      });
+      toast(deletePictureText);
+    } else if (res.state === "failed") {
+      const failedDeletePictureText = I18NextService.i18n.t(
+        "failed_to_delete_picture",
+        {
+          filename,
+        },
+      );
+      toast(failedDeletePictureText, "danger");
+    }
+  }
+}
+
+function buildImageUrl(pictrsAlias: string): string {
+  return `${getHttpBase()}/pictrs/image/${pictrsAlias}`;
+}

src/shared/components/common/modal/adult-consent-modal.tsx

@@ -0,0 +1,142 @@
+import { Component, LinkedEvent, createRef, linkEvent } from "inferno";
+import { modalMixin } from "../../mixins/modal-mixin";
+import { adultConsentCookieKey } from "../../../config";
+import { mdToHtml } from "../../../markdown";
+import { I18NextService } from "../../../services";
+import { isHttps } from "@utils/env";
+import { IsoData } from "../../../interfaces";
+import { setIsoData } from "@utils/app";
+
+interface AdultConsentModalProps {
+  contentWarning: string;
+  show: boolean;
+  onContinue: LinkedEvent<any, Event> | null;
+  onBack: LinkedEvent<any, Event> | null;
+  redirectCountdown: number;
+}
+
+@modalMixin
+class AdultConsentModalInner extends Component<AdultConsentModalProps, any> {
+  readonly modalDivRef = createRef<HTMLDivElement>();
+  readonly continueButtonRef = createRef<HTMLButtonElement>();
+
+  render() {
+    const { contentWarning, onContinue, onBack, redirectCountdown } =
+      this.props;
+
+    return (
+      <div
+        className="modal"
+        id="adultConsentModal"
+        tabIndex={-1}
+        aria-hidden
+        aria-label="Content warning"
+        data-bs-backdrop="static"
+        ref={this.modalDivRef}
+      >
+        <div
+          className="modal-dialog modal-fullscreen-sm-down"
+          data-bs-backdrop="static"
+        >
+          <div className="modal-content">
+            <header className="modal-header justify-content-center">
+              <h3 className="modal-title">
+                {I18NextService.i18n.t("content_warning")}
+              </h3>
+            </header>
+            {redirectCountdown === Infinity ? (
+              <div
+                className="modal-body text-center align-middle text-body"
+                dangerouslySetInnerHTML={mdToHtml(contentWarning, () =>
+                  this.forceUpdate(),
+                )}
+              />
+            ) : (
+              <div className="modal-body text-center align-middle text-body">
+                {I18NextService.i18n.t("sending_back_message", {
+                  seconds: redirectCountdown,
+                })}
+              </div>
+            )}
+            <footer className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-success"
+                onClick={onContinue}
+                ref={this.continueButtonRef}
+              >
+                {I18NextService.i18n.t("continue")}
+              </button>
+              <button type="button" className="btn btn-danger" onClick={onBack}>
+                {I18NextService.i18n.t("go_back")}
+              </button>
+            </footer>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  handleShow() {
+    this.continueButtonRef.current?.focus();
+  }
+}
+
+interface AdultConsentModalState {
+  show: boolean;
+  redirectCountdown: number;
+}
+
+function handleAdultConsent(i: AdultConsentModal) {
+  document.cookie = `${adultConsentCookieKey}=true; Path=/; SameSite=Strict${isHttps() ? "; Secure" : ""}`;
+  i.setState({ show: false });
+  location.reload();
+}
+
+function handleAdultConsentGoBack(i: AdultConsentModal) {
+  i.setState({ redirectCountdown: 5 });
+
+  clearInterval(i.redirectTimeout);
+  i.redirectTimeout = setInterval(() => {
+    i.setState(prev => ({
+      ...prev,
+      redirectCountdown: prev.redirectCountdown - 1,
+    }));
+  }, 1000);
+}
+
+export default class AdultConsentModal extends Component<
+  Pick<AdultConsentModalProps, "contentWarning">,
+  AdultConsentModalState
+> {
+  private isoData: IsoData = setIsoData(this.context);
+  redirectTimeout: NodeJS.Timeout;
+  state: AdultConsentModalState = {
+    show: this.isoData.showAdultConsentModal,
+    redirectCountdown: Infinity,
+  };
+
+  componentDidUpdate() {
+    if (this.state.redirectCountdown === 0) {
+      this.context.router.history.back();
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.redirectTimeout);
+  }
+
+  render() {
+    const { redirectCountdown, show } = this.state;
+
+    return (
+      <AdultConsentModalInner
+        contentWarning={this.props.contentWarning}
+        show={show}
+        redirectCountdown={redirectCountdown}
+        onBack={linkEvent(this, handleAdultConsentGoBack)}
+        onContinue={linkEvent(this, handleAdultConsent)}
+      />
+    );
+  }
+}

src/shared/components/common/modal/confirmation-modal.tsx

@@ -1,12 +1,14 @@
 import { Component, RefObject, createRef, linkEvent } from "inferno";
-import { I18NextService } from "../../services";
+import { I18NextService } from "../../../services";
 import type { Modal } from "bootstrap";
-import { Spinner } from "./icon";
+import { Spinner } from "../icon";
-import { LoadingEllipses } from "./loading-ellipses";
+import { LoadingEllipses } from "../loading-ellipses";
+import { modalMixin } from "../../mixins/modal-mixin";
+import { MouseEventHandler } from "inferno";
 
 interface ConfirmationModalProps {
   onYes: () => Promise<void>;
-  onNo: () => void;
+  onNo: MouseEventHandler<HTMLButtonElement>;
   message: string;
   loadingMessage: string;
   show: boolean;
@@ -22,13 +24,14 @@ async function handleYes(i: ConfirmationModal) {
   i.setState({ loading: false });
 }
 
+@modalMixin
 export default class ConfirmationModal extends Component<
   ConfirmationModalProps,
   ConfirmationModalState
 > {
   readonly modalDivRef: RefObject<HTMLDivElement>;
   readonly yesButtonRef: RefObject<HTMLButtonElement>;
-  modal: Modal;
+  modal?: Modal;
   state: ConfirmationModalState = {
     loading: false,
   };
@@ -38,41 +41,6 @@ export default class ConfirmationModal extends Component<
 
     this.modalDivRef = createRef();
     this.yesButtonRef = createRef();
-
-    this.handleShow = this.handleShow.bind(this);
-  }
-
-  async componentDidMount() {
-    this.modalDivRef.current?.addEventListener(
-      "shown.bs.modal",
-      this.handleShow,
-    );
-
-    const Modal = (await import("bootstrap/js/dist/modal")).default;
-    this.modal = new Modal(this.modalDivRef.current!);
-
-    if (this.props.show) {
-      this.modal.show();
-    }
-  }
-
-  componentWillUnmount() {
-    this.modalDivRef.current?.removeEventListener(
-      "shown.bs.modal",
-      this.handleShow,
-    );
-
-    this.modal.dispose();
-  }
-
-  componentDidUpdate({ show: prevShow }: ConfirmationModalProps) {
-    if (!!prevShow !== !!this.props.show) {
-      if (this.props.show) {
-        this.modal.show();
-      } else {
-        this.modal.hide();
-      }
-    }
   }
 
   render() {

src/shared/components/common/modal/create-or-edit-oauth-provider-modal.tsx

@@ -0,0 +1,386 @@
+import {
+  Component,
+  FormEventHandler,
+  MouseEventHandler,
+  RefObject,
+  createRef,
+  linkEvent,
+} from "inferno";
+import type { Modal } from "bootstrap";
+import { modalMixin } from "../../mixins/modal-mixin";
+import { I18NextService } from "../../../services/I18NextService";
+import {
+  CreateOAuthProvider,
+  EditOAuthProvider,
+  OAuthProvider,
+} from "lemmy-js-client";
+import { ProviderToEdit } from "@utils/types/oauth";
+
+export type CreateOrEditOAuthProviderModalData =
+  | { type: "add"; provider?: ProviderToEdit }
+  | { type: "edit" | "add"; provider: OAuthProvider };
+
+interface CreateOrEditOAuthProviderModalProps {
+  onClose: MouseEventHandler<HTMLButtonElement>;
+  show: boolean;
+  data: CreateOrEditOAuthProviderModalData;
+  onSubmit: (
+    provider: CreateOAuthProvider | EditOAuthProvider,
+  ) => Promise<void>;
+}
+
+interface CreateOrEditOAuthProviderModalState {
+  changed: boolean;
+  provider: Partial<CreateOAuthProvider>;
+  loading: boolean;
+}
+
+interface ProviderFieldProps {
+  id: string;
+  i18nKey: string;
+  onInput: FormEventHandler<HTMLInputElement>;
+}
+
+interface ProviderTextFieldProps extends ProviderFieldProps {
+  disabled?: boolean;
+  placeholder?: string;
+  type?: "text" | "url" | "password";
+  value?: string;
+  required?: boolean;
+}
+
+type ProviderBooleanProperties =
+  | "enabled"
+  | "account_linking_enabled"
+  | "auto_verify_email";
+
+interface ProviderCheckboxFieldProps extends ProviderFieldProps {
+  checked?: boolean;
+}
+
+const FORM_ID = "create-or-edit-oauth-provider-form-id";
+
+function handleTextPropertyChange(
+  {
+    modal,
+    property,
+  }: {
+    modal: CreateOrEditOAuthProviderModal;
+    property: Exclude<keyof CreateOAuthProvider, ProviderBooleanProperties>;
+  },
+  event: any,
+) {
+  modal.setState(prevState => ({
+    changed: true,
+    provider: {
+      ...prevState.provider,
+      [property]: event.target.value,
+    },
+  }));
+}
+
+function handleBooleanPropertyChange({
+  modal,
+  property,
+}: {
+  modal: CreateOrEditOAuthProviderModal;
+  property: Extract<keyof ProviderToEdit, ProviderBooleanProperties>;
+}) {
+  modal.setState(prevState => ({
+    changed: true,
+    provider: {
+      ...prevState.provider,
+      [property]: !prevState.provider[property],
+    },
+  }));
+}
+
+function ProviderTextField({
+  id,
+  i18nKey,
+  type = "text",
+  value,
+  onInput,
+  required = true,
+  disabled,
+  placeholder,
+}: ProviderTextFieldProps) {
+  return (
+    <div className="col">
+      <label className="form-label" htmlFor={id}>
+        {I18NextService.i18n.t(i18nKey)}
+      </label>
+      <input
+        type={type}
+        id={id}
+        className="form-control"
+        value={value}
+        onInput={onInput}
+        required={required}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}
+
+function ProviderCheckboxField({
+  i18nKey,
+  id,
+  onInput,
+  checked,
+}: ProviderCheckboxFieldProps) {
+  return (
+    <div className="form-check form-check-inline m-2">
+      <input
+        id={id}
+        type="checkbox"
+        className="form-check-input"
+        checked={checked}
+        onInput={onInput}
+      />
+      <label htmlFor={id} className="form-check-label">
+        {I18NextService.i18n.t(i18nKey)}
+      </label>
+    </div>
+  );
+}
+
+@modalMixin
+export default class CreateOrEditOAuthProviderModal extends Component<
+  CreateOrEditOAuthProviderModalProps,
+  CreateOrEditOAuthProviderModalState
+> {
+  readonly modalDivRef: RefObject<HTMLDivElement>;
+  modal?: Modal;
+
+  state: CreateOrEditOAuthProviderModalState = {
+    changed: false,
+    provider: {},
+    loading: false,
+  };
+
+  constructor(props: CreateOrEditOAuthProviderModalProps, context: any) {
+    super(props, context);
+
+    this.modalDivRef = createRef();
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidUpdate(prevProps: Readonly<CreateOrEditOAuthProviderModalProps>) {
+    if (this.props.show && this.props.show !== prevProps.show) {
+      this.setState({ provider: this.props.data.provider ?? {} });
+    }
+  }
+
+  render(
+    { onClose, data }: CreateOrEditOAuthProviderModalProps,
+    { provider, changed, loading }: CreateOrEditOAuthProviderModalState,
+  ) {
+    return (
+      <div
+        className="modal fade"
+        id="create-or-edit-oauth-modal"
+        tabIndex={-1}
+        aria-hidden
+        aria-labelledby="#create-or-edit-oauth-modal-title"
+        data-bs-backdrop="static"
+        data-bs-keyboard="false"
+        ref={this.modalDivRef}
+      >
+        <div className="modal-dialog modal-fullscreen-sm-down">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h1
+                className="modal-title h4"
+                id="create-or-edit-oauth-modal-title"
+              >
+                {data.type === "edit"
+                  ? `Edit ${data.provider.display_name}`
+                  : "Add OAuth Provider"}
+              </h1>
+              <button
+                type="button"
+                className="btn-close"
+                aria-label={I18NextService.i18n.t("cancel")}
+                onClick={onClose}
+              />
+            </div>
+            <div className="modal-body p-2-!important">
+              <form
+                id={FORM_ID}
+                className="container"
+                onSubmit={this.handleSubmit}
+              >
+                <div className="row row-cols-1 mb-3 gy-2">
+                  <ProviderTextField
+                    id="display-name"
+                    i18nKey="oauth_display_name"
+                    value={provider?.display_name}
+                    onInput={linkEvent(
+                      { modal: this, property: "display_name" },
+                      handleTextPropertyChange,
+                    )}
+                  />
+                  <ProviderTextField
+                    id="issuer"
+                    i18nKey="oauth_issuer"
+                    value={provider?.issuer}
+                    onInput={linkEvent(
+                      { modal: this, property: "issuer" },
+                      handleTextPropertyChange,
+                    )}
+                    type="url"
+                    disabled={data.type === "edit"}
+                  />
+                  <ProviderTextField
+                    id="authorization-endpoint"
+                    i18nKey="oauth_authorization_endpoint"
+                    value={provider?.authorization_endpoint}
+                    onInput={linkEvent(
+                      { modal: this, property: "authorization_endpoint" },
+                      handleTextPropertyChange,
+                    )}
+                    type="url"
+                  />
+                  <ProviderTextField
+                    id="token-endpoint"
+                    i18nKey="oauth_token_endpoint"
+                    value={provider?.token_endpoint}
+                    onInput={linkEvent(
+                      { modal: this, property: "token_endpoint" },
+                      handleTextPropertyChange,
+                    )}
+                    type="url"
+                  />
+                  <ProviderTextField
+                    id="userinfo-endpoint"
+                    i18nKey="oauth_userinfo_endpoint"
+                    value={provider?.userinfo_endpoint}
+                    onInput={linkEvent(
+                      { modal: this, property: "userinfo_endpoint" },
+                      handleTextPropertyChange,
+                    )}
+                    type="url"
+                  />
+                  <ProviderTextField
+                    id="id-claim"
+                    i18nKey="oauth_id_claim"
+                    value={provider?.id_claim}
+                    onInput={linkEvent(
+                      { modal: this, property: "id_claim" },
+                      handleTextPropertyChange,
+                    )}
+                  />
+                  <ProviderTextField
+                    id="client-id"
+                    i18nKey="oauth_client_id"
+                    value={provider?.client_id}
+                    disabled={data.type === "edit"}
+                    onInput={linkEvent(
+                      { modal: this, property: "client_id" },
+                      handleTextPropertyChange,
+                    )}
+                  />
+                  <ProviderTextField
+                    id="client-secret"
+                    i18nKey="oauth_client_secret"
+                    onInput={linkEvent(
+                      { modal: this, property: "client_secret" },
+                      handleTextPropertyChange,
+                    )}
+                    type="password"
+                    placeholder={
+                      data.type === "edit"
+                        ? I18NextService.i18n.t(
+                            "cannot_view_secret_after_saving",
+                          )
+                        : undefined
+                    }
+                    required={data.type === "add"}
+                    value={provider.client_secret}
+                  />
+                  <ProviderTextField
+                    id="scopes"
+                    i18nKey="oauth_scopes"
+                    value={provider?.scopes}
+                    onInput={linkEvent(
+                      { modal: this, property: "scopes" },
+                      handleTextPropertyChange,
+                    )}
+                  />
+                </div>
+                <div className="row">
+                  <div className="col">
+                    <ProviderCheckboxField
+                      id="auto-verfiy-email"
+                      i18nKey="oauth_auto_verify_email"
+                      checked={provider?.auto_verify_email}
+                      onInput={linkEvent(
+                        {
+                          modal: this,
+                          property: "auto_verify_email",
+                        },
+                        handleBooleanPropertyChange,
+                      )}
+                    />
+                    <ProviderCheckboxField
+                      id="account-linking-enabled"
+                      i18nKey="oauth_account_linking_enabled"
+                      checked={provider?.account_linking_enabled}
+                      onInput={linkEvent(
+                        {
+                          modal: this,
+                          property: "account_linking_enabled",
+                        },
+                        handleBooleanPropertyChange,
+                      )}
+                    />
+                    <ProviderCheckboxField
+                      id="oauth-enabled"
+                      i18nKey="oauth_enabled"
+                      checked={provider?.enabled ?? true}
+                      onInput={linkEvent(
+                        {
+                          modal: this,
+                          property: "enabled",
+                        },
+                        handleBooleanPropertyChange,
+                      )}
+                    />
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-danger"
+                onClick={onClose}
+              >
+                {I18NextService.i18n.t("cancel")}
+              </button>
+              <button
+                type="submit"
+                form={FORM_ID}
+                className="btn btn-success"
+                disabled={!changed || loading}
+              >
+                {I18NextService.i18n.t(data.type === "edit" ? "edit" : "add")}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  async handleSubmit(event) {
+    event.preventDefault();
+
+    this.setState({ loading: true });
+    await this.props.onSubmit(this.state.provider as CreateOAuthProvider);
+    this.setState({ loading: false, changed: false, provider: {} });
+  }
+}

src/shared/components/common/modal/display-modal.tsx

@@ -0,0 +1,77 @@
+import {
+  Component,
+  InfernoNode,
+  MouseEventHandler,
+  RefObject,
+  createRef,
+} from "inferno";
+import type { Modal } from "bootstrap";
+import { Spinner } from "../icon";
+import { LoadingEllipses } from "../loading-ellipses";
+import { modalMixin } from "../../mixins/modal-mixin";
+
+interface DisplayModalProps {
+  children: InfernoNode;
+  loadingMessage?: string;
+  title: string;
+  onClose: MouseEventHandler<HTMLButtonElement>;
+  show: boolean;
+  loading?: boolean;
+}
+
+@modalMixin
+export default class DisplayModal extends Component<DisplayModalProps, any> {
+  readonly modalDivRef: RefObject<HTMLDivElement>;
+  modal?: Modal;
+
+  constructor(props: DisplayModalProps, context: any) {
+    super(props, context);
+
+    this.modalDivRef = createRef();
+  }
+
+  render() {
+    const { children, loadingMessage, title, onClose, loading } = this.props;
+
+    return (
+      <div
+        className="modal fade"
+        id="display-modal"
+        tabIndex={-1}
+        aria-hidden
+        aria-labelledby="#displayModalTitle"
+        data-bs-backdrop="static"
+        ref={this.modalDivRef}
+      >
+        <div className="modal-dialog modal-fullscreen-sm-down">
+          <div className="modal-content">
+            <header className="modal-header">
+              <h3 className="modal-title" id="displayModalTitle">
+                {title}
+              </h3>
+              <button
+                type="button"
+                className="btn-close"
+                aria-label="Close"
+                onClick={onClose}
+              />
+            </header>
+            <div className="modal-body">
+              {loading ? (
+                <div class="text-center align-middle text-body">
+                  <Spinner large />
+                  <div>
+                    {loadingMessage}
+                    <LoadingEllipses />
+                  </div>
+                </div>
+              ) : (
+                children
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/shared/components/common/modal/mod-action-form-modal.tsx

@@ -1,15 +1,22 @@
-import { Component, RefObject, createRef, linkEvent } from "inferno";
+import {
-import { I18NextService } from "../../services/I18NextService";
+  Component,
-import { PurgeWarning, Spinner } from "./icon";
+  InfernoNode,
+  RefObject,
+  createRef,
+  linkEvent,
+} from "inferno";
+import { I18NextService } from "../../../services/I18NextService";
+import { PurgeWarning, Spinner } from "../icon";
 import { getApubName, randomStr } from "@utils/helpers";
 import type { Modal } from "bootstrap";
 import classNames from "classnames";
 import { Community, Person } from "lemmy-js-client";
-import { LoadingEllipses } from "./loading-ellipses";
+import { LoadingEllipses } from "../loading-ellipses";
+import { modalMixin } from "../../mixins/modal-mixin";
 
 export interface BanUpdateForm {
   reason?: string;
-  shouldRemove?: boolean;
+  shouldRemoveOrRestoreData?: boolean;
   daysUntilExpires?: number;
 }
 
@@ -24,7 +31,7 @@ interface ModActionFormModalPropsCommunityBan {
   modActionType: "community-ban";
   onSubmit: (form: BanUpdateForm) => Promise<void>;
   creator: Person;
-  community: Community;
+  community?: Community;
   isBanned: boolean;
 }
 
@@ -56,13 +63,13 @@ type ModActionFormModalProps = (
   | ModActionFormModalPropsRest
   | ModActionFormModalPropsPurgePerson
   | ModActionFormModalPropsRemove
-) & { onCancel: () => void; show: boolean };
+) & { onCancel: () => void; show: boolean; children?: InfernoNode };
 
 interface ModActionFormFormState {
   loading: boolean;
   reason: string;
   daysUntilExpire?: number;
-  shouldRemoveData?: boolean;
+  shouldRemoveOrRestoreData?: boolean;
   shouldPermaBan?: boolean;
 }
 
@@ -77,7 +84,7 @@ function handleExpiryChange(i: ModActionFormModal, event: any) {
 function handleToggleRemove(i: ModActionFormModal) {
   i.setState(prev => ({
     ...prev,
-    shouldRemoveData: !prev.shouldRemoveData,
+    shouldRemoveOrRestoreData: !prev.shouldRemoveOrRestoreData,
   }));
 }
 
@@ -97,7 +104,7 @@ async function handleSubmit(i: ModActionFormModal, event: any) {
     await i.props.onSubmit({
       reason: i.state.reason,
       daysUntilExpires: i.state.daysUntilExpire!,
-      shouldRemove: i.state.shouldRemoveData!,
+      shouldRemoveOrRestoreData: i.state.shouldRemoveOrRestoreData!,
     } as BanUpdateForm & string); // Need to & string to handle type weirdness
   } else {
     await i.props.onSubmit(i.state.reason);
@@ -109,13 +116,14 @@ async function handleSubmit(i: ModActionFormModal, event: any) {
   });
 }
 
+@modalMixin
 export default class ModActionFormModal extends Component<
   ModActionFormModalProps,
   ModActionFormFormState
 > {
-  private modalDivRef: RefObject<HTMLDivElement>;
+  modalDivRef: RefObject<HTMLDivElement>;
   private reasonRef: RefObject<HTMLInputElement>;
-  modal: Modal;
+  modal?: Modal;
   state: ModActionFormFormState = {
     loading: false,
     reason: "",
@@ -127,42 +135,7 @@ export default class ModActionFormModal extends Component<
     this.reasonRef = createRef();
 
     if (this.isBanModal) {
-      this.state.shouldRemoveData = false;
+      this.state.shouldRemoveOrRestoreData = false;
-    }
-
-    this.handleShow = this.handleShow.bind(this);
-  }
-
-  async componentDidMount() {
-    this.modalDivRef.current?.addEventListener(
-      "shown.bs.modal",
-      this.handleShow,
-    );
-
-    const Modal = (await import("bootstrap/js/dist/modal")).default;
-    this.modal = new Modal(this.modalDivRef.current!);
-
-    if (this.props.show) {
-      this.modal.show();
-    }
-  }
-
-  componentWillUnmount() {
-    this.modalDivRef.current?.removeEventListener(
-      "shown.bs.modal",
-      this.handleShow,
-    );
-
-    this.modal.dispose();
-  }
-
-  componentDidUpdate({ show: prevShow }: ModActionFormModalProps) {
-    if (!!prevShow !== !!this.props.show) {
-      if (this.props.show) {
-        this.modal.show();
-      } else {
-        this.modal.hide();
-      }
     }
   }
 
@@ -171,7 +144,7 @@ export default class ModActionFormModal extends Component<
       loading,
       reason,
       daysUntilExpire,
-      shouldRemoveData,
+      shouldRemoveOrRestoreData,
       shouldPermaBan,
     } = this.state;
     const reasonId = `mod-form-reason-${randomStr()}`;
@@ -276,7 +249,7 @@ export default class ModActionFormModal extends Component<
                             <input
                               className="form-check-input user-select-none"
                               type="checkbox"
-                              checked={shouldRemoveData}
+                              checked={shouldRemoveOrRestoreData}
                               onChange={linkEvent(this, handleToggleRemove)}
                             />
                             {I18NextService.i18n.t("remove_content")}
@@ -355,7 +328,12 @@ export default class ModActionFormModal extends Component<
             : "ban_from_community_with_name",
           {
             user: getApubName(this.props.creator),
-            community: getApubName(this.props.community),
+            community: getApubName(
+              this.props.community ?? {
+                actor_id: "",
+                name: "",
+              },
+            ),
           },
         );
       }

src/shared/components/common/modal/totp-modal.tsx

@@ -1,21 +1,24 @@
 import {
   Component,
+  InfernoNode,
   MouseEventHandler,
   RefObject,
   createRef,
   linkEvent,
 } from "inferno";
-import { I18NextService } from "../../services";
+import { I18NextService } from "../../../services";
-import { toast } from "../../toast";
+import { toast } from "../../../toast";
 import type { Modal } from "bootstrap";
+import { modalMixin } from "../../mixins/modal-mixin";
 
 interface TotpModalProps {
+  children?: InfernoNode;
   /**Takes totp as param, returns whether submit was successful*/
   onSubmit: (totp: string) => Promise<boolean>;
   onClose: MouseEventHandler;
   type: "login" | "remove" | "generate";
   secretUrl?: string;
-  show?: boolean;
+  show: boolean;
 }
 
 interface TotpModalState {
@@ -68,13 +71,14 @@ function handlePaste(i: TotpModal, event: any) {
   }
 }
 
+@modalMixin
 export default class TotpModal extends Component<
   TotpModalProps,
   TotpModalState
 > {
   readonly modalDivRef: RefObject<HTMLDivElement>;
   readonly inputRef: RefObject<HTMLInputElement>;
-  modal: Modal;
+  modal?: Modal;
   state: TotpModalState = {
     totp: "",
     pending: false,
@@ -85,52 +89,6 @@ export default class TotpModal extends Component<
 
     this.modalDivRef = createRef();
     this.inputRef = createRef();
-
-    this.clearTotp = this.clearTotp.bind(this);
-    this.handleShow = this.handleShow.bind(this);
-  }
-
-  async componentDidMount() {
-    this.modalDivRef.current?.addEventListener(
-      "shown.bs.modal",
-      this.handleShow,
-    );
-
-    this.modalDivRef.current?.addEventListener(
-      "hidden.bs.modal",
-      this.clearTotp,
-    );
-
-    const Modal = (await import("bootstrap/js/dist/modal")).default;
-    this.modal = new Modal(this.modalDivRef.current!);
-
-    if (this.props.show) {
-      this.modal.show();
-    }
-  }
-
-  componentWillUnmount() {
-    this.modalDivRef.current?.removeEventListener(
-      "shown.bs.modal",
-      this.handleShow,
-    );
-
-    this.modalDivRef.current?.removeEventListener(
-      "hidden.bs.modal",
-      this.clearTotp,
-    );
-
-    this.modal.dispose();
-  }
-
-  componentDidUpdate({ show: prevShow }: TotpModalProps) {
-    if (!!prevShow !== !!this.props.show) {
-      if (this.props.show) {
-        this.modal.show();
-      } else {
-        this.modal.hide();
-      }
-    }
   }
 
   render() {
@@ -243,7 +201,7 @@ export default class TotpModal extends Component<
     this.inputRef.current?.focus();
 
     if (this.props.type === "generate") {
-      const { getSVG } = await import("@shortcm/qr-image/lib/svg");
+      const { getSVG } = await import("qreator/lib/svg");
 
       this.setState({
         qrCode: URL.createObjectURL(
@@ -254,4 +212,8 @@ export default class TotpModal extends Component<
       });
     }
   }
+
+  handleHide() {
+    this.clearTotp();
+  }
 }

src/shared/components/common/modal/view-votes-modal.tsx

@@ -1,8 +1,14 @@
-import { Component, RefObject, createRef, linkEvent } from "inferno";
+import {
-import { I18NextService } from "../../services";
+  Component,
+  InfernoNode,
+  RefObject,
+  createRef,
+  linkEvent,
+} from "inferno";
+import { I18NextService } from "../../../services";
 import type { Modal } from "bootstrap";
-import { Icon, Spinner } from "./icon";
+import { Icon, Spinner } from "../icon";
-import { Paginator } from "../common/paginator";
+import { Paginator } from "../paginator";
 import {
   ListCommentLikesResponse,
   ListPostLikesResponse,
@@ -13,11 +19,15 @@ import {
   HttpService,
   LOADING_REQUEST,
   RequestState,
-} from "../../services/HttpService";
+} from "../../../services/HttpService";
-import { fetchLimit } from "../../config";
+import { fetchLimit } from "../../../config";
-import { PersonListing } from "../person/person-listing";
+import { PersonListing } from "../../person/person-listing";
+import { modalMixin } from "../../mixins/modal-mixin";
+import { UserBadges } from "../user-badges";
+import { isBrowser } from "@utils/browser";
 
 interface ViewVotesModalProps {
+  children?: InfernoNode;
   type: "comment" | "post";
   id: number;
   show: boolean;
@@ -39,6 +49,12 @@ function voteViewTable(votes: VoteView[]) {
             <tr key={v.creator.id}>
               <td className="text-start">
                 <PersonListing person={v.creator} useApubName />
+                <UserBadges
+                  classNames="ms-1"
+                  isBot={v.creator.bot_account}
+                  isDeleted={v.creator.deleted}
+                  isBanned={v.creator.banned || v.creator_banned_from_community}
+                />
               </td>
               <td className="text-end">{scoreToIcon(v.score)}</td>
             </tr>
@@ -57,13 +73,14 @@ function scoreToIcon(score: number) {
   );
 }
 
+@modalMixin
 export default class ViewVotesModal extends Component<
   ViewVotesModalProps,
   ViewVotesModalState
 > {
   readonly modalDivRef: RefObject<HTMLDivElement>;
   readonly yesButtonRef: RefObject<HTMLButtonElement>;
-  modal: Modal;
+  modal?: Modal;
   state: ViewVotesModalState = {
     postLikesRes: EMPTY_REQUEST,
     commentLikesRes: EMPTY_REQUEST,
@@ -76,42 +93,20 @@ export default class ViewVotesModal extends Component<
     this.modalDivRef = createRef();
     this.yesButtonRef = createRef();
 
-    this.handleShow = this.handleShow.bind(this);
     this.handleDismiss = this.handleDismiss.bind(this);
     this.handlePageChange = this.handlePageChange.bind(this);
   }
 
-  async componentDidMount() {
+  async componentWillMount() {
-    this.modalDivRef.current?.addEventListener(
+    if (this.props.show && isBrowser()) {
-      "shown.bs.modal",
-      this.handleShow,
-    );
-
-    const Modal = (await import("bootstrap/js/dist/modal")).default;
-    this.modal = new Modal(this.modalDivRef.current!);
-
-    if (this.props.show) {
-      this.modal.show();
       await this.refetch();
     }
   }
 
-  componentWillUnmount() {
+  async componentWillReceiveProps({ show: nextShow }: ViewVotesModalProps) {
-    this.modalDivRef.current?.removeEventListener(
+    if (nextShow !== this.props.show) {
-      "shown.bs.modal",
+      if (nextShow) {
-      this.handleShow,
-    );
-
-    this.modal.dispose();
-  }
-
-  async componentDidUpdate({ show: prevShow }: ViewVotesModalProps) {
-    if (!!prevShow !== !!this.props.show) {
-      if (this.props.show) {
-        this.modal.show();
         await this.refetch();
-      } else {
-        this.modal.hide();
       }
     }
   }
@@ -191,7 +186,7 @@ export default class ViewVotesModal extends Component<
 
   handleDismiss() {
     this.props.onCancel();
-    this.modal.hide();
+    this.modal?.hide();
   }
 
   async handlePageChange(page: number) {

src/shared/components/common/moment-time.tsx

@@ -3,6 +3,7 @@ import { format, parseISO } from "date-fns";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface MomentTimeProps {
   published: string;
@@ -16,6 +17,7 @@ function formatDate(input: string) {
   return format(parsed, "PPPPpppp");
 }
 
+@tippyMixin
 export class MomentTime extends Component<MomentTimeProps, any> {
   constructor(props: any, context: any) {
     super(props, context);

src/shared/components/common/paginator.tsx

@@ -5,6 +5,7 @@ interface PaginatorProps {
   page: number;
   onChange(val: number): any;
   nextDisabled: boolean;
+  disabled?: boolean;
 }
 
 export class Paginator extends Component<PaginatorProps, any> {
@@ -18,6 +19,7 @@ export class Paginator extends Component<PaginatorProps, any> {
           <button
             className="btn btn-secondary me-2"
             onClick={linkEvent(this, this.handlePrev)}
+            disabled={this.props.disabled}
           >
             {I18NextService.i18n.t("prev")}
           </button>
@@ -26,6 +28,7 @@ export class Paginator extends Component<PaginatorProps, any> {
           <button
             className="btn btn-secondary"
             onClick={linkEvent(this, this.handleNext)}
+            disabled={this.props.disabled}
           >
             {I18NextService.i18n.t("next")}
           </button>

src/shared/components/common/password-input.tsx

@@ -5,6 +5,7 @@ import { Component, FormEventHandler, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface PasswordInputProps {
   id: string;
@@ -15,6 +16,7 @@ interface PasswordInputProps {
   label?: string | null;
   showForgotLink?: boolean;
   isNew?: boolean;
+  required?: boolean;
 }
 
 interface PasswordInputState {
@@ -55,6 +57,7 @@ function handleToggleShow(i: PasswordInput) {
   }));
 }
 
+@tippyMixin
 class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
   state: PasswordInputState = {
     show: false,
@@ -75,6 +78,7 @@ class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
         label,
         showForgotLink,
         isNew,
+        required,
       },
       state: { show },
     } = this;
@@ -96,9 +100,11 @@ class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
                 autoComplete={isNew ? "new-password" : "current-password"}
                 onInput={onInput}
                 value={value}
-                required
+                required={required !== false}
-                maxLength={60}
+                pattern=".+"
-                minLength={10}
+                title={I18NextService.i18n.t("invalid_password")}
+                minLength={isNew ? 10 : undefined}
+                maxLength={isNew ? 60 : undefined}
               />
               <button
                 className="btn btn-outline-dark"

src/shared/components/common/pictrs-image.tsx

@@ -1,7 +1,10 @@
 import classNames from "classnames";
-import { Component } from "inferno";
+import { Component, linkEvent } from "inferno";
 
 import { UserService } from "../../services";
+import { setIsoData } from "@utils/app";
+import { IsoData } from "../../interfaces";
+import { getStaticDir } from "@utils/env";
 
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
@@ -18,23 +21,42 @@ interface PictrsImageProps {
   cardTop?: boolean;
 }
 
-export class PictrsImage extends Component<PictrsImageProps, any> {
+interface PictrsImageState {
-  constructor(props: any, context: any) {
+  src: string;
-    super(props, context);
+}
+
+function handleImgLoadError(i: PictrsImage) {
+  i.setState({
+    src: `${getStaticDir()}/assets/images/broken-image-fallback.png`,
+  });
+}
+
+export class PictrsImage extends Component<PictrsImageProps, PictrsImageState> {
+  private readonly isoData: IsoData = setIsoData(this.context);
+
+  state: PictrsImageState = {
+    src: this.props.src,
+  };
+
+  componentDidUpdate(prevProps: PictrsImageProps) {
+    if (prevProps.src !== this.props.src) {
+      this.setState({ src: this.props.src });
+    }
   }
 
   render() {
-    const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
+    const { icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
       this.props;
-    let user_blur_nsfw = true;
-    if (UserService.Instance.myUserInfo) {
-      user_blur_nsfw =
-        UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw;
-    }
 
-    const blur_image = nsfw && user_blur_nsfw;
+    const { src } = this.state;
+
+    const blurImage =
+      nsfw &&
+      (UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw ??
+        true);
 
     return (
+      !this.isoData.showAdultConsentModal && (
         <picture>
           <source srcSet={this.src("webp")} type="image/webp" />
           <source srcSet={src} />
@@ -52,15 +74,17 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
               "img-expanded slight-radius": !(thumbnail || icon),
               "img-blur": thumbnail && nsfw,
               "object-fit-cover img-icon me-1": icon,
-            "img-blur-icon": icon && blur_image,
+              "img-blur-icon": icon && blurImage,
-            "img-blur-thumb": thumbnail && blur_image,
+              "img-blur-thumb": thumbnail && blurImage,
               "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
                 iconOverlay,
               "avatar-pushup": pushup,
               "card-img-top": cardTop,
             })}
+            onError={linkEvent(this, handleImgLoadError)}
           />
         </picture>
+      )
     );
   }
 
@@ -68,28 +92,31 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
     // sample url:
     // http://localhost:8535/pictrs/image/file.png?thumbnail=256&format=jpg
 
-    const split = this.props.src.split("/pictrs/image/");
+    let url: URL | undefined;
-
+    try {
-    // If theres not multiple, then its not a pictrs image
+      url = new URL(this.state.src);
-    if (split.length === 1) {
+    } catch {
-      return this.props.src;
+      return this.state.src;
     }
 
-    const host = split[0];
+    // If there's no match, then it's not a pictrs image
-    const path = split[1];
+    if (!url.pathname.includes("/pictrs/image/")) {
+      return this.state.src;
+    }
 
-    const params = { format };
+    // Keeps original search params. Could probably do `url.search = ""` here.
+
+    url.searchParams.set("format", format);
 
     if (this.props.thumbnail) {
-      params["thumbnail"] = thumbnailSize;
+      url.searchParams.set("thumbnail", thumbnailSize.toString());
     } else if (this.props.icon) {
-      params["thumbnail"] = iconThumbnailSize;
+      url.searchParams.set("thumbnail", iconThumbnailSize.toString());
+    } else {
+      url.searchParams.delete("thumbnail");
     }
 
-    const paramsStr = new URLSearchParams(params).toString();
+    return url.href;
-    const out = `${host}/pictrs/image/${path}?${paramsStr}`;
-
-    return out;
   }
 
   alt(): string {

src/shared/components/common/post-hidden-select.tsx

@@ -0,0 +1,68 @@
+import { StringBoolean } from "@utils/types";
+import classNames from "classnames";
+import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
+import { Component, linkEvent } from "inferno";
+import { I18NextService } from "../../services/I18NextService";
+
+interface PostHiddenSelectProps {
+  showHidden?: StringBoolean;
+  onShowHiddenChange: (hidden?: StringBoolean) => void;
+}
+
+function handleShowHiddenChange(i: PostHiddenSelect, event: any) {
+  i.props.onShowHiddenChange(event.target.value);
+}
+
+@tippyMixin
+export default class PostHiddenSelect extends Component<
+  PostHiddenSelectProps,
+  never
+> {
+  render() {
+    const { showHidden } = this.props;
+
+    return (
+      <div
+        className="show-hidden-select btn-group btn-group-toggle flex-wrap"
+        role="group"
+      >
+        <label
+          htmlFor="show-hidden"
+          className={classNames("pointer btn btn-outline-secondary", {
+            active: showHidden === "true",
+          })}
+          data-tippy-content={I18NextService.i18n.t("show_hidden_posts")}
+        >
+          <Icon icon="eye" inline />
+          <input
+            id="show-hidden"
+            type="radio"
+            className="btn-check"
+            value="true"
+            checked={showHidden === "true"}
+            onChange={linkEvent(this, handleShowHiddenChange)}
+          />
+        </label>
+
+        <label
+          htmlFor="hide-hidden"
+          className={classNames("pointer btn btn-outline-secondary", {
+            active: showHidden !== "true",
+          })}
+          data-tippy-content={I18NextService.i18n.t("hide_hidden_posts")}
+        >
+          <Icon icon="eye-slash" inline />
+          <input
+            id="hide-hidden"
+            type="radio"
+            className="btn-check"
+            value="false"
+            checked={showHidden !== "true"}
+            onChange={linkEvent(this, handleShowHiddenChange)}
+          />
+        </label>
+      </div>
+    );
+  }
+}

src/shared/components/common/registration-application.tsx

@@ -68,7 +68,20 @@ export class RegistrationApplication extends Component<
           <MomentTime showAgo published={ra.published} />
         </div>
         <div>{I18NextService.i18n.t("answer")}:</div>
-        <div className="md-div" dangerouslySetInnerHTML={mdToHtml(ra.answer)} />
+        <div
+          className="md-div"
+          dangerouslySetInnerHTML={mdToHtml(ra.answer, () =>
+            this.forceUpdate(),
+          )}
+        />
+        {a.creator_local_user.email && (
+          <div>
+            {I18NextService.i18n.t("email")}:&nbsp;
+            <a href={`mailto:${a.creator_local_user.email}`}>
+              {a.creator_local_user.email}
+            </a>
+          </div>
+        )}
 
         {a.admin && (
           <div>
@@ -88,7 +101,9 @@ export class RegistrationApplication extends Component<
                     {I18NextService.i18n.t("deny_reason")}:{" "}
                     <div
                       className="md-div d-inline-flex"
-                      dangerouslySetInnerHTML={mdToHtml(ra.deny_reason)}
+                      dangerouslySetInnerHTML={mdToHtml(ra.deny_reason, () =>
+                        this.forceUpdate(),
+                      )}
                     />
                   </div>
                 )}

src/shared/components/common/searchable-select.tsx

@@ -39,7 +39,7 @@ function handleSearch(i: SearchableSelect, e: ChangeEvent<HTMLInputElement>) {
 }
 
 function focusSearch(i: SearchableSelect) {
-  if (i.toggleButtonRef.current?.ariaExpanded !== "true") {
+  if (i.toggleButtonRef.current?.ariaExpanded === "true") {
     i.searchInputRef.current?.focus();
 
     if (i.props.onSearch) {

src/shared/components/common/sort-select.tsx

@@ -1,19 +1,19 @@
 import { randomStr } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
-import { SortType } from "lemmy-js-client";
+import { PostSortType } from "lemmy-js-client";
 import { relTags, sortingHelpUrl } from "../../config";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
 
 interface SortSelectProps {
-  sort: SortType;
+  sort: PostSortType;
-  onChange(val: SortType): void;
+  onChange(val: PostSortType): void;
   hideHot?: boolean;
   hideMostComments?: boolean;
 }
 
 interface SortSelectState {
-  sort: SortType;
+  sort: PostSortType;
 }
 
 export class SortSelect extends Component<SortSelectProps, SortSelectState> {
@@ -47,55 +47,53 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
             {I18NextService.i18n.t("sort_type")}
           </option>
           {!this.props.hideHot && [
-            <option key={"Hot"} value={"Hot"}>
+            <option key="Hot" value="Hot">
               {I18NextService.i18n.t("hot")}
             </option>,
-            <option key={"Active"} value={"Active"}>
+            <option key="Active" value="Active">
               {I18NextService.i18n.t("active")}
             </option>,
-            <option key={"Scaled"} value={"Scaled"}>
+            <option key="Scaled" value="Scaled">
               {I18NextService.i18n.t("scaled")}
             </option>,
           ]}
-          <option value={"Controversial"}>
+          <option value="Controversial">
             {I18NextService.i18n.t("controversial")}
           </option>
-          <option value={"New"}>{I18NextService.i18n.t("new")}</option>
+          <option value="New">{I18NextService.i18n.t("new")}</option>
-          <option value={"Old"}>{I18NextService.i18n.t("old")}</option>
+          <option value="Old">{I18NextService.i18n.t("old")}</option>
           {!this.props.hideMostComments && [
-            <option key={"MostComments"} value={"MostComments"}>
+            <option key="MostComments" value="MostComments">
               {I18NextService.i18n.t("most_comments")}
             </option>,
-            <option key={"NewComments"} value={"NewComments"}>
+            <option key="NewComments" value="NewComments">
               {I18NextService.i18n.t("new_comments")}
             </option>,
           ]}
           <option disabled aria-hidden="true">
             ─────
           </option>
-          <option value={"TopHour"}>{I18NextService.i18n.t("top_hour")}</option>
+          <option value="TopHour">{I18NextService.i18n.t("top_hour")}</option>
-          <option value={"TopSixHour"}>
+          <option value="TopSixHour">
             {I18NextService.i18n.t("top_six_hours")}
           </option>
-          <option value={"TopTwelveHour"}>
+          <option value="TopTwelveHour">
             {I18NextService.i18n.t("top_twelve_hours")}
           </option>
-          <option value={"TopDay"}>{I18NextService.i18n.t("top_day")}</option>
+          <option value="TopDay">{I18NextService.i18n.t("top_day")}</option>
-          <option value={"TopWeek"}>{I18NextService.i18n.t("top_week")}</option>
+          <option value="TopWeek">{I18NextService.i18n.t("top_week")}</option>
-          <option value={"TopMonth"}>
+          <option value="TopMonth">{I18NextService.i18n.t("top_month")}</option>
-            {I18NextService.i18n.t("top_month")}
+          <option value="TopThreeMonths">
-          </option>
-          <option value={"TopThreeMonths"}>
             {I18NextService.i18n.t("top_three_months")}
           </option>
-          <option value={"TopSixMonths"}>
+          <option value="TopSixMonths">
             {I18NextService.i18n.t("top_six_months")}
           </option>
-          <option value={"TopNineMonths"}>
+          <option value="TopNineMonths">
             {I18NextService.i18n.t("top_nine_months")}
           </option>
-          <option value={"TopYear"}>{I18NextService.i18n.t("top_year")}</option>
+          <option value="TopYear">{I18NextService.i18n.t("top_year")}</option>
-          <option value={"TopAll"}>{I18NextService.i18n.t("top_all")}</option>
+          <option value="TopAll">{I18NextService.i18n.t("top_all")}</option>
         </select>
         <a
           className="sort-select-icon text-muted"

src/shared/components/common/subscribe-button.tsx

@@ -1,12 +1,13 @@
-import { validInstanceTLD } from "@utils/helpers";
+import { getQueryString, validInstanceTLD } from "@utils/helpers";
 import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
-import { Component, MouseEventHandler, linkEvent } from "inferno";
+import { Component, MouseEventHandler, createRef, linkEvent } from "inferno";
 import { CommunityView } from "lemmy-js-client";
 import { I18NextService, UserService } from "../../services";
 import { VERSION } from "../../version";
 import { Icon, Spinner } from "./icon";
 import { toast } from "../../toast";
+import { modalMixin } from "../mixins/modal-mixin";
 
 interface SubscribeButtonProps {
   communityView: CommunityView;
@@ -93,6 +94,7 @@ export function SubscribeButton({
 
 interface RemoteFetchModalProps {
   communityActorId: string;
+  show?: boolean;
 }
 
 interface RemoteFetchModalState {
@@ -103,10 +105,6 @@ function handleInput(i: RemoteFetchModal, event: any) {
   i.setState({ instanceText: event.target.value });
 }
 
-function focusInput() {
-  document.getElementById("remoteFetchInstance")?.focus();
-}
-
 function submitRemoteFollow(
   { state: { instanceText }, props: { communityActorId } }: RemoteFetchModal,
   event: Event,
@@ -134,11 +132,12 @@ function submitRemoteFollow(
     instanceText = `http${VERSION !== "dev" ? "s" : ""}://${instanceText}`;
   }
 
-  window.location.href = `${instanceText}/activitypub/externalInteraction?uri=${encodeURIComponent(
+  window.location.href = `${instanceText}/activitypub/externalInteraction${getQueryString(
-    communityActorId,
+    { uri: communityActorId },
   )}`;
 }
 
+@modalMixin
 class RemoteFetchModal extends Component<
   RemoteFetchModalProps,
   RemoteFetchModalState
@@ -147,20 +146,15 @@ class RemoteFetchModal extends Component<
     instanceText: "",
   };
 
+  modalDivRef = createRef<HTMLDivElement>();
+  inputRef = createRef<HTMLInputElement>();
+
   constructor(props: any, context: any) {
     super(props, context);
   }
 
-  componentDidMount() {
+  handleShow() {
-    document
+    this.inputRef.current?.focus();
-      .getElementById("remoteFetchModal")
-      ?.addEventListener("shown.bs.modal", focusInput);
-  }
-
-  componentWillUnmount(): void {
-    document
-      .getElementById("remoteFetchModal")
-      ?.removeEventListener("shown.bs.modal", focusInput);
   }
 
   render() {
@@ -171,6 +165,7 @@ class RemoteFetchModal extends Component<
         tabIndex={-1}
         aria-hidden
         aria-labelledby="#remoteFetchModalTitle"
+        ref={this.modalDivRef}
       >
         <div className="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
           <div className="modal-content">
@@ -203,6 +198,7 @@ class RemoteFetchModal extends Component<
                 required
                 enterKeyHint="go"
                 inputMode="url"
+                ref={this.inputRef}
               />
             </form>
             <footer className="modal-footer">

src/shared/components/common/tabs.tsx

@@ -20,7 +20,7 @@ function handleSwitchTab({ ctx, tab }: { ctx: Tabs; tab: string }) {
 }
 
 export default class Tabs extends Component<TabsProps, TabsState> {
-  constructor(props: TabsProps, context) {
+  constructor(props: TabsProps, context: any) {
     super(props, context);
 
     this.state = {

src/shared/components/common/url-list-textarea.tsx

@@ -0,0 +1,83 @@
+import { linkEvent, Component } from "inferno";
+import { I18NextService } from "../../services/I18NextService";
+
+interface UrlListTextareaProps {
+  urls: string[];
+  onUpdate(urls: string[]): void;
+}
+
+interface UrlListTextareaState {
+  text: string;
+}
+
+function handleTextChange(i: UrlListTextarea, event: any) {
+  i.setState({ text: event.target.value });
+}
+
+const URL_SCHEME = "https://";
+
+function processUrl(str: string) {
+  return new URL(str).toString().replace(URL_SCHEME, "");
+}
+
+function handleTextBlur(i: UrlListTextarea, event: any) {
+  const inputValue: string = event.currentTarget?.value ?? "";
+
+  const intermediateText = inputValue.replace(/\s+/g, "\n");
+  const newUrls: string[] = [];
+
+  for (const str of intermediateText.split("\n")) {
+    let url: string;
+
+    try {
+      url = processUrl(str);
+    } catch {
+      try {
+        url = processUrl(URL_SCHEME + str);
+      } catch {
+        continue;
+      }
+    }
+
+    if (newUrls.every(u => u !== url)) {
+      newUrls.push(url);
+    }
+  }
+
+  i.setState({ text: newUrls.join("\n") });
+  i.props.onUpdate(newUrls);
+}
+
+export default class UrlListTextarea extends Component<
+  UrlListTextareaProps,
+  UrlListTextareaState
+> {
+  state: UrlListTextareaState = {
+    text: this.props.urls.join("\n"),
+  };
+
+  render() {
+    return (
+      <div className="mb-3 row">
+        <label
+          className="col-12 col-form-label"
+          htmlFor="create-site-block-urls"
+        >
+          {I18NextService.i18n.t("block_urls")}
+        </label>
+
+        <div className="col-12">
+          <textarea
+            id="create-site-block-urls"
+            className="form-control"
+            placeholder={I18NextService.i18n.t("block_urls_placeholder")}
+            value={this.state.text}
+            onInput={linkEvent(this, handleTextChange)}
+            onBlur={linkEvent(this, handleTextBlur)}
+            rows={4}
+          />
+        </div>
+      </div>
+    );
+  }
+}

src/shared/components/common/user-badges.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface UserBadgesProps {
   isBanned?: boolean;
@@ -12,7 +13,7 @@ interface UserBadgesProps {
   classNames?: string;
 }
 
-export function getRoleLabelPill({
+function getRoleLabelPill({
   label,
   tooltip,
   classes,
@@ -34,6 +35,7 @@ export function getRoleLabelPill({
   );
 }
 
+@tippyMixin
 export class UserBadges extends Component<UserBadgesProps> {
   render() {
     return (

src/shared/components/common/vote-buttons.tsx

@@ -1,16 +1,18 @@
-import { newVote, showScores } from "@utils/app";
+import { calculateUpvotePct, newVote, showScores } from "@utils/app";
 import { numToSI } from "@utils/helpers";
-import classNames from "classnames";
+import { Component, InfernoNode, linkEvent } from "inferno";
-import { Component, linkEvent } from "inferno";
 import {
   CommentAggregates,
   CreateCommentLike,
   CreatePostLike,
+  LocalUserVoteDisplayMode,
   PostAggregates,
 } from "lemmy-js-client";
 import { VoteContentType, VoteType } from "../../interfaces";
 import { I18NextService, UserService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
+import classNames from "classnames";
 
 interface VoteButtonsProps {
   voteContentType: VoteContentType;
@@ -18,7 +20,8 @@ interface VoteButtonsProps {
   onVote: (i: CreateCommentLike | CreatePostLike) => void;
   enableDownvotes?: boolean;
   counts: CommentAggregates | PostAggregates;
-  my_vote?: number;
+  voteDisplayMode: LocalUserVoteDisplayMode;
+  myVote?: number;
 }
 
 interface VoteButtonsState {
@@ -26,62 +29,83 @@ interface VoteButtonsState {
   downvoteLoading: boolean;
 }
 
-const tippy = (counts: CommentAggregates | PostAggregates): string => {
+function tippy(
-  const points = I18NextService.i18n.t("number_of_points", {
+  voteDisplayMode: LocalUserVoteDisplayMode,
+  counts: CommentAggregates | PostAggregates,
+): string {
+  const scoreStr =
+    voteDisplayMode.score &&
+    I18NextService.i18n.t("number_of_points", {
       count: Number(counts.score),
       formattedCount: Number(counts.score),
     });
 
-  const upvotes = I18NextService.i18n.t("number_of_upvotes", {
+  const pct = calculateUpvotePct(counts.upvotes, counts.downvotes);
+
+  const upvotePctStr =
+    voteDisplayMode.upvote_percentage &&
+    I18NextService.i18n.t("upvote_percentage", {
+      count: Number(pct),
+      formattedCount: Number(pct),
+    });
+
+  const upvoteStr =
+    voteDisplayMode.upvotes &&
+    I18NextService.i18n.t("number_of_upvotes", {
       count: Number(counts.upvotes),
       formattedCount: Number(counts.upvotes),
     });
 
-  const downvotes = I18NextService.i18n.t("number_of_downvotes", {
+  const downvoteStr =
+    voteDisplayMode.downvotes &&
+    I18NextService.i18n.t("number_of_downvotes", {
       count: Number(counts.downvotes),
       formattedCount: Number(counts.downvotes),
     });
 
-  return `${points} • ${upvotes} • ${downvotes}`;
+  return [scoreStr, upvotePctStr, upvoteStr, downvoteStr]
-};
+    .filter(Boolean)
+    .join(" · ");
+}
 
-const handleUpvote = (i: VoteButtons) => {
+function handleUpvote(i: VoteButtons | VoteButtonsCompact) {
   i.setState({ upvoteLoading: true });
 
   switch (i.props.voteContentType) {
     case VoteContentType.Comment:
       i.props.onVote({
         comment_id: i.props.id,
-        score: newVote(VoteType.Upvote, i.props.my_vote),
+        score: newVote(VoteType.Upvote, i.props.myVote),
       });
       break;
     case VoteContentType.Post:
     default:
       i.props.onVote({
         post_id: i.props.id,
-        score: newVote(VoteType.Upvote, i.props.my_vote),
+        score: newVote(VoteType.Upvote, i.props.myVote),
       });
   }
-};
+}
 
-const handleDownvote = (i: VoteButtons) => {
+function handleDownvote(i: VoteButtons | VoteButtonsCompact) {
   i.setState({ downvoteLoading: true });
   switch (i.props.voteContentType) {
     case VoteContentType.Comment:
       i.props.onVote({
         comment_id: i.props.id,
-        score: newVote(VoteType.Downvote, i.props.my_vote),
+        score: newVote(VoteType.Downvote, i.props.myVote),
       });
       break;
     case VoteContentType.Post:
     default:
       i.props.onVote({
         post_id: i.props.id,
-        score: newVote(VoteType.Downvote, i.props.my_vote),
+        score: newVote(VoteType.Downvote, i.props.myVote),
       });
   }
-};
+}
 
+@tippyMixin
 export class VoteButtonsCompact extends Component<
   VoteButtonsProps,
   VoteButtonsState
@@ -95,7 +119,9 @@ export class VoteButtonsCompact extends Component<
     super(props, context);
   }
 
-  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+  componentWillReceiveProps(
+    nextProps: VoteButtonsProps & { children?: InfernoNode },
+  ) {
     if (this.props !== nextProps) {
       this.setState({
         upvoteLoading: false,
@@ -110,20 +136,24 @@ export class VoteButtonsCompact extends Component<
         <button
           type="button"
           className={`btn btn-animate btn-sm btn-link py-0 px-1 ${
-            this.props.my_vote === 1 ? "text-info" : "text-muted"
+            this.props.myVote === 1 ? "text-info" : "text-muted"
           }`}
-          data-tippy-content={tippy(this.props.counts)}
+          data-tippy-content={tippy(
+            this.props.voteDisplayMode,
+            this.props.counts,
+          )}
           disabled={!UserService.Instance.myUserInfo}
           onClick={linkEvent(this, handleUpvote)}
           aria-label={I18NextService.i18n.t("upvote")}
-          aria-pressed={this.props.my_vote === 1}
+          aria-pressed={this.props.myVote === 1}
         >
           {this.state.upvoteLoading ? (
             <Spinner />
           ) : (
             <>
               <Icon icon="arrow-up1" classes="icon-inline small" />
-              {showScores() && (
+              {showScores() &&
+                this.props.voteContentType === VoteContentType.Post && (
                   <span className="ms-2">
                     {numToSI(this.props.counts.upvotes)}
                   </span>
@@ -135,20 +165,24 @@ export class VoteButtonsCompact extends Component<
           <button
             type="button"
             className={`ms-2 btn btn-sm btn-link btn-animate btn py-0 px-1 ${
-              this.props.my_vote === -1 ? "text-danger" : "text-muted"
+              this.props.myVote === -1 ? "text-danger" : "text-muted"
             }`}
             disabled={!UserService.Instance.myUserInfo}
             onClick={linkEvent(this, handleDownvote)}
-            data-tippy-content={tippy(this.props.counts)}
+            data-tippy-content={tippy(
+              this.props.voteDisplayMode,
+              this.props.counts,
+            )}
             aria-label={I18NextService.i18n.t("downvote")}
-            aria-pressed={this.props.my_vote === -1}
+            aria-pressed={this.props.myVote === -1}
           >
             {this.state.downvoteLoading ? (
               <Spinner />
             ) : (
               <>
                 <Icon icon="arrow-down1" classes="icon-inline small" />
-                {showScores() && (
+                {showScores() &&
+                  this.props.voteContentType === VoteContentType.Post && (
                     <span
                       className={classNames("ms-2", {
                         invisible: this.props.counts.downvotes === 0,
@@ -166,6 +200,7 @@ export class VoteButtonsCompact extends Component<
   }
 }
 
+@tippyMixin
 export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
   state: VoteButtonsState = {
     upvoteLoading: false,
@@ -176,7 +211,9 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
     super(props, context);
   }
 
-  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+  componentWillReceiveProps(
+    nextProps: VoteButtonsProps & { children?: InfernoNode },
+  ) {
     if (this.props !== nextProps) {
       this.setState({
         upvoteLoading: false,
@@ -191,13 +228,16 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${
-            this.props.my_vote === 1 ? "text-info" : "text-muted"
+            this.props.myVote === 1 ? "text-info" : "text-muted"
           }`}
           disabled={!UserService.Instance.myUserInfo}
           onClick={linkEvent(this, handleUpvote)}
-          data-tippy-content={I18NextService.i18n.t("upvote")}
+          data-tippy-content={tippy(
+            this.props.voteDisplayMode,
+            this.props.counts,
+          )}
           aria-label={I18NextService.i18n.t("upvote")}
-          aria-pressed={this.props.my_vote === 1}
+          aria-pressed={this.props.myVote === 1}
         >
           {this.state.upvoteLoading ? (
             <Spinner />
@@ -208,7 +248,10 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
         {showScores() ? (
           <div
             className="unselectable pointer text-muted post-score"
-            data-tippy-content={tippy(this.props.counts)}
+            data-tippy-content={tippy(
+              this.props.voteDisplayMode,
+              this.props.counts,
+            )}
           >
             {numToSI(this.props.counts.score)}
           </div>
@@ -219,13 +262,16 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
           <button
             type="button"
             className={`btn-animate btn btn-link p-0 ${
-              this.props.my_vote === -1 ? "text-danger" : "text-muted"
+              this.props.myVote === -1 ? "text-danger" : "text-muted"
             }`}
             disabled={!UserService.Instance.myUserInfo}
             onClick={linkEvent(this, handleDownvote)}
-            data-tippy-content={I18NextService.i18n.t("downvote")}
+            data-tippy-content={tippy(
+              this.props.voteDisplayMode,
+              this.props.counts,
+            )}
             aria-label={I18NextService.i18n.t("downvote")}
-            aria-pressed={this.props.my_vote === -1}
+            aria-pressed={this.props.myVote === -1}
           >
             {this.state.downvoteLoading ? (
               <Spinner />

src/shared/components/common/vote-display.tsx

@@ -0,0 +1,184 @@
+import { numToSI } from "@utils/helpers";
+import { Component } from "inferno";
+import {
+  CommentAggregates,
+  LocalUserVoteDisplayMode,
+  PostAggregates,
+} from "lemmy-js-client";
+import { I18NextService } from "../../services";
+import { tippyMixin } from "../mixins/tippy-mixin";
+import { Icon } from "./icon";
+import classNames from "classnames";
+import { calculateUpvotePct } from "@utils/app";
+
+interface Props {
+  voteDisplayMode: LocalUserVoteDisplayMode;
+  counts: CommentAggregates | PostAggregates;
+  myVote?: number;
+}
+
+const BADGE_CLASSES = "unselectable";
+const UPVOTE_PCT_THRESHOLD = 90;
+
+@tippyMixin
+export class VoteDisplay extends Component<Props, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    const {
+      voteDisplayMode,
+      counts: { score, upvotes },
+    } = this.props;
+
+    // If the score is the same as the upvotes,
+    // and both score and upvotes are enabled,
+    // only show the upvotes.
+    const hideScore =
+      voteDisplayMode.score && voteDisplayMode.upvotes && score === upvotes;
+
+    return (
+      <div>
+        {voteDisplayMode.score && !hideScore && this.score()}
+        {voteDisplayMode.upvote_percentage && this.upvotePct()}
+        {this.upvotesAndDownvotes()}
+      </div>
+    );
+  }
+
+  score() {
+    const {
+      myVote,
+      counts: { score },
+    } = this.props;
+    const scoreStr = numToSI(score);
+
+    const scoreTippy = I18NextService.i18n.t("number_of_points", {
+      count: Number(score),
+      formattedCount: scoreStr,
+    });
+
+    return (
+      <span
+        className={`${BADGE_CLASSES} ${scoreColor(myVote)}`}
+        aria-label={scoreTippy}
+        data-tippy-content={scoreTippy}
+      >
+        <Icon icon="heart" classes="me-1 icon-inline small" />
+        {scoreStr}
+        <span className="mx-2">·</span>
+      </span>
+    );
+  }
+
+  upvotePct() {
+    const { upvotes, downvotes } = this.props.counts;
+    const pct = calculateUpvotePct(upvotes, downvotes);
+    const pctStr = `${pct.toFixed(0)}%`;
+
+    const thresholdCheck = pct < UPVOTE_PCT_THRESHOLD;
+
+    const upvotesPctTippy = I18NextService.i18n.t("upvote_percentage", {
+      count: Number(pct),
+      formattedCount: Number(pct),
+    });
+
+    return (
+      thresholdCheck && (
+        <span
+          className={BADGE_CLASSES}
+          aria-label={upvotesPctTippy}
+          data-tippy-content={upvotesPctTippy}
+        >
+          <Icon icon="smile" classes="me-1 icon-inline small" />
+          {pctStr}
+          <span className="mx-2">·</span>
+        </span>
+      )
+    );
+  }
+
+  // A special case since they are both wrapped in a badge
+  upvotesAndDownvotes() {
+    const voteDisplayMode = this.props.voteDisplayMode;
+    const votesCheck = voteDisplayMode.upvotes || voteDisplayMode.downvotes;
+    const downvotesCheck = this.props.counts.downvotes > 0;
+
+    return (
+      votesCheck && (
+        <span className={BADGE_CLASSES}>
+          {voteDisplayMode.upvotes && (
+            <span className={classNames({ "me-1": downvotesCheck })}>
+              {this.upvotes()}
+            </span>
+          )}
+          {voteDisplayMode.downvotes && downvotesCheck && this.downvotes()}
+          <span className="mx-2">·</span>
+        </span>
+      )
+    );
+  }
+
+  upvotes() {
+    const {
+      myVote,
+      counts: { upvotes },
+    } = this.props;
+    const upvotesStr = numToSI(upvotes);
+
+    const upvotesTippy = I18NextService.i18n.t("number_of_upvotes", {
+      count: Number(upvotes),
+      formattedCount: upvotesStr,
+    });
+
+    return (
+      <span
+        className={classNames({
+          "text-info": myVote === 1,
+        })}
+        aria-label={upvotesTippy}
+        data-tippy-content={upvotesTippy}
+      >
+        <Icon icon="arrow-up" classes="me-1 icon-inline small" />
+        {upvotesStr}
+      </span>
+    );
+  }
+
+  downvotes() {
+    const {
+      myVote,
+      counts: { downvotes },
+    } = this.props;
+    const downvotesStr = numToSI(downvotes);
+
+    const downvotesTippy = I18NextService.i18n.t("number_of_downvotes", {
+      count: Number(downvotes),
+      formattedCount: downvotesStr,
+    });
+
+    return (
+      <span
+        className={classNames({
+          "text-danger": myVote === -1,
+        })}
+        aria-label={downvotesTippy}
+        data-tippy-content={downvotesTippy}
+      >
+        <Icon icon="arrow-down" classes="me-1 icon-inline small" />
+        {downvotesStr}
+      </span>
+    );
+  }
+}
+
+function scoreColor(myVote?: number): string {
+  if (myVote === 1) {
+    return "text-info";
+  } else if (myVote === -1) {
+    return "text-danger";
+  } else {
+    return "text-muted";
+  }
+}

src/shared/components/community/communities.tsx

@@ -4,6 +4,7 @@ import {
   getQueryParams,
   getQueryString,
   numToSI,
+  resourcesSettled,
 } from "@utils/helpers";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
@@ -15,7 +16,7 @@ import {
   ListCommunities,
   ListCommunitiesResponse,
   ListingType,
-  SortType,
+  PostSortType,
 } from "lemmy-js-client";
 import { InitialFetchRequest } from "../../interfaces";
 import { FirstLoadService, I18NextService } from "../../services";
@@ -36,6 +37,10 @@ import { CommunityLink } from "./community-link";
 import { communityLimit } from "../../config";
 import { SubscribeButton } from "../common/subscribe-button";
 import { getHttpBaseInternal } from "../../utils/env";
+import { RouteComponentProps } from "inferno-router/dist/Route";
+import { IRoutePropsWithFetch } from "../../routes";
+import { scrollMixin } from "../mixins/scroll-mixin";
+import { isBrowser } from "@utils/browser";
 
 type CommunitiesData = RouteDataResponse<{
   listCommunitiesResponse: ListCommunitiesResponse;
@@ -50,7 +55,7 @@ interface CommunitiesState {
 
 interface CommunitiesProps {
   listingType: ListingType;
-  sort: SortType;
+  sort: PostSortType;
   page: number;
 }
 
@@ -58,18 +63,35 @@ function getListingTypeFromQuery(listingType?: string): ListingType {
   return listingType ? (listingType as ListingType) : "Local";
 }
 
-function getSortTypeFromQuery(type?: string): SortType {
+function getSortTypeFromQuery(type?: string): PostSortType {
-  return type ? (type as SortType) : "TopMonth";
+  return type ? (type as PostSortType) : "TopMonth";
 }
-function getCommunitiesQueryParams() {
+
-  return getQueryParams<CommunitiesProps>({
+export function getCommunitiesQueryParams(source?: string): CommunitiesProps {
+  return getQueryParams<CommunitiesProps>(
+    {
       listingType: getListingTypeFromQuery,
       sort: getSortTypeFromQuery,
       page: getPageFromString,
-  });
+    },
+    source,
+  );
 }
 
-export class Communities extends Component<any, CommunitiesState> {
+type CommunitiesPathProps = Record<string, never>;
+type CommunitiesRouteProps = RouteComponentProps<CommunitiesPathProps> &
+  CommunitiesProps;
+export type CommunitiesFetchConfig = IRoutePropsWithFetch<
+  CommunitiesData,
+  CommunitiesPathProps,
+  CommunitiesProps
+>;
+
+@scrollMixin
+export class Communities extends Component<
+  CommunitiesRouteProps,
+  CommunitiesState
+> {
   private isoData = setIsoData<CommunitiesData>(this.context);
   state: CommunitiesState = {
     listCommunitiesResponse: EMPTY_REQUEST,
@@ -78,7 +100,11 @@ export class Communities extends Component<any, CommunitiesState> {
     isIsomorphic: false,
   };
 
-  constructor(props: any, context: any) {
+  loadingSettled() {
+    return resourcesSettled([this.state.listCommunitiesResponse]);
+  }
+
+  constructor(props: CommunitiesRouteProps, context: any) {
     super(props, context);
     this.handlePageChange = this.handlePageChange.bind(this);
     this.handleSortChange = this.handleSortChange.bind(this);
@@ -96,19 +122,23 @@ export class Communities extends Component<any, CommunitiesState> {
     }
   }
 
-  async componentDidMount() {
+  async componentWillMount() {
-    if (!this.state.isIsomorphic) {
+    if (!this.state.isIsomorphic && isBrowser()) {
-      await this.refetch();
+      await this.refetch(this.props);
     }
   }
 
+  componentWillReceiveProps(nextProps: CommunitiesRouteProps) {
+    this.refetch(nextProps);
+  }
+
   get documentTitle(): string {
     return `${I18NextService.i18n.t("communities")} - ${
       this.state.siteRes.site_view.site.name
     }`;
   }
 
-  renderListings() {
+  renderListingsTable() {
     switch (this.state.listCommunitiesResponse.state) {
       case "loading":
         return (
@@ -117,32 +147,8 @@ export class Communities extends Component<any, CommunitiesState> {
           </h5>
         );
       case "success": {
-        const { listingType, sort, page } = getCommunitiesQueryParams();
         return (
-          <div>
+          <table id="community_table" className="table table-sm table-hover">
-            <h1 className="h4 mb-4">
-              {I18NextService.i18n.t("list_of_communities")}
-            </h1>
-            <div className="row g-3 align-items-center mb-2">
-              <div className="col-auto">
-                <ListingTypeSelect
-                  type_={listingType}
-                  showLocal={showLocal(this.isoData)}
-                  showSubscribed
-                  onChange={this.handleListingTypeChange}
-                />
-              </div>
-              <div className="col-auto me-auto">
-                <SortSelect sort={sort} onChange={this.handleSortChange} />
-              </div>
-              <div className="col-auto">{this.searchForm()}</div>
-            </div>
-
-            <div className="table-responsive">
-              <table
-                id="community_table"
-                className="table table-sm table-hover"
-              >
             <thead className="pointer">
               <tr>
                 <th>{I18NextService.i18n.t("name")}</th>
@@ -163,8 +169,7 @@ export class Communities extends Component<any, CommunitiesState> {
               </tr>
             </thead>
             <tbody>
-                  {this.state.listCommunitiesResponse.data.communities.map(
+              {this.state.listCommunitiesResponse.data.communities.map(cv => (
-                    cv => (
                 <tr key={cv.community.id}>
                   <td>
                     <CommunityLink community={cv.community} />
@@ -204,33 +209,52 @@ export class Communities extends Component<any, CommunitiesState> {
                     />
                   </td>
                 </tr>
-                    ),
+              ))}
-                  )}
             </tbody>
           </table>
-            </div>
-            <Paginator
-              page={page}
-              onChange={this.handlePageChange}
-              nextDisabled={
-                communityLimit >
-                this.state.listCommunitiesResponse.data.communities.length
-              }
-            />
-          </div>
         );
       }
     }
   }
 
   render() {
+    const { listingType, sort, page } = this.props;
     return (
       <div className="communities container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        {this.renderListings()}
+        <div>
+          <h1 className="h4 mb-4">
+            {I18NextService.i18n.t("list_of_communities")}
+          </h1>
+          <div className="row g-3 align-items-center mb-2">
+            <div className="col-auto">
+              <ListingTypeSelect
+                type_={listingType}
+                showLocal={showLocal(this.isoData)}
+                showSubscribed
+                onChange={this.handleListingTypeChange}
+              />
+            </div>
+            <div className="col-auto me-auto">
+              <SortSelect sort={sort} onChange={this.handleSortChange} />
+            </div>
+            <div className="col-auto">{this.searchForm()}</div>
+          </div>
+
+          <div className="table-responsive">{this.renderListingsTable()}</div>
+          <Paginator
+            page={page}
+            onChange={this.handlePageChange}
+            nextDisabled={
+              this.state.listCommunitiesResponse.state !== "success" ||
+              communityLimit >
+                this.state.listCommunitiesResponse.data.communities.length
+            }
+          />
+        </div>
       </div>
     );
   }
@@ -262,29 +286,23 @@ export class Communities extends Component<any, CommunitiesState> {
     );
   }
 
-  async updateUrl({ listingType, sort, page }: Partial<CommunitiesProps>) {
+  async updateUrl(props: Partial<CommunitiesProps>) {
-    const {
+    const { listingType, sort, page } = { ...this.props, ...props };
-      listingType: urlListingType,
-      sort: urlSort,
-      page: urlPage,
-    } = getCommunitiesQueryParams();
 
     const queryParams: QueryParams<CommunitiesProps> = {
-      listingType: listingType ?? urlListingType,
+      listingType: listingType,
-      sort: sort ?? urlSort,
+      sort: sort,
-      page: (page ?? urlPage)?.toString(),
+      page: page?.toString(),
     };
 
     this.props.history.push(`/communities${getQueryString(queryParams)}`);
-
-    await this.refetch();
   }
 
   handlePageChange(page: number) {
     this.updateUrl({ page });
   }
 
-  handleSortChange(val: SortType) {
+  handleSortChange(val: PostSortType) {
     this.updateUrl({ sort: val, page: 1 });
   }
 
@@ -301,10 +319,10 @@ export class Communities extends Component<any, CommunitiesState> {
 
   handleSearchSubmit(i: Communities, event: any) {
     event.preventDefault();
-    const searchParamEncoded = encodeURIComponent(i.state.searchText);
+    const searchParamEncoded = i.state.searchText;
-    const { listingType } = getCommunitiesQueryParams();
+    const { listingType } = i.props;
     i.context.router.history.push(
-      `/search?q=${searchParamEncoded}&type=Communities&listingType=${listingType}`,
+      `/search${getQueryString({ q: searchParamEncoded, type: "Communities", listingType })}`,
     );
   }
 
@@ -312,16 +330,17 @@ export class Communities extends Component<any, CommunitiesState> {
     headers,
     query: { listingType, sort, page },
   }: InitialFetchRequest<
-    QueryParams<CommunitiesProps>
+    CommunitiesPathProps,
+    CommunitiesProps
   >): Promise<CommunitiesData> {
     const client = wrapClient(
       new LemmyHttp(getHttpBaseInternal(), { headers }),
     );
     const listCommunitiesForm: ListCommunities = {
-      type_: getListingTypeFromQuery(listingType),
+      type_: listingType,
-      sort: getSortTypeFromQuery(sort),
+      sort,
       limit: communityLimit,
-      page: getPageFromString(page),
+      page,
     };
 
     return {
@@ -342,21 +361,19 @@ export class Communities extends Component<any, CommunitiesState> {
     data.i.findAndUpdateCommunity(res);
   }
 
-  async refetch() {
+  fetchToken?: symbol;
+  async refetch({ listingType, sort, page }: CommunitiesProps) {
+    const token = (this.fetchToken = Symbol());
     this.setState({ listCommunitiesResponse: LOADING_REQUEST });
-
+    const listCommunitiesResponse = await HttpService.client.listCommunities({
-    const { listingType, sort, page } = getCommunitiesQueryParams();
-
-    this.setState({
-      listCommunitiesResponse: await HttpService.client.listCommunities({
       type_: listingType,
       sort: sort,
       limit: communityLimit,
       page,
-      }),
     });
-
+    if (token === this.fetchToken) {
-    window.scrollTo(0, 0);
+      this.setState({ listCommunitiesResponse });
+    }
   }
 
   findAndUpdateCommunity(res: RequestState<CommunityResponse>) {

src/shared/components/community/community-form.tsx

@@ -3,6 +3,7 @@ import { Component, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
   CommunityView,
+  CommunityVisibility,
   CreateCommunity,
   EditCommunity,
   Language,
@@ -12,6 +13,8 @@ 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 { tippyMixin } from "../mixins/tippy-mixin";
+import { validActorRegexPattern } from "../../config";
 
 interface CommunityFormProps {
   community_view?: CommunityView; // If a community is given, that means this is an edit
@@ -34,10 +37,12 @@ interface CommunityFormState {
     nsfw?: boolean;
     posting_restricted_to_mods?: boolean;
     discussion_languages?: number[];
+    visibilty?: CommunityVisibility;
   };
   submitted: boolean;
 }
 
+@tippyMixin
 export class CommunityForm extends Component<
   CommunityFormProps,
   CommunityFormState
@@ -78,6 +83,7 @@ export class CommunityForm extends Component<
           banner: cv.community.banner,
           posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
           discussion_languages: this.props.communityLanguages,
+          visibilty: cv.community.visibility,
         },
       };
     }
@@ -124,7 +130,7 @@ export class CommunityForm extends Component<
                 onInput={linkEvent(this, this.handleCommunityNameChange)}
                 required
                 minLength={3}
-                pattern="[a-z0-9_]+"
+                pattern={validActorRegexPattern}
                 title={I18NextService.i18n.t("community_reqs")}
               />
             </div>
@@ -217,6 +223,24 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
+        <div className="mb-3 row">
+          <legend className="col-form-label col-6 pt-0">
+            {I18NextService.i18n.t("community_visibility")}
+          </legend>
+          <div className="col-6">
+            <select
+              className="form-select position-static"
+              id="community-visibility"
+              onChange={linkEvent(this, this.handleCommunityVisibilityChange)}
+              value={this.state.form.visibilty ?? "Public"}
+            >
+              <option value="Public">{I18NextService.i18n.t("public")}</option>
+              <option value="LocalOnly">
+                {I18NextService.i18n.t("local_only")}
+              </option>
+            </select>
+          </div>
+        </div>
         <div className="mb-3 row">
           <legend className="col-form-label col-6 pt-0">
             {I18NextService.i18n.t("only_mods_can_post_in_community")}
@@ -291,6 +315,7 @@ export class CommunityForm extends Component<
         nsfw: cForm.nsfw,
         posting_restricted_to_mods: cForm.posting_restricted_to_mods,
         discussion_languages: cForm.discussion_languages,
+        visibility: cForm.visibilty,
       });
     } else {
       if (cForm.title && cForm.name) {
@@ -303,6 +328,7 @@ export class CommunityForm extends Component<
           nsfw: cForm.nsfw,
           posting_restricted_to_mods: cForm.posting_restricted_to_mods,
           discussion_languages: cForm.discussion_languages,
+          visibility: cForm.visibilty,
         });
       }
     }
@@ -330,6 +356,10 @@ export class CommunityForm extends Component<
     );
   }
 
+  handleCommunityVisibilityChange(i: CommunityForm, event: any) {
+    i.setState(s => ((s.form.visibilty = event.target.value), s));
+  }
+
   handleCancel(i: CommunityForm) {
     i.props.onCancel?.();
   }

src/shared/components/community/community-link.tsx

@@ -20,42 +20,38 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
   }
 
   render() {
-    const community = this.props.community;
+    const { community, useApubName } = this.props;
-    let title: string, link: string;
     const local = community.local === null ? true : community.local;
-    const domain = hostname(community.actor_id);
+
+    let link: string;
+    let serverStr: string | undefined = undefined;
+
+    const title = useApubName
+      ? community.name
+      : (community.title ?? community.name);
+
     if (local) {
-      title = community.title;
       link = `/c/${community.name}`;
     } else {
-      const name_ = `${community.name}@${domain}`;
+      serverStr = `@${hostname(community.actor_id)}`;
-      title = `${community.title}@${domain}`;
+      link = !this.props.realLink
-      link = !this.props.realLink ? `/c/${name_}` : community.actor_id;
+        ? `/c/${community.name}${serverStr}`
+        : community.actor_id;
     }
+    const classes = `community-link ${this.props.muted ? "text-muted" : ""}`;
 
-    const apubName = `!${community.name}@${domain}`;
-    const displayName = this.props.useApubName ? apubName : title;
     return !this.props.realLink ? (
-      <Link
+      <Link title={title} className={classes} to={link}>
-        title={apubName}
+        {this.avatarAndName(title, serverStr)}
-        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
-        to={link}
-      >
-        {this.avatarAndName(displayName)}
       </Link>
     ) : (
-      <a
+      <a title={title} className={classes} href={link} rel={relTags}>
-        title={apubName}
+        {this.avatarAndName(title, serverStr)}
-        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
-        href={link}
-        rel={relTags}
-      >
-        {this.avatarAndName(displayName)}
       </a>
     );
   }
 
-  avatarAndName(displayName: string) {
+  avatarAndName(title: string, serverStr?: string) {
     const icon = this.props.community.icon;
     const nsfw = this.props.community.nsfw;
 
@@ -65,7 +61,10 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
           !this.props.community.removed &&
           showAvatars() &&
           icon && <PictrsImage src={icon} icon nsfw={nsfw} />}
-        <span className="overflow-wrap-anywhere">{displayName}</span>
+        <span className="overflow-wrap-anywhere">
+          {title}
+          {serverStr && <small className="text-muted">{serverStr}</small>}
+        </span>
       </>
     );
   }

src/shared/components/community/community.tsx

@@ -1,23 +1,36 @@
 import {
   commentsToFlatNodes,
+  commentToPostSortType,
   communityRSSUrl,
   editComment,
   editPost,
   editWith,
   enableDownvotes,
   enableNsfw,
-  getCommentParentId,
   getDataTypeString,
   postToCommentSortType,
   setIsoData,
   showLocal,
   updateCommunityBlock,
   updatePersonBlock,
+  voteDisplayMode,
 } from "@utils/app";
-import { getQueryParams, getQueryString } from "@utils/helpers";
+import {
-import type { QueryParams } from "@utils/types";
+  getQueryParams,
+  getQueryString,
+  resourcesSettled,
+  bareRoutePush,
+} from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
+import type { QueryParams, StringBoolean } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
-import { Component, RefObject, createRef, linkEvent } from "inferno";
+import {
+  Component,
+  InfernoNode,
+  RefObject,
+  createRef,
+  linkEvent,
+} from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
   AddAdmin,
@@ -29,7 +42,6 @@ import {
   BanPersonResponse,
   BlockCommunity,
   BlockPerson,
-  CommentId,
   CommentReplyResponse,
   CommentResponse,
   CommunityResponse,
@@ -54,6 +66,7 @@ import {
   GetPosts,
   GetPostsResponse,
   GetSiteResponse,
+  HidePost,
   LemmyHttp,
   LockPost,
   MarkCommentReplyAsRead,
@@ -69,9 +82,10 @@ import {
   RemovePost,
   SaveComment,
   SavePost,
-  SortType,
+  PostSortType,
   SuccessResponse,
   TransferCommunity,
+  CommentSortType,
 } from "lemmy-js-client";
 import { fetchLimit, relTags } from "../../config";
 import {
@@ -87,20 +101,29 @@ import {
   RequestState,
   wrapClient,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { toast } from "../../toast";
 import { CommentNodes } from "../comment/comment-nodes";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { DataTypeSelect } from "../common/data-type-select";
 import { HtmlTags } from "../common/html-tags";
-import { Icon, Spinner } from "../common/icon";
+import { Icon } from "../common/icon";
 import { SortSelect } from "../common/sort-select";
 import { SiteSidebar } from "../home/site-sidebar";
 import { PostListings } from "../post/post-listings";
 import { CommunityLink } from "./community-link";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
+import {
+  CommentsLoadingSkeleton,
+  PostsLoadingSkeleton,
+} from "../common/loading-skeleton";
 import { Sidebar } from "./sidebar";
+import { IRoutePropsWithFetch } from "../../routes";
+import PostHiddenSelect from "../common/post-hidden-select";
+import { isBrowser } from "@utils/browser";
+import { LoadingEllipses } from "../common/loading-ellipses";
+import { CommentSortSelect } from "../common/comment-sort-select";
 
 type CommunityData = RouteDataResponse<{
   communityRes: GetCommunityResponse;
@@ -114,40 +137,63 @@ interface State {
   commentsRes: RequestState<GetCommentsResponse>;
   siteRes: GetSiteResponse;
   showSidebarMobile: boolean;
-  finished: Map<CommentId, boolean | undefined>;
   isIsomorphic: boolean;
 }
 
 interface CommunityProps {
   dataType: DataType;
-  sort: SortType;
+  sort: PostSortType;
   pageCursor?: PaginationCursor;
+  showHidden?: StringBoolean;
 }
 
-function getCommunityQueryParams() {
+type Fallbacks = { sort: PostSortType };
-  return getQueryParams<CommunityProps>({
+
+export function getCommunityQueryParams(
+  source: string | undefined,
+  siteRes: GetSiteResponse,
+) {
+  const myUserInfo = siteRes.my_user ?? UserService.Instance.myUserInfo;
+  const local_user = myUserInfo?.local_user_view.local_user;
+  const local_site = siteRes.site_view.local_site;
+  return getQueryParams<CommunityProps, Fallbacks>(
+    {
       dataType: getDataTypeFromQuery,
-    pageCursor: cursor => cursor,
+      pageCursor: (cursor?: string) => cursor,
       sort: getSortTypeFromQuery,
-  });
+      showHidden: (include?: StringBoolean) => include,
+    },
+    source,
+    {
+      sort:
+        local_user?.default_post_sort_type ?? local_site.default_post_sort_type,
+    },
+  );
 }
 
 function getDataTypeFromQuery(type?: string): DataType {
   return type ? DataType[type] : DataType.Post;
 }
 
-function getSortTypeFromQuery(type?: string): SortType {
+function getSortTypeFromQuery(
-  const mySortType =
+  type: string | undefined,
-    UserService.Instance.myUserInfo?.local_user_view.local_user
+  fallback: PostSortType,
-      .default_sort_type;
+): PostSortType {
-
+  return type ? (type as PostSortType) : fallback;
-  return type ? (type as SortType) : mySortType ?? "Active";
 }
 
-export class Community extends Component<
+type CommunityPathProps = { name: string };
-  RouteComponentProps<{ name: string }>,
+type CommunityRouteProps = RouteComponentProps<CommunityPathProps> &
-  State
+  CommunityProps;
-> {
+export type CommunityFetchConfig = IRoutePropsWithFetch<
+  CommunityData,
+  CommunityPathProps,
+  CommunityProps
+>;
+
+@scrollMixin
+@tippyMixin
+export class Community extends Component<CommunityRouteProps, State> {
   private isoData = setIsoData<CommunityData>(this.context);
   state: State = {
     communityRes: EMPTY_REQUEST,
@@ -155,14 +201,24 @@ export class Community extends Component<
     commentsRes: EMPTY_REQUEST,
     siteRes: this.isoData.site_res,
     showSidebarMobile: false,
-    finished: new Map(),
     isIsomorphic: false,
   };
   private readonly mainContentRef: RefObject<HTMLElement>;
-  constructor(props: RouteComponentProps<{ name: string }>, context: any) {
+
+  loadingSettled() {
+    return resourcesSettled([
+      this.state.communityRes,
+      this.props.dataType === DataType.Post
+        ? this.state.postsRes
+        : this.state.commentsRes,
+    ]);
+  }
+
+  constructor(props: CommunityRouteProps, context: any) {
     super(props, context);
 
     this.handleSortChange = this.handleSortChange.bind(this);
+    this.handleCommentSortChange = this.handleCommentSortChange.bind(this);
     this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
     this.handlePageNext = this.handlePageNext.bind(this);
     this.handlePagePrev = this.handlePagePrev.bind(this);
@@ -200,6 +256,9 @@ export class Community extends Component<
     this.handleSavePost = this.handleSavePost.bind(this);
     this.handlePurgePost = this.handlePurgePost.bind(this);
     this.handleFeaturePost = this.handleFeaturePost.bind(this);
+    this.handleHidePost = this.handleHidePost.bind(this);
+    this.handleShowHiddenChange = this.handleShowHiddenChange.bind(this);
+
     this.mainContentRef = createRef();
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
@@ -215,44 +274,57 @@ export class Community extends Component<
     }
   }
 
-  async fetchCommunity() {
+  fetchCommunityToken?: symbol;
+  async fetchCommunity(props: CommunityRouteProps) {
+    const token = (this.fetchCommunityToken = Symbol());
     this.setState({ communityRes: LOADING_REQUEST });
-    this.setState({
+    const communityRes = await HttpService.client.getCommunity({
-      communityRes: await HttpService.client.getCommunity({
+      name: props.match.params.name,
-        name: this.props.match.params.name,
-      }),
     });
+    if (token === this.fetchCommunityToken) {
+      this.setState({ communityRes });
+    }
   }
 
-  async componentDidMount() {
+  async componentWillMount() {
-    if (!this.state.isIsomorphic) {
+    if (!this.state.isIsomorphic && isBrowser()) {
-      await Promise.all([this.fetchCommunity(), this.fetchData()]);
+      await Promise.all([
+        this.fetchCommunity(this.props),
+        this.fetchData(this.props),
+      ]);
+    }
   }
 
-    setupTippy();
+  componentWillReceiveProps(
+    nextProps: CommunityRouteProps & { children?: InfernoNode },
+  ) {
+    if (
+      bareRoutePush(this.props, nextProps) ||
+      this.props.match.params.name !== nextProps.match.params.name
+    ) {
+      this.fetchCommunity(nextProps);
+    }
+    this.fetchData(nextProps);
   }
 
   static async fetchInitialData({
     headers,
-    path,
+    query: { dataType, pageCursor, sort, showHidden },
-    query: { dataType: urlDataType, pageCursor, sort: urlSort },
+    match: {
-  }: InitialFetchRequest<QueryParams<CommunityProps>>): Promise<
+      params: { name: communityName },
-    Promise<CommunityData>
+    },
-  > {
+  }: InitialFetchRequest<
+    CommunityPathProps,
+    CommunityProps
+  >): Promise<CommunityData> {
     const client = wrapClient(
       new LemmyHttp(getHttpBaseInternal(), { headers }),
     );
-    const pathSplit = path.split("/");
 
-    const communityName = pathSplit[2];
     const communityForm: GetCommunity = {
       name: communityName,
     };
 
-    const dataType = getDataTypeFromQuery(urlDataType);
-
-    const sort = getSortTypeFromQuery(urlSort);
-
     let postsFetch: Promise<RequestState<GetPostsResponse>> =
       Promise.resolve(EMPTY_REQUEST);
     let commentsFetch: Promise<RequestState<GetCommentsResponse>> =
@@ -266,6 +338,7 @@ export class Community extends Component<
         sort,
         type_: "All",
         saved_only: false,
+        show_hidden: showHidden === "true",
       };
 
       postsFetch = client.getPosts(getPostsForm);
@@ -310,18 +383,12 @@ export class Community extends Component<
   }
 
   renderCommunity() {
-    switch (this.state.communityRes.state) {
+    const res =
-      case "loading":
+      this.state.communityRes.state === "success" &&
-        return (
+      this.state.communityRes.data;
-          <h5>
-            <Spinner large />
-          </h5>
-        );
-      case "success": {
-        const res = this.state.communityRes.data;
-
     return (
       <>
+        {res && (
           <HtmlTags
             title={this.documentTitle}
             path={this.context.router.route.match.url}
@@ -329,13 +396,9 @@ export class Community extends Component<
             description={res.community_view.community.description}
             image={res.community_view.community.icon}
           />
+        )}
 
-            <div className="row">
+        {this.communityInfo()}
-              <main
-                className="col-12 col-md-8 col-lg-9"
-                ref={this.mainContentRef}
-              >
-                {this.communityInfo(res)}
         <div className="d-block d-md-none">
           <button
             className="btn btn-secondary d-inline-block mb-2 me-3"
@@ -344,44 +407,48 @@ export class Community extends Component<
             {I18NextService.i18n.t("sidebar")}{" "}
             <Icon
               icon={
-                        this.state.showSidebarMobile
+                this.state.showSidebarMobile ? `minus-square` : `plus-square`
-                          ? `minus-square`
-                          : `plus-square`
               }
               classes="icon-inline"
             />
           </button>
-                  {this.state.showSidebarMobile && this.sidebar(res)}
+          {this.state.showSidebarMobile && this.sidebar()}
         </div>
-                {this.selects(res)}
+      </>
-                {this.listings(res)}
+    );
+  }
+
+  render() {
+    return (
+      <div className="community container-lg">
+        <div className="row">
+          <main className="col-12 col-md-8 col-lg-9" ref={this.mainContentRef}>
+            {this.renderCommunity()}
+            {this.selects()}
+            {this.listings()}
             <PaginatorCursor
               nextPage={this.getNextPage}
               onNext={this.handlePageNext}
             />
           </main>
           <aside className="d-none d-md-block col-md-4 col-lg-3">
-                {this.sidebar(res)}
+            {this.sidebar()}
           </aside>
         </div>
-          </>
+      </div>
-        );
-      }
-    }
-  }
-
-  render() {
-    return (
-      <div className="community container-lg">{this.renderCommunity()}</div>
     );
   }
 
-  sidebar(res: GetCommunityResponse) {
+  sidebar() {
-    const { site_res } = this.isoData;
+    if (this.state.communityRes.state !== "success") {
+      return undefined;
+    }
+    const res = this.state.communityRes.data;
+    const siteRes = this.isoData.site_res;
     // For some reason, this returns an empty vec if it matches the site langs
     const communityLangs =
       res.discussion_languages.length === 0
-        ? site_res.all_languages.map(({ id }) => id)
+        ? siteRes.all_languages.map(({ id }) => id)
         : res.discussion_languages;
 
     return (
@@ -389,11 +456,11 @@ export class Community extends Component<
         <Sidebar
           community_view={res.community_view}
           moderators={res.moderators}
-          admins={site_res.admins}
+          admins={siteRes.admins}
-          enableNsfw={enableNsfw(site_res)}
+          enableNsfw={enableNsfw(siteRes)}
           editable
-          allLanguages={site_res.all_languages}
+          allLanguages={siteRes.all_languages}
-          siteLanguages={site_res.discussion_languages}
+          siteLanguages={siteRes.discussion_languages}
           communityLanguages={communityLangs}
           onDeleteCommunity={this.handleDeleteCommunity}
           onRemoveCommunity={this.handleRemoveCommunity}
@@ -410,27 +477,23 @@ export class Community extends Component<
     );
   }
 
-  listings(communityRes: GetCommunityResponse) {
+  listings() {
-    const { dataType } = getCommunityQueryParams();
+    const { dataType } = this.props;
-    const { site_res } = this.isoData;
+    const siteRes = this.isoData.site_res;
 
     if (dataType === DataType.Post) {
       switch (this.state.postsRes.state) {
         case "loading":
-          return (
+          return <PostsLoadingSkeleton />;
-            <h5>
-              <Spinner large />
-            </h5>
-          );
         case "success":
           return (
             <PostListings
               posts={this.state.postsRes.data.posts}
-              removeDuplicates
+              enableDownvotes={enableDownvotes(siteRes)}
-              enableDownvotes={enableDownvotes(site_res)}
+              voteDisplayMode={voteDisplayMode(siteRes)}
-              enableNsfw={enableNsfw(site_res)}
+              enableNsfw={enableNsfw(siteRes)}
-              allLanguages={site_res.all_languages}
+              allLanguages={siteRes.all_languages}
-              siteLanguages={site_res.discussion_languages}
+              siteLanguages={siteRes.discussion_languages}
               onBlockPerson={this.handleBlockPerson}
               onPostEdit={this.handlePostEdit}
               onPostVote={this.handlePostVote}
@@ -448,30 +511,30 @@ export class Community extends Component<
               onTransferCommunity={this.handleTransferCommunity}
               onFeaturePost={this.handleFeaturePost}
               onMarkPostAsRead={async () => {}}
+              onHidePost={this.handleHidePost}
             />
           );
       }
     } else {
+      if (this.state.communityRes.state !== "success") {
+        return;
+      }
       switch (this.state.commentsRes.state) {
         case "loading":
-          return (
+          return <CommentsLoadingSkeleton />;
-            <h5>
-              <Spinner large />
-            </h5>
-          );
         case "success":
           return (
             <CommentNodes
               nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)}
               viewType={CommentViewType.Flat}
-              finished={this.state.finished}
               isTopLevel
               showContext
-              enableDownvotes={enableDownvotes(site_res)}
+              enableDownvotes={enableDownvotes(siteRes)}
-              moderators={communityRes.moderators}
+              voteDisplayMode={voteDisplayMode(siteRes)}
-              admins={site_res.admins}
+              moderators={this.state.communityRes.data.moderators}
-              allLanguages={site_res.all_languages}
+              admins={siteRes.admins}
-              siteLanguages={site_res.discussion_languages}
+              allLanguages={siteRes.all_languages}
+              siteLanguages={siteRes.discussion_languages}
               onSaveComment={this.handleSaveComment}
               onBlockPerson={this.handleBlockPerson}
               onDeleteComment={this.handleDeleteComment}
@@ -496,28 +559,40 @@ export class Community extends Component<
     }
   }
 
-  communityInfo(res: GetCommunityResponse) {
+  communityInfo() {
-    const community = res.community_view.community;
+    const res =
+      (this.state.communityRes.state === "success" &&
+        this.state.communityRes.data) ||
+      undefined;
+    const community = res && res.community_view.community;
+    const urlCommunityName = this.props.match.params.name;
 
     return (
-      community && (
       <div className="mb-2">
+        {community && (
           <BannerIconHeader banner={community.banner} icon={community.icon} />
+        )}
         <div>
           <h1
             className="h4 mb-0 overflow-wrap-anywhere d-inline"
             data-tippy-content={
-                community.posting_restricted_to_mods
+              community?.posting_restricted_to_mods
                 ? I18NextService.i18n.t("community_locked")
                 : ""
             }
           >
-              {community.title}
+            {community?.title ?? (
+              <>
+                {urlCommunityName}
+                <LoadingEllipses />
+              </>
+            )}
           </h1>
-            {community.posting_restricted_to_mods && (
+          {community?.posting_restricted_to_mods && (
             <Icon icon="lock" inline classes="text-danger fs-4 ms-2" />
           )}
         </div>
+        {(community && (
           <CommunityLink
             community={community}
             realLink
@@ -525,16 +600,17 @@ export class Community extends Component<
             muted
             hideAvatar
           />
+        )) ??
+          urlCommunityName}
       </div>
-      )
     );
   }
 
-  selects(res: GetCommunityResponse) {
+  selects() {
-    // let communityRss = this.state.communityRes.map(r =>
+    const res =
-    //   communityRSSUrl(r.community_view.community.actor_id, this.state.sort)
+      this.state.communityRes.state === "success" &&
-    // );
+      this.state.communityRes.data;
-    const { dataType, sort } = getCommunityQueryParams();
+    const { dataType, sort, showHidden } = this.props;
     const communityRss = res
       ? communityRSSUrl(res.community_view.community.actor_id, sort)
       : undefined;
@@ -547,8 +623,23 @@ export class Community extends Component<
             onChange={this.handleDataTypeChange}
           />
         </span>
+        {dataType === DataType.Post && UserService.Instance.myUserInfo && (
+          <span className="me-3">
+            <PostHiddenSelect
+              showHidden={showHidden}
+              onShowHiddenChange={this.handleShowHiddenChange}
+            />
+          </span>
+        )}
         <span className="me-2">
+          {this.props.dataType === DataType.Post ? (
             <SortSelect sort={sort} onChange={this.handleSortChange} />
+          ) : (
+            <CommentSortSelect
+              sort={postToCommentSortType(sort)}
+              onChange={this.handleCommentSortChange}
+            />
+          )}
         </span>
         {communityRss && (
           <>
@@ -572,17 +663,31 @@ export class Community extends Component<
 
   handlePageNext(nextPage: PaginationCursor) {
     this.updateUrl({ pageCursor: nextPage });
-    window.scrollTo(0, 0);
   }
 
-  handleSortChange(sort: SortType) {
+  handleSortChange(sort: PostSortType) {
-    this.updateUrl({ sort, pageCursor: undefined });
+    this.updateUrl({
-    window.scrollTo(0, 0);
+      sort: sort,
+      pageCursor: undefined,
+    });
+  }
+
+  handleCommentSortChange(sort: CommentSortType) {
+    this.updateUrl({
+      sort: commentToPostSortType(sort),
+      pageCursor: undefined,
+    });
   }
 
   handleDataTypeChange(dataType: DataType) {
     this.updateUrl({ dataType, pageCursor: undefined });
-    window.scrollTo(0, 0);
+  }
+
+  handleShowHiddenChange(show?: StringBoolean) {
+    this.updateUrl({
+      showHidden: show,
+      pageCursor: undefined,
+    });
   }
 
   handleShowSidebarMobile(i: Community) {
@@ -591,52 +696,63 @@ export class Community extends Component<
     }));
   }
 
-  async updateUrl({ dataType, pageCursor, sort }: Partial<CommunityProps>) {
+  async updateUrl(props: Partial<CommunityProps>) {
-    const { dataType: urlDataType, sort: urlSort } = getCommunityQueryParams();
+    const {
-
+      dataType,
-    const queryParams: QueryParams<CommunityProps> = {
+      pageCursor,
-      dataType: getDataTypeString(dataType ?? urlDataType),
+      sort,
-      pageCursor: pageCursor,
+      showHidden,
-      sort: sort ?? urlSort,
+      match: {
+        params: { name },
+      },
+    } = {
+      ...this.props,
+      ...props,
     };
 
-    this.props.history.push(
+    const queryParams: QueryParams<CommunityProps> = {
-      `/c/${this.props.match.params.name}${getQueryString(queryParams)}`,
+      dataType: getDataTypeString(dataType ?? DataType.Post),
-    );
+      pageCursor: pageCursor,
+      sort: sort,
+      showHidden: showHidden,
+    };
 
-    await this.fetchData();
+    this.props.history.push(`/c/${name}${getQueryString(queryParams)}`);
   }
 
-  async fetchData() {
+  fetchDataToken?: symbol;
-    const { dataType, pageCursor, sort } = getCommunityQueryParams();
+  async fetchData(props: CommunityRouteProps) {
-    const { name } = this.props.match.params;
+    const token = (this.fetchDataToken = Symbol());
+    const { dataType, pageCursor, sort, showHidden } = props;
+    const { name } = props.match.params;
 
     if (dataType === DataType.Post) {
-      this.setState({ postsRes: LOADING_REQUEST });
+      this.setState({ postsRes: LOADING_REQUEST, commentsRes: EMPTY_REQUEST });
-      this.setState({
+      const postsRes = await HttpService.client.getPosts({
-        postsRes: await HttpService.client.getPosts({
         page_cursor: pageCursor,
         limit: fetchLimit,
         sort,
         type_: "All",
         community_name: name,
         saved_only: false,
-        }),
+        show_hidden: showHidden === "true",
       });
+      if (token === this.fetchDataToken) {
+        this.setState({ postsRes });
+      }
     } else {
-      this.setState({ commentsRes: LOADING_REQUEST });
+      this.setState({ commentsRes: LOADING_REQUEST, postsRes: EMPTY_REQUEST });
-      this.setState({
+      const commentsRes = await HttpService.client.getComments({
-        commentsRes: await HttpService.client.getComments({
         limit: fetchLimit,
         sort: postToCommentSortType(sort),
         type_: "All",
         community_name: name,
         saved_only: false,
-        }),
       });
+      if (token === this.fetchDataToken) {
+        this.setState({ commentsRes });
+      }
     }
-
-    setupTippy();
   }
 
   async handleDeleteCommunity(form: DeleteCommunity) {
@@ -719,6 +835,9 @@ export class Community extends Component<
     const createCommentRes = await HttpService.client.createComment(form);
     this.createAndUpdateComments(createCommentRes);
 
+    if (createCommentRes.state === "failed") {
+      toast(I18NextService.i18n.t(createCommentRes.err.message), "danger");
+    }
     return createCommentRes;
   }
 
@@ -726,6 +845,9 @@ export class Community extends Component<
     const editCommentRes = await HttpService.client.editComment(form);
     this.findAndUpdateCommentEdit(editCommentRes);
 
+    if (editCommentRes.state === "failed") {
+      toast(I18NextService.i18n.t(editCommentRes.err.message), "danger");
+    }
     return editCommentRes;
   }
 
@@ -800,6 +922,26 @@ export class Community extends Component<
     this.findAndUpdatePost(lockRes);
   }
 
+  async handleHidePost(form: HidePost) {
+    const hideRes = await HttpService.client.hidePost(form);
+
+    if (hideRes.state === "success") {
+      this.setState(prev => {
+        if (prev.postsRes.state === "success") {
+          for (const post of prev.postsRes.data.posts.filter(p =>
+            form.post_ids.some(id => id === p.post.id),
+          )) {
+            post.hidden = form.hide;
+          }
+        }
+
+        return prev;
+      });
+
+      toast(I18NextService.i18n.t(form.hide ? "post_hidden" : "post_unhidden"));
+    }
+  }
+
   async handleDistinguishComment(form: DistinguishComment) {
     const distinguishRes = await HttpService.client.distinguishComment(form);
     this.findAndUpdateComment(distinguishRes);
@@ -917,7 +1059,6 @@ export class Community extends Component<
           res.data.comment_view,
           s.commentsRes.data.comments,
         );
-        s.finished.set(res.data.comment_view.comment.id, true);
       }
       return s;
     });
@@ -939,12 +1080,6 @@ export class Community extends Component<
     this.setState(s => {
       if (s.commentsRes.state === "success" && res.state === "success") {
         s.commentsRes.data.comments.unshift(res.data.comment_view);
-
-        // Set finished for the parent
-        s.finished.set(
-          getCommentParentId(res.data.comment_view.comment) ?? 0,
-          true,
-        );
       }
       return s;
     });

src/shared/components/community/create-community.tsx

@@ -4,16 +4,22 @@ import {
   CreateCommunity as CreateCommunityI,
   GetSiteResponse,
 } from "lemmy-js-client";
-import { HttpService, I18NextService } from "../../services";
+import { HttpService, I18NextService, UserService } from "../../services";
 import { HtmlTags } from "../common/html-tags";
 import { CommunityForm } from "./community-form";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface CreateCommunityState {
   siteRes: GetSiteResponse;
   loading: boolean;
 }
 
-export class CreateCommunity extends Component<any, CreateCommunityState> {
+@simpleScrollMixin
+export class CreateCommunity extends Component<
+  RouteComponentProps<Record<string, never>>,
+  CreateCommunityState
+> {
   private isoData = setIsoData(this.context);
   state: CreateCommunityState = {
     siteRes: this.isoData.site_res,
@@ -62,6 +68,11 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
     const res = await HttpService.client.createCommunity(form);
 
     if (res.state === "success") {
+      const myUser = UserService.Instance.myUserInfo!;
+      UserService.Instance.myUserInfo?.moderates.push({
+        community: res.data.community_view.community,
+        moderator: myUser.local_user_view.person,
+      });
       const name = res.data.community_view.community.name;
       this.props.history.replace(`/c/${name}`);
     } else {

src/shared/components/community/sidebar.tsx

@@ -1,4 +1,4 @@
-import { hostname } from "@utils/helpers";
+import { getQueryString, hostname } from "@utils/helpers";
 import { amAdmin, amMod, amTopMod } from "@utils/roles";
 import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
@@ -25,6 +25,7 @@ import { SubscribeButton } from "../common/subscribe-button";
 import { CommunityForm } from "../community/community-form";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface SidebarProps {
   community_view: CommunityView;
@@ -60,6 +61,7 @@ interface SidebarState {
   purgeCommunityLoading: boolean;
 }
 
+@tippyMixin
 export class Sidebar extends Component<SidebarProps, SidebarState> {
   state: SidebarState = {
     showEdit: false,
@@ -78,6 +80,21 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
+  unlisten = () => {};
+
+  componentWillMount() {
+    // Leave edit mode on navigation
+    this.unlisten = this.context.router.history.listen(() => {
+      if (this.state.showEdit) {
+        this.setState({ showEdit: false });
+      }
+    });
+  }
+
+  componentWillUnmount(): void {
+    this.unlisten();
+  }
+
   componentWillReceiveProps(
     nextProps: Readonly<{ children?: InfernoNode } & SidebarProps>,
   ): void {
@@ -124,8 +141,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   sidebar() {
     const myUserInfo = UserService.Instance.myUserInfo;
     const {
-      community: { name, actor_id, id, posting_restricted_to_mods },
+      community: { name, actor_id, id, posting_restricted_to_mods, visibility },
       counts,
+      banned_from_community,
     } = this.props.community_view;
     return (
       <aside className="mb-3">
@@ -134,6 +152,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             <div className="card-body">
               {this.communityTitle()}
               {this.props.editable && this.adminButtons()}
+              {!banned_from_community && (
+                <>
                   <SubscribeButton
                     communityView={this.props.community_view}
                     onFollow={linkEvent(this, this.handleFollowCommunity)}
@@ -142,6 +162,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   />
                   {this.canPost && this.createPost()}
                   {myUserInfo && this.blockCommunity()}
+                </>
+              )}
               {!myUserInfo && (
                 <div className="alert alert-info" role="alert">
                   <T
@@ -174,7 +196,46 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   </T>
                 </div>
               )}
+              {banned_from_community && (
+                <div
+                  className="alert alert-danger text-sm-start text-xs-center"
+                  role="alert"
+                >
+                  <Icon
+                    icon="ban"
+                    inline
+                    classes="me-sm-2 mx-auto d-sm-inline d-block"
+                  />
+                  <T i18nKey="banned_from_community_blurb" className="d-inline">
+                    #<strong className="fw-bold">#</strong>#
+                  </T>
+                </div>
+              )}
               {this.description()}
+              <div>
+                <div className="fw-semibold mb-1">
+                  <span className="align-middle">
+                    {I18NextService.i18n.t("community_visibility")}:&nbsp;
+                  </span>
+                  <span className="fs-5 fw-medium align-middle">
+                    {I18NextService.i18n.t(
+                      visibility === "Public" ? "public" : "local_only",
+                    )}
+                    <Icon
+                      icon={visibility === "Public" ? "globe" : "house"}
+                      inline
+                      classes="ms-1 text-secondary"
+                    />
+                  </span>
+                </div>
+                <p>
+                  {I18NextService.i18n.t(
+                    visibility === "Public"
+                      ? "public_blurb"
+                      : "local_only_blurb",
+                  )}
+                </p>
+              </div>
               <Badges communityId={id} counts={counts} />
               {this.mods()}
             </div>
@@ -243,7 +304,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         className={`btn btn-secondary d-block mb-2 w-100 ${
           cv.community.deleted || cv.community.removed ? "no-click" : ""
         }`}
-        to={`/create_post?communityId=${cv.community.id}`}
+        to={
+          "/create_post" +
+          getQueryString({ communityId: cv.community.id.toString() })
+        }
       >
         {I18NextService.i18n.t("create_a_post")}
       </Link>
@@ -271,7 +335,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const desc = this.props.community_view.community.description;
     return (
       desc && (
-        <div className="md-div" dangerouslySetInnerHTML={mdToHtml(desc)} />
+        <div
+          className="md-div"
+          dangerouslySetInnerHTML={mdToHtml(desc, () => this.forceUpdate())}
+        />
       )
     );
   }

src/shared/components/home/admin-settings.tsx

@@ -1,21 +1,22 @@
 import { fetchThemeList, setIsoData, showLocal } from "@utils/app";
-import { capitalizeFirstLetter } from "@utils/helpers";
+import { capitalizeFirstLetter, resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
-import { Component, linkEvent } from "inferno";
+import { Component } from "inferno";
 import {
   BannedPersonsResponse,
-  CreateCustomEmoji,
+  CreateOAuthProvider,
-  DeleteCustomEmoji,
+  DeleteOAuthProvider,
-  EditCustomEmoji,
+  EditOAuthProvider,
   EditSite,
   GetFederatedInstancesResponse,
   GetSiteResponse,
   LemmyHttp,
+  ListMediaResponse,
   PersonView,
 } from "lemmy-js-client";
 import { InitialFetchRequest } from "../../interfaces";
-import { removeFromEmojiDataModel, updateEmojiDataModel } from "../../markdown";
 import { FirstLoadService, I18NextService } from "../../services";
 import {
   EMPTY_REQUEST,
@@ -34,54 +35,92 @@ import RateLimitForm from "./rate-limit-form";
 import { SiteForm } from "./site-form";
 import { TaglineForm } from "./tagline-form";
 import { getHttpBaseInternal } from "../../utils/env";
+import { RouteComponentProps } from "inferno-router/dist/Route";
+import { IRoutePropsWithFetch } from "../../routes";
+import { MediaUploads } from "../common/media-uploads";
+import { Paginator } from "../common/paginator";
+import { snapToTop } from "@utils/browser";
+import { isBrowser } from "@utils/browser";
+import ConfirmationModal from "../common/modal/confirmation-modal";
+import OAuthProvidersTab from "./oauth/oauth-providers-tab";
 
 type AdminSettingsData = RouteDataResponse<{
   bannedRes: BannedPersonsResponse;
   instancesRes: GetFederatedInstancesResponse;
+  uploadsRes: ListMediaResponse;
 }>;
 
 interface AdminSettingsState {
   siteRes: GetSiteResponse;
   banned: PersonView[];
-  currentTab: string;
   instancesRes: RequestState<GetFederatedInstancesResponse>;
   bannedRes: RequestState<BannedPersonsResponse>;
   leaveAdminTeamRes: RequestState<GetSiteResponse>;
+  showConfirmLeaveAdmin: boolean;
+  uploadsRes: RequestState<ListMediaResponse>;
+  uploadsPage: number;
   loading: boolean;
   themeList: string[];
   isIsomorphic: boolean;
 }
 
-export class AdminSettings extends Component<any, AdminSettingsState> {
+type AdminSettingsRouteProps = RouteComponentProps<Record<string, never>> &
+  Record<string, never>;
+export type AdminSettingsFetchConfig = IRoutePropsWithFetch<
+  AdminSettingsData,
+  Record<string, never>,
+  Record<string, never>
+>;
+
+@scrollMixin
+export class AdminSettings extends Component<
+  AdminSettingsRouteProps,
+  AdminSettingsState
+> {
   private isoData = setIsoData<AdminSettingsData>(this.context);
   state: AdminSettingsState = {
     siteRes: this.isoData.site_res,
     banned: [],
-    currentTab: "site",
     bannedRes: EMPTY_REQUEST,
     instancesRes: EMPTY_REQUEST,
     leaveAdminTeamRes: EMPTY_REQUEST,
+    showConfirmLeaveAdmin: false,
+    uploadsRes: EMPTY_REQUEST,
+    uploadsPage: 1,
     loading: false,
     themeList: [],
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([
+      this.state.bannedRes,
+      this.state.instancesRes,
+      this.state.uploadsRes,
+    ]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handleEditSite = this.handleEditSite.bind(this);
-    this.handleEditEmoji = this.handleEditEmoji.bind(this);
+    this.handleUploadsPageChange = this.handleUploadsPageChange.bind(this);
-    this.handleDeleteEmoji = this.handleDeleteEmoji.bind(this);
+    this.handleToggleShowLeaveAdminConfirmation =
-    this.handleCreateEmoji = this.handleCreateEmoji.bind(this);
+      this.handleToggleShowLeaveAdminConfirmation.bind(this);
+    this.handleLeaveAdminTeam = this.handleLeaveAdminTeam.bind(this);
+    this.handleEditOAuthProvider = this.handleEditOAuthProvider.bind(this);
+    this.handleDeleteOAuthProvider = this.handleDeleteOAuthProvider.bind(this);
+    this.handleCreateOAuthProvider = this.handleCreateOAuthProvider.bind(this);
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const { bannedRes, instancesRes } = this.isoData.routeData;
+      const { bannedRes, instancesRes, uploadsRes } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
         bannedRes,
         instancesRes,
+        uploadsRes,
         isIsomorphic: true,
       };
     }
@@ -96,12 +135,18 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     return {
       bannedRes: await client.getBannedPersons(),
       instancesRes: await client.getFederatedInstances(),
+      uploadsRes: await client.listAllMedia(),
     };
   }
 
-  async componentDidMount() {
+  async componentWillMount() {
+    if (isBrowser()) {
       if (!this.state.isIsomorphic) {
         await this.fetchData();
+      } else {
+        const themeList = await fetchThemeList();
+        this.setState({ themeList });
+      }
     }
   }
 
@@ -204,11 +249,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                   id="taglines-tab-pane"
                 >
                   <div className="row">
-                    <TaglineForm
+                    <TaglineForm />
-                      taglines={this.state.siteRes.taglines}
-                      onSaveSite={this.handleEditSite}
-                      loading={this.state.loading}
-                    />
                   </div>
                 </div>
               ),
@@ -225,15 +266,48 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                   id="emojis-tab-pane"
                 >
                   <div className="row">
-                    <EmojiForm
+                    <EmojiForm />
-                      onCreate={this.handleCreateEmoji}
-                      onDelete={this.handleDeleteEmoji}
-                      onEdit={this.handleEditEmoji}
-                    />
                   </div>
                 </div>
               ),
             },
+            {
+              key: "uploads",
+              label: I18NextService.i18n.t("uploads"),
+              getNode: isSelected => (
+                <div
+                  className={classNames("tab-pane", {
+                    active: isSelected,
+                  })}
+                  role="tabpanel"
+                  id="uploads-tab-pane"
+                >
+                  {this.uploads()}
+                </div>
+              ),
+            },
+            {
+              key: "auth",
+              label: I18NextService.i18n.t("authentication"),
+              getNode: isSelected => (
+                <div
+                  className={classNames("tab-pane", {
+                    active: isSelected,
+                  })}
+                  role="tabpanel"
+                  id="auth-tab-pane"
+                >
+                  <OAuthProvidersTab
+                    oauthProviders={
+                      this.state.siteRes.admin_oauth_providers ?? []
+                    }
+                    onCreate={this.handleCreateOAuthProvider}
+                    onDelete={this.handleDeleteOAuthProvider}
+                    onEdit={this.handleEditOAuthProvider}
+                  />
+                </div>
+              ),
+            },
           ]}
         />
       </div>
@@ -244,22 +318,34 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     this.setState({
       bannedRes: LOADING_REQUEST,
       instancesRes: LOADING_REQUEST,
+      uploadsRes: LOADING_REQUEST,
       themeList: [],
     });
 
-    const [bannedRes, instancesRes, themeList] = await Promise.all([
+    const [bannedRes, instancesRes, uploadsRes, themeList] = await Promise.all([
       HttpService.client.getBannedPersons(),
       HttpService.client.getFederatedInstances(),
+      HttpService.client.listAllMedia({
+        page: this.state.uploadsPage,
+      }),
       fetchThemeList(),
     ]);
 
     this.setState({
       bannedRes,
       instancesRes,
+      uploadsRes,
       themeList,
     });
   }
 
+  async fetchUploadsOnly() {
+    const uploadsRes = await HttpService.client.listAllMedia({
+      page: this.state.uploadsPage,
+    });
+    this.setState({ uploadsRes });
+  }
+
   admins() {
     return (
       <>
@@ -274,6 +360,13 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
           ))}
         </ul>
         {this.leaveAdmin()}
+        <ConfirmationModal
+          message={I18NextService.i18n.t("leave_admin_team_confirmation")}
+          loadingMessage={I18NextService.i18n.t("leaving_admin_team")}
+          onNo={this.handleToggleShowLeaveAdminConfirmation}
+          onYes={this.handleLeaveAdminTeam}
+          show={this.state.showConfirmLeaveAdmin}
+        />
       </>
     );
   }
@@ -281,7 +374,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
   leaveAdmin() {
     return (
       <button
-        onClick={linkEvent(this, this.handleLeaveAdminTeam)}
+        onClick={this.handleToggleShowLeaveAdminConfirmation}
         className="btn btn-danger mb-2"
       >
         {this.state.leaveAdminTeamRes.state === "loading" ? (
@@ -319,6 +412,30 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     }
   }
 
+  uploads() {
+    switch (this.state.uploadsRes.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const uploadsRes = this.state.uploadsRes.data;
+        return (
+          <div>
+            <MediaUploads showUploader uploads={uploadsRes} />
+            <Paginator
+              page={this.state.uploadsPage}
+              onChange={this.handleUploadsPageChange}
+              nextDisabled={false}
+            />
+          </div>
+        );
+      }
+    }
+  }
+
   async handleEditSite(form: EditSite) {
     this.setState({ loading: true });
 
@@ -328,10 +445,12 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
       this.setState(s => {
         s.siteRes.site_view = editRes.data.site_view;
         // TODO: Where to get taglines from?
-        s.siteRes.taglines = editRes.data.taglines;
         return s;
       });
       toast(I18NextService.i18n.t("site_saved"));
+
+      // You need to reload the page, to properly update the siteRes everywhere
+      setTimeout(() => location.reload(), 500);
     }
 
     this.setState({ loading: false });
@@ -339,40 +458,90 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     return editRes;
   }
 
-  handleSwitchTab(i: { ctx: AdminSettings; tab: string }) {
+  handleToggleShowLeaveAdminConfirmation() {
-    i.ctx.setState({ currentTab: i.tab });
+    this.setState(prev => ({
+      showConfirmLeaveAdmin: !prev.showConfirmLeaveAdmin,
+    }));
   }
 
-  async handleLeaveAdminTeam(i: AdminSettings) {
+  async handleLeaveAdminTeam() {
-    i.setState({ leaveAdminTeamRes: LOADING_REQUEST });
+    this.setState({ leaveAdminTeamRes: LOADING_REQUEST });
     this.setState({
       leaveAdminTeamRes: await HttpService.client.leaveAdmin(),
     });
 
     if (this.state.leaveAdminTeamRes.state === "success") {
       toast(I18NextService.i18n.t("left_admin_team"));
+      this.setState({ showConfirmLeaveAdmin: false });
       this.context.router.history.replace("/");
     }
   }
 
-  async handleEditEmoji(form: EditCustomEmoji) {
+  async handleUploadsPageChange(val: number) {
-    const res = await HttpService.client.editCustomEmoji(form);
+    this.setState({ uploadsPage: val });
-    if (res.state === "success") {
+    snapToTop();
-      updateEmojiDataModel(res.data.custom_emoji);
+    await this.fetchUploadsOnly();
-    }
   }
 
-  async handleDeleteEmoji(form: DeleteCustomEmoji) {
+  async handleEditOAuthProvider(form: EditOAuthProvider) {
-    const res = await HttpService.client.deleteCustomEmoji(form);
+    this.setState({ loading: true });
+
+    const res = await HttpService.client.editOAuthProvider(form);
+
     if (res.state === "success") {
-      removeFromEmojiDataModel(form.id);
+      const newOAuthProvider = res.data;
-    }
+      this.setState(s => {
+        s.siteRes.admin_oauth_providers = (
+          s.siteRes.admin_oauth_providers ?? []
+        ).map(p => {
+          return p?.id === newOAuthProvider.id ? newOAuthProvider : p;
+        });
+        return s;
+      });
+      toast(I18NextService.i18n.t("site_saved"));
+    } else {
+      toast(I18NextService.i18n.t("couldnt_edit_oauth_provider"), "danger");
     }
 
-  async handleCreateEmoji(form: CreateCustomEmoji) {
+    this.setState({ loading: false });
-    const res = await HttpService.client.createCustomEmoji(form);
+  }
+
+  async handleDeleteOAuthProvider(form: DeleteOAuthProvider) {
+    this.setState({ loading: true });
+
+    const res = await HttpService.client.deleteOAuthProvider(form);
+
     if (res.state === "success") {
-      updateEmojiDataModel(res.data.custom_emoji);
+      this.setState(s => {
-    }
+        s.siteRes.admin_oauth_providers = (
+          s.siteRes.admin_oauth_providers ?? []
+        ).filter(p => p.id !== form.id);
+        return s;
+      });
+      toast(I18NextService.i18n.t("site_saved"));
+    } else {
+      toast(I18NextService.i18n.t("couldnt_delete_oauth_provider"), "danger");
+    }
+
+    this.setState({ loading: false });
+  }
+
+  async handleCreateOAuthProvider(form: CreateOAuthProvider) {
+    this.setState({ loading: true });
+
+    const res = await HttpService.client.createOAuthProvider(form);
+    if (res.state === "success") {
+      this.setState(s => {
+        s.siteRes.admin_oauth_providers = [
+          ...(s.siteRes.admin_oauth_providers ?? []),
+          res.data,
+        ];
+      });
+      toast(I18NextService.i18n.t("site_saved"));
+    } else {
+      toast(I18NextService.i18n.t("couldnt_create_oauth_provider"), "danger");
+    }
+
+    this.setState({ loading: false });
   }
 }

src/shared/components/home/emojis-form.tsx

@@ -1,77 +1,81 @@
-import { setIsoData } from "@utils/app";
 import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
-import {
+import { CustomEmojiView } from "lemmy-js-client";
-  CreateCustomEmoji,
+import { emojiMartCategories, EmojiMartCategory } from "../../markdown";
-  DeleteCustomEmoji,
-  EditCustomEmoji,
-  GetSiteResponse,
-} from "lemmy-js-client";
-import { customEmojisLookup } from "../../markdown";
 import { HttpService, I18NextService } from "../../services";
 import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiMart } from "../common/emoji-mart";
 import { Icon, Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";
+import { tippyMixin } from "../mixins/tippy-mixin";
+import { isBrowser } from "@utils/browser";
+import classNames from "classnames";
+import { amAdmin } from "@utils/roles";
+import { Prompt } from "inferno-router";
 
-interface EmojiFormProps {
+interface EditableEmoji {
-  onEdit(form: EditCustomEmoji): void;
+  change?: "update" | "delete" | "create";
-  onCreate(form: CreateCustomEmoji): void;
+  emoji: CustomEmojiView;
-  onDelete(form: DeleteCustomEmoji): void;
+  loading?: boolean;
+}
+
+function markForUpdate(editable: EditableEmoji) {
+  if (editable.change !== "create") {
+    editable.change = "update";
+  }
 }
 
 interface EmojiFormState {
-  siteRes: GetSiteResponse;
+  emojis: EditableEmoji[]; // Emojis for the current page
-  customEmojis: CustomEmojiViewForm[];
+  allEmojis: CustomEmojiView[]; // All emojis for emoji lookup across pages
-  page: number;
+  emojiMartCustom: EmojiMartCategory[];
-}
+  emojiMartKey: number;
-
-interface CustomEmojiViewForm {
-  id: number;
-  category: string;
-  shortcode: string;
-  image_url: string;
-  alt_text: string;
-  keywords: string;
-  changed: boolean;
   page: number;
   loading: boolean;
 }
 
-export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
+@tippyMixin
-  private isoData = setIsoData(this.context);
+export class EmojiForm extends Component<Record<never, never>, EmojiFormState> {
   private itemsPerPage = 15;
-  private emptyState: EmojiFormState = {
+  private needsRefetch = true;
-    siteRes: this.isoData.site_res,
+  state: EmojiFormState = {
-    customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
+    emojis: [],
-      id: x.custom_emoji.id,
+    allEmojis: [],
-      category: x.custom_emoji.category,
+    emojiMartCustom: [],
-      shortcode: x.custom_emoji.shortcode,
+    emojiMartKey: 1,
-      image_url: x.custom_emoji.image_url,
-      alt_text: x.custom_emoji.alt_text,
-      keywords: x.keywords.map(x => x.keyword).join(" "),
-      changed: false,
-      page: 1 + Math.floor(index / this.itemsPerPage),
     loading: false,
-    })),
     page: 1,
   };
-  state: EmojiFormState;
   private scrollRef: any = {};
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = this.emptyState;
 
     this.handlePageChange = this.handlePageChange.bind(this);
     this.handleEmojiClick = this.handleEmojiClick.bind(this);
   }
+
+  async componentWillMount() {
+    if (isBrowser()) {
+      this.handlePageChange(1);
+    }
+  }
+
+  hasPendingChanges() {
+    return this.state.emojis.some(x => x.change);
+  }
+
   render() {
     return (
       <div className="home-emojis-form col-12">
+        <Prompt
+          message={I18NextService.i18n.t("block_leaving")}
+          when={this.hasPendingChanges()}
+        />
         <h1 className="h4 mb-4">{I18NextService.i18n.t("custom_emojis")}</h1>
-        {customEmojisLookup.size > 0 && (
+        {this.state.emojiMartCustom.length > 0 && (
           <div>
             <EmojiMart
+              key={this.state.emojiMartKey}
               onEmojiClick={this.handleEmojiClick}
               pickerOptions={this.configurePicker()}
             ></EmojiMart>
@@ -85,6 +89,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
             <thead className="pointer">
               <tr>
                 <th>{I18NextService.i18n.t("column_emoji")}</th>
+                <th
+                  className="text-right"
+                  // Upload button
+                />
                 <th className="text-right">
                   {I18NextService.i18n.t("column_shortcode")}
                 </th>
@@ -100,20 +108,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                 <th className="text-right d-lg-table-cell">
                   {I18NextService.i18n.t("column_keywords")}
                 </th>
+                <th></th>
                 <th style="width:121px"></th>
               </tr>
             </thead>
             <tbody>
-              {this.state.customEmojis
+              {this.state.emojis.map((editable: EditableEmoji, index) => {
-                .slice(
+                const cv = editable.emoji.custom_emoji;
-                  Number((this.state.page - 1) * this.itemsPerPage),
+                return (
-                  Number(
+                  <tr key={index}>
-                    (this.state.page - 1) * this.itemsPerPage +
-                      this.itemsPerPage,
-                  ),
-                )
-                .map((cv, index) => (
-                  <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
                     <td style="text-align:center;">
                       {cv.image_url.length > 0 && (
                         <img
@@ -122,7 +125,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                           alt={cv.alt_text}
                         />
                       )}
-                      {cv.image_url.length === 0 && (
+                    </td>
+                    <td>
+                      {
                         <label
                           // TODO: Fix this linting violation
                           // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -148,7 +153,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                             )}
                           />
                         </label>
-                      )}
+                      }
                     </td>
                     <td className="text-right">
                       <input
@@ -165,6 +170,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                     </td>
                     <td className="text-right">
                       <input
+                        ref={e => (this.scrollRef[cv.shortcode] = e)}
                         type="text"
                         placeholder="Category"
                         className="form-control"
@@ -204,31 +210,54 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         type="text"
                         placeholder="Keywords"
                         className="form-control"
-                        value={cv.keywords}
+                        value={editable.emoji.keywords
+                          .map(k => k.keyword)
+                          .join(" ")}
                         onInput={linkEvent(
                           { form: this, index: index },
                           this.handleEmojiKeywordChange,
                         )}
                       />
                     </td>
+                    <td
+                      className={classNames("", {
+                        "border-info": editable.change === "update",
+                        "border-danger": editable.change === "delete",
+                        "border-warning": editable.change === "create",
+                      })}
+                    >
+                      {editable.change === "update" && (
+                        <span>
+                          <Icon icon="transfer" />
+                        </span>
+                      )}
+                      {editable.change === "delete" && (
+                        <span>
+                          <Icon icon="trash" />
+                        </span>
+                      )}
+                      {editable.change === "create" && (
+                        <span>
+                          <Icon icon="add" />
+                        </span>
+                      )}
+                    </td>
                     <td>
-                      <div>
+                      <div class="row flex-nowrap g-0">
-                        <span title={this.getEditTooltip(cv)}>
+                        <span class="col" title={this.getEditTooltip(editable)}>
                           <button
-                            className={
+                            className={classNames("btn btn-link btn-animate", {
-                              (this.canEdit(cv)
+                              "text-success": this.canSave(editable),
-                                ? "text-success "
+                            })}
-                                : "text-muted ") + "btn btn-link btn-animate"
-                            }
                             onClick={linkEvent(
-                              { i: this, cv: cv },
+                              { i: this, cv: editable },
-                              this.handleEditEmojiClick,
+                              this.handleSaveEmojiClick,
                             )}
                             data-tippy-content={I18NextService.i18n.t("save")}
                             aria-label={I18NextService.i18n.t("save")}
-                            disabled={!this.canEdit(cv)}
+                            disabled={!this.canSave(editable)}
                           >
-                            {cv.loading ? (
+                            {editable.loading ? (
                               <Spinner />
                             ) : (
                               capitalizeFirstLetter(
@@ -238,14 +267,14 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                           </button>
                         </span>
                         <button
-                          className="btn btn-link btn-animate text-muted"
+                          className="col btn btn-link btn-animate text-muted"
                           onClick={linkEvent(
-                            { i: this, index: index, cv: cv },
+                            { i: this, index: index, cv: editable },
                             this.handleDeleteEmojiClick,
                           )}
                           data-tippy-content={I18NextService.i18n.t("delete")}
                           aria-label={I18NextService.i18n.t("delete")}
-                          disabled={cv.loading}
+                          disabled={editable.loading}
                           title={I18NextService.i18n.t("delete")}
                         >
                           <Icon
@@ -253,10 +282,28 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                             classes="icon-inline text-danger"
                           />
                         </button>
+                        <button
+                          className={classNames(
+                            "col btn btn-link btn-animate",
+                            {
+                              "text-danger": !!editable.change,
+                            },
+                          )}
+                          onClick={linkEvent(
+                            { i: this, cv: editable },
+                            this.handleCancelEmojiClick,
+                          )}
+                          data-tippy-content={I18NextService.i18n.t("cancel")}
+                          aria-label={I18NextService.i18n.t("cancel")}
+                          disabled={!editable.change}
+                        >
+                          {I18NextService.i18n.t("cancel")}
+                        </button>
                       </div>
                     </td>
                   </tr>
-                ))}
+                );
+              })}
             </tbody>
           </table>
           <br />
@@ -271,43 +318,91 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
             page={this.state.page}
             onChange={this.handlePageChange}
             nextDisabled={false}
+            disabled={this.hasPendingChanges()}
           />
         </div>
       </div>
     );
   }
 
-  canEdit(cv: CustomEmojiViewForm) {
+  canSave(cv: EditableEmoji) {
-    const noEmptyFields =
+    const requiredFields =
-      cv.alt_text.length > 0 &&
+      cv.emoji.custom_emoji.image_url.length > 0 &&
-      cv.category.length > 0 &&
+      cv.emoji.custom_emoji.shortcode.length > 0;
-      cv.image_url.length > 0 &&
+    return requiredFields && !cv.loading;
-      cv.shortcode.length > 0;
-    const noDuplicateShortCodes =
-      this.state.customEmojis.filter(
-        x => x.shortcode === cv.shortcode && x.id !== cv.id,
-      ).length === 0;
-    return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
   }
 
-  getEditTooltip(cv: CustomEmojiViewForm) {
+  getEditTooltip(cv: EditableEmoji) {
-    if (this.canEdit(cv)) return I18NextService.i18n.t("save");
+    if (this.canSave(cv)) return I18NextService.i18n.t("save");
     else return I18NextService.i18n.t("custom_emoji_save_validation");
   }
 
-  handlePageChange(page: number) {
+  async handlePageChange(page: number) {
-    this.setState({ page: page });
+    this.setState({ loading: true });
+    let allEmojis: CustomEmojiView[] = this.state.allEmojis;
+    let emojiMartCustom: EmojiMartCategory[] = this.state.emojiMartCustom;
+    let emojiMartKey: number = this.state.emojiMartKey;
+    if (this.needsRefetch) {
+      const emojiRes = await HttpService.client.listCustomEmojis({
+        ignore_page_limits: true,
+      });
+      if (emojiRes.state === "success") {
+        this.needsRefetch = false;
+        allEmojis = emojiRes.data.custom_emojis;
+        allEmojis.sort((a, b) => {
+          const categoryOrder = a.custom_emoji.category.localeCompare(
+            b.custom_emoji.category,
+          );
+          if (categoryOrder === 0) {
+            return a.custom_emoji.shortcode.localeCompare(
+              b.custom_emoji.shortcode,
+            );
+          }
+          return categoryOrder;
+        });
+      }
+      emojiMartCustom = emojiMartCategories(allEmojis);
+      emojiMartKey++;
+    }
+    if (allEmojis) {
+      const startIndex = (page - 1) * this.itemsPerPage;
+      const emojis = allEmojis
+        .slice(startIndex, startIndex + this.itemsPerPage)
+        .map(x => ({ emoji: structuredClone(x) })); // clone for restore after cancel
+      this.setState({
+        loading: false,
+        allEmojis,
+        emojiMartCustom,
+        emojiMartKey,
+        emojis,
+        page,
+      });
+    } else {
+      this.setState({ loading: false, page });
+    }
   }
 
-  handleEmojiClick(e: any) {
+  async handleEmojiClick(e: any) {
-    const view = customEmojisLookup.get(e.id);
+    const emojiIndex = this.state.allEmojis.findIndex(
-    if (view) {
+      x => x.custom_emoji.shortcode === e.id,
-      const page = this.state.customEmojis.find(
+    );
-        x => x.id === view.custom_emoji.id,
+    if (emojiIndex >= 0) {
-      )?.page;
+      const { shortcode } = this.state.allEmojis[emojiIndex].custom_emoji;
-      if (page) {
+      const page = Math.floor(emojiIndex / this.itemsPerPage) + 1;
-        this.setState({ page: page });
+      if (page !== this.state.page) {
-        this.scrollRef[view.custom_emoji.shortcode].scrollIntoView();
+        if (
+          this.hasPendingChanges() &&
+          !confirm(I18NextService.i18n.t("block_leaving"))
+        ) {
+          return;
+        }
+        await this.handlePageChange(page);
+        await new Promise(r => setTimeout(r));
+      }
+      if (shortcode) {
+        const categoryInput: HTMLInputElement | undefined =
+          this.scrollRef[shortcode];
+        categoryInput?.focus();
       }
     }
   }
@@ -316,32 +411,22 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
     props: { form: EmojiForm; index: number },
     event: any,
   ) {
-    const custom_emojis = [...props.form.state.customEmojis];
+    const editable: EditableEmoji = props.form.state.emojis[props.index];
-    const pagedIndex =
+    props.form.setState(() => {
-      (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
+      markForUpdate(editable);
-    const item = {
+      editable.emoji.custom_emoji.category = event.target.value;
-      ...props.form.state.customEmojis[pagedIndex],
+    });
-      category: event.target.value,
-      changed: true,
-    };
-    custom_emojis[Number(pagedIndex)] = item;
-    props.form.setState({ customEmojis: custom_emojis });
   }
 
   handleEmojiShortCodeChange(
     props: { form: EmojiForm; index: number },
     event: any,
   ) {
-    const custom_emojis = [...props.form.state.customEmojis];
+    const editable: EditableEmoji = props.form.state.emojis[props.index];
-    const pagedIndex =
+    props.form.setState(() => {
-      (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
+      markForUpdate(editable);
-    const item = {
+      editable.emoji.custom_emoji.shortcode = event.target.value;
-      ...props.form.state.customEmojis[pagedIndex],
+    });
-      shortcode: event.target.value,
-      changed: true,
-    };
-    custom_emojis[Number(pagedIndex)] = item;
-    props.form.setState({ customEmojis: custom_emojis });
   }
 
   handleEmojiImageUrlChange(
@@ -352,28 +437,11 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
     }: { form: EmojiForm; index: number; overrideValue: string | null },
     event: any,
   ) {
-    form.setState(prevState => {
+    const editable: EditableEmoji = form.state.emojis[index];
-      const custom_emojis = [...form.state.customEmojis];
+    form.setState(() => {
-      const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
+      markForUpdate(editable);
-      const item = {
+      editable.emoji.custom_emoji.image_url =
-        ...form.state.customEmojis[pagedIndex],
+        overrideValue ?? event.target.value;
-        image_url: overrideValue ?? event.target.value,
-        changed: true,
-      };
-      custom_emojis[Number(pagedIndex)] = item;
-      return {
-        ...prevState,
-        customEmojis: prevState.customEmojis.map((ce, i) =>
-          i === pagedIndex
-            ? {
-                ...ce,
-                image_url: overrideValue ?? event.target.value,
-                changed: true,
-                loading: false,
-              }
-            : ce,
-        ),
-      };
     });
   }
 
@@ -381,98 +449,118 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
     props: { form: EmojiForm; index: number },
     event: any,
   ) {
-    const custom_emojis = [...props.form.state.customEmojis];
+    const editable: EditableEmoji = props.form.state.emojis[props.index];
-    const pagedIndex =
+    props.form.setState(() => {
-      (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
+      markForUpdate(editable);
-    const item = {
+      editable.emoji.custom_emoji.alt_text = event.target.value;
-      ...props.form.state.customEmojis[pagedIndex],
+    });
-      alt_text: event.target.value,
-      changed: true,
-    };
-    custom_emojis[Number(pagedIndex)] = item;
-    props.form.setState({ customEmojis: custom_emojis });
   }
 
   handleEmojiKeywordChange(
     props: { form: EmojiForm; index: number },
     event: any,
   ) {
-    const custom_emojis = [...props.form.state.customEmojis];
+    const editable: EditableEmoji = props.form.state.emojis[props.index];
-    const pagedIndex =
+    props.form.setState(() => {
-      (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
+      markForUpdate(editable);
-    const item = {
+      editable.emoji.keywords = event.target.value
-      ...props.form.state.customEmojis[pagedIndex],
+        .split(" ")
-      keywords: event.target.value,
+        .map((x: string) => ({ id: -1, keyword: x }));
-      changed: true,
+    });
-    };
-    custom_emojis[Number(pagedIndex)] = item;
-    props.form.setState({ customEmojis: custom_emojis });
   }
 
   handleDeleteEmojiClick(d: {
     i: EmojiForm;
     index: number;
-    cv: CustomEmojiViewForm;
+    cv: EditableEmoji;
   }) {
-    const pagedIndex = (d.i.state.page - 1) * d.i.itemsPerPage + d.index;
+    if (d.cv.change === "create") {
-    if (d.cv.id !== 0) {
+      // This drops the entry immediately, other deletes have to be saved.
-      d.i.props.onDelete({
+      d.i.setState(prev => ({
-        id: d.cv.id,
+        emojis: prev.emojis.filter(x => x !== d.cv),
-      });
+      }));
     } else {
-      const custom_emojis = [...d.i.state.customEmojis];
+      d.i.setState(() => {
-      custom_emojis.splice(Number(pagedIndex), 1);
+        d.cv.change = "delete";
-      d.i.setState({ customEmojis: custom_emojis });
-    }
-  }
-
-  handleEditEmojiClick(d: { i: EmojiForm; cv: CustomEmojiViewForm }) {
-    const keywords = d.cv.keywords
-      .split(" ")
-      .filter(x => x.length > 0) as string[];
-    const uniqueKeywords = Array.from(new Set(keywords));
-    if (d.cv.id !== 0) {
-      d.i.props.onEdit({
-        id: d.cv.id,
-        category: d.cv.category,
-        image_url: d.cv.image_url,
-        alt_text: d.cv.alt_text,
-        keywords: uniqueKeywords,
-      });
-    } else {
-      d.i.props.onCreate({
-        category: d.cv.category,
-        shortcode: d.cv.shortcode,
-        image_url: d.cv.image_url,
-        alt_text: d.cv.alt_text,
-        keywords: uniqueKeywords,
       });
     }
   }
 
-  handleAddEmojiClick(form: EmojiForm, event: any) {
+  async handleSaveEmojiClick(d: { i: EmojiForm; cv: EditableEmoji }) {
-    event.preventDefault();
+    d.i.needsRefetch = true;
-    form.setState(prevState => {
+    const editable = d.cv;
-      const page =
+    if (editable.change === "update") {
-        1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
+      const resp = await HttpService.client.editCustomEmoji({
-      const item: CustomEmojiViewForm = {
+        ...editable.emoji.custom_emoji,
-        id: 0,
+        keywords: editable.emoji.keywords.map(x => x.keyword),
-        shortcode: "",
+      });
-        alt_text: "",
+      if (resp.state === "success") {
-        category: "",
+        d.i.setState(() => {
-        image_url: "",
+          editable.emoji = resp.data.custom_emoji;
-        keywords: "",
+          editable.change = undefined;
-        changed: false,
+        });
-        page: page,
+      }
-        loading: false,
+    } else if (editable.change === "delete") {
-      };
+      const resp = await HttpService.client.deleteCustomEmoji(
+        editable.emoji.custom_emoji,
+      );
+      if (resp.state === "success") {
+        d.i.setState(prev => ({
+          emojis: prev.emojis.filter(x => x !== editable),
+        }));
+      }
+    } else if (editable.change === "create") {
+      const resp = await HttpService.client.createCustomEmoji({
+        ...editable.emoji.custom_emoji,
+        keywords: editable.emoji.keywords.map(x => x.keyword),
+      });
+      if (resp.state === "success") {
+        d.i.setState(() => {
+          editable.emoji = resp.data.custom_emoji;
+          editable.change = undefined;
+        });
+      }
+    }
+  }
 
+  async handleCancelEmojiClick(d: { i: EmojiForm; cv: EditableEmoji }) {
+    if (d.cv.change === "create") {
+      d.i.setState(() => {
         return {
-        ...prevState,
+          emojis: d.i.state.emojis.filter(x => x !== d.cv),
-        customEmojis: [...prevState.customEmojis, item],
-        page,
         };
       });
+    } else if (d.cv.change === "update" || d.cv.change === "delete") {
+      const original = d.i.state.allEmojis.find(
+        x => x.custom_emoji.id === d.cv.emoji.custom_emoji.id,
+      );
+      if (original) {
+        d.i.setState(() => {
+          d.cv.emoji = structuredClone(original);
+          d.cv.change = undefined;
+        });
+      }
+    }
+  }
+
+  async handleAddEmojiClick(form: EmojiForm, event: any) {
+    event.preventDefault();
+    form.setState(prev => {
+      prev.emojis.push({
+        emoji: {
+          custom_emoji: {
+            id: -1,
+            published: "",
+            category: "",
+            shortcode: "",
+            image_url: "",
+            alt_text: "",
+          },
+          keywords: [],
+        },
+        change: "create",
+      });
+    });
   }
 
   handleImageUpload(
@@ -487,16 +575,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
       file = event;
     }
 
-    form.setState(prevState => ({
+    const editable = form.state.emojis[index];
-      ...prevState,
+    form.setState(() => {
-      customEmojis: prevState.customEmojis.map((cv, i) =>
+      editable.loading = true;
-        i === index ? { ...cv, loading: true } : cv,
+    });
-      ),
-    }));
 
     HttpService.client.uploadImage({ image: file }).then(res => {
-      console.log("pictrs upload:");
+      form.setState(() => {
-      console.log(res);
+        editable.loading = false;
+      });
       if (res.state === "success") {
         if (res.data.msg === "ok") {
           pictrsDeleteToast(file.name, res.data.delete_url as string);
@@ -517,10 +604,20 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
   }
 
   configurePicker(): any {
+    const custom = this.state.emojiMartCustom;
+    if (process.env["NODE_ENV"] === "development") {
+      // Once an emoji-mart Picker is initialized with these options, other
+      // instances also only show the custom emojis.
+      console.assert(
+        amAdmin(),
+        "EmojiMart doesn't deal well with differently configured instances.",
+      );
+    }
     return {
       data: { categories: [], emojis: [], aliases: [] },
       maxFrequentRows: 0,
       dynamicWidth: true,
+      custom,
     };
   }
 }

src/shared/components/home/home.tsx

@@ -1,28 +1,29 @@
 import {
   commentsToFlatNodes,
+  commentToPostSortType,
   editComment,
   editPost,
   editWith,
   enableDownvotes,
   enableNsfw,
-  getCommentParentId,
   getDataTypeString,
   myAuth,
   postToCommentSortType,
   setIsoData,
   showLocal,
   updatePersonBlock,
+  voteDisplayMode,
 } from "@utils/app";
 import {
   getQueryParams,
   getQueryString,
-  getRandomFromList,
+  resourcesSettled,
 } from "@utils/helpers";
-import { canCreateCommunity } from "@utils/roles";
+import { scrollMixin } from "../mixins/scroll-mixin";
-import type { QueryParams } from "@utils/types";
+import type { QueryParams, StringBoolean } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
 import { NoOptionI18nKeys } from "i18next";
-import { Component, MouseEventHandler, linkEvent } from "inferno";
+import { Component, InfernoNode, MouseEventHandler, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import {
@@ -33,7 +34,6 @@ import {
   BanPerson,
   BanPersonResponse,
   BlockPerson,
-  CommentId,
   CommentReplyResponse,
   CommentResponse,
   CreateComment,
@@ -52,9 +52,8 @@ import {
   GetPosts,
   GetPostsResponse,
   GetSiteResponse,
+  HidePost,
   LemmyHttp,
-  ListCommunities,
-  ListCommunitiesResponse,
   ListingType,
   LockPost,
   MarkCommentReplyAsRead,
@@ -68,11 +67,12 @@ import {
   RemovePost,
   SaveComment,
   SavePost,
-  SortType,
+  PostSortType,
   SuccessResponse,
   TransferCommunity,
+  CommentSortType,
 } from "lemmy-js-client";
-import { fetchLimit, relTags, trendingFetchLimit } from "../../config";
+import { fetchLimit, relTags } from "../../config";
 import {
   CommentViewType,
   DataType,
@@ -87,12 +87,12 @@ import {
   RequestState,
   wrapClient,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { toast } from "../../toast";
 import { CommentNodes } from "../comment/comment-nodes";
 import { DataTypeSelect } from "../common/data-type-select";
 import { HtmlTags } from "../common/html-tags";
-import { Icon, Spinner } from "../common/icon";
+import { Icon } from "../common/icon";
 import { ListingTypeSelect } from "../common/listing-type-select";
 import { SortSelect } from "../common/sort-select";
 import { CommunityLink } from "../community/community-link";
@@ -100,52 +100,56 @@ import { PostListings } from "../post/post-listings";
 import { SiteSidebar } from "./site-sidebar";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
+import {
+  CommentsLoadingSkeleton,
+  PostsLoadingSkeleton,
+} from "../common/loading-skeleton";
+import { RouteComponentProps } from "inferno-router/dist/Route";
+import { IRoutePropsWithFetch } from "../../routes";
+import PostHiddenSelect from "../common/post-hidden-select";
+import { isBrowser, snapToTop } from "@utils/browser";
+import { CommentSortSelect } from "../common/comment-sort-select";
 
 interface HomeState {
   postsRes: RequestState<GetPostsResponse>;
   commentsRes: RequestState<GetCommentsResponse>;
-  trendingCommunitiesRes: RequestState<ListCommunitiesResponse>;
   showSubscribedMobile: boolean;
-  showTrendingMobile: boolean;
   showSidebarMobile: boolean;
   subscribedCollapsed: boolean;
-  scrolled: boolean;
   tagline?: string;
   siteRes: GetSiteResponse;
-  finished: Map<CommentId, boolean | undefined>;
   isIsomorphic: boolean;
 }
 
 interface HomeProps {
   listingType?: ListingType;
   dataType: DataType;
-  sort: SortType;
+  sort: PostSortType;
   pageCursor?: PaginationCursor;
+  showHidden?: StringBoolean;
 }
 
 type HomeData = RouteDataResponse<{
   postsRes: GetPostsResponse;
   commentsRes: GetCommentsResponse;
-  trendingCommunitiesRes: ListCommunitiesResponse;
 }>;
 
-function getRss(listingType: ListingType) {
+function getRss(listingType: ListingType, sort: PostSortType) {
-  const { sort } = getHomeQueryParams();
-
   let rss: string | undefined = undefined;
 
+  const queryString = getQueryString({ sort });
   switch (listingType) {
     case "All": {
-      rss = `/feeds/all.xml?sort=${sort}`;
+      rss = "/feeds/all.xml" + queryString;
       break;
     }
     case "Local": {
-      rss = `/feeds/local.xml?sort=${sort}`;
+      rss = "/feeds/local.xml" + queryString;
       break;
     }
     case "Subscribed": {
       const auth = myAuth();
-      rss = auth ? `/feeds/front/${auth}.xml?sort=${sort}` : undefined;
+      rss = auth ? `/feeds/front/${auth}.xml${queryString}` : undefined;
       break;
     }
   }
@@ -167,31 +171,48 @@ function getDataTypeFromQuery(type?: string): DataType {
 }
 
 function getListingTypeFromQuery(
-  type?: string,
+  type: string | undefined,
-  myUserInfo = UserService.Instance.myUserInfo,
+  fallback: ListingType,
-): ListingType | undefined {
+): ListingType {
-  const myListingType =
+  return type ? (type as ListingType) : fallback;
-    myUserInfo?.local_user_view?.local_user?.default_listing_type;
-
-  return type ? (type as ListingType) : myListingType;
 }
 
 function getSortTypeFromQuery(
-  type?: string,
+  type: string | undefined,
-  myUserInfo = UserService.Instance.myUserInfo,
+  fallback: PostSortType,
-): SortType {
+): PostSortType {
-  const mySortType = myUserInfo?.local_user_view?.local_user?.default_sort_type;
+  return type ? (type as PostSortType) : fallback;
-
-  return (type ? (type as SortType) : mySortType) ?? "Active";
 }
 
-function getHomeQueryParams() {
+type Fallbacks = {
-  return getQueryParams<HomeProps>({
+  sort: PostSortType;
+  listingType: ListingType;
+};
+
+export function getHomeQueryParams(
+  source: string | undefined,
+  siteRes: GetSiteResponse,
+): HomeProps {
+  const myUserInfo = siteRes.my_user ?? UserService.Instance.myUserInfo;
+  const local_user = myUserInfo?.local_user_view.local_user;
+  const local_site = siteRes.site_view.local_site;
+  return getQueryParams<HomeProps, Fallbacks>(
+    {
       sort: getSortTypeFromQuery,
       listingType: getListingTypeFromQuery,
-    pageCursor: cursor => cursor,
+      pageCursor: (cursor?: string) => cursor,
       dataType: getDataTypeFromQuery,
-  });
+      showHidden: (include?: StringBoolean) => include,
+    },
+    source,
+    {
+      sort:
+        local_user?.default_post_sort_type ?? local_site.default_post_sort_type,
+      listingType:
+        local_user?.default_listing_type ??
+        local_site.default_post_listing_type,
+    },
+  );
 }
 
 const MobileButton = ({
@@ -212,40 +233,44 @@ const MobileButton = ({
   </button>
 );
 
-const LinkButton = ({
+type HomePathProps = Record<string, never>;
-  path,
+type HomeRouteProps = RouteComponentProps<HomePathProps> & HomeProps;
-  translationKey,
+export type HomeFetchConfig = IRoutePropsWithFetch<
-}: {
+  HomeData,
-  path: string;
+  HomePathProps,
-  translationKey: NoOptionI18nKeys;
+  HomeProps
-}) => (
+>;
-  <Link className="btn btn-secondary d-block" to={path}>
-    {I18NextService.i18n.t(translationKey)}
-  </Link>
-);
 
-export class Home extends Component<any, HomeState> {
+@scrollMixin
+@tippyMixin
+export class Home extends Component<HomeRouteProps, HomeState> {
   private isoData = setIsoData<HomeData>(this.context);
   state: HomeState = {
     postsRes: EMPTY_REQUEST,
     commentsRes: EMPTY_REQUEST,
-    trendingCommunitiesRes: EMPTY_REQUEST,
-    scrolled: true,
     siteRes: this.isoData.site_res,
     showSubscribedMobile: false,
-    showTrendingMobile: false,
     showSidebarMobile: false,
     subscribedCollapsed: false,
-    finished: new Map(),
     isIsomorphic: false,
   };
 
+  loadingSettled(): boolean {
+    return resourcesSettled([
+      this.props.dataType === DataType.Post
+        ? this.state.postsRes
+        : this.state.commentsRes,
+    ]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handleSortChange = this.handleSortChange.bind(this);
+    this.handleCommentSortChange = this.handleCommentSortChange.bind(this);
     this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
     this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
+    this.handleShowHiddenChange = this.handleShowHiddenChange.bind(this);
     this.handlePageNext = this.handlePageNext.bind(this);
     this.handlePagePrev = this.handlePagePrev.bind(this);
 
@@ -276,54 +301,49 @@ export class Home extends Component<any, HomeState> {
     this.handleSavePost = this.handleSavePost.bind(this);
     this.handlePurgePost = this.handlePurgePost.bind(this);
     this.handleFeaturePost = this.handleFeaturePost.bind(this);
+    this.handleHidePost = this.handleHidePost.bind(this);
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const { trendingCommunitiesRes, commentsRes, postsRes } =
+      const { commentsRes, postsRes } = this.isoData.routeData;
-        this.isoData.routeData;
 
       this.state = {
         ...this.state,
-        trendingCommunitiesRes,
         commentsRes,
         postsRes,
         isIsomorphic: true,
       };
     }
 
-    this.state.tagline = getRandomFromList(
+    this.state.tagline = this.state?.siteRes?.tagline?.content;
-      this.state?.siteRes?.taglines ?? [],
-    )?.content;
   }
 
-  async componentDidMount() {
+  async componentWillMount() {
     if (
-      !this.state.isIsomorphic ||
+      (!this.state.isIsomorphic ||
         !Object.values(this.isoData.routeData).some(
           res => res.state === "success" || res.state === "failed",
-      )
+        )) &&
+      isBrowser()
     ) {
-      await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
+      await this.fetchData(this.props);
+    }
   }
 
-    setupTippy();
+  componentWillReceiveProps(
+    nextProps: HomeRouteProps & { children?: InfernoNode },
+  ) {
+    this.fetchData(nextProps);
   }
 
   static async fetchInitialData({
-    query: { dataType: urlDataType, listingType, pageCursor, sort: urlSort },
+    query: { listingType, dataType, sort, pageCursor, showHidden },
-    site,
     headers,
-  }: InitialFetchRequest<QueryParams<HomeProps>>): Promise<HomeData> {
+  }: InitialFetchRequest<HomePathProps, HomeProps>): Promise<HomeData> {
     const client = wrapClient(
       new LemmyHttp(getHttpBaseInternal(), { headers }),
     );
 
-    const dataType = getDataTypeFromQuery(urlDataType);
-    const type_ =
-      getListingTypeFromQuery(listingType, site.my_user) ??
-      site.site_view.local_site.default_post_listing_type;
-    const sort = getSortTypeFromQuery(urlSort, site.my_user);
-
     let postsFetch: Promise<RequestState<GetPostsResponse>> =
       Promise.resolve(EMPTY_REQUEST);
     let commentsFetch: Promise<RequestState<GetCommentsResponse>> =
@@ -331,11 +351,12 @@ export class Home extends Component<any, HomeState> {
 
     if (dataType === DataType.Post) {
       const getPostsForm: GetPosts = {
-        type_,
+        type_: listingType,
         page_cursor: pageCursor,
         limit: fetchLimit,
         sort,
         saved_only: false,
+        show_hidden: showHidden === "true",
       };
 
       postsFetch = client.getPosts(getPostsForm);
@@ -343,31 +364,19 @@ export class Home extends Component<any, HomeState> {
       const getCommentsForm: GetComments = {
         limit: fetchLimit,
         sort: postToCommentSortType(sort),
-        type_,
+        type_: listingType,
         saved_only: false,
       };
 
       commentsFetch = client.getComments(getCommentsForm);
     }
 
-    const trendingCommunitiesForm: ListCommunities = {
+    const [postsRes, commentsRes] = await Promise.all([
-      type_: "Local",
-      sort: "Hot",
-      limit: trendingFetchLimit,
-    };
-
-    const trendingCommunitiesFetch = client.listCommunities(
-      trendingCommunitiesForm,
-    );
-
-    const [postsRes, commentsRes, trendingCommunitiesRes] = await Promise.all([
       postsFetch,
       commentsFetch,
-      trendingCommunitiesFetch,
     ]);
 
     return {
-      trendingCommunitiesRes,
       commentsRes,
       postsRes,
     };
@@ -401,7 +410,9 @@ export class Home extends Component<any, HomeState> {
               {tagline && (
                 <div
                   id="tagline"
-                  dangerouslySetInnerHTML={mdToHtml(tagline)}
+                  dangerouslySetInnerHTML={mdToHtml(tagline, () =>
+                    this.forceUpdate(),
+                  )}
                 ></div>
               )}
               <div className="d-block d-md-none">{this.mobileView}</div>
@@ -428,7 +439,6 @@ export class Home extends Component<any, HomeState> {
         admins,
       },
       showSubscribedMobile,
-      showTrendingMobile,
       showSidebarMobile,
     } = this.state;
 
@@ -442,11 +452,6 @@ export class Home extends Component<any, HomeState> {
               onClick={linkEvent(this, this.handleShowSubscribedMobile)}
             />
           )}
-          <MobileButton
-            textKey="trending"
-            show={showTrendingMobile}
-            onClick={linkEvent(this, this.handleShowTrendingMobile)}
-          />
           <MobileButton
             textKey="sidebar"
             show={showSidebarMobile}
@@ -461,11 +466,6 @@ export class Home extends Component<any, HomeState> {
               isMobile={true}
             />
           )}
-          {showTrendingMobile && (
-            <div className="card border-secondary mb-3">
-              {this.trendingCommunities()}
-            </div>
-          )}
           {showSubscribedMobile && (
             <div className="card border-secondary mb-3">
               {this.subscribedCommunities(true)}
@@ -486,9 +486,6 @@ export class Home extends Component<any, HomeState> {
 
     return (
       <div id="sidebarContainer">
-        <section id="sidebarMain" className="card border-secondary mb-3">
-          {this.trendingCommunities()}
-        </section>
         <SiteSidebar
           site={site}
           admins={admins}
@@ -509,55 +506,6 @@ export class Home extends Component<any, HomeState> {
     );
   }
 
-  trendingCommunities() {
-    switch (this.state.trendingCommunitiesRes?.state) {
-      case "loading":
-        return (
-          <h5>
-            <Spinner large />
-          </h5>
-        );
-      case "success": {
-        const trending = this.state.trendingCommunitiesRes.data.communities;
-        return (
-          <>
-            <header className="card-header d-flex align-items-center">
-              <h5 className="mb-0">
-                <T i18nKey="trending_communities">
-                  #
-                  <Link className="text-body" to="/communities">
-                    #
-                  </Link>
-                </T>
-              </h5>
-            </header>
-            <div className="card-body">
-              {trending.length > 0 && (
-                <ul className="list-inline">
-                  {trending.map(cv => (
-                    <li key={cv.community.id} className="list-inline-item">
-                      <CommunityLink community={cv.community} />
-                    </li>
-                  ))}
-                </ul>
-              )}
-              {canCreateCommunity(this.state.siteRes) && (
-                <LinkButton
-                  path="/create_community"
-                  translationKey="create_a_community"
-                />
-              )}
-              <LinkButton
-                path="/communities"
-                translationKey="explore_communities"
-              />
-            </div>
-          </>
-        );
-      }
-    }
-  }
-
   subscribedCommunities(isMobile = false) {
     const { subscribedCollapsed } = this.state;
 
@@ -623,36 +571,23 @@ export class Home extends Component<any, HomeState> {
     );
   }
 
-  async updateUrl({
+  async updateUrl(props: Partial<HomeProps>) {
-    dataType,
+    const { dataType, listingType, pageCursor, sort, showHidden } = {
-    listingType,
+      ...this.props,
-    pageCursor,
+      ...props,
-    sort,
+    };
-  }: Partial<HomeProps>) {
-    const {
-      dataType: urlDataType,
-      listingType: urlListingType,
-      sort: urlSort,
-    } = getHomeQueryParams();
-
     const queryParams: QueryParams<HomeProps> = {
-      dataType: getDataTypeString(dataType ?? urlDataType),
+      dataType: getDataTypeString(dataType ?? DataType.Post),
-      listingType: listingType ?? urlListingType,
+      listingType: listingType,
       pageCursor: pageCursor,
-      sort: sort ?? urlSort,
+      sort: sort,
+      showHidden: showHidden,
     };
 
     this.props.history.push({
       pathname: "/",
       search: getQueryString(queryParams),
     });
-
-    if (!this.state.scrolled) {
-      this.setState({ scrolled: true });
-      setTimeout(() => window.scrollTo(0, 0), 0);
-    }
-
-    await this.fetchData();
   }
 
   get posts() {
@@ -677,7 +612,7 @@ export class Home extends Component<any, HomeState> {
   }
 
   get listings() {
-    const { dataType } = getHomeQueryParams();
+    const { dataType } = this.props;
     const siteRes = this.state.siteRes;
 
     if (dataType === DataType.Post) {
@@ -685,11 +620,7 @@ export class Home extends Component<any, HomeState> {
         case "empty":
           return <div style="min-height: 20000px;"></div>;
         case "loading":
-          return (
+          return <PostsLoadingSkeleton />;
-            <h5>
-              <Spinner large />
-            </h5>
-          );
         case "success": {
           const posts = this.state.postsRes.data.posts;
           return (
@@ -698,6 +629,7 @@ export class Home extends Component<any, HomeState> {
               showCommunity
               removeDuplicates
               enableDownvotes={enableDownvotes(siteRes)}
+              voteDisplayMode={voteDisplayMode(siteRes)}
               enableNsfw={enableNsfw(siteRes)}
               allLanguages={siteRes.all_languages}
               siteLanguages={siteRes.discussion_languages}
@@ -718,6 +650,7 @@ export class Home extends Component<any, HomeState> {
               onTransferCommunity={this.handleTransferCommunity}
               onFeaturePost={this.handleFeaturePost}
               onMarkPostAsRead={async () => {}}
+              onHidePost={this.handleHidePost}
             />
           );
         }
@@ -725,22 +658,18 @@ export class Home extends Component<any, HomeState> {
     } else {
       switch (this.state.commentsRes.state) {
         case "loading":
-          return (
+          return <CommentsLoadingSkeleton />;
-            <h5>
-              <Spinner large />
-            </h5>
-          );
         case "success": {
           const comments = this.state.commentsRes.data.comments;
           return (
             <CommentNodes
               nodes={commentsToFlatNodes(comments)}
               viewType={CommentViewType.Flat}
-              finished={this.state.finished}
               isTopLevel
               showCommunity
               showContext
               enableDownvotes={enableDownvotes(siteRes)}
+              voteDisplayMode={voteDisplayMode(siteRes)}
               allLanguages={siteRes.all_languages}
               siteLanguages={siteRes.discussion_languages}
               onSaveComment={this.handleSaveComment}
@@ -769,7 +698,7 @@ export class Home extends Component<any, HomeState> {
   }
 
   get selects() {
-    const { listingType, dataType, sort } = getHomeQueryParams();
+    const { listingType, dataType, sort, showHidden } = this.props;
 
     return (
       <div className="row align-items-center mb-3 g-3">
@@ -779,6 +708,14 @@ export class Home extends Component<any, HomeState> {
             onChange={this.handleDataTypeChange}
           />
         </div>
+        {dataType === DataType.Post && UserService.Instance.myUserInfo && (
+          <div className="col-auto">
+            <PostHiddenSelect
+              showHidden={showHidden}
+              onShowHiddenChange={this.handleShowHiddenChange}
+            />
+          </div>
+        )}
         <div className="col-auto">
           <ListingTypeSelect
             type_={
@@ -791,66 +728,66 @@ export class Home extends Component<any, HomeState> {
           />
         </div>
         <div className="col-auto">
+          {this.props.dataType === DataType.Post ? (
             <SortSelect sort={sort} onChange={this.handleSortChange} />
+          ) : (
+            <CommentSortSelect
+              sort={postToCommentSortType(sort)}
+              onChange={this.handleCommentSortChange}
+            />
+          )}
         </div>
         <div className="col-auto ps-0">
           {getRss(
             listingType ??
               this.state.siteRes.site_view.local_site.default_post_listing_type,
+            sort,
           )}
         </div>
       </div>
     );
   }
 
-  async fetchTrendingCommunities() {
+  fetchDataToken?: symbol;
-    this.setState({ trendingCommunitiesRes: LOADING_REQUEST });
+  async fetchData({
-    this.setState({
+    dataType,
-      trendingCommunitiesRes: await HttpService.client.listCommunities({
+    pageCursor,
-        type_: "Local",
+    listingType,
-        sort: "Hot",
+    sort,
-        limit: trendingFetchLimit,
+    showHidden,
-      }),
+  }: HomeProps) {
-    });
+    const token = (this.fetchDataToken = Symbol());
-  }
-
-  async fetchData() {
-    const { dataType, pageCursor, listingType, sort } = getHomeQueryParams();
-
     if (dataType === DataType.Post) {
-      this.setState({ postsRes: LOADING_REQUEST });
+      this.setState({ postsRes: LOADING_REQUEST, commentsRes: EMPTY_REQUEST });
-      this.setState({
+      const postsRes = await HttpService.client.getPosts({
-        postsRes: await HttpService.client.getPosts({
         page_cursor: pageCursor,
         limit: fetchLimit,
         sort,
         saved_only: false,
         type_: listingType,
-        }),
+        show_hidden: showHidden === "true",
       });
+      if (token === this.fetchDataToken) {
+        this.setState({ postsRes });
+      }
     } else {
-      this.setState({ commentsRes: LOADING_REQUEST });
+      this.setState({ commentsRes: LOADING_REQUEST, postsRes: EMPTY_REQUEST });
-      this.setState({
+      const commentsRes = await HttpService.client.getComments({
-        commentsRes: await HttpService.client.getComments({
         limit: fetchLimit,
         sort: postToCommentSortType(sort),
         saved_only: false,
         type_: listingType,
-        }),
       });
+      if (token === this.fetchDataToken) {
+        this.setState({ commentsRes });
+      }
     }
-
-    setupTippy();
   }
 
   handleShowSubscribedMobile(i: Home) {
     i.setState({ showSubscribedMobile: !i.state.showSubscribedMobile });
   }
 
-  handleShowTrendingMobile(i: Home) {
-    i.setState({ showTrendingMobile: !i.state.showTrendingMobile });
-  }
-
   handleShowSidebarMobile(i: Home) {
     i.setState({ showSidebarMobile: !i.state.showSidebarMobile });
   }
@@ -863,30 +800,37 @@ export class Home extends Component<any, HomeState> {
     this.props.history.back();
     // A hack to scroll to top
     setTimeout(() => {
-      window.scrollTo(0, 0);
+      snapToTop();
     }, 50);
   }
 
   handlePageNext(nextPage: PaginationCursor) {
-    this.setState({ scrolled: false });
     this.updateUrl({ pageCursor: nextPage });
   }
 
-  handleSortChange(val: SortType) {
+  handleSortChange(val: PostSortType) {
-    this.setState({ scrolled: false });
     this.updateUrl({ sort: val, pageCursor: undefined });
   }
 
+  handleCommentSortChange(val: CommentSortType) {
+    this.updateUrl({ sort: commentToPostSortType(val), pageCursor: undefined });
+  }
+
   handleListingTypeChange(val: ListingType) {
-    this.setState({ scrolled: false });
     this.updateUrl({ listingType: val, pageCursor: undefined });
   }
 
   handleDataTypeChange(val: DataType) {
-    this.setState({ scrolled: false });
     this.updateUrl({ dataType: val, pageCursor: undefined });
   }
 
+  handleShowHiddenChange(show?: StringBoolean) {
+    this.updateUrl({
+      showHidden: show,
+      pageCursor: undefined,
+    });
+  }
+
   async handleAddModToCommunity(form: AddModToCommunity) {
     // TODO not sure what to do here
     await HttpService.client.addModToCommunity(form);
@@ -918,6 +862,9 @@ export class Home extends Component<any, HomeState> {
     const createCommentRes = await HttpService.client.createComment(form);
     this.createAndUpdateComments(createCommentRes);
 
+    if (createCommentRes.state === "failed") {
+      toast(I18NextService.i18n.t(createCommentRes.err.message), "danger");
+    }
     return createCommentRes;
   }
 
@@ -925,6 +872,9 @@ export class Home extends Component<any, HomeState> {
     const editCommentRes = await HttpService.client.editComment(form);
     this.findAndUpdateCommentEdit(editCommentRes);
 
+    if (editCommentRes.state === "failed") {
+      toast(I18NextService.i18n.t(editCommentRes.err.message), "danger");
+    }
     return editCommentRes;
   }
 
@@ -1037,6 +987,26 @@ export class Home extends Component<any, HomeState> {
     this.updateBan(banRes);
   }
 
+  async handleHidePost(form: HidePost) {
+    const hideRes = await HttpService.client.hidePost(form);
+
+    if (hideRes.state === "success") {
+      this.setState(prev => {
+        if (prev.postsRes.state === "success") {
+          for (const post of prev.postsRes.data.posts.filter(p =>
+            form.post_ids.some(id => id === p.post.id),
+          )) {
+            post.hidden = form.hide;
+          }
+        }
+
+        return prev;
+      });
+
+      toast(I18NextService.i18n.t(form.hide ? "post_hidden" : "post_unhidden"));
+    }
+  }
+
   updateBanFromCommunity(banRes: RequestState<BanFromCommunityResponse>) {
     // Maybe not necessary
     if (banRes.state === "success") {
@@ -1093,7 +1063,6 @@ export class Home extends Component<any, HomeState> {
           res.data.comment_view,
           s.commentsRes.data.comments,
         );
-        s.finished.set(res.data.comment_view.comment.id, true);
       }
       return s;
     });
@@ -1115,12 +1084,6 @@ export class Home extends Component<any, HomeState> {
     this.setState(s => {
       if (s.commentsRes.state === "success" && res.state === "success") {
         s.commentsRes.data.comments.unshift(res.data.comment_view);
-
-        // Set finished for the parent
-        s.finished.set(
-          getCommentParentId(res.data.comment_view.comment) ?? 0,
-          true,
-        );
       }
       return s;
     });

src/shared/components/home/instances.tsx

@@ -22,6 +22,11 @@ import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import Tabs from "../common/tabs";
 import { getHttpBaseInternal } from "../../utils/env";
+import { RouteComponentProps } from "inferno-router/dist/Route";
+import { IRoutePropsWithFetch } from "../../routes";
+import { resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
+import { isBrowser } from "@utils/browser";
 
 type InstancesData = RouteDataResponse<{
   federatedInstancesResponse: GetFederatedInstancesResponse;
@@ -33,7 +38,16 @@ interface InstancesState {
   isIsomorphic: boolean;
 }
 
-export class Instances extends Component<any, InstancesState> {
+type InstancesRouteProps = RouteComponentProps<Record<string, never>> &
+  Record<string, never>;
+export type InstancesFetchConfig = IRoutePropsWithFetch<
+  InstancesData,
+  Record<string, never>,
+  Record<string, never>
+>;
+
+@scrollMixin
+export class Instances extends Component<InstancesRouteProps, InstancesState> {
   private isoData = setIsoData<InstancesData>(this.context);
   state: InstancesState = {
     instancesRes: EMPTY_REQUEST,
@@ -41,6 +55,10 @@ export class Instances extends Component<any, InstancesState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.instancesRes]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
@@ -54,8 +72,8 @@ export class Instances extends Component<any, InstancesState> {
     }
   }
 
-  async componentDidMount() {
+  async componentWillMount() {
-    if (!this.state.isIsomorphic) {
+    if (!this.state.isIsomorphic && isBrowser()) {
       await this.fetchInstances();
     }
   }

src/shared/components/home/legal.tsx

@@ -32,7 +32,10 @@ export class Legal extends Component<any, LegalState> {
           path={this.context.router.route.match.url}
         />
         {legal && (
-          <div className="md-div" dangerouslySetInnerHTML={mdToHtml(legal)} />
+          <div
+            className="md-div"
+            dangerouslySetInnerHTML={mdToHtml(legal, () => this.forceUpdate())}
+          />
         )}
       </div>
     );

src/shared/components/home/login-reset.tsx

@@ -6,6 +6,8 @@ import { HttpService, I18NextService } from "../../services";
 import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface State {
   form: {
@@ -15,7 +17,11 @@ interface State {
   siteRes: GetSiteResponse;
 }
 
-export class LoginReset extends Component<any, State> {
+@simpleScrollMixin
+export class LoginReset extends Component<
+  RouteComponentProps<Record<string, never>>,
+  State
+> {
   private isoData = setIsoData(this.context);
 
   state: State = {

src/shared/components/home/login.tsx

@@ -1,9 +1,14 @@
 import { setIsoData } from "@utils/app";
-import { isBrowser, updateDataBsTheme } from "@utils/browser";
+import { isBrowser, refreshTheme } from "@utils/browser";
 import { getQueryParams } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
-import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
+import {
+  GetSiteResponse,
+  LoginResponse,
+  OAuthProvider,
+  PublicOAuthProvider,
+} from "lemmy-js-client";
 import { I18NextService, UserService } from "../../services";
 import {
   EMPTY_REQUEST,
@@ -15,19 +20,24 @@ import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import PasswordInput from "../common/password-input";
-import TotpModal from "../common/totp-modal";
+import TotpModal from "../common/modal/totp-modal";
 import { UnreadCounterService } from "../../services";
+import { RouteData } from "../../interfaces";
+import { IRoutePropsWithFetch } from "../../routes";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
 
 interface LoginProps {
   prev?: string;
 }
 
-const getLoginQueryParams = () =>
+export function getLoginQueryParams(source?: string): LoginProps {
-  getQueryParams<LoginProps>({
+  return getQueryParams<LoginProps>(
-    prev(param) {
+    {
-      return param ? decodeURIComponent(param) : undefined;
+      prev: (param?: string) => param,
     },
-  });
+    source,
+  );
+}
 
 interface State {
   loginRes: RequestState<LoginResponse>;
@@ -37,6 +47,7 @@ interface State {
   };
   siteRes: GetSiteResponse;
   show2faModal: boolean;
+  showOAuthModal: boolean;
 }
 
 async function handleLoginSuccess(i: Login, loginRes: LoginResponse) {
@@ -47,16 +58,21 @@ async function handleLoginSuccess(i: Login, loginRes: LoginResponse) {
 
   if (site.state === "success") {
     UserService.Instance.myUserInfo = site.data.my_user;
-    updateDataBsTheme(site.data);
+    const isoData = setIsoData(i.context);
+    isoData.site_res.oauth_providers = site.data.oauth_providers;
+    isoData.site_res.admin_oauth_providers = site.data.admin_oauth_providers;
+    refreshTheme();
   }
 
-  const { prev } = getLoginQueryParams();
+  const { prev } = i.props;
 
-  prev
+  if (prev) {
-    ? i.props.history.replace(prev)
+    i.props.history.replace(prev);
-    : i.props.history.action === "PUSH"
+  } else if (i.props.history.action === "PUSH") {
-      ? i.props.history.back()
+    i.props.history.back();
-      : i.props.history.replace("/");
+  } else {
+    i.props.history.replace("/");
+  }
 
   UnreadCounterService.Instance.updateAll();
 }
@@ -77,7 +93,15 @@ async function handleLoginSubmit(i: Login, event: any) {
         if (loginRes.err.message === "missing_totp_token") {
           i.setState({ show2faModal: true });
         } else {
-          toast(I18NextService.i18n.t(loginRes.err.message), "danger");
+          // TODO: We shouldn't be passing error messages as args into i18next
+          toast(
+            I18NextService.i18n.t(
+              loginRes.err.message === "registration_application_is_pending"
+                ? "registration_application_pending"
+                : loginRes.err.message,
+            ),
+            "danger",
+          );
         }
 
         i.setState({ loginRes });
@@ -92,6 +116,45 @@ async function handleLoginSubmit(i: Login, event: any) {
   }
 }
 
+export async function handleUseOAuthProvider(params: {
+  oauth_provider: OAuthProvider;
+  username?: string;
+  prev?: string;
+  answer?: string;
+  show_nsfw?: boolean;
+}) {
+  const redirectUri = `${window.location.origin}/oauth/callback`;
+
+  const state = crypto.randomUUID();
+  const requestUri =
+    params.oauth_provider.authorization_endpoint +
+    "?" +
+    [
+      `client_id=${encodeURIComponent(params.oauth_provider.client_id)}`,
+      `response_type=code`,
+      `scope=${encodeURIComponent(params.oauth_provider.scopes)}`,
+      `redirect_uri=${encodeURIComponent(redirectUri)}`,
+      `state=${state}`,
+    ].join("&");
+
+  // store state in local storage
+  localStorage.setItem(
+    "oauth_state",
+    JSON.stringify({
+      state,
+      oauth_provider_id: params.oauth_provider.id,
+      redirect_uri: redirectUri,
+      prev: params.prev ?? "/",
+      username: params.username,
+      answer: params.answer,
+      show_nsfw: params.show_nsfw,
+      expires_at: Date.now() + 5 * 60_000,
+    }),
+  );
+
+  window.location.assign(requestUri);
+}
+
 function handleLoginUsernameChange(i: Login, event: any) {
   i.setState(
     prevState => (prevState.form.username_or_email = event.target.value.trim()),
@@ -106,10 +169,15 @@ function handleClose2faModal(i: Login) {
   i.setState({ show2faModal: false });
 }
 
-export class Login extends Component<
+type LoginRouteProps = RouteComponentProps<Record<string, never>> & LoginProps;
-  RouteComponentProps<Record<string, never>>,
+export type LoginFetchConfig = IRoutePropsWithFetch<
-  State
+  RouteData,
-> {
+  Record<string, never>,
+  LoginProps
+>;
+
+@simpleScrollMixin
+export class Login extends Component<LoginRouteProps, State> {
   private isoData = setIsoData(this.context);
 
   state: State = {
@@ -120,12 +188,14 @@ export class Login extends Component<
     },
     siteRes: this.isoData.site_res,
     show2faModal: false,
+    showOAuthModal: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
 
     this.handleSubmitTotp = this.handleSubmitTotp.bind(this);
+    this.handleLoginWithProvider = this.handleLoginWithProvider.bind(this);
   }
 
   get documentTitle(): string {
@@ -154,6 +224,35 @@ export class Login extends Component<
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
         </div>
+        {(this.state.siteRes.oauth_providers?.length || 0) > 0 && (
+          <>
+            <div className="row mt-3 mb-2">
+              <div className="col-12 col-lg-6 offset-lg-3">
+                {I18NextService.i18n.t("or")}
+              </div>
+            </div>
+            <div className="row">
+              <div className="col col-12 col-lgl6 offset-lg-3">
+                <h2 className="h4 mb-3">
+                  {I18NextService.i18n.t("oauth_login_with_provider")}
+                </h2>
+                {(this.state.siteRes.oauth_providers ?? []).map(
+                  (provider: PublicOAuthProvider) => (
+                    <button
+                      className="btn btn-primary my-2 d-block"
+                      onClick={linkEvent(
+                        { oauth_provider: provider },
+                        this.handleLoginWithProvider,
+                      )}
+                    >
+                      {provider.display_name}
+                    </button>
+                  ),
+                )}
+              </div>
+            </div>
+          </>
+        )}
       </div>
     );
   }
@@ -176,6 +275,13 @@ export class Login extends Component<
     return successful;
   }
 
+  async handleLoginWithProvider(params: { oauth_provider: OAuthProvider }) {
+    handleUseOAuthProvider({
+      oauth_provider: params.oauth_provider,
+      prev: this.props.prev ?? "/",
+    });
+  }
+
   loginForm() {
     return (
       <div>

src/shared/components/home/oauth/oauth-callback.tsx

@@ -0,0 +1,175 @@
+import { setIsoData } from "@utils/app";
+import { Component } from "inferno";
+import { refreshTheme } from "@utils/browser";
+import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
+import { Spinner } from "../../common/icon";
+import { getQueryParams } from "@utils/helpers";
+import { IRoutePropsWithFetch } from "../../../routes";
+import { RouteData } from "../../../interfaces";
+import { I18NextService, UserService } from "../../../services";
+import { RouteComponentProps } from "inferno-router/dist/Route";
+import { UnreadCounterService } from "../../../services";
+import { HttpService } from "../../../services/HttpService";
+import { toast } from "../../../toast";
+
+interface OAuthCallbackProps {
+  code?: string;
+  state?: string;
+}
+
+export function getOAuthCallbackQueryParams(
+  source?: string,
+): OAuthCallbackProps {
+  return getQueryParams<OAuthCallbackProps>(
+    {
+      code: (code?: string) => code,
+      state: (state?: string) => state,
+    },
+    source,
+  );
+}
+
+type OAuthCallbackRouteProps = RouteComponentProps<Record<string, never>> &
+  OAuthCallbackProps;
+export type OAuthCallbackConfig = IRoutePropsWithFetch<
+  RouteData,
+  Record<string, never>,
+  OAuthCallbackProps
+>;
+
+interface State {
+  siteRes: GetSiteResponse;
+}
+
+export class OAuthCallback extends Component<OAuthCallbackRouteProps, State> {
+  private isoData = setIsoData(this.context);
+
+  state: State = {
+    siteRes: this.isoData.site_res,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  async componentDidMount() {
+    // store state in local storage
+    const local_oauth_state = JSON.parse(
+      localStorage.getItem("oauth_state") || "{}",
+    );
+    if (
+      !(
+        this.props.state &&
+        this.props.code &&
+        local_oauth_state?.state &&
+        local_oauth_state?.oauth_provider_id &&
+        local_oauth_state?.expires_at &&
+        this.props.state === local_oauth_state.state
+      ) ||
+      local_oauth_state.expires_at < Date.now()
+    ) {
+      // oauth failed or expired
+      toast(I18NextService.i18n.t("oauth_authorization_invalid"), "danger");
+      this.props.history.replace("/login");
+    } else {
+      const loginRes = await HttpService.client.authenticateWithOAuth({
+        code: this.props.code,
+        oauth_provider_id: local_oauth_state.oauth_provider_id,
+        redirect_uri: local_oauth_state.redirect_uri,
+        show_nsfw: local_oauth_state.show_nsfw,
+        username: local_oauth_state.username,
+        answer: local_oauth_state.answer,
+      });
+
+      switch (loginRes.state) {
+        case "success": {
+          if (loginRes.data.jwt) {
+            handleOAuthLoginSuccess(
+              this,
+              local_oauth_state.prev,
+              loginRes.data,
+            );
+          } else {
+            if (loginRes.data.verify_email_sent) {
+              toast(I18NextService.i18n.t("verify_email_sent"));
+            }
+            if (loginRes.data.registration_created) {
+              toast(I18NextService.i18n.t("registration_application_sent"));
+            }
+            this.props.history.push("/login");
+          }
+          break;
+        }
+        case "failed": {
+          let err_redirect = "/login";
+          switch (loginRes.err.message) {
+            case "registration_username_required":
+            case "registration_application_answer_required":
+              err_redirect = `/signup?sso_provider_id=${local_oauth_state.oauth_provider_id}`;
+              toast(I18NextService.i18n.t(loginRes.err.message), "danger");
+              break;
+            case "registration_application_is_pending":
+              toast(
+                I18NextService.i18n.t("registration_application_pending"),
+                "danger",
+              );
+              break;
+            case "registration_denied":
+            case "oauth_authorization_invalid":
+            case "oauth_login_failed":
+            case "oauth_registration_closed":
+            case "email_already_exists":
+            case "username_already_exists":
+            case "no_email_setup":
+              toast(I18NextService.i18n.t(loginRes.err.message), "danger");
+              break;
+            default:
+              toast(I18NextService.i18n.t("incorrect_login"), "danger");
+              break;
+          }
+          this.props.history.push(err_redirect);
+        }
+      }
+    }
+  }
+
+  get documentTitle(): string {
+    return `${I18NextService.i18n.t("login")} - ${
+      this.state.siteRes.site_view.site.name
+    }`;
+  }
+
+  render() {
+    return (
+      <div className="container-lg">
+        <Spinner />
+      </div>
+    );
+  }
+}
+
+async function handleOAuthLoginSuccess(
+  i: OAuthCallback,
+  prev: string,
+  loginRes: LoginResponse,
+) {
+  UserService.Instance.login({
+    res: loginRes,
+  });
+  const site = await HttpService.client.getSite();
+
+  if (site.state === "success") {
+    UserService.Instance.myUserInfo = site.data.my_user;
+    refreshTheme();
+  }
+
+  if (prev) {
+    i.props.history.replace(prev);
+  } else if (i.props.history.action === "PUSH") {
+    i.props.history.back();
+  } else {
+    i.props.history.replace("/");
+  }
+
+  UnreadCounterService.Instance.updateAll();
+}