Merge branch 'main' into breakout-role-utils

diff --git a/.eslintrc.json b/.eslintrc.json
index 3a60a6bb5bac9a26edd9b6a347e502f97eee34d0..598b7f3f7e9dd4e91cf149be7bfd5da99030ac72 100644 (file)
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -3,11 +3,12 @@
   "env": {
     "browser": true
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "jsx-a11y"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:inferno/recommended"
+    "plugin:inferno/recommended",
+    "plugin:jsx-a11y/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,6 +21,16 @@
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-empty-function": 0,
     "arrow-body-style": 0,
+    "jsx-a11y/alt-text": 1,
+    "jsx-a11y/anchor-is-valid": 1,
+    "jsx-a11y/aria-activedescendant-has-tabindex": 1,
+    "jsx-a11y/aria-role": 1,
+    "jsx-a11y/click-events-have-key-events": 1,
+    "jsx-a11y/iframe-has-title": 1,
+    "jsx-a11y/interactive-supports-focus": 1,
+    "jsx-a11y/no-redundant-roles": 1,
+    "jsx-a11y/no-static-element-interactions": 1,
+    "jsx-a11y/role-has-required-aria-props": 1,
     "curly": 0,
     "eol-last": 0,
     "eqeqeq": 0,

diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
index ae2d4e51f0a74a9ffb498c83f10a0f8acced7bfc..a43a5a5582a3da7372b251bce481d3e080759033 100644 (file)
--- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
+++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
@@ -8,7 +8,7 @@ body:
       value: |
         Found a bug? Please fill out the sections below. 👍
         Thanks for taking the time to fill out this bug report!
-        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
   - type: checkboxes
     attributes:
       label: Requirements

diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
index 3c75050ab8a964b03a93030ba90821c505ef5de4..2d656819d6ee569b0855e1052e5af832271b9df9 100644 (file)
--- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
+++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
@@ -1,16 +1,16 @@
 name: "\U0001F680 Feature request"
-description: Suggest an idea for improving Lemmy
+description: Suggest an idea for improving Lemmy's UI
 labels: ["enhancement"]
 body:
   - type: markdown
     attributes:
       value: |
         Have a suggestion about Lemmy's UI?
-        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
   - type: checkboxes
     attributes:
       label: Requirements
-      description: Before you create a bug report please do the following.
+      description: Before you create a feature request please do the following.
       options:
         - label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
           required: true

diff --git a/.prettierignore b/.prettierignore
index e7a0d20ec6abab0923aa3ce261ceafc787fe4aa6..98eb0d9b885d8e110d58cc1f7bd4da6b1aa2bd2a 100644 (file)
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,3 @@
 src/shared/translations
-lemmy-translations
\ No newline at end of file
+lemmy-translations
+src/assets/css/themes/*.css

diff --git a/package.json b/package.json
index 3f6c4ed0b79211c8fd7e062ad599fdb5c0b94274..b0d555b50b66a6da1abe44a50fad2006d967e680 100644 (file)
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
     "bootstrap-v4": "npm:bootstrap@^4.6.2",
     "eslint": "^8.40.0",
     "eslint-plugin-inferno": "^7.32.2",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "import-sort-style-module": "^6.0.0",

diff --git a/src/assets/css/themes/_variables.darkly-red.scss b/src/assets/css/themes/_variables.darkly-red.scss
index c36cbb3d7d53f8c436a6f747c735629377ea8dce..cd736b5c2242842bf121e96c8e40803f833479f7 100644 (file)
--- a/src/assets/css/themes/_variables.darkly-red.scss
+++ b/src/assets/css/themes/_variables.darkly-red.scss
@@ -1,108 +1,13 @@
-$white: #fff;
-$gray-100: #f8f9fa;
-$gray-200: #ebebeb;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #888;
-$gray-700: #444;
-$gray-800: #303030;
-$gray-900: #222;
-$black: #000;
-$blue: #375a7f;
-$indigo: #6610f2;
-$purple: #6f42c1;
-$pink: #e83e8c;
-$red: #e74c3c;
-$orange: #fd7e14;
-$yellow: #f39c12;
-$green: #00bc8c;
-$teal: #20c997;
-$cyan: #3498db;
+@import "variables.darkly";
+
 $primary: $blue;
 $secondary: #444;
-$success: $green;
-$info: $cyan;
-$warning: $yellow;
-$danger: $red;
 $light: $gray-800;
-$dark: $gray-300;
-$yiq-contrasted-threshold: 175;
-$body-bg: $gray-900;
-$body-color: $gray-300;
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "light": $light,
+);
+
 $link-color: $red;
-$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
-  Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
-  "Segoe UI Emoji", "Segoe UI Symbol";
-$font-size-base: 0.9375rem;
-$h1-font-size: 3rem;
-$h2-font-size: 2.5rem;
-$h3-font-size: 2rem;
-$text-muted: $gray-600;
-$table-accent-bg: $gray-800;
-$table-border-color: $gray-700;
-$input-border-color: $body-bg;
-$input-group-addon-color: $gray-500;
-$input-group-addon-bg: $gray-700;
-$custom-file-color: $gray-500;
-$custom-file-border-color: $body-bg;
-$dropdown-bg: $gray-900;
-$dropdown-border-color: $gray-700;
-$dropdown-divider-bg: $gray-700;
-$dropdown-link-color: $white;
-$dropdown-link-hover-color: $white;
-$dropdown-link-hover-bg: $primary;
-$nav-link-padding-x: 2rem;
-$nav-link-disabled-color: $gray-500;
-$nav-tabs-border-color: $gray-700;
-$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
-  transparent;
-$nav-tabs-link-active-color: $white;
-$nav-tabs-link-active-border-color: $nav-tabs-border-color
-  $nav-tabs-border-color transparent;
-$navbar-padding-y: 1rem;
-$navbar-dark-color: rgba($white, 0.6);
-$navbar-dark-hover-color: $white;
-$navbar-light-color: rgba($white, 0.6);
-$navbar-light-hover-color: $white;
-$navbar-light-active-color: $white;
-$navbar-light-toggler-border-color: rgba($gray-900, 0.1);
-$pagination-color: $white;
-$pagination-bg: $success;
-$pagination-border-width: 0;
-$pagination-border-color: transparent;
-$pagination-hover-color: $white;
-$pagination-hover-bg: lighten($success, 10%);
-$pagination-hover-border-color: transparent;
-$pagination-active-bg: $pagination-hover-bg;
-$pagination-active-border-color: transparent;
-$pagination-disabled-color: $white;
-$pagination-disabled-bg: darken($success, 15%);
-$pagination-disabled-border-color: transparent;
-$jumbotron-bg: $gray-800;
-$card-cap-bg: $gray-700;
-$card-bg: $gray-800;
-$popover-bg: $gray-800;
-$popover-header-bg: $gray-700;
-$toast-background-color: $gray-700;
-$toast-header-background-color: $gray-800;
-$modal-content-bg: $gray-800;
-$modal-content-border-color: $gray-700;
-$modal-header-border-color: $gray-700;
-$progress-bg: $gray-700;
-$list-group-bg: $gray-800;
-$list-group-border-color: $gray-700;
-$list-group-hover-bg: $gray-700;
-$breadcrumb-bg: $gray-700;
-$close-color: $white;
-$close-text-shadow: none;
-$pre-color: inherit;
-$mark-bg: #333;
-$custom-select-bg: $secondary;
-$custom-select-color: $white;
-$input-bg: $secondary;
-$input-color: $white;
-$input-disabled-bg: darken($secondary, 10%);
-$light: $gray-800;
-$navbar-light-brand-color: $white;
-$navbar-light-brand-hover-color: $navbar-light-brand-color;

diff --git a/src/assets/css/themes/_variables.darkly.scss b/src/assets/css/themes/_variables.darkly.scss
index 608b40016db85f30b4d9aadbdec38a8c8f01a181..fa6e305d5a88933c081f51c543c8caa6bb558e13 100644 (file)
--- a/src/assets/css/themes/_variables.darkly.scss
+++ b/src/assets/css/themes/_variables.darkly.scss
@@ -1,35 +1,59 @@
+// Colors
 $white: #fff;
-$gray-100: #f8f9fa;
 $gray-200: #ebebeb;
 $gray-300: #dee2e6;
-$gray-400: #ced4da;
 $gray-500: #adb5bd;
 $gray-600: #888;
 $gray-700: #444;
 $gray-800: #303030;
 $gray-900: #222;
-$black: #000;
+
+// Writing these maps is necessary for Bootstrap theming:
+// https://getbootstrap.com/docs/4.6/getting-started/introduction/
+$grays: (
+  "gray-200": $gray-200,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+);
+
 $blue: #375a7f;
-$indigo: #6610f2;
-$purple: #6f42c1;
-$pink: #e83e8c;
 $red: #e74c3c;
-$orange: #fd7e14;
 $yellow: #f39c12;
 $green: #00bc8c;
-$teal: #20c997;
 $cyan: #3498db;
-$primary: $blue;
+
+// Writing these maps is necessary for Bootstrap theming:
+// https://getbootstrap.com/docs/4.6/getting-started/introduction/
+$colors: (
+  "blue": $blue,
+  "red": $red,
+  "yellow": $yellow,
+  "green": $green,
+  "cyan": $cyan,
+);
+
+$primary: $green;
 $secondary: $gray-700;
 $success: $green;
-$info: $cyan;
-$warning: $yellow;
-$danger: $red;
 $dark: $gray-300;
-$yiq-contrasted-threshold: 175;
-$body-bg: $gray-900;
+
+// Writing these maps is necessary for Bootstrap theming:
+// https://getbootstrap.com/docs/4.6/getting-started/introduction/
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "dark": $dark,
+);
+
 $body-color: $gray-300;
+$body-bg: $gray-900;
 $link-color: $success;
+$mark-bg: #333;
+$text-muted: $gray-600;
+$yiq-contrasted-threshold: 175;
+
 $font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
   Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
   "Segoe UI Emoji", "Segoe UI Symbol";
@@ -37,35 +61,52 @@ $font-size-base: 0.9375rem;
 $h1-font-size: 3rem;
 $h2-font-size: 2.5rem;
 $h3-font-size: 2rem;
-$text-muted: $gray-600;
-$table-accent-bg: $gray-800;
-$table-border-color: $gray-700;
+
+$card-cap-bg: $gray-700;
+$card-bg: $gray-800;
+
+$navbar-padding-y: 1rem;
+$navbar-dark-color: rgba($white, 0.6);
+$navbar-dark-hover-color: $white;
+$navbar-light-color: rgba($white, 0.6);
+$navbar-light-hover-color: $white;
+$navbar-light-active-color: $white;
+$navbar-light-toggler-border-color: rgba($gray-900, 0.1);
+$navbar-light-brand-color: $white;
+$navbar-light-brand-hover-color: $navbar-light-brand-color;
+
+$nav-link-padding-x: 2rem;
+$nav-link-disabled-color: $gray-500;
+
+$nav-tabs-border-color: $gray-700;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
+  transparent;
+$nav-tabs-link-active-color: $white;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color
+  $nav-tabs-border-color transparent;
+
+$input-bg: $gray-700;
+$input-color: $white;
+$input-disabled-bg: darken($gray-700, 10%);
 $input-border-color: $body-bg;
 $input-group-addon-color: $gray-500;
 $input-group-addon-bg: $gray-700;
+
+$hr-border-color: rgba($body-color, 0.25);
+
+$table-accent-bg: $gray-800;
+$table-border-color: $gray-700;
+
 $custom-file-color: $gray-500;
 $custom-file-border-color: $body-bg;
+
 $dropdown-bg: $gray-900;
 $dropdown-border-color: $gray-700;
 $dropdown-divider-bg: $gray-700;
 $dropdown-link-color: $white;
 $dropdown-link-hover-color: $white;
 $dropdown-link-hover-bg: $primary;
-$nav-link-padding-x: 2rem;
-$nav-link-disabled-color: $gray-500;
-$nav-tabs-border-color: $gray-700;
-$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
-  transparent;
-$nav-tabs-link-active-color: $white;
-$nav-tabs-link-active-border-color: $nav-tabs-border-color
-  $nav-tabs-border-color transparent;
-$navbar-padding-y: 1rem;
-$navbar-dark-color: rgba($white, 0.6);
-$navbar-dark-hover-color: $white;
-$navbar-light-color: rgba($white, 0.6);
-$navbar-light-hover-color: $white;
-$navbar-light-active-color: $white;
-$navbar-light-toggler-border-color: rgba($gray-900, 0.1);
+
 $pagination-color: $white;
 $pagination-bg: $success;
 $pagination-border-width: 0;
@@ -78,9 +119,8 @@ $pagination-active-border-color: transparent;
 $pagination-disabled-color: $white;
 $pagination-disabled-bg: darken($success, 15%);
 $pagination-disabled-border-color: transparent;
+
 $jumbotron-bg: $gray-800;
-$card-cap-bg: $gray-700;
-$card-bg: $gray-800;
 $popover-bg: $gray-800;
 $popover-header-bg: $gray-700;
 $toast-background-color: $gray-700;
@@ -96,12 +136,6 @@ $breadcrumb-bg: $gray-700;
 $close-color: $white;
 $close-text-shadow: none;
 $pre-color: inherit;
-$mark-bg: #333;
-$custom-select-bg: $secondary;
+$custom-select-bg: $gray-700;
 $custom-select-color: $white;
-$input-bg: $secondary;
-$input-color: $white;
-$input-disabled-bg: darken($secondary, 10%);
 $light: $gray-800;
-$navbar-light-brand-color: $white;
-$navbar-light-brand-hover-color: $navbar-light-brand-color;

diff --git a/src/assets/css/themes/_variables.litely-red.scss b/src/assets/css/themes/_variables.litely-red.scss
index 4cec067ac34e6700c213997a7146a280fa540d5d..d45eb1f9a135b898bc499452eb438c987a4d2c01 100644 (file)
--- a/src/assets/css/themes/_variables.litely-red.scss
+++ b/src/assets/css/themes/_variables.litely-red.scss
@@ -1,47 +1,9 @@
-$white: #fff;
-$gray-100: #f8f9fa;
-$gray-200: #e9ecef;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #6c757d;
-$gray-700: #495057;
-$gray-800: #343a40;
-$gray-900: #212529;
-$black: #000;
-$blue: #007bff;
-$indigo: #6610f2;
-$white: #ffffff;
-$orange: #f1641e;
-$cyan: #02bdc2;
-$green: #00c853;
-$primary: #f1641e;
+@import "variables.darkly";
+
 $secondary: #c80000;
-$info: $blue;
-$body-color: $gray-700;
-$link-color: $primary;
-$red: #d8486a;
-$border-radius: 0.5rem;
-$border-radius-lg: 0.5rem;
-$border-radius-sm: 1rem;
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
-  "Segoe UI", "Helvetica", Arial, sans-serif;
-$headings-color: $gray-700;
-$input-btn-focus-color: rgba($primary, 0.75);
-$form-feedback-valid-color: $info;
-$navbar-light-color: $gray-600;
-$black: #222222;
-$navbar-dark-toggler-border-color: rgba($black, 0.1);
-$navbar-light-active-color: $gray-900;
-$card-color: $gray-700;
-$card-cap-color: $gray-700;
-$info: $blue;
-$body-bg: #fff;
-$success: $indigo;
 $danger: darken($primary, 24%);
-$navbar-light-hover-color: $gray-900;
-$card-bg: $gray-100;
-$border-color: $gray-700;
-$mark-bg: rgb(255, 252, 239);
-$font-weight-bold: 600;
-$rounded-pill: 0.25rem;
+
+$theme-colors: (
+  "secondary": $secondary,
+  "danger": $danger,
+);

diff --git a/src/assets/css/themes/_variables.litely.scss b/src/assets/css/themes/_variables.litely.scss
index 1f78cd2864e19b8b0fa80c8a6c167febf893a118..1708d4c395b611a35e1a130883137a4d41c0ee6b 100644 (file)
--- a/src/assets/css/themes/_variables.litely.scss
+++ b/src/assets/css/themes/_variables.litely.scss
@@ -1,47 +1,80 @@
-$white: #fff;
+// Colors
 $gray-100: #f8f9fa;
 $gray-200: #e9ecef;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
 $gray-600: #6c757d;
 $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
-$black: #000;
+$black: #222;
+
+// Writing these maps is necessary for Bootstrap theming:
+// https://getbootstrap.com/docs/4.6/getting-started/introduction/
+$grays: (
+  "gray-200": $gray-200,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+);
+
 $blue: #007bff;
 $indigo: #6610f2;
-$white: #ffffff;
+$red: #d8486a;
 $orange: #f1641e;
-$cyan: #02bdc2;
 $green: #00c853;
+$cyan: #02bdc2;
+
+// Writing these maps is necessary for Bootstrap theming:
+// https://getbootstrap.com/docs/4.6/getting-started/introduction/
+$colors: (
+  "red": $red,
+  "orange": $orange,
+  "cyan": $cyan,
+  "green": $green,
+);
+
 $primary: $orange;
 $secondary: $green;
-$info: $cyan;
+$success: $indigo;
+$info: $blue;
+$danger: darken($primary, 25%);
+
+// Writing these maps is necessary for Bootstrap theming:
+// https://getbootstrap.com/docs/4.6/getting-started/introduction/
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "danger": $danger,
+);
+
 $body-color: $gray-700;
+$body-bg: #fff;
 $link-color: $primary;
-$red: #d8486a;
-$border-radius: 0.5rem;
-$border-radius-lg: 0.5rem;
-$border-radius-sm: 1rem;
+$border-color: $gray-700;
+$mark-bg: rgb(255, 252, 239);
+$headings-color: $gray-700;
+
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
   "Segoe UI", "Helvetica", Arial, sans-serif;
-$headings-color: $gray-700;
-$input-btn-focus-color: rgba($primary, 0.75);
-$form-feedback-valid-color: $info;
-$navbar-light-color: $gray-600;
-$black: #222222;
-$navbar-dark-toggler-border-color: rgba($black, 0.1);
-$navbar-light-active-color: $gray-900;
+$font-weight-bold: 600;
+
 $card-color: $gray-700;
 $card-cap-color: $gray-700;
-$info: $blue;
-$body-bg: #fff;
-$success: $indigo;
-$danger: darken($primary, 25%);
-$navbar-light-hover-color: $gray-900;
 $card-bg: $gray-100;
-$border-color: $gray-700;
-$mark-bg: rgb(255, 252, 239);
-$font-weight-bold: 600;
+
+$navbar-dark-toggler-border-color: rgba($black, 0.1);
+$navbar-light-color: $gray-600;
+$navbar-light-hover-color: $gray-900;
+$navbar-light-active-color: $gray-900;
+
+$form-feedback-valid-color: $info;
+$input-btn-focus-color: rgba($primary, 0.75);
+
+$border-radius: 0.5rem;
+$border-radius-lg: 0.5rem;
+$border-radius-sm: 1rem;
 $rounded-pill: 0.25rem;
+
+$hr-border-color: rgba($body-color, 0.25);

diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css
index 073c32583ae790e00340e8dc4f74afa000285eeb..221cc8bc68cf5ffd4800d541c2bf117c7af25de4 100644 (file)
--- a/src/assets/css/themes/darkly-red.css
+++ b/src/assets/css/themes/darkly-red.css
@@ -450,7 +450,7 @@ hr {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(222, 226, 230, 0.25);
 }
 
 small,
@@ -3245,7 +3245,7 @@ input[type="button"].btn-block {
 .dropdown-item:focus {
   color: #fff;
   text-decoration: none;
-  background-color: #375a7f;
+  background-color: #00bc8c;
 }
 .dropdown-item.active,
 .dropdown-item:active {

diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css
index 25c71c2fa9030e95c65ab64831ead4e8288e991d..5a289b4964e6e117e75e3752454a366cbd557eda 100644 (file)
--- a/src/assets/css/themes/darkly.css
+++ b/src/assets/css/themes/darkly.css
@@ -19,14 +19,13 @@
   --white: #fff;
   --gray: #888;
   --gray-dark: #303030;
-  --primary: #375a7f;
+  --primary: #00bc8c;
   --secondary: #444;
   --success: #00bc8c;
   --info: #3498db;
   --warning: #f39c12;
   --danger: #e74c3c;
   --light: #303030;
-  --medium-light: var(--secondary);
   --dark: #dee2e6;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -451,7 +450,7 @@ hr {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(222, 226, 230, 0.25);
 }
 
 small,
@@ -1625,21 +1624,21 @@ pre code {
 .table-primary,
 .table-primary > th,
 .table-primary > td {
-  background-color: #c7d1db;
+  background-color: #b8ecdf;
 }
 .table-primary th,
 .table-primary td,
 .table-primary thead th,
 .table-primary tbody + tbody {
-  border-color: #97a9bc;
+  border-color: #7adcc3;
 }
 
 .table-hover .table-primary:hover {
-  background-color: #b7c4d1;
+  background-color: #a4e7d6;
 }
 .table-hover .table-primary:hover > td,
 .table-hover .table-primary:hover > th {
-  background-color: #b7c4d1;
+  background-color: #a4e7d6;
 }
 
 .table-secondary,
@@ -1908,9 +1907,9 @@ pre code {
 .form-control:focus {
   color: #fff;
   background-color: #444;
-  border-color: #739ac2;
+  border-color: #3dffcd;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .form-control::placeholder {
   color: #888;
@@ -2408,7 +2407,7 @@ textarea.form-control.is-invalid {
 .btn:focus,
 .btn.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .btn.disabled,
 .btn:disabled {
@@ -2424,38 +2423,38 @@ fieldset:disabled a.btn {
 
 .btn-primary {
   color: #fff;
-  background-color: #375a7f;
-  border-color: #375a7f;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #2b4764;
-  border-color: #28415b;
+  background-color: #009670;
+  border-color: #008966;
 }
 .btn-primary:focus,
 .btn-primary.focus {
   color: #fff;
-  background-color: #2b4764;
-  border-color: #28415b;
-  box-shadow: 0 0 0 0.2rem rgba(85, 115, 146, 0.5);
+  background-color: #009670;
+  border-color: #008966;
+  box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
 }
 .btn-primary.disabled,
 .btn-primary:disabled {
   color: #fff;
-  background-color: #375a7f;
-  border-color: #375a7f;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
   color: #fff;
-  background-color: #28415b;
-  border-color: #243a53;
+  background-color: #008966;
+  border-color: #007c5d;
 }
 .btn-primary:not(:disabled):not(.disabled):active:focus,
 .btn-primary:not(:disabled):not(.disabled).active:focus,
 .show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(85, 115, 146, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
 }
 
 .btn-secondary {
@@ -2711,34 +2710,34 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-primary {
-  color: #375a7f;
-  border-color: #375a7f;
+  color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-primary:hover {
   color: #fff;
-  background-color: #375a7f;
-  border-color: #375a7f;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-primary:focus,
 .btn-outline-primary.focus {
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 .btn-outline-primary.disabled,
 .btn-outline-primary:disabled {
-  color: #375a7f;
+  color: #00bc8c;
   background-color: transparent;
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active,
 .btn-outline-primary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-primary.dropdown-toggle {
   color: #fff;
-  background-color: #375a7f;
-  border-color: #375a7f;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
 .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 
 .btn-outline-secondary {
@@ -3246,13 +3245,13 @@ input[type="button"].btn-block {
 .dropdown-item:focus {
   color: #fff;
   text-decoration: none;
-  background-color: #375a7f;
+  background-color: #00bc8c;
 }
 .dropdown-item.active,
 .dropdown-item:active {
   color: #fff;
   text-decoration: none;
-  background-color: #375a7f;
+  background-color: #00bc8c;
 }
 .dropdown-item.disabled,
 .dropdown-item:disabled {
@@ -3617,19 +3616,19 @@ input[type="button"].btn-block {
 }
 .custom-control-input:checked ~ .custom-control-label::before {
   color: #fff;
-  border-color: #375a7f;
-  background-color: #375a7f;
+  border-color: #00bc8c;
+  background-color: #00bc8c;
 }
 .custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #739ac2;
+  border-color: #3dffcd;
 }
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
   color: #fff;
-  background-color: #97b3d2;
-  border-color: #97b3d2;
+  background-color: #70ffda;
+  border-color: #70ffda;
 }
 .custom-control-input[disabled] ~ .custom-control-label,
 .custom-control-input:disabled ~ .custom-control-label {
@@ -3677,8 +3676,8 @@ input[type="button"].btn-block {
 .custom-checkbox
   .custom-control-input:indeterminate
   ~ .custom-control-label::before {
-  border-color: #375a7f;
-  background-color: #375a7f;
+  border-color: #00bc8c;
+  background-color: #00bc8c;
 }
 .custom-checkbox
   .custom-control-input:indeterminate
@@ -3688,12 +3687,12 @@ input[type="button"].btn-block {
 .custom-checkbox
   .custom-control-input:disabled:checked
   ~ .custom-control-label::before {
-  background-color: rgba(55, 90, 127, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 .custom-checkbox
   .custom-control-input:disabled:indeterminate
   ~ .custom-control-label::before {
-  background-color: rgba(55, 90, 127, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 
 .custom-radio .custom-control-label::before {
@@ -3705,7 +3704,7 @@ input[type="button"].btn-block {
 .custom-radio
   .custom-control-input:disabled:checked
   ~ .custom-control-label::before {
-  background-color: rgba(55, 90, 127, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 
 .custom-switch {
@@ -3739,7 +3738,7 @@ input[type="button"].btn-block {
 .custom-switch
   .custom-control-input:disabled:checked
   ~ .custom-control-label::before {
-  background-color: rgba(55, 90, 127, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 
 .custom-select {
@@ -3760,9 +3759,9 @@ input[type="button"].btn-block {
   appearance: none;
 }
 .custom-select:focus {
-  border-color: #739ac2;
+  border-color: #3dffcd;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-select:focus::-ms-value {
   color: #fff;
@@ -3820,8 +3819,8 @@ input[type="button"].btn-block {
   opacity: 0;
 }
 .custom-file-input:focus ~ .custom-file-label {
-  border-color: #739ac2;
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  border-color: #3dffcd;
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-file-input[disabled] ~ .custom-file-label,
 .custom-file-input:disabled ~ .custom-file-label {
@@ -3878,13 +3877,13 @@ input[type="button"].btn-block {
   outline: 0;
 }
 .custom-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-range:focus::-ms-thumb {
-  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-range::-moz-focus-outer {
   border: 0;
@@ -3893,7 +3892,7 @@ input[type="button"].btn-block {
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
-  background-color: #375a7f;
+  background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
@@ -3906,7 +3905,7 @@ input[type="button"].btn-block {
   }
 }
 .custom-range::-webkit-slider-thumb:active {
-  background-color: #97b3d2;
+  background-color: #70ffda;
 }
 .custom-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -3920,7 +3919,7 @@ input[type="button"].btn-block {
 .custom-range::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  background-color: #375a7f;
+  background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
@@ -3933,7 +3932,7 @@ input[type="button"].btn-block {
   }
 }
 .custom-range::-moz-range-thumb:active {
-  background-color: #97b3d2;
+  background-color: #70ffda;
 }
 .custom-range::-moz-range-track {
   width: 100%;
@@ -3950,7 +3949,7 @@ input[type="button"].btn-block {
   margin-top: 0;
   margin-right: 0.2rem;
   margin-left: 0.2rem;
-  background-color: #375a7f;
+  background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
@@ -3963,7 +3962,7 @@ input[type="button"].btn-block {
   }
 }
 .custom-range::-ms-thumb:active {
-  background-color: #97b3d2;
+  background-color: #70ffda;
 }
 .custom-range::-ms-track {
   width: 100%;
@@ -4075,7 +4074,7 @@ input[type="button"].btn-block {
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
   color: #fff;
-  background-color: #375a7f;
+  background-color: #00bc8c;
 }
 
 .nav-fill > .nav-link,
@@ -4762,7 +4761,7 @@ input[type="button"].btn-block {
 .page-link:focus {
   z-index: 3;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 
 .page-item:first-child .page-link {
@@ -4856,17 +4855,17 @@ a.badge:focus {
 
 .badge-primary {
   color: #fff;
-  background-color: #375a7f;
+  background-color: #00bc8c;
 }
 a.badge-primary:hover,
 a.badge-primary:focus {
   color: #fff;
-  background-color: #28415b;
+  background-color: #008966;
 }
 a.badge-primary:focus,
 a.badge-primary.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 
 .badge-secondary {
@@ -5021,15 +5020,15 @@ a.badge-dark.focus {
 }
 
 .alert-primary {
-  color: #1d2f42;
-  background-color: #d7dee5;
-  border-color: #c7d1db;
+  color: #006249;
+  background-color: #ccf2e8;
+  border-color: #b8ecdf;
 }
 .alert-primary hr {
-  border-top-color: #b7c4d1;
+  border-top-color: #a4e7d6;
 }
 .alert-primary .alert-link {
-  color: #0d161f;
+  color: #002f23;
 }
 
 .alert-secondary {
@@ -5142,7 +5141,7 @@ a.badge-dark.focus {
   color: #fff;
   text-align: center;
   white-space: nowrap;
-  background-color: #375a7f;
+  background-color: #00bc8c;
   transition: width 0.6s ease;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -5232,8 +5231,8 @@ a.badge-dark.focus {
 .list-group-item.active {
   z-index: 2;
   color: #fff;
-  background-color: #375a7f;
-  border-color: #375a7f;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .list-group-item + .list-group-item {
   border-top-width: 0;
@@ -5373,18 +5372,18 @@ a.badge-dark.focus {
 }
 
 .list-group-item-primary {
-  color: #1d2f42;
-  background-color: #c7d1db;
+  color: #006249;
+  background-color: #b8ecdf;
 }
 .list-group-item-primary.list-group-item-action:hover,
 .list-group-item-primary.list-group-item-action:focus {
-  color: #1d2f42;
-  background-color: #b7c4d1;
+  color: #006249;
+  background-color: #a4e7d6;
 }
 .list-group-item-primary.list-group-item-action.active {
   color: #fff;
-  background-color: #1d2f42;
-  border-color: #1d2f42;
+  background-color: #006249;
+  border-color: #006249;
 }
 
 .list-group-item-secondary {
@@ -6290,14 +6289,14 @@ a.close.disabled {
 }
 
 .bg-primary {
-  background-color: #375a7f !important;
+  background-color: #00bc8c !important;
 }
 
 a.bg-primary:hover,
 a.bg-primary:focus,
 button.bg-primary:hover,
 button.bg-primary:focus {
-  background-color: #28415b !important;
+  background-color: #008966 !important;
 }
 
 .bg-secondary {
@@ -6426,7 +6425,7 @@ button.bg-dark:focus {
 }
 
 .border-primary {
-  border-color: #375a7f !important;
+  border-color: #00bc8c !important;
 }
 
 .border-secondary {
@@ -9447,12 +9446,12 @@ button.bg-dark:focus {
 }
 
 .text-primary {
-  color: #375a7f !important;
+  color: #00bc8c !important;
 }
 
 a.text-primary:hover,
 a.text-primary:focus {
-  color: #20344a !important;
+  color: #007053 !important;
 }
 
 .text-secondary {

diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css
index 9b51f26c269f779df0155ff23636608bf55ffa46..187478ea0cbb3a44e5a3cc53f7624ad517e766ad 100644 (file)
--- a/src/assets/css/themes/litely-red.css
+++ b/src/assets/css/themes/litely-red.css
@@ -6,34 +6,35 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root {
-  --blue: #007bff;
+  --blue: #375a7f;
   --indigo: #6610f2;
   --purple: #6f42c1;
   --pink: #e83e8c;
-  --red: #d8486a;
-  --orange: #f1641e;
-  --yellow: #ffc107;
-  --green: #00c853;
+  --red: #e74c3c;
+  --orange: #fd7e14;
+  --yellow: #f39c12;
+  --green: #00bc8c;
   --teal: #20c997;
-  --cyan: #02bdc2;
-  --white: #ffffff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #f1641e;
+  --cyan: #3498db;
+  --white: #fff;
+  --gray: #888;
+  --gray-dark: #303030;
+  --primary: #00bc8c;
   --secondary: #c80000;
-  --success: #6610f2;
-  --info: #007bff;
-  --warning: #ffc107;
-  --danger: #8c3409;
-  --light: #f8f9fa;
-  --dark: #343a40;
+  --success: #00bc8c;
+  --info: #3498db;
+  --warning: #f39c12;
+  --danger: #004231;
+  --light: #303030;
+  --dark: #dee2e6;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
-    "Segoe UI", "Helvetica", Arial, sans-serif;
+  --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 }
@@ -48,7 +49,7 @@ html {
   font-family: sans-serif;
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(34, 34, 34, 0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 article,
@@ -66,14 +67,15 @@ section {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI",
-    "Helvetica", Arial, sans-serif;
-  font-size: 1rem;
+  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
+  font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #495057;
+  color: #dee2e6;
   text-align: left;
-  background-color: #fff;
+  background-color: #222;
 }
 
 [tabindex="-1"]:focus:not(:focus-visible) {
@@ -131,7 +133,7 @@ ul ol {
 }
 
 dt {
-  font-weight: 600;
+  font-weight: 700;
 }
 
 dd {
@@ -169,12 +171,12 @@ sup {
 }
 
 a {
-  color: #f1641e;
+  color: #00bc8c;
   text-decoration: none;
   background-color: transparent;
 }
 a:hover {
-  color: #b7440b;
+  color: #007053;
   text-decoration: underline;
 }
 
@@ -224,7 +226,7 @@ table {
 caption {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
-  color: #6c757d;
+  color: #888;
   text-align: left;
   caption-side: bottom;
 }
@@ -383,41 +385,40 @@ h6,
   margin-bottom: 0.5rem;
   font-weight: 500;
   line-height: 1.2;
-  color: #495057;
 }
 
 h1,
 .h1 {
-  font-size: 2.5rem;
+  font-size: 3rem;
 }
 
 h2,
 .h2 {
-  font-size: 2rem;
+  font-size: 2.5rem;
 }
 
 h3,
 .h3 {
-  font-size: 1.75rem;
+  font-size: 2rem;
 }
 
 h4,
 .h4 {
-  font-size: 1.5rem;
+  font-size: 1.40625rem;
 }
 
 h5,
 .h5 {
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
 }
 
 h6,
 .h6 {
-  font-size: 1rem;
+  font-size: 0.9375rem;
 }
 
 .lead {
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   font-weight: 300;
 }
 
@@ -449,7 +450,7 @@ hr {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
-  border-top: 1px solid rgba(34, 34, 34, 0.1);
+  border-top: 1px solid rgba(222, 226, 230, 0.25);
 }
 
 small,
@@ -461,7 +462,7 @@ small,
 mark,
 .mark {
   padding: 0.2em;
-  background-color: rgb(255, 252, 239);
+  background-color: #333;
 }
 
 .list-unstyled {
@@ -488,13 +489,13 @@ mark,
 
 .blockquote {
   margin-bottom: 1rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
 }
 
 .blockquote-footer {
   display: block;
   font-size: 0.875em;
-  color: #6c757d;
+  color: #888;
 }
 .blockquote-footer::before {
   content: "— ";
@@ -507,9 +508,9 @@ mark,
 
 .img-thumbnail {
   padding: 0.25rem;
-  background-color: #fff;
+  background-color: #222;
   border: 1px solid #dee2e6;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
   max-width: 100%;
   height: auto;
 }
@@ -525,7 +526,7 @@ mark,
 
 .figure-caption {
   font-size: 90%;
-  color: #6c757d;
+  color: #888;
 }
 
 code {
@@ -540,20 +541,20 @@ a > code {
 kbd {
   padding: 0.2rem 0.4rem;
   font-size: 87.5%;
-  color: #ffffff;
-  background-color: #212529;
-  border-radius: 1rem;
+  color: #fff;
+  background-color: #222;
+  border-radius: 0.2rem;
 }
 kbd kbd {
   padding: 0;
   font-size: 100%;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 pre {
   display: block;
   font-size: 87.5%;
-  color: #212529;
+  color: inherit;
 }
 pre code {
   font-size: inherit;
@@ -1571,20 +1572,20 @@ pre code {
 .table {
   width: 100%;
   margin-bottom: 1rem;
-  color: #495057;
+  color: #dee2e6;
 }
 .table th,
 .table td {
   padding: 0.75rem;
   vertical-align: top;
-  border-top: 1px solid #495057;
+  border-top: 1px solid #444;
 }
 .table thead th {
   vertical-align: bottom;
-  border-bottom: 2px solid #495057;
+  border-bottom: 2px solid #444;
 }
 .table tbody + tbody {
-  border-top: 2px solid #495057;
+  border-top: 2px solid #444;
 }
 
 .table-sm th,
@@ -1593,11 +1594,11 @@ pre code {
 }
 
 .table-bordered {
-  border: 1px solid #495057;
+  border: 1px solid #444;
 }
 .table-bordered th,
 .table-bordered td {
-  border: 1px solid #495057;
+  border: 1px solid #444;
 }
 .table-bordered thead th,
 .table-bordered thead td {
@@ -1612,32 +1613,32 @@ pre code {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(34, 34, 34, 0.05);
+  background-color: #303030;
 }
 
 .table-hover tbody tr:hover {
-  color: #495057;
-  background-color: rgba(34, 34, 34, 0.075);
+  color: #dee2e6;
+  background-color: rgba(0, 0, 0, 0.075);
 }
 
 .table-primary,
 .table-primary > th,
 .table-primary > td {
-  background-color: #fbd4c0;
+  background-color: #b8ecdf;
 }
 .table-primary th,
 .table-primary td,
 .table-primary thead th,
 .table-primary tbody + tbody {
-  border-color: #f8ae8a;
+  border-color: #7adcc3;
 }
 
 .table-hover .table-primary:hover {
-  background-color: #f9c4a8;
+  background-color: #a4e7d6;
 }
 .table-hover .table-primary:hover > td,
 .table-hover .table-primary:hover > th {
-  background-color: #f9c4a8;
+  background-color: #a4e7d6;
 }
 
 .table-secondary,
@@ -1663,156 +1664,156 @@ pre code {
 .table-success,
 .table-success > th,
 .table-success > td {
-  background-color: #d4bcfb;
+  background-color: #b8ecdf;
 }
 .table-success th,
 .table-success td,
 .table-success thead th,
 .table-success tbody + tbody {
-  border-color: #af83f8;
+  border-color: #7adcc3;
 }
 
 .table-hover .table-success:hover {
-  background-color: #c5a4fa;
+  background-color: #a4e7d6;
 }
 .table-hover .table-success:hover > td,
 .table-hover .table-success:hover > th {
-  background-color: #c5a4fa;
+  background-color: #a4e7d6;
 }
 
 .table-info,
 .table-info > th,
 .table-info > td {
-  background-color: #b8daff;
+  background-color: #c6e2f5;
 }
 .table-info th,
 .table-info td,
 .table-info thead th,
 .table-info tbody + tbody {
-  border-color: #7abaff;
+  border-color: #95c9ec;
 }
 
 .table-hover .table-info:hover {
-  background-color: #9fcdff;
+  background-color: #b0d7f1;
 }
 .table-hover .table-info:hover > td,
 .table-hover .table-info:hover > th {
-  background-color: #9fcdff;
+  background-color: #b0d7f1;
 }
 
 .table-warning,
 .table-warning > th,
 .table-warning > td {
-  background-color: #ffeeba;
+  background-color: #fce3bd;
 }
 .table-warning th,
 .table-warning td,
 .table-warning thead th,
 .table-warning tbody + tbody {
-  border-color: #ffdf7e;
+  border-color: #f9cc84;
 }
 
 .table-hover .table-warning:hover {
-  background-color: #ffe8a1;
+  background-color: #fbd9a5;
 }
 .table-hover .table-warning:hover > td,
 .table-hover .table-warning:hover > th {
-  background-color: #ffe8a1;
+  background-color: #fbd9a5;
 }
 
 .table-danger,
 .table-danger > th,
 .table-danger > td {
-  background-color: #dfc6ba;
+  background-color: #b8cac5;
 }
 .table-danger th,
 .table-danger td,
 .table-danger thead th,
 .table-danger tbody + tbody {
-  border-color: #c3957f;
+  border-color: #7a9d94;
 }
 
 .table-hover .table-danger:hover {
-  background-color: #d7b8a9;
+  background-color: #a9bfb9;
 }
 .table-hover .table-danger:hover > td,
 .table-hover .table-danger:hover > th {
-  background-color: #d7b8a9;
+  background-color: #a9bfb9;
 }
 
 .table-light,
 .table-light > th,
 .table-light > td {
-  background-color: #fdfdfe;
+  background-color: #c5c5c5;
 }
 .table-light th,
 .table-light td,
 .table-light thead th,
 .table-light tbody + tbody {
-  border-color: #fbfcfc;
+  border-color: #939393;
 }
 
 .table-hover .table-light:hover {
-  background-color: #ececf6;
+  background-color: #b8b8b8;
 }
 .table-hover .table-light:hover > td,
 .table-hover .table-light:hover > th {
-  background-color: #ececf6;
+  background-color: #b8b8b8;
 }
 
 .table-dark,
 .table-dark > th,
 .table-dark > td {
-  background-color: #c6c8ca;
+  background-color: #f6f7f8;
 }
 .table-dark th,
 .table-dark td,
 .table-dark thead th,
 .table-dark tbody + tbody {
-  border-color: #95999c;
+  border-color: #eef0f2;
 }
 
 .table-hover .table-dark:hover {
-  background-color: #b9bbbe;
+  background-color: #e8eaed;
 }
 .table-hover .table-dark:hover > td,
 .table-hover .table-dark:hover > th {
-  background-color: #b9bbbe;
+  background-color: #e8eaed;
 }
 
 .table-active,
 .table-active > th,
 .table-active > td {
-  background-color: rgba(34, 34, 34, 0.075);
+  background-color: rgba(0, 0, 0, 0.075);
 }
 
 .table-hover .table-active:hover {
-  background-color: rgba(21, 21, 21, 0.075);
+  background-color: rgba(0, 0, 0, 0.075);
 }
 .table-hover .table-active:hover > td,
 .table-hover .table-active:hover > th {
-  background-color: rgba(21, 21, 21, 0.075);
+  background-color: rgba(0, 0, 0, 0.075);
 }
 
 .table .thead-dark th {
-  color: #ffffff;
-  background-color: #343a40;
-  border-color: #454d55;
+  color: #fff;
+  background-color: #303030;
+  border-color: #434343;
 }
 .table .thead-light th {
-  color: #495057;
-  background-color: #e9ecef;
-  border-color: #495057;
+  color: #444;
+  background-color: #ebebeb;
+  border-color: #444;
 }
 
 .table-dark {
-  color: #ffffff;
-  background-color: #343a40;
+  color: #fff;
+  background-color: #303030;
 }
 .table-dark th,
 .table-dark td,
 .table-dark thead th {
-  border-color: #454d55;
+  border-color: #434343;
 }
 .table-dark.table-bordered {
   border: 0;
@@ -1821,7 +1822,7 @@ pre code {
   background-color: rgba(255, 255, 255, 0.05);
 }
 .table-dark.table-hover tbody tr:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: rgba(255, 255, 255, 0.075);
 }
 
@@ -1884,14 +1885,14 @@ pre code {
   width: 100%;
   height: calc(1.5em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #495057;
-  background-color: #ffffff;
+  color: #fff;
+  background-color: #444;
   background-clip: padding-box;
-  border: 1px solid #ced4da;
-  border-radius: 0.5rem;
+  border: 1px solid #222;
+  border-radius: 0.25rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1904,19 +1905,19 @@ pre code {
   border: 0;
 }
 .form-control:focus {
-  color: #495057;
-  background-color: #ffffff;
-  border-color: #f8b796;
+  color: #fff;
+  background-color: #444;
+  border-color: #3dffcd;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .form-control::placeholder {
-  color: #6c757d;
+  color: #888;
   opacity: 1;
 }
 .form-control:disabled,
 .form-control[readonly] {
-  background-color: #e9ecef;
+  background-color: #2b2b2b;
   opacity: 1;
 }
 
@@ -1929,11 +1930,11 @@ input[type="month"].form-control {
 
 select.form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #495057;
+  text-shadow: 0 0 0 #fff;
 }
 select.form-control:focus::-ms-value {
-  color: #495057;
-  background-color: #ffffff;
+  color: #fff;
+  background-color: #444;
 }
 
 .form-control-file,
@@ -1953,14 +1954,14 @@ select.form-control:focus::-ms-value {
 .col-form-label-lg {
   padding-top: calc(0.5rem + 1px);
   padding-bottom: calc(0.5rem + 1px);
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   line-height: 1.5;
 }
 
 .col-form-label-sm {
   padding-top: calc(0.25rem + 1px);
   padding-bottom: calc(0.25rem + 1px);
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   line-height: 1.5;
 }
 
@@ -1969,9 +1970,9 @@ select.form-control:focus::-ms-value {
   width: 100%;
   padding: 0.375rem 0;
   margin-bottom: 0;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   line-height: 1.5;
-  color: #495057;
+  color: #dee2e6;
   background-color: transparent;
   border: solid transparent;
   border-width: 1px 0;
@@ -1985,17 +1986,17 @@ select.form-control:focus::-ms-value {
 .form-control-sm {
   height: calc(1.5em + 0.5rem + 2px);
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   line-height: 1.5;
-  border-radius: 1rem;
+  border-radius: 0.2rem;
 }
 
 .form-control-lg {
   height: calc(1.5em + 1rem + 2px);
   padding: 0.5rem 1rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   line-height: 1.5;
-  border-radius: 0.5rem;
+  border-radius: 0.3rem;
 }
 
 select.form-control[size],
@@ -2041,7 +2042,7 @@ textarea.form-control {
 }
 .form-check-input[disabled] ~ .form-check-label,
 .form-check-input:disabled ~ .form-check-label {
-  color: #6c757d;
+  color: #888;
 }
 
 .form-check-label {
@@ -2066,7 +2067,7 @@ textarea.form-control {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 0.875em;
-  color: #007bff;
+  color: #00bc8c;
 }
 
 .valid-tooltip {
@@ -2078,11 +2079,11 @@ textarea.form-control {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   line-height: 1.5;
-  color: #ffffff;
-  background-color: rgba(0, 123, 255, 0.9);
-  border-radius: 0.5rem;
+  color: #fff;
+  background-color: rgba(0, 188, 140, 0.9);
+  border-radius: 0.25rem;
 }
 .form-row > .col > .valid-tooltip,
 .form-row > [class*="col-"] > .valid-tooltip {
@@ -2098,17 +2099,17 @@ textarea.form-control {
 
 .was-validated .form-control:valid,
 .form-control.is-valid {
-  border-color: #007bff;
+  border-color: #00bc8c;
   padding-right: calc(1.5em + 0.75rem) !important;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%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);
 }
 .was-validated .form-control:valid:focus,
 .form-control.is-valid:focus {
-  border-color: #007bff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  border-color: #00bc8c;
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 
 .was-validated select.form-control:valid,
@@ -2126,24 +2127,24 @@ textarea.form-control.is-valid {
 
 .was-validated .custom-select:valid,
 .custom-select.is-valid {
-  border-color: #007bff;
+  border-color: #00bc8c;
   padding-right: calc(0.75em + 2.3125rem) !important;
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
       right 0.75rem center/8px 10px no-repeat,
-    #ffffff
-      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
+    #444
+      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
       center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
       no-repeat;
 }
 .was-validated .custom-select:valid:focus,
 .custom-select.is-valid:focus {
-  border-color: #007bff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  border-color: #00bc8c;
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 
 .was-validated .form-check-input:valid ~ .form-check-label,
 .form-check-input.is-valid ~ .form-check-label {
-  color: #007bff;
+  color: #00bc8c;
 }
 .was-validated .form-check-input:valid ~ .valid-feedback,
 .was-validated .form-check-input:valid ~ .valid-tooltip,
@@ -2154,41 +2155,41 @@ textarea.form-control.is-valid {
 
 .was-validated .custom-control-input:valid ~ .custom-control-label,
 .custom-control-input.is-valid ~ .custom-control-label {
-  color: #007bff;
+  color: #00bc8c;
 }
 .was-validated .custom-control-input:valid ~ .custom-control-label::before,
 .custom-control-input.is-valid ~ .custom-control-label::before {
-  border-color: #007bff;
+  border-color: #00bc8c;
 }
 .was-validated
   .custom-control-input:valid:checked
   ~ .custom-control-label::before,
 .custom-control-input.is-valid:checked ~ .custom-control-label::before {
-  border-color: #3395ff;
-  background-color: #3395ff;
+  border-color: #00efb2;
+  background-color: #00efb2;
 }
 .was-validated
   .custom-control-input:valid:focus
   ~ .custom-control-label::before,
 .custom-control-input.is-valid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .was-validated
   .custom-control-input:valid:focus:not(:checked)
   ~ .custom-control-label::before,
 .custom-control-input.is-valid:focus:not(:checked)
   ~ .custom-control-label::before {
-  border-color: #007bff;
+  border-color: #00bc8c;
 }
 
 .was-validated .custom-file-input:valid ~ .custom-file-label,
 .custom-file-input.is-valid ~ .custom-file-label {
-  border-color: #007bff;
+  border-color: #00bc8c;
 }
 .was-validated .custom-file-input:valid:focus ~ .custom-file-label,
 .custom-file-input.is-valid:focus ~ .custom-file-label {
-  border-color: #007bff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  border-color: #00bc8c;
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 
 .invalid-feedback {
@@ -2196,7 +2197,7 @@ textarea.form-control.is-valid {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 0.875em;
-  color: #8c3409;
+  color: #004231;
 }
 
 .invalid-tooltip {
@@ -2208,11 +2209,11 @@ textarea.form-control.is-valid {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   line-height: 1.5;
-  color: #ffffff;
-  background-color: rgba(140, 52, 9, 0.9);
-  border-radius: 0.5rem;
+  color: #fff;
+  background-color: rgba(0, 66, 49, 0.9);
+  border-radius: 0.25rem;
 }
 .form-row > .col > .invalid-tooltip,
 .form-row > [class*="col-"] > .invalid-tooltip {
@@ -2228,17 +2229,17 @@ textarea.form-control.is-valid {
 
 .was-validated .form-control:invalid,
 .form-control.is-invalid {
-  border-color: #8c3409;
+  border-color: #004231;
   padding-right: calc(1.5em + 0.75rem) !important;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238c3409' viewBox='0 0 12 12'%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' width='12' height='12' fill='none' stroke='%23004231' viewBox='0 0 12 12'%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='%23004231' 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);
 }
 .was-validated .form-control:invalid:focus,
 .form-control.is-invalid:focus {
-  border-color: #8c3409;
-  box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25);
+  border-color: #004231;
+  box-shadow: 0 0 0 0.2rem rgba(0, 66, 49, 0.25);
 }
 
 .was-validated select.form-control:invalid,
@@ -2256,24 +2257,24 @@ textarea.form-control.is-invalid {
 
 .was-validated .custom-select:invalid,
 .custom-select.is-invalid {
-  border-color: #8c3409;
+  border-color: #004231;
   padding-right: calc(0.75em + 2.3125rem) !important;
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
       right 0.75rem center/8px 10px no-repeat,
-    #ffffff
-      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238c3409' viewBox='0 0 12 12'%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")
+    #444
+      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23004231' viewBox='0 0 12 12'%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='%23004231' stroke='none'/%3e%3c/svg%3e")
       center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
       no-repeat;
 }
 .was-validated .custom-select:invalid:focus,
 .custom-select.is-invalid:focus {
-  border-color: #8c3409;
-  box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25);
+  border-color: #004231;
+  box-shadow: 0 0 0 0.2rem rgba(0, 66, 49, 0.25);
 }
 
 .was-validated .form-check-input:invalid ~ .form-check-label,
 .form-check-input.is-invalid ~ .form-check-label {
-  color: #8c3409;
+  color: #004231;
 }
 .was-validated .form-check-input:invalid ~ .invalid-feedback,
 .was-validated .form-check-input:invalid ~ .invalid-tooltip,
@@ -2284,41 +2285,41 @@ textarea.form-control.is-invalid {
 
 .was-validated .custom-control-input:invalid ~ .custom-control-label,
 .custom-control-input.is-invalid ~ .custom-control-label {
-  color: #8c3409;
+  color: #004231;
 }
 .was-validated .custom-control-input:invalid ~ .custom-control-label::before,
 .custom-control-input.is-invalid ~ .custom-control-label::before {
-  border-color: #8c3409;
+  border-color: #004231;
 }
 .was-validated
   .custom-control-input:invalid:checked
   ~ .custom-control-label::before,
 .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
-  border-color: #bc460c;
-  background-color: #bc460c;
+  border-color: #007557;
+  background-color: #007557;
 }
 .was-validated
   .custom-control-input:invalid:focus
   ~ .custom-control-label::before,
 .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 66, 49, 0.25);
 }
 .was-validated
   .custom-control-input:invalid:focus:not(:checked)
   ~ .custom-control-label::before,
 .custom-control-input.is-invalid:focus:not(:checked)
   ~ .custom-control-label::before {
-  border-color: #8c3409;
+  border-color: #004231;
 }
 
 .was-validated .custom-file-input:invalid ~ .custom-file-label,
 .custom-file-input.is-invalid ~ .custom-file-label {
-  border-color: #8c3409;
+  border-color: #004231;
 }
 .was-validated .custom-file-input:invalid:focus ~ .custom-file-label,
 .custom-file-input.is-invalid:focus ~ .custom-file-label {
-  border-color: #8c3409;
-  box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25);
+  border-color: #004231;
+  box-shadow: 0 0 0 0.2rem rgba(0, 66, 49, 0.25);
 }
 
 .form-inline {
@@ -2381,16 +2382,16 @@ textarea.form-control.is-invalid {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #495057;
+  color: #dee2e6;
   text-align: center;
   vertical-align: middle;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
   padding: 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   line-height: 1.5;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -2400,13 +2401,13 @@ textarea.form-control.is-invalid {
   }
 }
 .btn:hover {
-  color: #495057;
+  color: #dee2e6;
   text-decoration: none;
 }
 .btn:focus,
 .btn.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .btn.disabled,
 .btn:disabled {
@@ -2421,68 +2422,68 @@ fieldset:disabled a.btn {
 }
 
 .btn-primary {
-  color: #ffffff;
-  background-color: #f1641e;
-  border-color: #f1641e;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-primary:hover {
-  color: #ffffff;
-  background-color: #db520e;
-  border-color: #cf4d0d;
+  color: #fff;
+  background-color: #009670;
+  border-color: #008966;
 }
 .btn-primary:focus,
 .btn-primary.focus {
-  color: #ffffff;
-  background-color: #db520e;
-  border-color: #cf4d0d;
-  box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5);
+  color: #fff;
+  background-color: #009670;
+  border-color: #008966;
+  box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
 }
 .btn-primary.disabled,
 .btn-primary:disabled {
-  color: #ffffff;
-  background-color: #f1641e;
-  border-color: #f1641e;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  color: #ffffff;
-  background-color: #cf4d0d;
-  border-color: #c3490c;
+  color: #fff;
+  background-color: #008966;
+  border-color: #007c5d;
 }
 .btn-primary:not(:disabled):not(.disabled):active:focus,
 .btn-primary:not(:disabled):not(.disabled).active:focus,
 .show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
 }
 
 .btn-secondary {
-  color: #ffffff;
+  color: #fff;
   background-color: #c80000;
   border-color: #c80000;
 }
 .btn-secondary:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #a20000;
   border-color: #950000;
 }
 .btn-secondary:focus,
 .btn-secondary.focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #a20000;
   border-color: #950000;
   box-shadow: 0 0 0 0.2rem rgba(208, 38, 38, 0.5);
 }
 .btn-secondary.disabled,
 .btn-secondary:disabled {
-  color: #ffffff;
+  color: #fff;
   background-color: #c80000;
   border-color: #c80000;
 }
 .btn-secondary:not(:disabled):not(.disabled):active,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #950000;
   border-color: #880000;
 }
@@ -2493,250 +2494,250 @@ fieldset:disabled a.btn {
 }
 
 .btn-success {
-  color: #ffffff;
-  background-color: #6610f2;
-  border-color: #6610f2;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-success:hover {
-  color: #ffffff;
-  background-color: #560bd0;
-  border-color: #510bc4;
+  color: #fff;
+  background-color: #009670;
+  border-color: #008966;
 }
 .btn-success:focus,
 .btn-success.focus {
-  color: #ffffff;
-  background-color: #560bd0;
-  border-color: #510bc4;
-  box-shadow: 0 0 0 0.2rem rgba(125, 52, 244, 0.5);
+  color: #fff;
+  background-color: #009670;
+  border-color: #008966;
+  box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
 }
 .btn-success.disabled,
 .btn-success:disabled {
-  color: #ffffff;
-  background-color: #6610f2;
-  border-color: #6610f2;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
-  color: #ffffff;
-  background-color: #510bc4;
-  border-color: #4c0ab8;
+  color: #fff;
+  background-color: #008966;
+  border-color: #007c5d;
 }
 .btn-success:not(:disabled):not(.disabled):active:focus,
 .btn-success:not(:disabled):not(.disabled).active:focus,
 .show > .btn-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(125, 52, 244, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5);
 }
 
 .btn-info {
-  color: #ffffff;
-  background-color: #007bff;
-  border-color: #007bff;
+  color: #fff;
+  background-color: #3498db;
+  border-color: #3498db;
 }
 .btn-info:hover {
-  color: #ffffff;
-  background-color: #0069d9;
-  border-color: #0062cc;
+  color: #fff;
+  background-color: #2384c6;
+  border-color: #217dbb;
 }
 .btn-info:focus,
 .btn-info.focus {
-  color: #ffffff;
-  background-color: #0069d9;
-  border-color: #0062cc;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  color: #fff;
+  background-color: #2384c6;
+  border-color: #217dbb;
+  box-shadow: 0 0 0 0.2rem rgba(82, 167, 224, 0.5);
 }
 .btn-info.disabled,
 .btn-info:disabled {
-  color: #ffffff;
-  background-color: #007bff;
-  border-color: #007bff;
+  color: #fff;
+  background-color: #3498db;
+  border-color: #3498db;
 }
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
-  color: #ffffff;
-  background-color: #0062cc;
-  border-color: #005cbf;
+  color: #fff;
+  background-color: #217dbb;
+  border-color: #1f76b0;
 }
 .btn-info:not(:disabled):not(.disabled):active:focus,
 .btn-info:not(:disabled):not(.disabled).active:focus,
 .show > .btn-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(82, 167, 224, 0.5);
 }
 
 .btn-warning {
-  color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  color: #fff;
+  background-color: #f39c12;
+  border-color: #f39c12;
 }
 .btn-warning:hover {
-  color: #212529;
-  background-color: #e0a800;
-  border-color: #d39e00;
+  color: #fff;
+  background-color: #d4860b;
+  border-color: #c87f0a;
 }
 .btn-warning:focus,
 .btn-warning.focus {
-  color: #212529;
-  background-color: #e0a800;
-  border-color: #d39e00;
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+  color: #fff;
+  background-color: #d4860b;
+  border-color: #c87f0a;
+  box-shadow: 0 0 0 0.2rem rgba(245, 171, 54, 0.5);
 }
 .btn-warning.disabled,
 .btn-warning:disabled {
-  color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  color: #fff;
+  background-color: #f39c12;
+  border-color: #f39c12;
 }
 .btn-warning:not(:disabled):not(.disabled):active,
 .btn-warning:not(:disabled):not(.disabled).active,
 .show > .btn-warning.dropdown-toggle {
-  color: #212529;
-  background-color: #d39e00;
-  border-color: #c69500;
+  color: #fff;
+  background-color: #c87f0a;
+  border-color: #bc770a;
 }
 .btn-warning:not(:disabled):not(.disabled):active:focus,
 .btn-warning:not(:disabled):not(.disabled).active:focus,
 .show > .btn-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(245, 171, 54, 0.5);
 }
 
 .btn-danger {
-  color: #ffffff;
-  background-color: #8c3409;
-  border-color: #8c3409;
+  color: #fff;
+  background-color: #004231;
+  border-color: #004231;
 }
 .btn-danger:hover {
-  color: #ffffff;
-  background-color: #682706;
-  border-color: #5c2206;
+  color: #fff;
+  background-color: #001b14;
+  border-color: #000f0b;
 }
 .btn-danger:focus,
 .btn-danger.focus {
-  color: #ffffff;
-  background-color: #682706;
-  border-color: #5c2206;
-  box-shadow: 0 0 0 0.2rem rgba(157, 82, 46, 0.5);
+  color: #fff;
+  background-color: #001b14;
+  border-color: #000f0b;
+  box-shadow: 0 0 0 0.2rem rgba(38, 94, 80, 0.5);
 }
 .btn-danger.disabled,
 .btn-danger:disabled {
-  color: #ffffff;
-  background-color: #8c3409;
-  border-color: #8c3409;
+  color: #fff;
+  background-color: #004231;
+  border-color: #004231;
 }
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-  color: #ffffff;
-  background-color: #5c2206;
-  border-color: #501e05;
+  color: #fff;
+  background-color: #000f0b;
+  border-color: #000201;
 }
 .btn-danger:not(:disabled):not(.disabled):active:focus,
 .btn-danger:not(:disabled):not(.disabled).active:focus,
 .show > .btn-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(157, 82, 46, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(38, 94, 80, 0.5);
 }
 
 .btn-light {
-  color: #212529;
-  background-color: #f8f9fa;
-  border-color: #f8f9fa;
+  color: #fff;
+  background-color: #303030;
+  border-color: #303030;
 }
 .btn-light:hover {
-  color: #212529;
-  background-color: #e2e6ea;
-  border-color: #dae0e5;
+  color: #fff;
+  background-color: #1d1d1d;
+  border-color: #171717;
 }
 .btn-light:focus,
 .btn-light.focus {
-  color: #212529;
-  background-color: #e2e6ea;
-  border-color: #dae0e5;
-  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
+  color: #fff;
+  background-color: #1d1d1d;
+  border-color: #171717;
+  box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5);
 }
 .btn-light.disabled,
 .btn-light:disabled {
-  color: #212529;
-  background-color: #f8f9fa;
-  border-color: #f8f9fa;
+  color: #fff;
+  background-color: #303030;
+  border-color: #303030;
 }
 .btn-light:not(:disabled):not(.disabled):active,
 .btn-light:not(:disabled):not(.disabled).active,
 .show > .btn-light.dropdown-toggle {
-  color: #212529;
-  background-color: #dae0e5;
-  border-color: #d3d9df;
+  color: #fff;
+  background-color: #171717;
+  border-color: #101010;
 }
 .btn-light:not(:disabled):not(.disabled):active:focus,
 .btn-light:not(:disabled):not(.disabled).active:focus,
 .show > .btn-light.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5);
 }
 
 .btn-dark {
-  color: #ffffff;
-  background-color: #343a40;
-  border-color: #343a40;
+  color: #222;
+  background-color: #dee2e6;
+  border-color: #dee2e6;
 }
 .btn-dark:hover {
-  color: #ffffff;
-  background-color: #23272b;
-  border-color: #1d2124;
+  color: #222;
+  background-color: #c8cfd6;
+  border-color: #c1c9d0;
 }
 .btn-dark:focus,
 .btn-dark.focus {
-  color: #ffffff;
-  background-color: #23272b;
-  border-color: #1d2124;
-  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
+  color: #222;
+  background-color: #c8cfd6;
+  border-color: #c1c9d0;
+  box-shadow: 0 0 0 0.2rem rgba(194, 197, 201, 0.5);
 }
 .btn-dark.disabled,
 .btn-dark:disabled {
-  color: #ffffff;
-  background-color: #343a40;
-  border-color: #343a40;
+  color: #222;
+  background-color: #dee2e6;
+  border-color: #dee2e6;
 }
 .btn-dark:not(:disabled):not(.disabled):active,
 .btn-dark:not(:disabled):not(.disabled).active,
 .show > .btn-dark.dropdown-toggle {
-  color: #ffffff;
-  background-color: #1d2124;
-  border-color: #171a1d;
+  color: #222;
+  background-color: #c1c9d0;
+  border-color: #bac2cb;
 }
 .btn-dark:not(:disabled):not(.disabled):active:focus,
 .btn-dark:not(:disabled):not(.disabled).active:focus,
 .show > .btn-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(194, 197, 201, 0.5);
 }
 
 .btn-outline-primary {
-  color: #f1641e;
-  border-color: #f1641e;
+  color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-primary:hover {
-  color: #ffffff;
-  background-color: #f1641e;
-  border-color: #f1641e;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-primary:focus,
 .btn-outline-primary.focus {
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 .btn-outline-primary.disabled,
 .btn-outline-primary:disabled {
-  color: #f1641e;
+  color: #00bc8c;
   background-color: transparent;
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active,
 .btn-outline-primary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-primary.dropdown-toggle {
-  color: #ffffff;
-  background-color: #f1641e;
-  border-color: #f1641e;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
 .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 
 .btn-outline-secondary {
@@ -2744,7 +2745,7 @@ fieldset:disabled a.btn {
   border-color: #c80000;
 }
 .btn-outline-secondary:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #c80000;
   border-color: #c80000;
 }
@@ -2760,7 +2761,7 @@ fieldset:disabled a.btn {
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #c80000;
   border-color: #c80000;
 }
@@ -2771,198 +2772,198 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-success {
-  color: #6610f2;
-  border-color: #6610f2;
+  color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-success:hover {
-  color: #ffffff;
-  background-color: #6610f2;
-  border-color: #6610f2;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-success:focus,
 .btn-outline-success.focus {
-  box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 .btn-outline-success.disabled,
 .btn-outline-success:disabled {
-  color: #6610f2;
+  color: #00bc8c;
   background-color: transparent;
 }
 .btn-outline-success:not(:disabled):not(.disabled):active,
 .btn-outline-success:not(:disabled):not(.disabled).active,
 .show > .btn-outline-success.dropdown-toggle {
-  color: #ffffff;
-  background-color: #6610f2;
-  border-color: #6610f2;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .btn-outline-success:not(:disabled):not(.disabled):active:focus,
 .btn-outline-success:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 
 .btn-outline-info {
-  color: #007bff;
-  border-color: #007bff;
+  color: #3498db;
+  border-color: #3498db;
 }
 .btn-outline-info:hover {
-  color: #ffffff;
-  background-color: #007bff;
-  border-color: #007bff;
+  color: #fff;
+  background-color: #3498db;
+  border-color: #3498db;
 }
 .btn-outline-info:focus,
 .btn-outline-info.focus {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
 }
 .btn-outline-info.disabled,
 .btn-outline-info:disabled {
-  color: #007bff;
+  color: #3498db;
   background-color: transparent;
 }
 .btn-outline-info:not(:disabled):not(.disabled):active,
 .btn-outline-info:not(:disabled):not(.disabled).active,
 .show > .btn-outline-info.dropdown-toggle {
-  color: #ffffff;
-  background-color: #007bff;
-  border-color: #007bff;
+  color: #fff;
+  background-color: #3498db;
+  border-color: #3498db;
 }
 .btn-outline-info:not(:disabled):not(.disabled):active:focus,
 .btn-outline-info:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
 }
 
 .btn-outline-warning {
-  color: #ffc107;
-  border-color: #ffc107;
+  color: #f39c12;
+  border-color: #f39c12;
 }
 .btn-outline-warning:hover {
-  color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  color: #fff;
+  background-color: #f39c12;
+  border-color: #f39c12;
 }
 .btn-outline-warning:focus,
 .btn-outline-warning.focus {
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5);
 }
 .btn-outline-warning.disabled,
 .btn-outline-warning:disabled {
-  color: #ffc107;
+  color: #f39c12;
   background-color: transparent;
 }
 .btn-outline-warning:not(:disabled):not(.disabled):active,
 .btn-outline-warning:not(:disabled):not(.disabled).active,
 .show > .btn-outline-warning.dropdown-toggle {
-  color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  color: #fff;
+  background-color: #f39c12;
+  border-color: #f39c12;
 }
 .btn-outline-warning:not(:disabled):not(.disabled):active:focus,
 .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5);
 }
 
 .btn-outline-danger {
-  color: #8c3409;
-  border-color: #8c3409;
+  color: #004231;
+  border-color: #004231;
 }
 .btn-outline-danger:hover {
-  color: #ffffff;
-  background-color: #8c3409;
-  border-color: #8c3409;
+  color: #fff;
+  background-color: #004231;
+  border-color: #004231;
 }
 .btn-outline-danger:focus,
 .btn-outline-danger.focus {
-  box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 66, 49, 0.5);
 }
 .btn-outline-danger.disabled,
 .btn-outline-danger:disabled {
-  color: #8c3409;
+  color: #004231;
   background-color: transparent;
 }
 .btn-outline-danger:not(:disabled):not(.disabled):active,
 .btn-outline-danger:not(:disabled):not(.disabled).active,
 .show > .btn-outline-danger.dropdown-toggle {
-  color: #ffffff;
-  background-color: #8c3409;
-  border-color: #8c3409;
+  color: #fff;
+  background-color: #004231;
+  border-color: #004231;
 }
 .btn-outline-danger:not(:disabled):not(.disabled):active:focus,
 .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 66, 49, 0.5);
 }
 
 .btn-outline-light {
-  color: #f8f9fa;
-  border-color: #f8f9fa;
+  color: #303030;
+  border-color: #303030;
 }
 .btn-outline-light:hover {
-  color: #212529;
-  background-color: #f8f9fa;
-  border-color: #f8f9fa;
+  color: #fff;
+  background-color: #303030;
+  border-color: #303030;
 }
 .btn-outline-light:focus,
 .btn-outline-light.focus {
-  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5);
 }
 .btn-outline-light.disabled,
 .btn-outline-light:disabled {
-  color: #f8f9fa;
+  color: #303030;
   background-color: transparent;
 }
 .btn-outline-light:not(:disabled):not(.disabled):active,
 .btn-outline-light:not(:disabled):not(.disabled).active,
 .show > .btn-outline-light.dropdown-toggle {
-  color: #212529;
-  background-color: #f8f9fa;
-  border-color: #f8f9fa;
+  color: #fff;
+  background-color: #303030;
+  border-color: #303030;
 }
 .btn-outline-light:not(:disabled):not(.disabled):active:focus,
 .btn-outline-light:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-light.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5);
 }
 
 .btn-outline-dark {
-  color: #343a40;
-  border-color: #343a40;
+  color: #dee2e6;
+  border-color: #dee2e6;
 }
 .btn-outline-dark:hover {
-  color: #ffffff;
-  background-color: #343a40;
-  border-color: #343a40;
+  color: #222;
+  background-color: #dee2e6;
+  border-color: #dee2e6;
 }
 .btn-outline-dark:focus,
 .btn-outline-dark.focus {
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
 }
 .btn-outline-dark.disabled,
 .btn-outline-dark:disabled {
-  color: #343a40;
+  color: #dee2e6;
   background-color: transparent;
 }
 .btn-outline-dark:not(:disabled):not(.disabled):active,
 .btn-outline-dark:not(:disabled):not(.disabled).active,
 .show > .btn-outline-dark.dropdown-toggle {
-  color: #ffffff;
-  background-color: #343a40;
-  border-color: #343a40;
+  color: #222;
+  background-color: #dee2e6;
+  border-color: #dee2e6;
 }
 .btn-outline-dark:not(:disabled):not(.disabled):active:focus,
 .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
 }
 
 .btn-link {
   font-weight: 400;
-  color: #f1641e;
+  color: #00bc8c;
   text-decoration: none;
 }
 .btn-link:hover {
-  color: #b7440b;
+  color: #007053;
   text-decoration: underline;
 }
 .btn-link:focus,
@@ -2971,24 +2972,24 @@ fieldset:disabled a.btn {
 }
 .btn-link:disabled,
 .btn-link.disabled {
-  color: #6c757d;
+  color: #888;
   pointer-events: none;
 }
 
 .btn-lg,
 .btn-group-lg > .btn {
   padding: 0.5rem 1rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   line-height: 1.5;
-  border-radius: 0.5rem;
+  border-radius: 0.3rem;
 }
 
 .btn-sm,
 .btn-group-sm > .btn {
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   line-height: 1.5;
-  border-radius: 1rem;
+  border-radius: 0.2rem;
 }
 
 .btn-block {
@@ -3077,14 +3078,14 @@ input[type="button"].btn-block {
   min-width: 10rem;
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
-  font-size: 1rem;
-  color: #495057;
+  font-size: 0.9375rem;
+  color: #dee2e6;
   text-align: left;
   list-style: none;
-  background-color: #ffffff;
+  background-color: #222;
   background-clip: padding-box;
-  border: 1px solid rgba(34, 34, 34, 0.15);
-  border-radius: 0.5rem;
+  border: 1px solid #444;
+  border-radius: 0.25rem;
 }
 
 .dropdown-menu-left {
@@ -3225,7 +3226,7 @@ input[type="button"].btn-block {
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid #e9ecef;
+  border-top: 1px solid #444;
 }
 
 .dropdown-item {
@@ -3234,7 +3235,7 @@ input[type="button"].btn-block {
   padding: 0.25rem 1.5rem;
   clear: both;
   font-weight: 400;
-  color: #212529;
+  color: #fff;
   text-align: inherit;
   white-space: nowrap;
   background-color: transparent;
@@ -3242,15 +3243,15 @@ input[type="button"].btn-block {
 }
 .dropdown-item:hover,
 .dropdown-item:focus {
-  color: #16181b;
+  color: #fff;
   text-decoration: none;
-  background-color: #e9ecef;
+  background-color: #00bc8c;
 }
 .dropdown-item.active,
 .dropdown-item:active {
-  color: #ffffff;
+  color: #fff;
   text-decoration: none;
-  background-color: #f1641e;
+  background-color: #00bc8c;
 }
 .dropdown-item.disabled,
 .dropdown-item:disabled {
@@ -3267,15 +3268,15 @@ input[type="button"].btn-block {
   display: block;
   padding: 0.5rem 1.5rem;
   margin-bottom: 0;
-  font-size: 0.875rem;
-  color: #6c757d;
+  font-size: 0.8203125rem;
+  color: #888;
   white-space: nowrap;
 }
 
 .dropdown-item-text {
   display: block;
   padding: 0.25rem 1.5rem;
-  color: #212529;
+  color: #fff;
 }
 
 .btn-group,
@@ -3505,15 +3506,15 @@ input[type="button"].btn-block {
   align-items: center;
   padding: 0.375rem 0.75rem;
   margin-bottom: 0;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #495057;
+  color: #adb5bd;
   text-align: center;
   white-space: nowrap;
-  background-color: #e9ecef;
-  border: 1px solid #ced4da;
-  border-radius: 0.5rem;
+  background-color: #444;
+  border: 1px solid #222;
+  border-radius: 0.25rem;
 }
 .input-group-text input[type="radio"],
 .input-group-text input[type="checkbox"] {
@@ -3532,9 +3533,9 @@ input[type="button"].btn-block {
 .input-group-lg > .input-group-prepend > .btn,
 .input-group-lg > .input-group-append > .btn {
   padding: 0.5rem 1rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   line-height: 1.5;
-  border-radius: 0.5rem;
+  border-radius: 0.3rem;
 }
 
 .input-group-sm > .form-control:not(textarea),
@@ -3549,9 +3550,9 @@ input[type="button"].btn-block {
 .input-group-sm > .input-group-prepend > .btn,
 .input-group-sm > .input-group-append > .btn {
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   line-height: 1.5;
-  border-radius: 1rem;
+  border-radius: 0.2rem;
 }
 
 .input-group-lg > .custom-select,
@@ -3595,7 +3596,7 @@ input[type="button"].btn-block {
   position: relative;
   z-index: 1;
   display: block;
-  min-height: 1.5rem;
+  min-height: 1.40625rem;
   padding-left: 1.5rem;
   print-color-adjust: exact;
 }
@@ -3610,32 +3611,32 @@ input[type="button"].btn-block {
   left: 0;
   z-index: -1;
   width: 1rem;
-  height: 1.25rem;
+  height: 1.203125rem;
   opacity: 0;
 }
 .custom-control-input:checked ~ .custom-control-label::before {
-  color: #ffffff;
-  border-color: #f1641e;
-  background-color: #f1641e;
+  color: #fff;
+  border-color: #00bc8c;
+  background-color: #00bc8c;
 }
 .custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #f8b796;
+  border-color: #3dffcd;
 }
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #ffffff;
-  background-color: #fbd8c6;
-  border-color: #fbd8c6;
+  color: #fff;
+  background-color: #70ffda;
+  border-color: #70ffda;
 }
 .custom-control-input[disabled] ~ .custom-control-label,
 .custom-control-input:disabled ~ .custom-control-label {
-  color: #6c757d;
+  color: #888;
 }
 .custom-control-input[disabled] ~ .custom-control-label::before,
 .custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: #e9ecef;
+  background-color: #2b2b2b;
 }
 
 .custom-control-label {
@@ -3645,19 +3646,19 @@ input[type="button"].btn-block {
 }
 .custom-control-label::before {
   position: absolute;
-  top: 0.25rem;
+  top: 0.203125rem;
   left: -1.5rem;
   display: block;
   width: 1rem;
   height: 1rem;
   pointer-events: none;
   content: "";
-  background-color: #ffffff;
+  background-color: #444;
   border: 1px solid #adb5bd;
 }
 .custom-control-label::after {
   position: absolute;
-  top: 0.25rem;
+  top: 0.203125rem;
   left: -1.5rem;
   display: block;
   width: 1rem;
@@ -3667,43 +3668,43 @@ input[type="button"].btn-block {
 }
 
 .custom-checkbox .custom-control-label::before {
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
 }
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
 }
 .custom-checkbox
   .custom-control-input:indeterminate
   ~ .custom-control-label::before {
-  border-color: #f1641e;
-  background-color: #f1641e;
+  border-color: #00bc8c;
+  background-color: #00bc8c;
 }
 .custom-checkbox
   .custom-control-input:indeterminate
   ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffffff' d='M0 2h4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
 }
 .custom-checkbox
   .custom-control-input:disabled:checked
   ~ .custom-control-label::before {
-  background-color: rgba(241, 100, 30, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 .custom-checkbox
   .custom-control-input:disabled:indeterminate
   ~ .custom-control-label::before {
-  background-color: rgba(241, 100, 30, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 
 .custom-radio .custom-control-label::before {
   border-radius: 50%;
 }
 .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 }
 .custom-radio
   .custom-control-input:disabled:checked
   ~ .custom-control-label::before {
-  background-color: rgba(241, 100, 30, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 
 .custom-switch {
@@ -3716,7 +3717,7 @@ input[type="button"].btn-block {
   border-radius: 0.5rem;
 }
 .custom-switch .custom-control-label::after {
-  top: calc(0.25rem + 2px);
+  top: calc(0.203125rem + 2px);
   left: calc(-2.25rem + 2px);
   width: calc(1rem - 4px);
   height: calc(1rem - 4px);
@@ -3731,13 +3732,13 @@ input[type="button"].btn-block {
   }
 }
 .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #ffffff;
+  background-color: #444;
   transform: translateX(0.75rem);
 }
 .custom-switch
   .custom-control-input:disabled:checked
   ~ .custom-control-label::before {
-  background-color: rgba(241, 100, 30, 0.5);
+  background-color: rgba(0, 188, 140, 0.5);
 }
 
 .custom-select {
@@ -3745,26 +3746,26 @@ input[type="button"].btn-block {
   width: 100%;
   height: calc(1.5em + 0.75rem + 2px);
   padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #495057;
+  color: #fff;
   vertical-align: middle;
-  background: #ffffff
-    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
+  background: #444
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
     right 0.75rem center/8px 10px no-repeat;
-  border: 1px solid #ced4da;
-  border-radius: 0.5rem;
+  border: 1px solid #222;
+  border-radius: 0.25rem;
   appearance: none;
 }
 .custom-select:focus {
-  border-color: #f8b796;
+  border-color: #3dffcd;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-select:focus::-ms-value {
-  color: #495057;
-  background-color: #ffffff;
+  color: #fff;
+  background-color: #444;
 }
 .custom-select[multiple],
 .custom-select[size]:not([size="1"]) {
@@ -3773,15 +3774,15 @@ input[type="button"].btn-block {
   background-image: none;
 }
 .custom-select:disabled {
-  color: #6c757d;
-  background-color: #e9ecef;
+  color: #888;
+  background-color: #ebebeb;
 }
 .custom-select::-ms-expand {
   display: none;
 }
 .custom-select:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #495057;
+  text-shadow: 0 0 0 #fff;
 }
 
 .custom-select-sm {
@@ -3789,7 +3790,7 @@ input[type="button"].btn-block {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-left: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
 }
 
 .custom-select-lg {
@@ -3797,7 +3798,7 @@ input[type="button"].btn-block {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
 }
 
 .custom-file {
@@ -3818,12 +3819,12 @@ input[type="button"].btn-block {
   opacity: 0;
 }
 .custom-file-input:focus ~ .custom-file-label {
-  border-color: #f8b796;
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  border-color: #3dffcd;
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-file-input[disabled] ~ .custom-file-label,
 .custom-file-input:disabled ~ .custom-file-label {
-  background-color: #e9ecef;
+  background-color: #2b2b2b;
 }
 .custom-file-input:lang(en) ~ .custom-file-label::after {
   content: "Browse";
@@ -3843,10 +3844,10 @@ input[type="button"].btn-block {
   overflow: hidden;
   font-weight: 400;
   line-height: 1.5;
-  color: #495057;
-  background-color: #ffffff;
-  border: 1px solid #ced4da;
-  border-radius: 0.5rem;
+  color: #adb5bd;
+  background-color: #444;
+  border: 1px solid #222;
+  border-radius: 0.25rem;
 }
 .custom-file-label::after {
   position: absolute;
@@ -3858,11 +3859,11 @@ input[type="button"].btn-block {
   height: calc(1.5em + 0.75rem);
   padding: 0.375rem 0.75rem;
   line-height: 1.5;
-  color: #495057;
+  color: #adb5bd;
   content: "Browse";
-  background-color: #e9ecef;
+  background-color: #444;
   border-left: inherit;
-  border-radius: 0 0.5rem 0.5rem 0;
+  border-radius: 0 0.25rem 0.25rem 0;
 }
 
 .custom-range {
@@ -3876,13 +3877,13 @@ input[type="button"].btn-block {
   outline: 0;
 }
 .custom-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-range:focus::-ms-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 1px #222, 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 .custom-range::-moz-focus-outer {
   border: 0;
@@ -3891,7 +3892,7 @@ input[type="button"].btn-block {
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
-  background-color: #f1641e;
+  background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
@@ -3904,7 +3905,7 @@ input[type="button"].btn-block {
   }
 }
 .custom-range::-webkit-slider-thumb:active {
-  background-color: #fbd8c6;
+  background-color: #70ffda;
 }
 .custom-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -3918,7 +3919,7 @@ input[type="button"].btn-block {
 .custom-range::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  background-color: #f1641e;
+  background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
@@ -3931,7 +3932,7 @@ input[type="button"].btn-block {
   }
 }
 .custom-range::-moz-range-thumb:active {
-  background-color: #fbd8c6;
+  background-color: #70ffda;
 }
 .custom-range::-moz-range-track {
   width: 100%;
@@ -3948,7 +3949,7 @@ input[type="button"].btn-block {
   margin-top: 0;
   margin-right: 0.2rem;
   margin-left: 0.2rem;
-  background-color: #f1641e;
+  background-color: #00bc8c;
   border: 0;
   border-radius: 1rem;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
@@ -3961,7 +3962,7 @@ input[type="button"].btn-block {
   }
 }
 .custom-range::-ms-thumb:active {
-  background-color: #fbd8c6;
+  background-color: #70ffda;
 }
 .custom-range::-ms-track {
   width: 100%;
@@ -4021,43 +4022,43 @@ input[type="button"].btn-block {
 
 .nav-link {
   display: block;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 2rem;
 }
 .nav-link:hover,
 .nav-link:focus {
   text-decoration: none;
 }
 .nav-link.disabled {
-  color: #6c757d;
+  color: #adb5bd;
   pointer-events: none;
   cursor: default;
 }
 
 .nav-tabs {
-  border-bottom: 1px solid #dee2e6;
+  border-bottom: 1px solid #444;
 }
 .nav-tabs .nav-link {
   margin-bottom: -1px;
   background-color: transparent;
   border: 1px solid transparent;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 }
 .nav-tabs .nav-link:hover,
 .nav-tabs .nav-link:focus {
   isolation: isolate;
-  border-color: #e9ecef #e9ecef #dee2e6;
+  border-color: #444 #444 transparent;
 }
 .nav-tabs .nav-link.disabled {
-  color: #6c757d;
+  color: #adb5bd;
   background-color: transparent;
   border-color: transparent;
 }
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
-  color: #495057;
-  background-color: #fff;
-  border-color: #dee2e6 #dee2e6 #fff;
+  color: #fff;
+  background-color: #222;
+  border-color: #444 #444 transparent;
 }
 .nav-tabs .dropdown-menu {
   margin-top: -1px;
@@ -4068,12 +4069,12 @@ input[type="button"].btn-block {
 .nav-pills .nav-link {
   background: none;
   border: 0;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
 }
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
-  color: #ffffff;
-  background-color: #f1641e;
+  color: #fff;
+  background-color: #00bc8c;
 }
 
 .nav-fill > .nav-link,
@@ -4102,7 +4103,7 @@ input[type="button"].btn-block {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  padding: 1rem 1rem;
 }
 .navbar .container,
 .navbar .container-fluid,
@@ -4117,10 +4118,10 @@ input[type="button"].btn-block {
 }
 .navbar-brand {
   display: inline-block;
-  padding-top: 0.3125rem;
-  padding-bottom: 0.3125rem;
+  padding-top: 0.32421875rem;
+  padding-bottom: 0.32421875rem;
   margin-right: 1rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   line-height: inherit;
   white-space: nowrap;
 }
@@ -4159,11 +4160,11 @@ input[type="button"].btn-block {
 
 .navbar-toggler {
   padding: 0.25rem 0.75rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   line-height: 1;
   background-color: transparent;
   border: 1px solid transparent;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
 }
 .navbar-toggler:hover,
 .navbar-toggler:focus {
@@ -4407,59 +4408,59 @@ input[type="button"].btn-block {
 }
 
 .navbar-light .navbar-brand {
-  color: #212529;
+  color: #fff;
 }
 .navbar-light .navbar-brand:hover,
 .navbar-light .navbar-brand:focus {
-  color: #212529;
+  color: #fff;
 }
 .navbar-light .navbar-nav .nav-link {
-  color: #6c757d;
+  color: rgba(255, 255, 255, 0.6);
 }
 .navbar-light .navbar-nav .nav-link:hover,
 .navbar-light .navbar-nav .nav-link:focus {
-  color: #212529;
+  color: #fff;
 }
 .navbar-light .navbar-nav .nav-link.disabled {
-  color: rgba(34, 34, 34, 0.3);
+  color: rgba(0, 0, 0, 0.3);
 }
 .navbar-light .navbar-nav .show > .nav-link,
 .navbar-light .navbar-nav .active > .nav-link,
 .navbar-light .navbar-nav .nav-link.show,
 .navbar-light .navbar-nav .nav-link.active {
-  color: #212529;
+  color: #fff;
 }
 .navbar-light .navbar-toggler {
-  color: #6c757d;
+  color: rgba(255, 255, 255, 0.6);
   border-color: rgba(34, 34, 34, 0.1);
 }
 .navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%236c757d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 .navbar-light .navbar-text {
-  color: #6c757d;
+  color: rgba(255, 255, 255, 0.6);
 }
 .navbar-light .navbar-text a {
-  color: #212529;
+  color: #fff;
 }
 .navbar-light .navbar-text a:hover,
 .navbar-light .navbar-text a:focus {
-  color: #212529;
+  color: #fff;
 }
 
 .navbar-dark .navbar-brand {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-brand:hover,
 .navbar-dark .navbar-brand:focus {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.6);
 }
 .navbar-dark .navbar-nav .nav-link:hover,
 .navbar-dark .navbar-nav .nav-link:focus {
-  color: rgba(255, 255, 255, 0.75);
+  color: #fff;
 }
 .navbar-dark .navbar-nav .nav-link.disabled {
   color: rgba(255, 255, 255, 0.25);
@@ -4468,24 +4469,24 @@ input[type="button"].btn-block {
 .navbar-dark .navbar-nav .active > .nav-link,
 .navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-toggler {
-  color: rgba(255, 255, 255, 0.5);
-  border-color: rgba(34, 34, 34, 0.1);
+  color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.1);
 }
 .navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 .navbar-dark .navbar-text {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.6);
 }
 .navbar-dark .navbar-text a {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-text a:hover,
 .navbar-dark .navbar-text a:focus {
-  color: #ffffff;
+  color: #fff;
 }
 
 .card {
@@ -4494,10 +4495,10 @@ input[type="button"].btn-block {
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #f8f9fa;
+  background-color: #303030;
   background-clip: border-box;
-  border: 1px solid rgba(34, 34, 34, 0.125);
-  border-radius: 0.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
 }
 .card > hr {
   margin-right: 0;
@@ -4509,13 +4510,13 @@ input[type="button"].btn-block {
 }
 .card > .list-group:first-child {
   border-top-width: 0;
-  border-top-left-radius: calc(0.5rem - 1px);
-  border-top-right-radius: calc(0.5rem - 1px);
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
 }
 .card > .list-group:last-child {
   border-bottom-width: 0;
-  border-bottom-right-radius: calc(0.5rem - 1px);
-  border-bottom-left-radius: calc(0.5rem - 1px);
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
 }
 .card > .card-header + .list-group,
 .card > .list-group + .card-footer {
@@ -4526,7 +4527,6 @@ input[type="button"].btn-block {
   flex: 1 1 auto;
   min-height: 1px;
   padding: 1.25rem;
-  color: #495057;
 }
 
 .card-title {
@@ -4552,22 +4552,20 @@ input[type="button"].btn-block {
 .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
-  color: #495057;
-  background-color: rgba(34, 34, 34, 0.03);
-  border-bottom: 1px solid rgba(34, 34, 34, 0.125);
+  background-color: #444;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 .card-header:first-child {
-  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
+  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
 }
 
 .card-footer {
   padding: 0.75rem 1.25rem;
-  color: #495057;
-  background-color: rgba(34, 34, 34, 0.03);
-  border-top: 1px solid rgba(34, 34, 34, 0.125);
+  background-color: #444;
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 .card-footer:last-child {
-  border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px);
+  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
 }
 
 .card-header-tabs {
@@ -4589,7 +4587,7 @@ input[type="button"].btn-block {
   bottom: 0;
   left: 0;
   padding: 1.25rem;
-  border-radius: calc(0.5rem - 1px);
+  border-radius: calc(0.25rem - 1px);
 }
 
 .card-img,
@@ -4601,14 +4599,14 @@ input[type="button"].btn-block {
 
 .card-img,
 .card-img-top {
-  border-top-left-radius: calc(0.5rem - 1px);
-  border-top-right-radius: calc(0.5rem - 1px);
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
 }
 
 .card-img,
 .card-img-bottom {
-  border-bottom-right-radius: calc(0.5rem - 1px);
-  border-bottom-left-radius: calc(0.5rem - 1px);
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
 }
 
 .card-deck .card {
@@ -4713,8 +4711,8 @@ input[type="button"].btn-block {
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
-  background-color: #e9ecef;
-  border-radius: 0.5rem;
+  background-color: #444;
+  border-radius: 0.25rem;
 }
 
 .breadcrumb-item + .breadcrumb-item {
@@ -4723,7 +4721,7 @@ input[type="button"].btn-block {
 .breadcrumb-item + .breadcrumb-item::before {
   float: left;
   padding-right: 0.5rem;
-  color: #6c757d;
+  color: #888;
   content: "/";
 }
 .breadcrumb-item + .breadcrumb-item:hover::before {
@@ -4733,100 +4731,100 @@ input[type="button"].btn-block {
   text-decoration: none;
 }
 .breadcrumb-item.active {
-  color: #6c757d;
+  color: #888;
 }
 
 .pagination {
   display: flex;
   padding-left: 0;
   list-style: none;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
 }
 
 .page-link {
   position: relative;
   display: block;
   padding: 0.5rem 0.75rem;
-  margin-left: -1px;
+  margin-left: 0;
   line-height: 1.25;
-  color: #f1641e;
-  background-color: #ffffff;
-  border: 1px solid #dee2e6;
+  color: #fff;
+  background-color: #00bc8c;
+  border: 0 solid transparent;
 }
 .page-link:hover {
   z-index: 2;
-  color: #b7440b;
+  color: #fff;
   text-decoration: none;
-  background-color: #e9ecef;
-  border-color: #dee2e6;
+  background-color: #00efb2;
+  border-color: transparent;
 }
 .page-link:focus {
   z-index: 3;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25);
 }
 
 .page-item:first-child .page-link {
   margin-left: 0;
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
 }
 .page-item:last-child .page-link {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
 }
 .page-item.active .page-link {
   z-index: 3;
-  color: #ffffff;
-  background-color: #f1641e;
-  border-color: #f1641e;
+  color: #fff;
+  background-color: #00efb2;
+  border-color: transparent;
 }
 .page-item.disabled .page-link {
-  color: #6c757d;
+  color: #fff;
   pointer-events: none;
   cursor: auto;
-  background-color: #ffffff;
-  border-color: #dee2e6;
+  background-color: #007053;
+  border-color: transparent;
 }
 
 .pagination-lg .page-link {
   padding: 0.75rem 1.5rem;
-  font-size: 1.25rem;
+  font-size: 1.171875rem;
   line-height: 1.5;
 }
 .pagination-lg .page-item:first-child .page-link {
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-top-left-radius: 0.3rem;
+  border-bottom-left-radius: 0.3rem;
 }
 .pagination-lg .page-item:last-child .page-link {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.3rem;
 }
 
 .pagination-sm .page-link {
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   line-height: 1.5;
 }
 .pagination-sm .page-item:first-child .page-link {
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
+  border-top-left-radius: 0.2rem;
+  border-bottom-left-radius: 0.2rem;
 }
 .pagination-sm .page-item:last-child .page-link {
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
+  border-top-right-radius: 0.2rem;
+  border-bottom-right-radius: 0.2rem;
 }
 
 .badge {
   display: inline-block;
   padding: 0.25em 0.4em;
   font-size: 75%;
-  font-weight: 600;
+  font-weight: 700;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -4856,27 +4854,27 @@ a.badge:focus {
 }
 
 .badge-primary {
-  color: #ffffff;
-  background-color: #f1641e;
+  color: #fff;
+  background-color: #00bc8c;
 }
 a.badge-primary:hover,
 a.badge-primary:focus {
-  color: #ffffff;
-  background-color: #cf4d0d;
+  color: #fff;
+  background-color: #008966;
 }
 a.badge-primary:focus,
 a.badge-primary.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 
 .badge-secondary {
-  color: #ffffff;
+  color: #fff;
   background-color: #c80000;
 }
 a.badge-secondary:hover,
 a.badge-secondary:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #950000;
 }
 a.badge-secondary:focus,
@@ -4886,100 +4884,100 @@ a.badge-secondary.focus {
 }
 
 .badge-success {
-  color: #ffffff;
-  background-color: #6610f2;
+  color: #fff;
+  background-color: #00bc8c;
 }
 a.badge-success:hover,
 a.badge-success:focus {
-  color: #ffffff;
-  background-color: #510bc4;
+  color: #fff;
+  background-color: #008966;
 }
 a.badge-success:focus,
 a.badge-success.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5);
 }
 
 .badge-info {
-  color: #ffffff;
-  background-color: #007bff;
+  color: #fff;
+  background-color: #3498db;
 }
 a.badge-info:hover,
 a.badge-info:focus {
-  color: #ffffff;
-  background-color: #0062cc;
+  color: #fff;
+  background-color: #217dbb;
 }
 a.badge-info:focus,
 a.badge-info.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5);
 }
 
 .badge-warning {
-  color: #212529;
-  background-color: #ffc107;
+  color: #fff;
+  background-color: #f39c12;
 }
 a.badge-warning:hover,
 a.badge-warning:focus {
-  color: #212529;
-  background-color: #d39e00;
+  color: #fff;
+  background-color: #c87f0a;
 }
 a.badge-warning:focus,
 a.badge-warning.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5);
 }
 
 .badge-danger {
-  color: #ffffff;
-  background-color: #8c3409;
+  color: #fff;
+  background-color: #004231;
 }
 a.badge-danger:hover,
 a.badge-danger:focus {
-  color: #ffffff;
-  background-color: #5c2206;
+  color: #fff;
+  background-color: #000f0b;
 }
 a.badge-danger:focus,
 a.badge-danger.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(0, 66, 49, 0.5);
 }
 
 .badge-light {
-  color: #212529;
-  background-color: #f8f9fa;
+  color: #fff;
+  background-color: #303030;
 }
 a.badge-light:hover,
 a.badge-light:focus {
-  color: #212529;
-  background-color: #dae0e5;
+  color: #fff;
+  background-color: #171717;
 }
 a.badge-light:focus,
 a.badge-light.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5);
 }
 
 .badge-dark {
-  color: #ffffff;
-  background-color: #343a40;
+  color: #222;
+  background-color: #dee2e6;
 }
 a.badge-dark:hover,
 a.badge-dark:focus {
-  color: #ffffff;
-  background-color: #1d2124;
+  color: #222;
+  background-color: #c1c9d0;
 }
 a.badge-dark:focus,
 a.badge-dark.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5);
 }
 
 .jumbotron {
   padding: 2rem 1rem;
   margin-bottom: 2rem;
-  background-color: #e9ecef;
-  border-radius: 0.5rem;
+  background-color: #303030;
+  border-radius: 0.3rem;
 }
 @media (min-width: 576px) {
   .jumbotron {
@@ -4998,7 +4996,7 @@ a.badge-dark.focus {
   padding: 0.75rem 1.25rem;
   margin-bottom: 1rem;
   border: 1px solid transparent;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
 }
 
 .alert-heading {
@@ -5006,11 +5004,11 @@ a.badge-dark.focus {
 }
 
 .alert-link {
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .alert-dismissible {
-  padding-right: 4rem;
+  padding-right: 3.90625rem;
 }
 .alert-dismissible .close {
   position: absolute;
@@ -5022,19 +5020,19 @@ a.badge-dark.focus {
 }
 
 .alert-primary {
-  color: #8e4420;
-  background-color: #fce0d2;
-  border-color: #fbd4c0;
+  color: #006249;
+  background-color: #ccf2e8;
+  border-color: #b8ecdf;
 }
 .alert-primary hr {
-  border-top-color: #f9c4a8;
+  border-top-color: #a4e7d6;
 }
 .alert-primary .alert-link {
-  color: #643017;
+  color: #002f23;
 }
 
 .alert-secondary {
-  color: #781010;
+  color: #680000;
   background-color: #f4cccc;
   border-color: #f0b8b8;
 }
@@ -5042,79 +5040,79 @@ a.badge-dark.focus {
   border-top-color: #eca3a3;
 }
 .alert-secondary .alert-link {
-  color: #4b0a0a;
+  color: #350000;
 }
 
 .alert-success {
-  color: #45198e;
-  background-color: #e0cffc;
-  border-color: #d4bcfb;
+  color: #006249;
+  background-color: #ccf2e8;
+  border-color: #b8ecdf;
 }
 .alert-success hr {
-  border-top-color: #c5a4fa;
+  border-top-color: #a4e7d6;
 }
 .alert-success .alert-link {
-  color: #301163;
+  color: #002f23;
 }
 
 .alert-info {
-  color: #105095;
-  background-color: #cce5ff;
-  border-color: #b8daff;
+  color: #1b4f72;
+  background-color: #d6eaf8;
+  border-color: #c6e2f5;
 }
 .alert-info hr {
-  border-top-color: #9fcdff;
+  border-top-color: #b0d7f1;
 }
 .alert-info .alert-link {
-  color: #0b3767;
+  color: #113249;
 }
 
 .alert-warning {
-  color: #957514;
-  background-color: #fff3cd;
-  border-color: #ffeeba;
+  color: #7e5109;
+  background-color: #fdebd0;
+  border-color: #fce3bd;
 }
 .alert-warning hr {
-  border-top-color: #ffe8a1;
+  border-top-color: #fbd9a5;
 }
 .alert-warning .alert-link {
-  color: #68520e;
+  color: #4e3206;
 }
 
 .alert-danger {
-  color: #592b15;
-  background-color: #e8d6ce;
-  border-color: #dfc6ba;
+  color: #002219;
+  background-color: #ccd9d6;
+  border-color: #b8cac5;
 }
 .alert-danger hr {
-  border-top-color: #d7b8a9;
+  border-top-color: #a9bfb9;
 }
 .alert-danger .alert-link {
-  color: #30170b;
+  color: black;
 }
 
 .alert-light {
-  color: #919292;
-  background-color: #fefefe;
-  border-color: #fdfdfe;
+  color: #191919;
+  background-color: #d6d6d6;
+  border-color: #c5c5c5;
 }
 .alert-light hr {
-  border-top-color: #ececf6;
+  border-top-color: #b8b8b8;
 }
 .alert-light .alert-link {
-  color: #777979;
+  color: black;
 }
 
 .alert-dark {
-  color: #2b2e32;
-  background-color: #d6d8d9;
-  border-color: #c6c8ca;
+  color: #737678;
+  background-color: #f8f9fa;
+  border-color: #f6f7f8;
 }
 .alert-dark hr {
-  border-top-color: #b9bbbe;
+  border-top-color: #e8eaed;
 }
 .alert-dark .alert-link {
-  color: #131517;
+  color: #5a5c5e;
 }
 
 @keyframes progress-bar-stripes {
@@ -5130,9 +5128,9 @@ a.badge-dark.focus {
   height: 1rem;
   overflow: hidden;
   line-height: 0;
-  font-size: 0.75rem;
-  background-color: #e9ecef;
-  border-radius: 0.5rem;
+  font-size: 0.703125rem;
+  background-color: #444;
+  border-radius: 0.25rem;
 }
 
 .progress-bar {
@@ -5140,10 +5138,10 @@ a.badge-dark.focus {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
   white-space: nowrap;
-  background-color: #f1641e;
+  background-color: #00bc8c;
   transition: width 0.6s ease;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -5189,32 +5187,32 @@ a.badge-dark.focus {
   flex-direction: column;
   padding-left: 0;
   margin-bottom: 0;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
 }
 
 .list-group-item-action {
   width: 100%;
-  color: #495057;
+  color: #444;
   text-align: inherit;
 }
 .list-group-item-action:hover,
 .list-group-item-action:focus {
   z-index: 1;
-  color: #495057;
+  color: #444;
   text-decoration: none;
-  background-color: #f8f9fa;
+  background-color: #444;
 }
 .list-group-item-action:active {
-  color: #495057;
-  background-color: #e9ecef;
+  color: #dee2e6;
+  background-color: #ebebeb;
 }
 
 .list-group-item {
   position: relative;
   display: block;
   padding: 0.75rem 1.25rem;
-  background-color: #ffffff;
-  border: 1px solid rgba(34, 34, 34, 0.125);
+  background-color: #303030;
+  border: 1px solid #444;
 }
 .list-group-item:first-child {
   border-top-left-radius: inherit;
@@ -5226,15 +5224,15 @@ a.badge-dark.focus {
 }
 .list-group-item.disabled,
 .list-group-item:disabled {
-  color: #6c757d;
+  color: #888;
   pointer-events: none;
-  background-color: #ffffff;
+  background-color: #303030;
 }
 .list-group-item.active {
   z-index: 2;
-  color: #ffffff;
-  background-color: #f1641e;
-  border-color: #f1641e;
+  color: #fff;
+  background-color: #00bc8c;
+  border-color: #00bc8c;
 }
 .list-group-item + .list-group-item {
   border-top-width: 0;
@@ -5248,11 +5246,11 @@ a.badge-dark.focus {
   flex-direction: row;
 }
 .list-group-horizontal > .list-group-item:first-child {
-  border-bottom-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.25rem;
   border-top-right-radius: 0;
 }
 .list-group-horizontal > .list-group-item:last-child {
-  border-top-right-radius: 0.5rem;
+  border-top-right-radius: 0.25rem;
   border-bottom-left-radius: 0;
 }
 .list-group-horizontal > .list-group-item.active {
@@ -5272,11 +5270,11 @@ a.badge-dark.focus {
     flex-direction: row;
   }
   .list-group-horizontal-sm > .list-group-item:first-child {
-    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.25rem;
     border-top-right-radius: 0;
   }
   .list-group-horizontal-sm > .list-group-item:last-child {
-    border-top-right-radius: 0.5rem;
+    border-top-right-radius: 0.25rem;
     border-bottom-left-radius: 0;
   }
   .list-group-horizontal-sm > .list-group-item.active {
@@ -5296,11 +5294,11 @@ a.badge-dark.focus {
     flex-direction: row;
   }
   .list-group-horizontal-md > .list-group-item:first-child {
-    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.25rem;
     border-top-right-radius: 0;
   }
   .list-group-horizontal-md > .list-group-item:last-child {
-    border-top-right-radius: 0.5rem;
+    border-top-right-radius: 0.25rem;
     border-bottom-left-radius: 0;
   }
   .list-group-horizontal-md > .list-group-item.active {
@@ -5320,11 +5318,11 @@ a.badge-dark.focus {
     flex-direction: row;
   }
   .list-group-horizontal-lg > .list-group-item:first-child {
-    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.25rem;
     border-top-right-radius: 0;
   }
   .list-group-horizontal-lg > .list-group-item:last-child {
-    border-top-right-radius: 0.5rem;
+    border-top-right-radius: 0.25rem;
     border-bottom-left-radius: 0;
   }
   .list-group-horizontal-lg > .list-group-item.active {
@@ -5344,11 +5342,11 @@ a.badge-dark.focus {
     flex-direction: row;
   }
   .list-group-horizontal-xl > .list-group-item:first-child {
-    border-bottom-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.25rem;
     border-top-right-radius: 0;
   }
   .list-group-horizontal-xl > .list-group-item:last-child {
-    border-top-right-radius: 0.5rem;
+    border-top-right-radius: 0.25rem;
     border-bottom-left-radius: 0;
   }
   .list-group-horizontal-xl > .list-group-item.active {
@@ -5374,136 +5372,136 @@ a.badge-dark.focus {
 }
 
 .list-group-item-primary {
-  color: #8e4420;
-  background-color: #fbd4c0;
+  color: #006249;
+  background-color: #b8ecdf;
 }
 .list-group-item-primary.list-group-item-action:hover,
 .list-group-item-primary.list-group-item-action:focus {
-  color: #8e4420;
-  background-color: #f9c4a8;
+  color: #006249;
+  background-color: #a4e7d6;
 }
 .list-group-item-primary.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #8e4420;
-  border-color: #8e4420;
+  color: #fff;
+  background-color: #006249;
+  border-color: #006249;
 }
 
 .list-group-item-secondary {
-  color: #781010;
+  color: #680000;
   background-color: #f0b8b8;
 }
 .list-group-item-secondary.list-group-item-action:hover,
 .list-group-item-secondary.list-group-item-action:focus {
-  color: #781010;
+  color: #680000;
   background-color: #eca3a3;
 }
 .list-group-item-secondary.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #781010;
-  border-color: #781010;
+  color: #fff;
+  background-color: #680000;
+  border-color: #680000;
 }
 
 .list-group-item-success {
-  color: #45198e;
-  background-color: #d4bcfb;
+  color: #006249;
+  background-color: #b8ecdf;
 }
 .list-group-item-success.list-group-item-action:hover,
 .list-group-item-success.list-group-item-action:focus {
-  color: #45198e;
-  background-color: #c5a4fa;
+  color: #006249;
+  background-color: #a4e7d6;
 }
 .list-group-item-success.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #45198e;
-  border-color: #45198e;
+  color: #fff;
+  background-color: #006249;
+  border-color: #006249;
 }
 
 .list-group-item-info {
-  color: #105095;
-  background-color: #b8daff;
+  color: #1b4f72;
+  background-color: #c6e2f5;
 }
 .list-group-item-info.list-group-item-action:hover,
 .list-group-item-info.list-group-item-action:focus {
-  color: #105095;
-  background-color: #9fcdff;
+  color: #1b4f72;
+  background-color: #b0d7f1;
 }
 .list-group-item-info.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #105095;
-  border-color: #105095;
+  color: #fff;
+  background-color: #1b4f72;
+  border-color: #1b4f72;
 }
 
 .list-group-item-warning {
-  color: #957514;
-  background-color: #ffeeba;
+  color: #7e5109;
+  background-color: #fce3bd;
 }
 .list-group-item-warning.list-group-item-action:hover,
 .list-group-item-warning.list-group-item-action:focus {
-  color: #957514;
-  background-color: #ffe8a1;
+  color: #7e5109;
+  background-color: #fbd9a5;
 }
 .list-group-item-warning.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #957514;
-  border-color: #957514;
+  color: #fff;
+  background-color: #7e5109;
+  border-color: #7e5109;
 }
 
 .list-group-item-danger {
-  color: #592b15;
-  background-color: #dfc6ba;
+  color: #002219;
+  background-color: #b8cac5;
 }
 .list-group-item-danger.list-group-item-action:hover,
 .list-group-item-danger.list-group-item-action:focus {
-  color: #592b15;
-  background-color: #d7b8a9;
+  color: #002219;
+  background-color: #a9bfb9;
 }
 .list-group-item-danger.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #592b15;
-  border-color: #592b15;
+  color: #fff;
+  background-color: #002219;
+  border-color: #002219;
 }
 
 .list-group-item-light {
-  color: #919292;
-  background-color: #fdfdfe;
+  color: #191919;
+  background-color: #c5c5c5;
 }
 .list-group-item-light.list-group-item-action:hover,
 .list-group-item-light.list-group-item-action:focus {
-  color: #919292;
-  background-color: #ececf6;
+  color: #191919;
+  background-color: #b8b8b8;
 }
 .list-group-item-light.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #919292;
-  border-color: #919292;
+  color: #fff;
+  background-color: #191919;
+  border-color: #191919;
 }
 
 .list-group-item-dark {
-  color: #2b2e32;
-  background-color: #c6c8ca;
+  color: #737678;
+  background-color: #f6f7f8;
 }
 .list-group-item-dark.list-group-item-action:hover,
 .list-group-item-dark.list-group-item-action:focus {
-  color: #2b2e32;
-  background-color: #b9bbbe;
+  color: #737678;
+  background-color: #e8eaed;
 }
 .list-group-item-dark.list-group-item-action.active {
-  color: #ffffff;
-  background-color: #2b2e32;
-  border-color: #2b2e32;
+  color: #fff;
+  background-color: #737678;
+  border-color: #737678;
 }
 
 .close {
   float: right;
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: 1.40625rem;
+  font-weight: 700;
   line-height: 1;
-  color: #222222;
-  text-shadow: 0 1px 0 #ffffff;
+  color: #fff;
+  text-shadow: none;
   opacity: 0.5;
 }
 .close:hover {
-  color: #222222;
+  color: #fff;
   text-decoration: none;
 }
 .close:not(:disabled):not(.disabled):hover,
@@ -5525,10 +5523,10 @@ a.close.disabled {
   flex-basis: 350px;
   max-width: 350px;
   font-size: 0.875rem;
-  background-color: rgba(255, 255, 255, 0.85);
+  background-color: #444;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 0.25rem 0.75rem rgba(34, 34, 34, 0.1);
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
   opacity: 0;
   border-radius: 0.25rem;
 }
@@ -5550,8 +5548,8 @@ a.close.disabled {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #6c757d;
-  background-color: rgba(255, 255, 255, 0.85);
+  color: #888;
+  background-color: #303030;
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   border-top-left-radius: calc(0.25rem - 1px);
@@ -5649,10 +5647,10 @@ a.close.disabled {
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
-  background-color: #ffffff;
+  background-color: #303030;
   background-clip: padding-box;
-  border: 1px solid rgba(34, 34, 34, 0.2);
-  border-radius: 0.5rem;
+  border: 1px solid #444;
+  border-radius: 0.3rem;
   outline: 0;
 }
 
@@ -5663,7 +5661,7 @@ a.close.disabled {
   z-index: 1040;
   width: 100vw;
   height: 100vh;
-  background-color: #222222;
+  background-color: #000;
 }
 .modal-backdrop.fade {
   opacity: 0;
@@ -5677,9 +5675,9 @@ a.close.disabled {
   align-items: flex-start;
   justify-content: space-between;
   padding: 1rem 1rem;
-  border-bottom: 1px solid #495057;
-  border-top-left-radius: calc(0.5rem - 1px);
-  border-top-right-radius: calc(0.5rem - 1px);
+  border-bottom: 1px solid #444;
+  border-top-left-radius: calc(0.3rem - 1px);
+  border-top-right-radius: calc(0.3rem - 1px);
 }
 .modal-header .close {
   padding: 1rem 1rem;
@@ -5703,9 +5701,9 @@ a.close.disabled {
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  border-top: 1px solid #495057;
-  border-bottom-right-radius: calc(0.5rem - 1px);
-  border-bottom-left-radius: calc(0.5rem - 1px);
+  border-top: 1px solid #444;
+  border-bottom-right-radius: calc(0.3rem - 1px);
+  border-bottom-left-radius: calc(0.3rem - 1px);
 }
 .modal-footer > * {
   margin: 0.25rem;
@@ -5757,8 +5755,9 @@ a.close.disabled {
   z-index: 1070;
   display: block;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI",
-    "Helvetica", Arial, sans-serif;
+  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-style: normal;
   font-weight: 400;
   line-height: 1.5;
@@ -5772,7 +5771,7 @@ a.close.disabled {
   white-space: normal;
   word-spacing: normal;
   line-break: auto;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   word-wrap: break-word;
   opacity: 0;
 }
@@ -5804,7 +5803,7 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="top"] .arrow::before {
   top: 0;
   border-width: 0.4rem 0.4rem 0;
-  border-top-color: #222222;
+  border-top-color: #000;
 }
 
 .bs-tooltip-right,
@@ -5821,7 +5820,7 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="right"] .arrow::before {
   right: 0;
   border-width: 0.4rem 0.4rem 0.4rem 0;
-  border-right-color: #222222;
+  border-right-color: #000;
 }
 
 .bs-tooltip-bottom,
@@ -5836,7 +5835,7 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
   bottom: 0;
   border-width: 0 0.4rem 0.4rem;
-  border-bottom-color: #222222;
+  border-bottom-color: #000;
 }
 
 .bs-tooltip-left,
@@ -5853,16 +5852,16 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="left"] .arrow::before {
   left: 0;
   border-width: 0.4rem 0 0.4rem 0.4rem;
-  border-left-color: #222222;
+  border-left-color: #000;
 }
 
 .tooltip-inner {
   max-width: 200px;
   padding: 0.25rem 0.5rem;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
-  background-color: #222222;
-  border-radius: 0.5rem;
+  background-color: #000;
+  border-radius: 0.25rem;
 }
 
 .popover {
@@ -5872,8 +5871,9 @@ a.close.disabled {
   z-index: 1060;
   display: block;
   max-width: 276px;
-  font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI",
-    "Helvetica", Arial, sans-serif;
+  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-style: normal;
   font-weight: 400;
   line-height: 1.5;
@@ -5887,19 +5887,19 @@ a.close.disabled {
   white-space: normal;
   word-spacing: normal;
   line-break: auto;
-  font-size: 0.875rem;
+  font-size: 0.8203125rem;
   word-wrap: break-word;
-  background-color: #ffffff;
+  background-color: #303030;
   background-clip: padding-box;
-  border: 1px solid rgba(34, 34, 34, 0.2);
-  border-radius: 0.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
 }
 .popover .arrow {
   position: absolute;
   display: block;
   width: 1rem;
   height: 0.5rem;
-  margin: 0 0.5rem;
+  margin: 0 0.3rem;
 }
 .popover .arrow::before,
 .popover .arrow::after {
@@ -5922,13 +5922,13 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="top"] > .arrow::before {
   bottom: 0;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: rgba(34, 34, 34, 0.25);
+  border-top-color: rgba(0, 0, 0, 0.25);
 }
 .bs-popover-top > .arrow::after,
 .bs-popover-auto[x-placement^="top"] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #ffffff;
+  border-top-color: #303030;
 }
 
 .bs-popover-right,
@@ -5940,19 +5940,19 @@ a.close.disabled {
   left: calc(-0.5rem - 1px);
   width: 0.5rem;
   height: 1rem;
-  margin: 0.5rem 0;
+  margin: 0.3rem 0;
 }
 .bs-popover-right > .arrow::before,
 .bs-popover-auto[x-placement^="right"] > .arrow::before {
   left: 0;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: rgba(34, 34, 34, 0.25);
+  border-right-color: rgba(0, 0, 0, 0.25);
 }
 .bs-popover-right > .arrow::after,
 .bs-popover-auto[x-placement^="right"] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #ffffff;
+  border-right-color: #303030;
 }
 
 .bs-popover-bottom,
@@ -5967,13 +5967,13 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
   top: 0;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: rgba(34, 34, 34, 0.25);
+  border-bottom-color: rgba(0, 0, 0, 0.25);
 }
 .bs-popover-bottom > .arrow::after,
 .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #ffffff;
+  border-bottom-color: #303030;
 }
 .bs-popover-bottom .popover-header::before,
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -5984,7 +5984,7 @@ a.close.disabled {
   width: 1rem;
   margin-left: -0.5rem;
   content: "";
-  border-bottom: 1px solid #f7f7f7;
+  border-bottom: 1px solid #444;
 }
 
 .bs-popover-left,
@@ -5996,30 +5996,29 @@ a.close.disabled {
   right: calc(-0.5rem - 1px);
   width: 0.5rem;
   height: 1rem;
-  margin: 0.5rem 0;
+  margin: 0.3rem 0;
 }
 .bs-popover-left > .arrow::before,
 .bs-popover-auto[x-placement^="left"] > .arrow::before {
   right: 0;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: rgba(34, 34, 34, 0.25);
+  border-left-color: rgba(0, 0, 0, 0.25);
 }
 .bs-popover-left > .arrow::after,
 .bs-popover-auto[x-placement^="left"] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #ffffff;
+  border-left-color: #303030;
 }
 
 .popover-header {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
-  font-size: 1rem;
-  color: #495057;
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
-  border-top-left-radius: calc(0.5rem - 1px);
-  border-top-right-radius: calc(0.5rem - 1px);
+  font-size: 0.9375rem;
+  background-color: #444;
+  border-bottom: 1px solid #373737;
+  border-top-left-radius: calc(0.3rem - 1px);
+  border-top-right-radius: calc(0.3rem - 1px);
 }
 .popover-header:empty {
   display: none;
@@ -6027,7 +6026,7 @@ a.close.disabled {
 
 .popover-body {
   padding: 0.5rem 0.75rem;
-  color: #495057;
+  color: #dee2e6;
 }
 
 .carousel {
@@ -6115,7 +6114,7 @@ a.close.disabled {
   justify-content: center;
   width: 15%;
   padding: 0;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
   background: none;
   border: 0;
@@ -6132,7 +6131,7 @@ a.close.disabled {
 .carousel-control-prev:focus,
 .carousel-control-next:hover,
 .carousel-control-next:focus {
-  color: #ffffff;
+  color: #fff;
   text-decoration: none;
   outline: 0;
   opacity: 0.9;
@@ -6155,11 +6154,11 @@ a.close.disabled {
 }
 
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
 }
 
 .carousel-indicators {
@@ -6184,7 +6183,7 @@ a.close.disabled {
   margin-left: 3px;
   text-indent: -999px;
   cursor: pointer;
-  background-color: #ffffff;
+  background-color: #fff;
   background-clip: padding-box;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
@@ -6208,7 +6207,7 @@ a.close.disabled {
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
 }
 
@@ -6290,14 +6289,14 @@ a.close.disabled {
 }
 
 .bg-primary {
-  background-color: #f1641e !important;
+  background-color: #00bc8c !important;
 }
 
 a.bg-primary:hover,
 a.bg-primary:focus,
 button.bg-primary:hover,
 button.bg-primary:focus {
-  background-color: #cf4d0d !important;
+  background-color: #008966 !important;
 }
 
 .bg-secondary {
@@ -6312,73 +6311,73 @@ button.bg-secondary:focus {
 }
 
 .bg-success {
-  background-color: #6610f2 !important;
+  background-color: #00bc8c !important;
 }
 
 a.bg-success:hover,
 a.bg-success:focus,
 button.bg-success:hover,
 button.bg-success:focus {
-  background-color: #510bc4 !important;
+  background-color: #008966 !important;
 }
 
 .bg-info {
-  background-color: #007bff !important;
+  background-color: #3498db !important;
 }
 
 a.bg-info:hover,
 a.bg-info:focus,
 button.bg-info:hover,
 button.bg-info:focus {
-  background-color: #0062cc !important;
+  background-color: #217dbb !important;
 }
 
 .bg-warning {
-  background-color: #ffc107 !important;
+  background-color: #f39c12 !important;
 }
 
 a.bg-warning:hover,
 a.bg-warning:focus,
 button.bg-warning:hover,
 button.bg-warning:focus {
-  background-color: #d39e00 !important;
+  background-color: #c87f0a !important;
 }
 
 .bg-danger {
-  background-color: #8c3409 !important;
+  background-color: #004231 !important;
 }
 
 a.bg-danger:hover,
 a.bg-danger:focus,
 button.bg-danger:hover,
 button.bg-danger:focus {
-  background-color: #5c2206 !important;
+  background-color: #000f0b !important;
 }
 
 .bg-light {
-  background-color: #f8f9fa !important;
+  background-color: #303030 !important;
 }
 
 a.bg-light:hover,
 a.bg-light:focus,
 button.bg-light:hover,
 button.bg-light:focus {
-  background-color: #dae0e5 !important;
+  background-color: #171717 !important;
 }
 
 .bg-dark {
-  background-color: #343a40 !important;
+  background-color: #dee2e6 !important;
 }
 
 a.bg-dark:hover,
 a.bg-dark:focus,
 button.bg-dark:hover,
 button.bg-dark:focus {
-  background-color: #1d2124 !important;
+  background-color: #c1c9d0 !important;
 }
 
 .bg-white {
-  background-color: #ffffff !important;
+  background-color: #fff !important;
 }
 
 .bg-transparent {
@@ -6386,23 +6385,23 @@ button.bg-dark:focus {
 }
 
 .border {
-  border: 1px solid #495057 !important;
+  border: 1px solid #dee2e6 !important;
 }
 
 .border-top {
-  border-top: 1px solid #495057 !important;
+  border-top: 1px solid #dee2e6 !important;
 }
 
 .border-right {
-  border-right: 1px solid #495057 !important;
+  border-right: 1px solid #dee2e6 !important;
 }
 
 .border-bottom {
-  border-bottom: 1px solid #495057 !important;
+  border-bottom: 1px solid #dee2e6 !important;
 }
 
 .border-left {
-  border-left: 1px solid #495057 !important;
+  border-left: 1px solid #dee2e6 !important;
 }
 
 .border-0 {
@@ -6426,7 +6425,7 @@ button.bg-dark:focus {
 }
 
 .border-primary {
-  border-color: #f1641e !important;
+  border-color: #00bc8c !important;
 }
 
 .border-secondary {
@@ -6434,63 +6433,63 @@ button.bg-dark:focus {
 }
 
 .border-success {
-  border-color: #6610f2 !important;
+  border-color: #00bc8c !important;
 }
 
 .border-info {
-  border-color: #007bff !important;
+  border-color: #3498db !important;
 }
 
 .border-warning {
-  border-color: #ffc107 !important;
+  border-color: #f39c12 !important;
 }
 
 .border-danger {
-  border-color: #8c3409 !important;
+  border-color: #004231 !important;
 }
 
 .border-light {
-  border-color: #f8f9fa !important;
+  border-color: #303030 !important;
 }
 
 .border-dark {
-  border-color: #343a40 !important;
+  border-color: #dee2e6 !important;
 }
 
 .border-white {
-  border-color: #ffffff !important;
+  border-color: #fff !important;
 }
 
 .rounded-sm {
-  border-radius: 1rem !important;
+  border-radius: 0.2rem !important;
 }
 
 .rounded {
-  border-radius: 0.5rem !important;
+  border-radius: 0.25rem !important;
 }
 
 .rounded-top {
-  border-top-left-radius: 0.5rem !important;
-  border-top-right-radius: 0.5rem !important;
+  border-top-left-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
 }
 
 .rounded-right {
-  border-top-right-radius: 0.5rem !important;
-  border-bottom-right-radius: 0.5rem !important;
+  border-top-right-radius: 0.25rem !important;
+  border-bottom-right-radius: 0.25rem !important;
 }
 
 .rounded-bottom {
-  border-bottom-right-radius: 0.5rem !important;
-  border-bottom-left-radius: 0.5rem !important;
+  border-bottom-right-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
 }
 
 .rounded-left {
-  border-top-left-radius: 0.5rem !important;
-  border-bottom-left-radius: 0.5rem !important;
+  border-top-left-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
 }
 
 .rounded-lg {
-  border-radius: 0.5rem !important;
+  border-radius: 0.3rem !important;
 }
 
 .rounded-circle {
@@ -6498,7 +6497,7 @@ button.bg-dark:focus {
 }
 
 .rounded-pill {
-  border-radius: 0.25rem !important;
+  border-radius: 50rem !important;
 }
 
 .rounded-0 {
@@ -7428,15 +7427,15 @@ button.bg-dark:focus {
 }
 
 .shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(34, 34, 34, 0.075) !important;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 }
 
 .shadow {
-  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15) !important;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(34, 34, 34, 0.175) !important;
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
 }
 
 .shadow-none {
@@ -9431,7 +9430,7 @@ button.bg-dark:focus {
 }
 
 .font-weight-bold {
-  font-weight: 600 !important;
+  font-weight: 700 !important;
 }
 
 .font-weight-bolder {
@@ -9443,16 +9442,16 @@ button.bg-dark:focus {
 }
 
 .text-white {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .text-primary {
-  color: #f1641e !important;
+  color: #00bc8c !important;
 }
 
 a.text-primary:hover,
 a.text-primary:focus {
-  color: #b7440b !important;
+  color: #007053 !important;
 }
 
 .text-secondary {
@@ -9465,69 +9464,69 @@ a.text-secondary:focus {
 }
 
 .text-success {
-  color: #6610f2 !important;
+  color: #00bc8c !important;
 }
 
 a.text-success:hover,
 a.text-success:focus {
-  color: #4709ac !important;
+  color: #007053 !important;
 }
 
 .text-info {
-  color: #007bff !important;
+  color: #3498db !important;
 }
 
 a.text-info:hover,
 a.text-info:focus {
-  color: #0056b3 !important;
+  color: #1d6fa5 !important;
 }
 
 .text-warning {
-  color: #ffc107 !important;
+  color: #f39c12 !important;
 }
 
 a.text-warning:hover,
 a.text-warning:focus {
-  color: #ba8b00 !important;
+  color: #b06f09 !important;
 }
 
 .text-danger {
-  color: #8c3409 !important;
+  color: #004231 !important;
 }
 
 a.text-danger:hover,
 a.text-danger:focus {
-  color: #441904 !important;
+  color: black !important;
 }
 
 .text-light {
-  color: #f8f9fa !important;
+  color: #303030 !important;
 }
 
 a.text-light:hover,
 a.text-light:focus {
-  color: #cbd3da !important;
+  color: #0a0a0a !important;
 }
 
 .text-dark {
-  color: #343a40 !important;
+  color: #dee2e6 !important;
 }
 
 a.text-dark:hover,
 a.text-dark:focus {
-  color: #121416 !important;
+  color: #b2bcc5 !important;
 }
 
 .text-body {
-  color: #495057 !important;
+  color: #dee2e6 !important;
 }
 
 .text-muted {
-  color: #6c757d !important;
+  color: #888 !important;
 }
 
 .text-black-50 {
-  color: rgba(34, 34, 34, 0.5) !important;
+  color: rgba(0, 0, 0, 0.5) !important;
 }
 
 .text-white-50 {
@@ -9611,14 +9610,14 @@ a.text-dark:focus {
     display: none;
   }
   .badge {
-    border: 1px solid #222222;
+    border: 1px solid #000;
   }
   .table {
     border-collapse: collapse !important;
   }
   .table td,
   .table th {
-    background-color: #ffffff !important;
+    background-color: #fff !important;
   }
   .table-bordered th,
   .table-bordered td {
@@ -9631,11 +9630,11 @@ a.text-dark:focus {
   .table-dark td,
   .table-dark thead th,
   .table-dark tbody + tbody {
-    border-color: #495057;
+    border-color: #444;
   }
   .table .thead-dark th {
     color: inherit;
-    border-color: #495057;
+    border-color: #444;
   }
 }
 

diff --git a/src/assets/css/themes/litely.css b/src/assets/css/themes/litely.css
index 61dfd38ea2072643167a33a801f176636d1050b4..6f57d01e87c907dff6dc85b4e0fb30d992523bb9 100644 (file)
--- a/src/assets/css/themes/litely.css
+++ b/src/assets/css/themes/litely.css
@@ -16,7 +16,7 @@
   --green: #00c853;
   --teal: #20c997;
   --cyan: #02bdc2;
-  --white: #ffffff;
+  --white: #fff;
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #f1641e;
@@ -26,7 +26,6 @@
   --warning: #ffc107;
   --danger: #873208;
   --light: #f8f9fa;
-  --medium-light: var(--bs-gray-300);
   --dark: #343a40;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
@@ -450,7 +449,7 @@ hr {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
-  border-top: 1px solid rgba(34, 34, 34, 0.1);
+  border-top: 1px solid rgba(73, 80, 87, 0.25);
 }
 
 small,
@@ -541,7 +540,7 @@ a > code {
 kbd {
   padding: 0.2rem 0.4rem;
   font-size: 87.5%;
-  color: #ffffff;
+  color: #fff;
   background-color: #212529;
   border-radius: 1rem;
 }
@@ -1796,7 +1795,7 @@ pre code {
 }
 
 .table .thead-dark th {
-  color: #ffffff;
+  color: #fff;
   background-color: #343a40;
   border-color: #454d55;
 }
@@ -1807,7 +1806,7 @@ pre code {
 }
 
 .table-dark {
-  color: #ffffff;
+  color: #fff;
   background-color: #343a40;
 }
 .table-dark th,
@@ -1822,7 +1821,7 @@ pre code {
   background-color: rgba(255, 255, 255, 0.05);
 }
 .table-dark.table-hover tbody tr:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: rgba(255, 255, 255, 0.075);
 }
 
@@ -1889,7 +1888,7 @@ pre code {
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
-  background-color: #ffffff;
+  background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.5rem;
@@ -1906,7 +1905,7 @@ pre code {
 }
 .form-control:focus {
   color: #495057;
-  background-color: #ffffff;
+  background-color: #fff;
   border-color: #f8b796;
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75);
@@ -1934,7 +1933,7 @@ select.form-control:-moz-focusring {
 }
 select.form-control:focus::-ms-value {
   color: #495057;
-  background-color: #ffffff;
+  background-color: #fff;
 }
 
 .form-control-file,
@@ -2067,7 +2066,7 @@ textarea.form-control {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 0.875em;
-  color: #02bdc2;
+  color: #007bff;
 }
 
 .valid-tooltip {
@@ -2081,8 +2080,8 @@ textarea.form-control {
   margin-top: 0.1rem;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #ffffff;
-  background-color: rgba(2, 189, 194, 0.9);
+  color: #fff;
+  background-color: rgba(0, 123, 255, 0.9);
   border-radius: 0.5rem;
 }
 .form-row > .col > .valid-tooltip,
@@ -2099,17 +2098,17 @@ textarea.form-control {
 
 .was-validated .form-control:valid,
 .form-control.is-valid {
-  border-color: #02bdc2;
+  border-color: #007bff;
   padding-right: calc(1.5em + 0.75rem) !important;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%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);
 }
 .was-validated .form-control:valid:focus,
 .form-control.is-valid:focus {
-  border-color: #02bdc2;
-  box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
 .was-validated select.form-control:valid,
@@ -2127,24 +2126,24 @@ textarea.form-control.is-valid {
 
 .was-validated .custom-select:valid,
 .custom-select.is-valid {
-  border-color: #02bdc2;
+  border-color: #007bff;
   padding-right: calc(0.75em + 2.3125rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
       right 0.75rem center/8px 10px no-repeat,
-    #ffffff
-      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
+    #fff
+      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
       center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
       no-repeat;
 }
 .was-validated .custom-select:valid:focus,
 .custom-select.is-valid:focus {
-  border-color: #02bdc2;
-  box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
 .was-validated .form-check-input:valid ~ .form-check-label,
 .form-check-input.is-valid ~ .form-check-label {
-  color: #02bdc2;
+  color: #007bff;
 }
 .was-validated .form-check-input:valid ~ .valid-feedback,
 .was-validated .form-check-input:valid ~ .valid-tooltip,
@@ -2155,41 +2154,41 @@ textarea.form-control.is-valid {
 
 .was-validated .custom-control-input:valid ~ .custom-control-label,
 .custom-control-input.is-valid ~ .custom-control-label {
-  color: #02bdc2;
+  color: #007bff;
 }
 .was-validated .custom-control-input:valid ~ .custom-control-label::before,
 .custom-control-input.is-valid ~ .custom-control-label::before {
-  border-color: #02bdc2;
+  border-color: #007bff;
 }
 .was-validated
   .custom-control-input:valid:checked
   ~ .custom-control-label::before,
 .custom-control-input.is-valid:checked ~ .custom-control-label::before {
-  border-color: #03eef4;
-  background-color: #03eef4;
+  border-color: #3395ff;
+  background-color: #3395ff;
 }
 .was-validated
   .custom-control-input:valid:focus
   ~ .custom-control-label::before,
 .custom-control-input.is-valid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 .was-validated
   .custom-control-input:valid:focus:not(:checked)
   ~ .custom-control-label::before,
 .custom-control-input.is-valid:focus:not(:checked)
   ~ .custom-control-label::before {
-  border-color: #02bdc2;
+  border-color: #007bff;
 }
 
 .was-validated .custom-file-input:valid ~ .custom-file-label,
 .custom-file-input.is-valid ~ .custom-file-label {
-  border-color: #02bdc2;
+  border-color: #007bff;
 }
 .was-validated .custom-file-input:valid:focus ~ .custom-file-label,
 .custom-file-input.is-valid:focus ~ .custom-file-label {
-  border-color: #02bdc2;
-  box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
 .invalid-feedback {
@@ -2211,7 +2210,7 @@ textarea.form-control.is-valid {
   margin-top: 0.1rem;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #ffffff;
+  color: #fff;
   background-color: rgba(135, 50, 8, 0.9);
   border-radius: 0.5rem;
 }
@@ -2261,7 +2260,7 @@ textarea.form-control.is-invalid {
   padding-right: calc(0.75em + 2.3125rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
       right 0.75rem center/8px 10px no-repeat,
-    #ffffff
+    #fff
       url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23873208' viewBox='0 0 12 12'%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")
       center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
       no-repeat;
@@ -2422,32 +2421,32 @@ fieldset:disabled a.btn {
 }
 
 .btn-primary {
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
   border-color: #f1641e;
 }
 .btn-primary:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #db520e;
   border-color: #cf4d0d;
 }
 .btn-primary:focus,
 .btn-primary.focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #db520e;
   border-color: #cf4d0d;
   box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5);
 }
 .btn-primary.disabled,
 .btn-primary:disabled {
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
   border-color: #f1641e;
 }
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #cf4d0d;
   border-color: #c3490c;
 }
@@ -2458,32 +2457,32 @@ fieldset:disabled a.btn {
 }
 
 .btn-secondary {
-  color: #ffffff;
+  color: #fff;
   background-color: #00c853;
   border-color: #00c853;
 }
 .btn-secondary:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #00a243;
   border-color: #00953e;
 }
 .btn-secondary:focus,
 .btn-secondary.focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #00a243;
   border-color: #00953e;
   box-shadow: 0 0 0 0.2rem rgba(38, 208, 109, 0.5);
 }
 .btn-secondary.disabled,
 .btn-secondary:disabled {
-  color: #ffffff;
+  color: #fff;
   background-color: #00c853;
   border-color: #00c853;
 }
 .btn-secondary:not(:disabled):not(.disabled):active,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #00953e;
   border-color: #008839;
 }
@@ -2494,32 +2493,32 @@ fieldset:disabled a.btn {
 }
 
 .btn-success {
-  color: #ffffff;
+  color: #fff;
   background-color: #6610f2;
   border-color: #6610f2;
 }
 .btn-success:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #560bd0;
   border-color: #510bc4;
 }
 .btn-success:focus,
 .btn-success.focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #560bd0;
   border-color: #510bc4;
   box-shadow: 0 0 0 0.2rem rgba(125, 52, 244, 0.5);
 }
 .btn-success.disabled,
 .btn-success:disabled {
-  color: #ffffff;
+  color: #fff;
   background-color: #6610f2;
   border-color: #6610f2;
 }
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #510bc4;
   border-color: #4c0ab8;
 }
@@ -2530,32 +2529,32 @@ fieldset:disabled a.btn {
 }
 
 .btn-info {
-  color: #ffffff;
+  color: #fff;
   background-color: #007bff;
   border-color: #007bff;
 }
 .btn-info:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #0069d9;
   border-color: #0062cc;
 }
 .btn-info:focus,
 .btn-info.focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #0069d9;
   border-color: #0062cc;
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 .btn-info.disabled,
 .btn-info:disabled {
-  color: #ffffff;
+  color: #fff;
   background-color: #007bff;
   border-color: #007bff;
 }
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #0062cc;
   border-color: #005cbf;
 }
@@ -2602,32 +2601,32 @@ fieldset:disabled a.btn {
 }
 
 .btn-danger {
-  color: #ffffff;
+  color: #fff;
   background-color: #873208;
   border-color: #873208;
 }
 .btn-danger:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #632506;
   border-color: #572105;
 }
 .btn-danger:focus,
 .btn-danger.focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #632506;
   border-color: #572105;
   box-shadow: 0 0 0 0.2rem rgba(153, 81, 45, 0.5);
 }
 .btn-danger.disabled,
 .btn-danger:disabled {
-  color: #ffffff;
+  color: #fff;
   background-color: #873208;
   border-color: #873208;
 }
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #572105;
   border-color: #4b1c05;
 }
@@ -2674,32 +2673,32 @@ fieldset:disabled a.btn {
 }
 
 .btn-dark {
-  color: #ffffff;
+  color: #fff;
   background-color: #343a40;
   border-color: #343a40;
 }
 .btn-dark:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #23272b;
   border-color: #1d2124;
 }
 .btn-dark:focus,
 .btn-dark.focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #23272b;
   border-color: #1d2124;
   box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
 }
 .btn-dark.disabled,
 .btn-dark:disabled {
-  color: #ffffff;
+  color: #fff;
   background-color: #343a40;
   border-color: #343a40;
 }
 .btn-dark:not(:disabled):not(.disabled):active,
 .btn-dark:not(:disabled):not(.disabled).active,
 .show > .btn-dark.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #1d2124;
   border-color: #171a1d;
 }
@@ -2714,7 +2713,7 @@ fieldset:disabled a.btn {
   border-color: #f1641e;
 }
 .btn-outline-primary:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
   border-color: #f1641e;
 }
@@ -2730,7 +2729,7 @@ fieldset:disabled a.btn {
 .btn-outline-primary:not(:disabled):not(.disabled):active,
 .btn-outline-primary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-primary.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
   border-color: #f1641e;
 }
@@ -2745,7 +2744,7 @@ fieldset:disabled a.btn {
   border-color: #00c853;
 }
 .btn-outline-secondary:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #00c853;
   border-color: #00c853;
 }
@@ -2761,7 +2760,7 @@ fieldset:disabled a.btn {
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #00c853;
   border-color: #00c853;
 }
@@ -2776,7 +2775,7 @@ fieldset:disabled a.btn {
   border-color: #6610f2;
 }
 .btn-outline-success:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #6610f2;
   border-color: #6610f2;
 }
@@ -2792,7 +2791,7 @@ fieldset:disabled a.btn {
 .btn-outline-success:not(:disabled):not(.disabled):active,
 .btn-outline-success:not(:disabled):not(.disabled).active,
 .show > .btn-outline-success.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #6610f2;
   border-color: #6610f2;
 }
@@ -2807,7 +2806,7 @@ fieldset:disabled a.btn {
   border-color: #007bff;
 }
 .btn-outline-info:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #007bff;
   border-color: #007bff;
 }
@@ -2823,7 +2822,7 @@ fieldset:disabled a.btn {
 .btn-outline-info:not(:disabled):not(.disabled):active,
 .btn-outline-info:not(:disabled):not(.disabled).active,
 .show > .btn-outline-info.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #007bff;
   border-color: #007bff;
 }
@@ -2869,7 +2868,7 @@ fieldset:disabled a.btn {
   border-color: #873208;
 }
 .btn-outline-danger:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #873208;
   border-color: #873208;
 }
@@ -2885,7 +2884,7 @@ fieldset:disabled a.btn {
 .btn-outline-danger:not(:disabled):not(.disabled):active,
 .btn-outline-danger:not(:disabled):not(.disabled).active,
 .show > .btn-outline-danger.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #873208;
   border-color: #873208;
 }
@@ -2931,7 +2930,7 @@ fieldset:disabled a.btn {
   border-color: #343a40;
 }
 .btn-outline-dark:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -2947,7 +2946,7 @@ fieldset:disabled a.btn {
 .btn-outline-dark:not(:disabled):not(.disabled):active,
 .btn-outline-dark:not(:disabled):not(.disabled).active,
 .show > .btn-outline-dark.dropdown-toggle {
-  color: #ffffff;
+  color: #fff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3082,7 +3081,7 @@ input[type="button"].btn-block {
   color: #495057;
   text-align: left;
   list-style: none;
-  background-color: #ffffff;
+  background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(34, 34, 34, 0.15);
   border-radius: 0.5rem;
@@ -3249,7 +3248,7 @@ input[type="button"].btn-block {
 }
 .dropdown-item.active,
 .dropdown-item:active {
-  color: #ffffff;
+  color: #fff;
   text-decoration: none;
   background-color: #f1641e;
 }
@@ -3615,7 +3614,7 @@ input[type="button"].btn-block {
   opacity: 0;
 }
 .custom-control-input:checked ~ .custom-control-label::before {
-  color: #ffffff;
+  color: #fff;
   border-color: #f1641e;
   background-color: #f1641e;
 }
@@ -3626,7 +3625,7 @@ input[type="button"].btn-block {
   border-color: #f8b796;
 }
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #ffffff;
+  color: #fff;
   background-color: #fbd8c6;
   border-color: #fbd8c6;
 }
@@ -3653,7 +3652,7 @@ input[type="button"].btn-block {
   height: 1rem;
   pointer-events: none;
   content: "";
-  background-color: #ffffff;
+  background-color: #fff;
   border: 1px solid #adb5bd;
 }
 .custom-control-label::after {
@@ -3671,7 +3670,7 @@ input[type="button"].btn-block {
   border-radius: 0.5rem;
 }
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
 }
 .custom-checkbox
   .custom-control-input:indeterminate
@@ -3682,7 +3681,7 @@ input[type="button"].btn-block {
 .custom-checkbox
   .custom-control-input:indeterminate
   ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffffff' d='M0 2h4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
 }
 .custom-checkbox
   .custom-control-input:disabled:checked
@@ -3699,7 +3698,7 @@ input[type="button"].btn-block {
   border-radius: 50%;
 }
 .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 }
 .custom-radio
   .custom-control-input:disabled:checked
@@ -3732,7 +3731,7 @@ input[type="button"].btn-block {
   }
 }
 .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #ffffff;
+  background-color: #fff;
   transform: translateX(0.75rem);
 }
 .custom-switch
@@ -3751,7 +3750,7 @@ input[type="button"].btn-block {
   line-height: 1.5;
   color: #495057;
   vertical-align: middle;
-  background: #ffffff
+  background: #fff
     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
     right 0.75rem center/8px 10px no-repeat;
   border: 1px solid #ced4da;
@@ -3765,7 +3764,7 @@ input[type="button"].btn-block {
 }
 .custom-select:focus::-ms-value {
   color: #495057;
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .custom-select[multiple],
 .custom-select[size]:not([size="1"]) {
@@ -3845,7 +3844,7 @@ input[type="button"].btn-block {
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
-  background-color: #ffffff;
+  background-color: #fff;
   border: 1px solid #ced4da;
   border-radius: 0.5rem;
 }
@@ -4073,7 +4072,7 @@ input[type="button"].btn-block {
 }
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
 }
 
@@ -4449,11 +4448,11 @@ input[type="button"].btn-block {
 }
 
 .navbar-dark .navbar-brand {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-brand:hover,
 .navbar-dark .navbar-brand:focus {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-nav .nav-link {
   color: rgba(255, 255, 255, 0.5);
@@ -4469,7 +4468,7 @@ input[type="button"].btn-block {
 .navbar-dark .navbar-nav .active > .nav-link,
 .navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-toggler {
   color: rgba(255, 255, 255, 0.5);
@@ -4482,11 +4481,11 @@ input[type="button"].btn-block {
   color: rgba(255, 255, 255, 0.5);
 }
 .navbar-dark .navbar-text a {
-  color: #ffffff;
+  color: #fff;
 }
 .navbar-dark .navbar-text a:hover,
 .navbar-dark .navbar-text a:focus {
-  color: #ffffff;
+  color: #fff;
 }
 
 .card {
@@ -4751,7 +4750,7 @@ input[type="button"].btn-block {
   margin-left: -1px;
   line-height: 1.25;
   color: #f1641e;
-  background-color: #ffffff;
+  background-color: #fff;
   border: 1px solid #dee2e6;
 }
 .page-link:hover {
@@ -4778,7 +4777,7 @@ input[type="button"].btn-block {
 }
 .page-item.active .page-link {
   z-index: 3;
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
   border-color: #f1641e;
 }
@@ -4786,7 +4785,7 @@ input[type="button"].btn-block {
   color: #6c757d;
   pointer-events: none;
   cursor: auto;
-  background-color: #ffffff;
+  background-color: #fff;
   border-color: #dee2e6;
 }
 
@@ -4857,12 +4856,12 @@ a.badge:focus {
 }
 
 .badge-primary {
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
 }
 a.badge-primary:hover,
 a.badge-primary:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #cf4d0d;
 }
 a.badge-primary:focus,
@@ -4872,12 +4871,12 @@ a.badge-primary.focus {
 }
 
 .badge-secondary {
-  color: #ffffff;
+  color: #fff;
   background-color: #00c853;
 }
 a.badge-secondary:hover,
 a.badge-secondary:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #00953e;
 }
 a.badge-secondary:focus,
@@ -4887,12 +4886,12 @@ a.badge-secondary.focus {
 }
 
 .badge-success {
-  color: #ffffff;
+  color: #fff;
   background-color: #6610f2;
 }
 a.badge-success:hover,
 a.badge-success:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #510bc4;
 }
 a.badge-success:focus,
@@ -4902,12 +4901,12 @@ a.badge-success.focus {
 }
 
 .badge-info {
-  color: #ffffff;
+  color: #fff;
   background-color: #007bff;
 }
 a.badge-info:hover,
 a.badge-info:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #0062cc;
 }
 a.badge-info:focus,
@@ -4932,12 +4931,12 @@ a.badge-warning.focus {
 }
 
 .badge-danger {
-  color: #ffffff;
+  color: #fff;
   background-color: #873208;
 }
 a.badge-danger:hover,
 a.badge-danger:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #572105;
 }
 a.badge-danger:focus,
@@ -4962,12 +4961,12 @@ a.badge-light.focus {
 }
 
 .badge-dark {
-  color: #ffffff;
+  color: #fff;
   background-color: #343a40;
 }
 a.badge-dark:hover,
 a.badge-dark:focus {
-  color: #ffffff;
+  color: #fff;
   background-color: #1d2124;
 }
 a.badge-dark:focus,
@@ -5141,7 +5140,7 @@ a.badge-dark.focus {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
   white-space: nowrap;
   background-color: #f1641e;
@@ -5214,7 +5213,7 @@ a.badge-dark.focus {
   position: relative;
   display: block;
   padding: 0.75rem 1.25rem;
-  background-color: #ffffff;
+  background-color: #fff;
   border: 1px solid rgba(34, 34, 34, 0.125);
 }
 .list-group-item:first-child {
@@ -5229,11 +5228,11 @@ a.badge-dark.focus {
 .list-group-item:disabled {
   color: #6c757d;
   pointer-events: none;
-  background-color: #ffffff;
+  background-color: #fff;
 }
 .list-group-item.active {
   z-index: 2;
-  color: #ffffff;
+  color: #fff;
   background-color: #f1641e;
   border-color: #f1641e;
 }
@@ -5384,7 +5383,7 @@ a.badge-dark.focus {
   background-color: #f9c4a8;
 }
 .list-group-item-primary.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #8e4420;
   border-color: #8e4420;
 }
@@ -5399,7 +5398,7 @@ a.badge-dark.focus {
   background-color: #a3ecc1;
 }
 .list-group-item-secondary.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #10783b;
   border-color: #10783b;
 }
@@ -5414,7 +5413,7 @@ a.badge-dark.focus {
   background-color: #c5a4fa;
 }
 .list-group-item-success.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #45198e;
   border-color: #45198e;
 }
@@ -5429,7 +5428,7 @@ a.badge-dark.focus {
   background-color: #9fcdff;
 }
 .list-group-item-info.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #105095;
   border-color: #105095;
 }
@@ -5444,7 +5443,7 @@ a.badge-dark.focus {
   background-color: #ffe8a1;
 }
 .list-group-item-warning.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #957514;
   border-color: #957514;
 }
@@ -5459,7 +5458,7 @@ a.badge-dark.focus {
   background-color: #d5b8a9;
 }
 .list-group-item-danger.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #572a14;
   border-color: #572a14;
 }
@@ -5474,7 +5473,7 @@ a.badge-dark.focus {
   background-color: #ececf6;
 }
 .list-group-item-light.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #919292;
   border-color: #919292;
 }
@@ -5489,7 +5488,7 @@ a.badge-dark.focus {
   background-color: #b9bbbe;
 }
 .list-group-item-dark.list-group-item-action.active {
-  color: #ffffff;
+  color: #fff;
   background-color: #2b2e32;
   border-color: #2b2e32;
 }
@@ -5499,12 +5498,12 @@ a.badge-dark.focus {
   font-size: 1.5rem;
   font-weight: 600;
   line-height: 1;
-  color: #222222;
-  text-shadow: 0 1px 0 #ffffff;
+  color: #222;
+  text-shadow: 0 1px 0 #fff;
   opacity: 0.5;
 }
 .close:hover {
-  color: #222222;
+  color: #222;
   text-decoration: none;
 }
 .close:not(:disabled):not(.disabled):hover,
@@ -5650,7 +5649,7 @@ a.close.disabled {
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
-  background-color: #ffffff;
+  background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(34, 34, 34, 0.2);
   border-radius: 0.5rem;
@@ -5664,7 +5663,7 @@ a.close.disabled {
   z-index: 1040;
   width: 100vw;
   height: 100vh;
-  background-color: #222222;
+  background-color: #222;
 }
 .modal-backdrop.fade {
   opacity: 0;
@@ -5805,7 +5804,7 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="top"] .arrow::before {
   top: 0;
   border-width: 0.4rem 0.4rem 0;
-  border-top-color: #222222;
+  border-top-color: #222;
 }
 
 .bs-tooltip-right,
@@ -5822,7 +5821,7 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="right"] .arrow::before {
   right: 0;
   border-width: 0.4rem 0.4rem 0.4rem 0;
-  border-right-color: #222222;
+  border-right-color: #222;
 }
 
 .bs-tooltip-bottom,
@@ -5837,7 +5836,7 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
   bottom: 0;
   border-width: 0 0.4rem 0.4rem;
-  border-bottom-color: #222222;
+  border-bottom-color: #222;
 }
 
 .bs-tooltip-left,
@@ -5854,15 +5853,15 @@ a.close.disabled {
 .bs-tooltip-auto[x-placement^="left"] .arrow::before {
   left: 0;
   border-width: 0.4rem 0 0.4rem 0.4rem;
-  border-left-color: #222222;
+  border-left-color: #222;
 }
 
 .tooltip-inner {
   max-width: 200px;
   padding: 0.25rem 0.5rem;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
-  background-color: #222222;
+  background-color: #222;
   border-radius: 0.5rem;
 }
 
@@ -5890,7 +5889,7 @@ a.close.disabled {
   line-break: auto;
   font-size: 0.875rem;
   word-wrap: break-word;
-  background-color: #ffffff;
+  background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(34, 34, 34, 0.2);
   border-radius: 0.5rem;
@@ -5929,7 +5928,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="top"] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #ffffff;
+  border-top-color: #fff;
 }
 
 .bs-popover-right,
@@ -5953,7 +5952,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="right"] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #ffffff;
+  border-right-color: #fff;
 }
 
 .bs-popover-bottom,
@@ -5974,7 +5973,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #ffffff;
+  border-bottom-color: #fff;
 }
 .bs-popover-bottom .popover-header::before,
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -6009,7 +6008,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="left"] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #ffffff;
+  border-left-color: #fff;
 }
 
 .popover-header {
@@ -6116,7 +6115,7 @@ a.close.disabled {
   justify-content: center;
   width: 15%;
   padding: 0;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
   background: none;
   border: 0;
@@ -6133,7 +6132,7 @@ a.close.disabled {
 .carousel-control-prev:focus,
 .carousel-control-next:hover,
 .carousel-control-next:focus {
-  color: #ffffff;
+  color: #fff;
   text-decoration: none;
   outline: 0;
   opacity: 0.9;
@@ -6156,11 +6155,11 @@ a.close.disabled {
 }
 
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
 }
 
 .carousel-indicators {
@@ -6185,7 +6184,7 @@ a.close.disabled {
   margin-left: 3px;
   text-indent: -999px;
   cursor: pointer;
-  background-color: #ffffff;
+  background-color: #fff;
   background-clip: padding-box;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
@@ -6209,7 +6208,7 @@ a.close.disabled {
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
 }
 
@@ -6379,7 +6378,7 @@ button.bg-dark:focus {
 }
 
 .bg-white {
-  background-color: #ffffff !important;
+  background-color: #fff !important;
 }
 
 .bg-transparent {
@@ -6459,7 +6458,7 @@ button.bg-dark:focus {
 }
 
 .border-white {
-  border-color: #ffffff !important;
+  border-color: #fff !important;
 }
 
 .rounded-sm {
@@ -9444,7 +9443,7 @@ button.bg-dark:focus {
 }
 
 .text-white {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .text-primary {
@@ -9612,14 +9611,14 @@ a.text-dark:focus {
     display: none;
   }
   .badge {
-    border: 1px solid #222222;
+    border: 1px solid #222;
   }
   .table {
     border-collapse: collapse !important;
   }
   .table td,
   .table th {
-    background-color: #ffffff !important;
+    background-color: #fff !important;
   }
   .table-bordered th,
   .table-bordered td {

diff --git a/src/server/handlers/catch-all-handler.tsx b/src/server/handlers/catch-all-handler.tsx
new file mode 100644 (file)
index 0000000..eb847dc
--- /dev/null
+++ b/src/server/handlers/catch-all-handler.tsx
@@ -0,0 +1,116 @@
+import type { Request, Response } from "express";
+import { StaticRouter, matchPath } from "inferno-router";
+import { renderToString } from "inferno-server";
+import IsomorphicCookie from "isomorphic-cookie";
+import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
+import { App } from "../../shared/components/app/app";
+import { getHttpBaseInternal } from "../../shared/env";
+import {
+  InitialFetchRequest,
+  IsoDataOptionalSite,
+  RouteData,
+} from "../../shared/interfaces";
+import { routes } from "../../shared/routes";
+import {
+  FailedRequestState,
+  wrapClient,
+} from "../../shared/services/HttpService";
+import { ErrorPageData, initializeSite, isAuthPath } from "../../shared/utils";
+import { createSsrHtml } from "../utils/create-ssr-html";
+import { getErrorPageData } from "../utils/get-error-page-data";
+import { setForwardedHeaders } from "../utils/set-forwarded-headers";
+
+export default async (req: Request, res: Response) => {
+  try {
+    const activeRoute = routes.find(route => matchPath(req.path, route));
+    let auth: string | undefined = IsomorphicCookie.load("jwt", req);
+
+    const getSiteForm: GetSite = { auth };
+
+    const headers = setForwardedHeaders(req.headers);
+    const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
+
+    const { path, url, query } = req;
+
+    // Get site data first
+    // This bypasses errors, so that the client can hit the error on its own,
+    // in order to remove the jwt on the browser. Necessary for wrong jwts
+    let site: GetSiteResponse | undefined = undefined;
+    let routeData: RouteData = {};
+    let errorPageData: ErrorPageData | undefined = undefined;
+    let try_site = await client.getSite(getSiteForm);
+    if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
+      console.error(
+        "Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
+      );
+      getSiteForm.auth = undefined;
+      auth = undefined;
+      try_site = await client.getSite(getSiteForm);
+    }
+
+    if (!auth && isAuthPath(path)) {
+      return res.redirect("/login");
+    }
+
+    if (try_site.state === "success") {
+      site = try_site.data;
+      initializeSite(site);
+
+      if (path !== "/setup" && !site.site_view.local_site.site_setup) {
+        return res.redirect("/setup");
+      }
+
+      if (site && activeRoute?.fetchInitialData) {
+        const initialFetchReq: InitialFetchRequest = {
+          client,
+          auth,
+          path,
+          query,
+          site,
+        };
+
+        routeData = await activeRoute.fetchInitialData(initialFetchReq);
+      }
+    } else if (try_site.state === "failed") {
+      errorPageData = getErrorPageData(new Error(try_site.msg), site);
+    }
+
+    const error = Object.values(routeData).find(
+      res => res.state === "failed"
+    ) as FailedRequestState | undefined;
+
+    // Redirect to the 404 if there's an API error
+    if (error) {
+      console.error(error.msg);
+      if (error.msg === "instance_is_private") {
+        return res.redirect(`/signup`);
+      } else {
+        errorPageData = getErrorPageData(new Error(error.msg), site);
+      }
+    }
+
+    const isoData: IsoDataOptionalSite = {
+      path,
+      site_res: site,
+      routeData,
+      errorPageData,
+    };
+
+    const wrapper = (
+      <StaticRouter location={url} context={isoData}>
+        <App />
+      </StaticRouter>
+    );
+
+    const root = renderToString(wrapper);
+
+    res.send(await createSsrHtml(root, isoData));
+  } catch (err) {
+    // If an error is caught here, the error page couldn't even be rendered
+    console.error(err);
+    res.statusCode = 500;
+    return res.send(
+      process.env.NODE_ENV === "development" ? err.message : "Server error"
+    );
+  }
+};

diff --git a/src/server/handlers/robots-handler.ts b/src/server/handlers/robots-handler.ts
new file mode 100644 (file)
index 0000000..7271095
--- /dev/null
+++ b/src/server/handlers/robots-handler.ts
@@ -0,0 +1,18 @@
+import type { Response } from "express";
+
+export default async ({ res }: { res: Response }) => {
+  res.setHeader("content-type", "text/plain; charset=utf-8");
+
+  res.send(`User-Agent: *
+  Disallow: /login
+  Disallow: /settings
+  Disallow: /create_community
+  Disallow: /create_post
+  Disallow: /create_private_message
+  Disallow: /inbox
+  Disallow: /setup
+  Disallow: /admin
+  Disallow: /password_change
+  Disallow: /search/
+  `);
+};

diff --git a/src/server/handlers/service-worker-handler.ts b/src/server/handlers/service-worker-handler.ts
new file mode 100644 (file)
index 0000000..15c6b3f
--- /dev/null
+++ b/src/server/handlers/service-worker-handler.ts
@@ -0,0 +1,14 @@
+import type { Response } from "express";
+import path from "path";
+
+export default async ({ res }: { res: Response }) => {
+  res
+    .setHeader("Content-Type", "application/javascript")
+    .sendFile(
+      path.resolve(
+        `./dist/service-worker${
+          process.env.NODE_ENV === "development" ? "-development" : ""
+        }.js`
+      )
+    );
+};

diff --git a/src/server/handlers/theme-handler.ts b/src/server/handlers/theme-handler.ts
new file mode 100644 (file)
index 0000000..9f1046d
--- /dev/null
+++ b/src/server/handlers/theme-handler.ts
@@ -0,0 +1,32 @@
+import type { Request, Response } from "express";
+import { existsSync } from "fs";
+import path from "path";
+
+const extraThemesFolder =
+  process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
+
+export default async (req: Request, res: Response) => {
+  res.contentType("text/css");
+
+  const theme = req.params.name;
+
+  if (!theme.endsWith(".css")) {
+    res.statusCode = 400;
+    res.send("Theme must be a css file");
+  }
+
+  const customTheme = path.resolve(`./${extraThemesFolder}/${theme}`);
+
+  if (existsSync(customTheme)) {
+    res.sendFile(customTheme);
+  } else {
+    const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
+
+    // If the theme doesn't exist, just send litely
+    if (existsSync(internalTheme)) {
+      res.sendFile(internalTheme);
+    } else {
+      res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
+    }
+  }
+};

diff --git a/src/server/handlers/themes-list-handler.ts b/src/server/handlers/themes-list-handler.ts
new file mode 100644 (file)
index 0000000..f36497e
--- /dev/null
+++ b/src/server/handlers/themes-list-handler.ts
@@ -0,0 +1,6 @@
+import type { Response } from "express";
+import { buildThemeList } from "../utils/build-themes-list";
+
+export default async ({ res }: { res: Response }) => {
+  res.type("json").send(JSON.stringify(await buildThemeList()));
+};

diff --git a/src/server/index.tsx b/src/server/index.tsx
index 4cff98b54afa3d45b473971c9631d6d89c17188e..f109fc1103b91f595f803c3fdd638a3c21c72b53 100644 (file)
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@@ -1,463 +1,38 @@
 import express from "express";
-import { existsSync } from "fs";
-import { readdir, readFile } from "fs/promises";
-import { IncomingHttpHeaders } from "http";
-import { Helmet } from "inferno-helmet";
-import { matchPath, StaticRouter } from "inferno-router";
-import { renderToString } from "inferno-server";
-import IsomorphicCookie from "isomorphic-cookie";
-import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 import path from "path";
 import process from "process";
-import serialize from "serialize-javascript";
-import sharp from "sharp";
-import { App } from "../shared/components/app/app";
-import { getHttpBaseExternal, getHttpBaseInternal } from "../shared/env";
-import {
-  ILemmyConfig,
-  InitialFetchRequest,
-  IsoDataOptionalSite,
-  RouteData,
-} from "../shared/interfaces";
-import { routes } from "../shared/routes";
-import { FailedRequestState, wrapClient } from "../shared/services/HttpService";
-import {
-  ErrorPageData,
-  favIconPngUrl,
-  favIconUrl,
-  initializeSite,
-  isAuthPath,
-} from "../shared/utils";
+import CatchAllHandler from "./handlers/catch-all-handler";
+import RobotsHandler from "./handlers/robots-handler";
+import ServiceWorkerHandler from "./handlers/service-worker-handler";
+import ThemeHandler from "./handlers/theme-handler";
+import ThemesListHandler from "./handlers/themes-list-handler";
+import setDefaultCsp from "./middleware/set-default-csp";
 
 const server = express();
+
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
   ? process.env["LEMMY_UI_HOST"].split(":")
   : ["0.0.0.0", "1234"];
-const extraThemesFolder =
-  process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
-
-if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
-  server.use(function (_req, res, next) {
-    res.setHeader(
-      "Content-Security-Policy",
-      `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
-    );
-    next();
-  });
-}
-const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
 
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
 server.use("/static", express.static(path.resolve("./dist")));
 
-const robotstxt = `User-Agent: *
-Disallow: /login
-Disallow: /settings
-Disallow: /create_community
-Disallow: /create_post
-Disallow: /create_private_message
-Disallow: /inbox
-Disallow: /setup
-Disallow: /admin
-Disallow: /password_change
-Disallow: /search/
-`;
-
-server.get("/service-worker.js", async (_req, res) => {
-  res.setHeader("Content-Type", "application/javascript");
-  res.sendFile(
-    path.resolve(
-      `./dist/service-worker${
-        process.env.NODE_ENV === "development" ? "-development" : ""
-      }.js`
-    )
-  );
-});
-
-server.get("/robots.txt", async (_req, res) => {
-  res.setHeader("content-type", "text/plain; charset=utf-8");
-  res.send(robotstxt);
-});
-
-server.get("/css/themes/:name", async (req, res) => {
-  res.contentType("text/css");
-  const theme = req.params.name;
-  if (!theme.endsWith(".css")) {
-    res.statusCode = 400;
-    res.send("Theme must be a css file");
-  }
-
-  const customTheme = path.resolve(`./${extraThemesFolder}/${theme}`);
-  if (existsSync(customTheme)) {
-    res.sendFile(customTheme);
-  } else {
-    const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
-
-    // If the theme doesn't exist, just send litely
-    if (existsSync(internalTheme)) {
-      res.sendFile(internalTheme);
-    } else {
-      res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
-    }
-  }
-});
-
-async function buildThemeList(): Promise<string[]> {
-  const themes = ["darkly", "darkly-red", "litely", "litely-red"];
-  if (existsSync(extraThemesFolder)) {
-    const dirThemes = await readdir(extraThemesFolder);
-    const cssThemes = dirThemes
-      .filter(d => d.endsWith(".css"))
-      .map(d => d.replace(".css", ""));
-    themes.push(...cssThemes);
-  }
-  return themes;
+if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
+  server.use(setDefaultCsp);
 }
 
-server.get("/css/themelist", async (_req, res) => {
-  res.type("json");
-  res.send(JSON.stringify(await buildThemeList()));
-});
-
-// server.use(cookieParser());
-server.get("/*", async (req, res) => {
-  try {
-    const activeRoute = routes.find(route => matchPath(req.path, route));
-    let auth: string | undefined = IsomorphicCookie.load("jwt", req);
-
-    const getSiteForm: GetSite = { auth };
-
-    const headers = setForwardedHeaders(req.headers);
-    const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
-
-    const { path, url, query } = req;
-
-    // Get site data first
-    // This bypasses errors, so that the client can hit the error on its own,
-    // in order to remove the jwt on the browser. Necessary for wrong jwts
-    let site: GetSiteResponse | undefined = undefined;
-    let routeData: RouteData = {};
-    let errorPageData: ErrorPageData | undefined = undefined;
-    let try_site = await client.getSite(getSiteForm);
-    if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
-      console.error(
-        "Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
-      );
-      getSiteForm.auth = undefined;
-      auth = undefined;
-      try_site = await client.getSite(getSiteForm);
-    }
-
-    if (!auth && isAuthPath(path)) {
-      return res.redirect("/login");
-    }
-
-    if (try_site.state === "success") {
-      site = try_site.data;
-      initializeSite(site);
-
-      if (path !== "/setup" && !site.site_view.local_site.site_setup) {
-        return res.redirect("/setup");
-      }
-
-      if (site && activeRoute?.fetchInitialData) {
-        const initialFetchReq: InitialFetchRequest = {
-          client,
-          auth,
-          path,
-          query,
-          site,
-        };
-
-        routeData = await activeRoute.fetchInitialData(initialFetchReq);
-      }
-    } else if (try_site.state === "failed") {
-      errorPageData = getErrorPageData(new Error(try_site.msg), site);
-    }
-
-    const error = Object.values(routeData).find(
-      res => res.state === "failed"
-    ) as FailedRequestState | undefined;
-
-    // Redirect to the 404 if there's an API error
-    if (error) {
-      console.error(error.msg);
-      if (error.msg === "instance_is_private") {
-        return res.redirect(`/signup`);
-      } else {
-        errorPageData = getErrorPageData(new Error(error.msg), site);
-      }
-    }
-
-    const isoData: IsoDataOptionalSite = {
-      path,
-      site_res: site,
-      routeData,
-      errorPageData,
-    };
-
-    const wrapper = (
-      <StaticRouter location={url} context={isoData}>
-        <App />
-      </StaticRouter>
-    );
-
-    const root = renderToString(wrapper);
-
-    res.send(await createSsrHtml(root, isoData));
-  } catch (err) {
-    // If an error is caught here, the error page couldn't even be rendered
-    console.error(err);
-    res.statusCode = 500;
-    return res.send(
-      process.env.NODE_ENV === "development" ? err.message : "Server error"
-    );
-  }
-});
+server.get("/robots.txt", RobotsHandler);
+server.get("/service-worker.js", ServiceWorkerHandler);
+server.get("/css/themes/:name", ThemeHandler);
+server.get("/css/themelist", ThemesListHandler);
+server.get("/*", CatchAllHandler);
 
 server.listen(Number(port), hostname, () => {
   console.log(`http://${hostname}:${port}`);
 });
 
-function setForwardedHeaders(headers: IncomingHttpHeaders): {
-  [key: string]: string;
-} {
-  const out: { [key: string]: string } = {};
-  if (headers.host) {
-    out.host = headers.host;
-  }
-  const realIp = headers["x-real-ip"];
-  if (realIp) {
-    out["x-real-ip"] = realIp as string;
-  }
-  const forwardedFor = headers["x-forwarded-for"];
-  if (forwardedFor) {
-    out["x-forwarded-for"] = forwardedFor as string;
-  }
-
-  return out;
-}
-
 process.on("SIGINT", () => {
   console.info("Interrupted");
   process.exit(0);
 });
-
-const iconSizes = [72, 96, 144, 192, 512];
-const defaultLogoPathDirectory = path.join(
-  process.cwd(),
-  "dist",
-  "assets",
-  "icons"
-);
-
-export async function generateManifestBase64({
-  my_user,
-  site_view: {
-    site,
-    local_site: { community_creation_admin_only },
-  },
-}: GetSiteResponse) {
-  const url = getHttpBaseExternal();
-
-  const icon = site.icon ? await fetchIconPng(site.icon) : null;
-
-  const manifest = {
-    name: site.name,
-    description: site.description ?? "A link aggregator for the fediverse",
-    start_url: url,
-    scope: url,
-    display: "standalone",
-    id: "/",
-    background_color: "#222222",
-    theme_color: "#222222",
-    icons: await Promise.all(
-      iconSizes.map(async size => {
-        let src = await readFile(
-          path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
-        ).then(buf => buf.toString("base64"));
-
-        if (icon) {
-          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",
-        short_name: "Search",
-        description: "Perform a search.",
-        url: "/search",
-      },
-      {
-        name: "Communities",
-        url: "/communities",
-        short_name: "Communities",
-        description: "Browse communities",
-      },
-    ]
-      .concat(
-        my_user
-          ? [
-              {
-                name: "Create Post",
-                url: "/create_post",
-                short_name: "Create Post",
-                description: "Create a post.",
-              },
-            ]
-          : []
-      )
-      .concat(
-        my_user?.local_user_view.person.admin || !community_creation_admin_only
-          ? [
-              {
-                name: "Create Community",
-                url: "/create_community",
-                short_name: "Create Community",
-                description: "Create a community",
-              },
-            ]
-          : []
-      ),
-    related_applications: [
-      {
-        platform: "f-droid",
-        url: "https://f-droid.org/packages/com.jerboa/",
-        id: "com.jerboa",
-      },
-    ],
-  };
-
-  return Buffer.from(JSON.stringify(manifest)).toString("base64");
-}
-
-async function fetchIconPng(iconUrl: string) {
-  return await fetch(iconUrl)
-    .then(res => res.blob())
-    .then(blob => blob.arrayBuffer());
-}
-
-function getErrorPageData(error: Error, site?: GetSiteResponse) {
-  const errorPageData: ErrorPageData = {};
-
-  if (site) {
-    errorPageData.error = error.message;
-  }
-
-  const adminMatrixIds = site?.admins
-    .map(({ person: { matrix_user_id } }) => matrix_user_id)
-    .filter(id => id) as string[] | undefined;
-  if (adminMatrixIds && adminMatrixIds.length > 0) {
-    errorPageData.adminMatrixIds = adminMatrixIds;
-  }
-
-  return errorPageData;
-}
-
-async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
-  const site = isoData.site_res;
-  const appleTouchIcon = site?.site_view.site.icon
-    ? `data:image/png;base64,${sharp(
-        await fetchIconPng(site.site_view.site.icon)
-      )
-        .resize(180, 180)
-        .extend({
-          bottom: 20,
-          top: 20,
-          left: 20,
-          right: 20,
-          background: "#222222",
-        })
-        .png()
-        .toBuffer()
-        .then(buf => buf.toString("base64"))}`
-    : favIconPngUrl;
-
-  const erudaStr =
-    process.env["LEMMY_UI_DEBUG"] === "true"
-      ? renderToString(
-          <>
-            <script src="//cdn.jsdelivr.net/npm/eruda"></script>
-            <script>eruda.init();</script>
-          </>
-        )
-      : "";
-
-  const helmet = Helmet.renderStatic();
-
-  const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
-
-  return `
-  <!DOCTYPE html>
-  <html ${helmet.htmlAttributes.toString()}>
-  <head>
-  <script>window.isoData = ${serialize(isoData)}</script>
-  <script>window.lemmyConfig = ${serialize(config)}</script>
-
-  <!-- A remote debugging utility for mobile -->
-  ${erudaStr}
-
-  <!-- Custom injected script -->
-  ${customHtmlHeader}
-
-  ${helmet.title.toString()}
-  ${helmet.meta.toString()}
-
-  <!-- Required meta tags -->
-  <meta name="Description" content="Lemmy">
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
-  <link
-     id="favicon"
-     rel="shortcut icon"
-     type="image/x-icon"
-     href=${site?.site_view.site.icon ?? favIconUrl}
-   />
-
-  <!-- Web app manifest -->
-  ${
-    site &&
-    `<link
-        rel="manifest"
-        href=${`data:application/manifest+json;base64,${await generateManifestBase64(
-          site
-        )}`}
-      />`
-  }
-  <link rel="apple-touch-icon" href=${appleTouchIcon} />
-  <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
-
-  <!-- Styles -->
-  <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
-
-  <!-- Current theme and more -->
-  ${helmet.link.toString()}
-  
-  </head>
-
-  <body ${helmet.bodyAttributes.toString()}>
-    <noscript>
-      <div class="alert alert-danger rounded-0" role="alert">
-        <b>Javascript is disabled. Actions will not work.</b>
-      </div>
-    </noscript>
-
-    <div id='root'>${root}</div>
-    <script defer src='/static/js/client.js'></script>
-  </body>
-</html>
-`;
-}

diff --git a/src/server/middleware/set-default-csp.ts b/src/server/middleware/set-default-csp.ts
new file mode 100644 (file)
index 0000000..a3ee526
--- /dev/null
+++ b/src/server/middleware/set-default-csp.ts
@@ -0,0 +1,10 @@
+import type { NextFunction, Response } from "express";
+
+export default function ({ res, next }: { res: Response; next: NextFunction }) {
+  res.setHeader(
+    "Content-Security-Policy",
+    `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
+  );
+
+  next();
+}

diff --git a/src/server/utils/build-themes-list.ts b/src/server/utils/build-themes-list.ts
new file mode 100644 (file)
index 0000000..73dc53b
--- /dev/null
+++ b/src/server/utils/build-themes-list.ts
@@ -0,0 +1,18 @@
+import { existsSync } from "fs";
+import { readdir } from "fs/promises";
+
+const extraThemesFolder =
+  process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
+
+const themes = ["darkly", "darkly-red", "litely", "litely-red"];
+
+export async function buildThemeList(): Promise<string[]> {
+  if (existsSync(extraThemesFolder)) {
+    const dirThemes = await readdir(extraThemesFolder);
+    const cssThemes = dirThemes
+      .filter(d => d.endsWith(".css"))
+      .map(d => d.replace(".css", ""));
+    themes.push(...cssThemes);
+  }
+  return themes;
+}

diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx
new file mode 100644 (file)
index 0000000..5cc38d7
--- /dev/null
+++ b/src/server/utils/create-ssr-html.tsx
@@ -0,0 +1,109 @@
+import { Helmet } from "inferno-helmet";
+import { renderToString } from "inferno-server";
+import serialize from "serialize-javascript";
+import sharp from "sharp";
+import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
+import { favIconPngUrl, favIconUrl } from "../../shared/utils";
+import { fetchIconPng } from "./fetch-icon-png";
+import { generateManifestBase64 } from "./generate-manifest-base64";
+
+const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
+
+export async function createSsrHtml(
+  root: string,
+  isoData: IsoDataOptionalSite
+) {
+  const site = isoData.site_res;
+
+  const appleTouchIcon = site?.site_view.site.icon
+    ? `data:image/png;base64,${sharp(
+        await fetchIconPng(site.site_view.site.icon)
+      )
+        .resize(180, 180)
+        .extend({
+          bottom: 20,
+          top: 20,
+          left: 20,
+          right: 20,
+          background: "#222222",
+        })
+        .png()
+        .toBuffer()
+        .then(buf => buf.toString("base64"))}`
+    : favIconPngUrl;
+
+  const erudaStr =
+    process.env["LEMMY_UI_DEBUG"] === "true"
+      ? renderToString(
+          <>
+            <script src="//cdn.jsdelivr.net/npm/eruda"></script>
+            <script>eruda.init();</script>
+          </>
+        )
+      : "";
+
+  const helmet = Helmet.renderStatic();
+
+  const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
+
+  return `
+    <!DOCTYPE html>
+    <html ${helmet.htmlAttributes.toString()}>
+    <head>
+    <script>window.isoData = ${serialize(isoData)}</script>
+    <script>window.lemmyConfig = ${serialize(config)}</script>
+  
+    <!-- A remote debugging utility for mobile -->
+    ${erudaStr}
+  
+    <!-- Custom injected script -->
+    ${customHtmlHeader}
+  
+    ${helmet.title.toString()}
+    ${helmet.meta.toString()}
+  
+    <!-- Required meta tags -->
+    <meta name="Description" content="Lemmy">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
+    <link
+       id="favicon"
+       rel="shortcut icon"
+       type="image/x-icon"
+       href=${site?.site_view.site.icon ?? favIconUrl}
+     />
+  
+    <!-- Web app manifest -->
+    ${
+      site &&
+      `<link
+          rel="manifest"
+          href=${`data:application/manifest+json;base64,${await generateManifestBase64(
+            site
+          )}`}
+        />`
+    }
+    <link rel="apple-touch-icon" href=${appleTouchIcon} />
+    <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
+  
+    <!-- Styles -->
+    <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
+  
+    <!-- Current theme and more -->
+    ${helmet.link.toString()}
+    
+    </head>
+  
+    <body ${helmet.bodyAttributes.toString()}>
+      <noscript>
+        <div class="alert alert-danger rounded-0" role="alert">
+          <b>Javascript is disabled. Actions will not work.</b>
+        </div>
+      </noscript>
+  
+      <div id='root'>${root}</div>
+      <script defer src='/static/js/client.js'></script>
+    </body>
+  </html>
+  `;
+}

diff --git a/src/server/utils/fetch-icon-png.ts b/src/server/utils/fetch-icon-png.ts
new file mode 100644 (file)
index 0000000..12b09e7
--- /dev/null
+++ b/src/server/utils/fetch-icon-png.ts
@@ -0,0 +1,5 @@
+export async function fetchIconPng(iconUrl: string) {
+  return await fetch(iconUrl)
+    .then(res => res.blob())
+    .then(blob => blob.arrayBuffer());
+}

diff --git a/src/server/utils/generate-manifest-base64.ts b/src/server/utils/generate-manifest-base64.ts
new file mode 100644 (file)
index 0000000..e89b155
--- /dev/null
+++ b/src/server/utils/generate-manifest-base64.ts
@@ -0,0 +1,107 @@
+import { readFile } from "fs/promises";
+import { GetSiteResponse } from "lemmy-js-client";
+import path from "path";
+import sharp from "sharp";
+import { getHttpBaseExternal } from "../../shared/env";
+import { fetchIconPng } from "./fetch-icon-png";
+
+const iconSizes = [72, 96, 144, 192, 512];
+
+const defaultLogoPathDirectory = path.join(
+  process.cwd(),
+  "dist",
+  "assets",
+  "icons"
+);
+
+export async function generateManifestBase64({
+  my_user,
+  site_view: {
+    site,
+    local_site: { community_creation_admin_only },
+  },
+}: GetSiteResponse) {
+  const url = getHttpBaseExternal();
+
+  const icon = site.icon ? await fetchIconPng(site.icon) : null;
+
+  const manifest = {
+    name: site.name,
+    description: site.description ?? "A link aggregator for the fediverse",
+    start_url: url,
+    scope: url,
+    display: "standalone",
+    id: "/",
+    background_color: "#222222",
+    theme_color: "#222222",
+    icons: await Promise.all(
+      iconSizes.map(async size => {
+        let src = await readFile(
+          path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
+        ).then(buf => buf.toString("base64"));
+
+        if (icon) {
+          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",
+        short_name: "Search",
+        description: "Perform a search.",
+        url: "/search",
+      },
+      {
+        name: "Communities",
+        url: "/communities",
+        short_name: "Communities",
+        description: "Browse communities",
+      },
+    ]
+      .concat(
+        my_user
+          ? [
+              {
+                name: "Create Post",
+                url: "/create_post",
+                short_name: "Create Post",
+                description: "Create a post.",
+              },
+            ]
+          : []
+      )
+      .concat(
+        my_user?.local_user_view.person.admin || !community_creation_admin_only
+          ? [
+              {
+                name: "Create Community",
+                url: "/create_community",
+                short_name: "Create Community",
+                description: "Create a community",
+              },
+            ]
+          : []
+      ),
+    related_applications: [
+      {
+        platform: "f-droid",
+        url: "https://f-droid.org/packages/com.jerboa/",
+        id: "com.jerboa",
+      },
+    ],
+  };
+
+  return Buffer.from(JSON.stringify(manifest)).toString("base64");
+}

diff --git a/src/server/utils/get-error-page-data.ts b/src/server/utils/get-error-page-data.ts
new file mode 100644 (file)
index 0000000..3c82372
--- /dev/null
+++ b/src/server/utils/get-error-page-data.ts
@@ -0,0 +1,20 @@
+import { GetSiteResponse } from "lemmy-js-client";
+import { ErrorPageData } from "../../shared/utils";
+
+export function getErrorPageData(error: Error, site?: GetSiteResponse) {
+  const errorPageData: ErrorPageData = {};
+
+  if (site) {
+    errorPageData.error = error.message;
+  }
+
+  const adminMatrixIds = site?.admins
+    .map(({ person: { matrix_user_id } }) => matrix_user_id)
+    .filter(id => id) as string[] | undefined;
+
+  if (adminMatrixIds && adminMatrixIds.length > 0) {
+    errorPageData.adminMatrixIds = adminMatrixIds;
+  }
+
+  return errorPageData;
+}

diff --git a/src/server/utils/set-forwarded-headers.ts b/src/server/utils/set-forwarded-headers.ts
new file mode 100644 (file)
index 0000000..386bd7d
--- /dev/null
+++ b/src/server/utils/set-forwarded-headers.ts
@@ -0,0 +1,25 @@
+import { IncomingHttpHeaders } from "http";
+
+export function setForwardedHeaders(headers: IncomingHttpHeaders): {
+  [key: string]: string;
+} {
+  const out: { [key: string]: string } = {};
+
+  if (headers.host) {
+    out.host = headers.host;
+  }
+
+  const realIp = headers["x-real-ip"];
+
+  if (realIp) {
+    out["x-real-ip"] = realIp as string;
+  }
+
+  const forwardedFor = headers["x-forwarded-for"];
+
+  if (forwardedFor) {
+    out["x-forwarded-for"] = forwardedFor as string;
+  }
+
+  return out;
+}

diff --git a/src/shared/components/common/banner-icon-header.tsx b/src/shared/components/common/banner-icon-header.tsx
index 1df23befe9282363c7727125c2d708582f1f8d5b..7028ef4f38d4871c0a4300f958fa1a3543f1af61 100644 (file)
--- a/src/shared/components/common/banner-icon-header.tsx
+++ b/src/shared/components/common/banner-icon-header.tsx
@@ -15,17 +15,19 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
     const banner = this.props.banner;
     const icon = this.props.icon;
     return (
-      <div className="position-relative mb-2">
-        {banner && <PictrsImage src={banner} banner alt="" />}
-        {icon && (
-          <PictrsImage
-            src={icon}
-            iconOverlay
-            pushup={!!this.props.banner}
-            alt=""
-          />
-        )}
-      </div>
+      (banner || icon) && (
+        <div className="position-relative mb-2">
+          {banner && <PictrsImage src={banner} banner alt="" />}
+          {icon && (
+            <PictrsImage
+              src={icon}
+              iconOverlay
+              pushup={!!this.props.banner}
+              alt=""
+            />
+          )}
+        </div>
+      )
     );
   }
 }

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 54378f340fc4552f1dbd517c2bde9a8cdc01d7dd..39753c48e698ee53f4729d827297815fa352edbe 100644 (file)
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -443,16 +443,17 @@ export class Home extends Component<any, HomeState> {
               admins={admins}
               counts={counts}
               showLocal={showLocal(this.isoData)}
+              isMobile={true}
             />
           )}
           {showTrendingMobile && (
-            <div className="col-12 card border-secondary mb-3">
-              <div className="card-body">{this.trendingCommunities(true)}</div>
+            <div className="card border-secondary mb-3">
+              {this.trendingCommunities()}
             </div>
           )}
           {showSubscribedMobile && (
-            <div className="col-12 card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
+            <div className="card border-secondary mb-3">
+              {this.subscribedCommunities(true)}
             </div>
           )}
         </div>
@@ -471,19 +472,7 @@ export class Home extends Component<any, HomeState> {
     return (
       <div id="sidebarContainer">
         <section id="sidebarMain" className="card border-secondary mb-3">
-          <div className="card-body">
-            {this.trendingCommunities()}
-            {canCreateCommunity(this.state.siteRes) && (
-              <LinkButton
-                path="/create_community"
-                translationKey="create_a_community"
-              />
-            )}
-            <LinkButton
-              path="/communities"
-              translationKey="explore_communities"
-            />
-          </div>
+          {this.trendingCommunities()}
         </section>
         <SiteSidebar
           site={site}
@@ -492,18 +481,20 @@ export class Home extends Component<any, HomeState> {
           showLocal={showLocal(this.isoData)}
         />
         {this.hasFollows && (
-          <section
-            id="sidebarSubscribed"
-            className="card border-secondary mb-3"
-          >
-            <div className="card-body">{this.subscribedCommunities}</div>
-          </section>
+          <div className="accordion">
+            <section
+              id="sidebarSubscribed"
+              className="card border-secondary mb-3"
+            >
+              {this.subscribedCommunities(false)}
+            </section>
+          </div>
         )}
       </div>
     );
   }
 
-  trendingCommunities(isMobile = false) {
+  trendingCommunities() {
     switch (this.state.trendingCommunitiesRes?.state) {
       case "loading":
         return (
@@ -514,68 +505,103 @@ export class Home extends Component<any, HomeState> {
       case "success": {
         const trending = this.state.trendingCommunitiesRes.data.communities;
         return (
-          <div className={!isMobile ? "mb-2" : ""}>
-            <h5>
-              <T i18nKey="trending_communities">
-                #
-                <Link className="text-body" to="/communities">
+          <>
+            <header className="card-header d-flex align-items-center">
+              <h5 className="mb-0">
+                <T i18nKey="trending_communities">
                   #
-                </Link>
-              </T>
-            </h5>
-            <ul className="list-inline mb-0">
-              {trending.map(cv => (
-                <li
-                  key={cv.community.id}
-                  className="list-inline-item d-inline-block"
-                >
-                  <CommunityLink community={cv.community} />
-                </li>
-              ))}
-            </ul>
-          </div>
+                  <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>
+          </>
         );
       }
     }
   }
 
-  get subscribedCommunities() {
+  subscribedCommunities(isMobile = false) {
     const { subscribedCollapsed } = this.state;
 
     return (
-      <div>
-        <h5>
-          <T class="d-inline" i18nKey="subscribed_to_communities">
-            #
-            <Link className="text-body" to="/communities">
+      <>
+        <header
+          className="card-header d-flex align-items-center"
+          id="sidebarSubscribedHeader"
+        >
+          <h5 className="mb-0 d-inline">
+            <T class="d-inline" i18nKey="subscribed_to_communities">
               #
-            </Link>
-          </T>
-          <button
-            className="btn btn-sm text-muted"
-            onClick={linkEvent(this, this.handleCollapseSubscribe)}
-            aria-label={i18n.t("collapse")}
-            data-tippy-content={i18n.t("collapse")}
-          >
-            <Icon
-              icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
-              classes="icon-inline"
-            />
-          </button>
-        </h5>
-        {!subscribedCollapsed && (
-          <ul className="list-inline mb-0">
-            {UserService.Instance.myUserInfo?.follows.map(cfv => (
-              <li
-                key={cfv.community.id}
-                className="list-inline-item d-inline-block"
-              >
-                <CommunityLink community={cfv.community} />
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
+              <Link className="text-body" to="/communities">
+                #
+              </Link>
+            </T>
+          </h5>
+          {!isMobile && (
+            <button
+              type="button"
+              className="btn btn-sm text-muted"
+              onClick={linkEvent(this, this.handleCollapseSubscribe)}
+              aria-label={
+                subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+              }
+              data-tippy-content={
+                subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+              }
+              data-bs-toggle="collapse"
+              data-bs-target="#sidebarSubscribedBody"
+              aria-expanded="true"
+              aria-controls="sidebarSubscribedBody"
+            >
+              <Icon
+                icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
+                classes="icon-inline"
+              />
+            </button>
+          )}
+        </header>
+        <div
+          id="sidebarSubscribedBody"
+          className="collapse show"
+          aria-labelledby="sidebarSubscribedHeader"
+        >
+          <div className="card-body">
+            <ul className="list-inline mb-0">
+              {UserService.Instance.myUserInfo?.follows.map(cfv => (
+                <li
+                  key={cfv.community.id}
+                  className="list-inline-item d-inline-block"
+                >
+                  <CommunityLink community={cfv.community} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </>
     );
   }
 

diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index 192393db98bee758eaab96cdc050ff13936d87df..c7306950b515df029f8dde68fb3e6d43a33e74bb 100644 (file)
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -298,27 +298,22 @@ export class Signup extends Component<any, State> {
           </>
         )}
         {this.renderCaptcha()}
-        {siteView.local_site.enable_nsfw && (
-          <div className="form-group row">
-            <div className="col-sm-10">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="register-show-nsfw"
-                  type="checkbox"
-                  checked={this.state.form.show_nsfw}
-                  onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="register-show-nsfw"
-                >
-                  {i18n.t("show_nsfw")}
-                </label>
-              </div>
+        <div className="form-group row">
+          <div className="col-sm-10">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="register-show-nsfw"
+                type="checkbox"
+                checked={this.state.form.show_nsfw}
+                onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
+              />
+              <label className="form-check-label" htmlFor="register-show-nsfw">
+                {i18n.t("show_nsfw")}
+              </label>
             </div>
           </div>
-        )}
+        </div>
         <input
           tabIndex={-1}
           autoComplete="false"

diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 66a48ca11e095ec909343a4ba94a170c9eb3baca..cc587bfbdba259624b6d52bbf6211a2a82b81e33 100644 (file)
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -12,6 +12,7 @@ interface SiteSidebarProps {
   showLocal: boolean;
   counts?: SiteAggregates;
   admins?: PersonView[];
+  isMobile?: boolean;
 }
 
 interface SiteSidebarState {
@@ -29,39 +30,58 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <section id="sidebarInfo" className="card border-secondary mb-3">
-        <div className="card-body">
-          <div>
-            <div className="mb-2">{this.siteName()}</div>
+      <div className="accordion">
+        <section id="sidebarInfo" className="card border-secondary mb-3">
+          <header
+            className="card-header d-flex align-items-center"
+            id="sidebarInfoHeader"
+          >
+            {this.siteName()}
             {!this.state.collapsed && (
-              <>
-                <BannerIconHeader banner={this.props.site.banner} />
-                {this.siteInfo()}
-              </>
+              <BannerIconHeader banner={this.props.site.banner} />
             )}
+          </header>
+
+          <div
+            id="sidebarInfoBody"
+            className="collapse show"
+            aria-labelledby="sidebarInfoHeader"
+          >
+            <div className="card-body">{this.siteInfo()}</div>
           </div>
-        </div>
-      </section>
+        </section>
+      </div>
     );
   }
 
   siteName() {
     return (
-      <h5 className="mb-0 d-inline">
-        {this.props.site.name}
-        <button
-          className="btn btn-sm text-muted"
-          onClick={linkEvent(this, this.handleCollapseSidebar)}
-          aria-label={i18n.t("collapse")}
-          data-tippy-content={i18n.t("collapse")}
-        >
-          {this.state.collapsed ? (
-            <Icon icon="plus-square" classes="icon-inline" />
-          ) : (
-            <Icon icon="minus-square" classes="icon-inline" />
-          )}
-        </button>
-      </h5>
+      <>
+        <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
+        {!this.props.isMobile && (
+          <button
+            type="button"
+            className="btn btn-sm"
+            onClick={linkEvent(this, this.handleCollapseSidebar)}
+            aria-label={
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-tippy-content={
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-bs-toggle="collapse"
+            data-bs-target="#sidebarInfoBody"
+            aria-expanded="true"
+            aria-controls="sidebarInfoBody"
+          >
+            {this.state.collapsed ? (
+              <Icon icon="plus-square" classes="icon-inline" />
+            ) : (
+              <Icon icon="minus-square" classes="icon-inline" />
+            )}
+          </button>
+        )}
+      </>
     );
   }
 

diff --git a/src/shared/components/person/person-listing.tsx b/src/shared/components/person/person-listing.tsx
index fe8b8418628e2ca191a7d23ea9b415304cec8722..045633c7957f098cc7f54a51c99190d92c569d2d 100644 (file)
--- a/src/shared/components/person/person-listing.tsx
+++ b/src/shared/components/person/person-listing.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Component } from "inferno";
 import { Link } from "inferno-router";
 import { Person } from "lemmy-js-client";
@@ -48,7 +49,10 @@ export class PersonListing extends Component<PersonListingProps, any> {
         {!this.props.realLink ? (
           <Link
             title={apubName}
-            className={this.props.muted ? "text-muted" : "text-info"}
+            className={classNames("d-inline-flex align-items-baseline", {
+              "text-muted": this.props.muted,
+              "text-info": !this.props.muted,
+            })}
             to={link}
           >
             {this.avatarAndName(displayName)}
@@ -56,7 +60,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
         ) : (
           <a
             title={apubName}
-            className={this.props.muted ? "text-muted" : "text-info"}
+            className={`d-inline-flex align-items-baseline ${
+              this.props.muted ? "text-muted" : "text-info"
+            }`}
             href={link}
             rel={relTags}
           >

diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 3c8e9fcdd743444b24ace411615d5aa7746d208c..971ec8911a63d9915c5abcd1f791d17e5a4ca434 100644 (file)
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -20,7 +20,6 @@ import {
   communityToChoice,
   elementUrl,
   emDash,
-  enableNsfw,
   fetchCommunities,
   fetchThemeList,
   fetchUsers,
@@ -642,22 +641,20 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </form>
-          {enableNsfw(this.state.siteRes) && (
-            <div className="form-group">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="user-show-nsfw"
-                  type="checkbox"
-                  checked={this.state.saveUserSettingsForm.show_nsfw}
-                  onChange={linkEvent(this, this.handleShowNsfwChange)}
-                />
-                <label className="form-check-label" htmlFor="user-show-nsfw">
-                  {i18n.t("show_nsfw")}
-                </label>
-              </div>
+          <div className="form-group">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="user-show-nsfw"
+                type="checkbox"
+                checked={this.state.saveUserSettingsForm.show_nsfw}
+                onChange={linkEvent(this, this.handleShowNsfwChange)}
+              />
+              <label className="form-check-label" htmlFor="user-show-nsfw">
+                {i18n.t("show_nsfw")}
+              </label>
             </div>
-          )}
+          </div>
           <div className="form-group">
             <div className="form-check">
               <input

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index a95599b258e74c5fd480ce1fa418d28a0078662c..922fa61efbb72c23508d7e3f80168ecd02dd0365 100644 (file)
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -201,7 +201,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="post-listing">
+      <div className="post-listing mt-2">
         {!this.state.showEdit ? (
           <>
             {this.listing()}
@@ -386,10 +386,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             </span>
           )}
           {this.props.showCommunity && (
-            <span>
-              <span className="mx-1"> {i18n.t("to")} </span>
-              <CommunityLink community={post_view.community} />
-            </span>
+            <>
+              {" "}
+              {i18n.t("to")} <CommunityLink community={post_view.community} />
+            </>
           )}
         </li>
         {post_view.post.language_id !== 0 && (
@@ -497,7 +497,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
     return (
       <Link
-        className={`d-inline-block ${
+        className={`d-inline ${
           !post.featured_community && !post.featured_local
             ? "text-body"
             : "text-primary"
@@ -505,8 +505,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         to={`/post/${post.id}`}
         title={i18n.t("comments")}
       >
-        <div
-          className="d-inline-block"
+        <span
+          className="d-inline"
           dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
         />
       </Link>
@@ -519,88 +519,78 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     return (
       <div className="post-title overflow-hidden">
-        <h5>
-          {url ? (
-            this.props.showBody ? (
-              <a
-                className={`d-inline-block ${
-                  !post.featured_community && !post.featured_local
-                    ? "text-body"
-                    : "text-primary"
-                }`}
-                href={url}
-                title={url}
-                rel={relTags}
-              >
-                <div
-                  className="d-inline-block"
-                  dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
-                />
-              </a>
-            ) : (
-              this.postLink
-            )
+        <h5 className="d-inline">
+          {url && this.props.showBody ? (
+            <a
+              className={
+                !post.featured_community && !post.featured_local
+                  ? "text-body"
+                  : "text-primary"
+              }
+              href={url}
+              title={url}
+              rel={relTags}
+              dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
+            ></a>
           ) : (
             this.postLink
           )}
-          {(url && isImage(url)) ||
-            (post.thumbnail_url && (
-              <button
-                className="btn btn-link text-monospace text-muted small d-inline-block"
-                data-tippy-content={i18n.t("expand_here")}
-                onClick={linkEvent(this, this.handleImageExpandClick)}
-              >
-                <Icon
-                  icon={
-                    !this.state.imageExpanded ? "plus-square" : "minus-square"
-                  }
-                  classes="icon-inline"
-                />
-              </button>
-            ))}
-          {post.removed && (
-            <small className="ml-2 text-muted font-italic">
-              {i18n.t("removed")}
-            </small>
-          )}
-          {post.deleted && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("deleted")}
-            >
-              <Icon icon="trash" classes="icon-inline text-danger" />
-            </small>
-          )}
-          {post.locked && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("locked")}
-            >
-              <Icon icon="lock" classes="icon-inline text-danger" />
-            </small>
-          )}
-          {post.featured_community && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("featured")}
-            >
-              <Icon icon="pin" classes="icon-inline text-primary" />
-            </small>
-          )}
-          {post.featured_local && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("featured")}
-            >
-              <Icon icon="pin" classes="icon-inline text-secondary" />
-            </small>
-          )}
-          {post.nsfw && (
-            <small className="ml-2 text-muted font-italic">
-              {i18n.t("nsfw")}
-            </small>
-          )}
         </h5>
+        {(url && isImage(url)) ||
+          (post.thumbnail_url && (
+            <button
+              className="btn btn-link text-monospace text-muted small d-inline-block"
+              data-tippy-content={i18n.t("expand_here")}
+              onClick={linkEvent(this, this.handleImageExpandClick)}
+            >
+              <Icon
+                icon={
+                  !this.state.imageExpanded ? "plus-square" : "minus-square"
+                }
+                classes="icon-inline"
+              />
+            </button>
+          ))}
+        {post.removed && (
+          <small className="ml-2 badge text-bg-secondary">
+            {i18n.t("removed")}
+          </small>
+        )}
+        {post.deleted && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("deleted")}
+          >
+            <Icon icon="trash" classes="icon-inline text-danger" />
+          </small>
+        )}
+        {post.locked && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("locked")}
+          >
+            <Icon icon="lock" classes="icon-inline text-danger" />
+          </small>
+        )}
+        {post.featured_community && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("featured")}
+          >
+            <Icon icon="pin" classes="icon-inline text-primary" />
+          </small>
+        )}
+        {post.featured_local && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("featured")}
+          >
+            <Icon icon="pin" classes="icon-inline text-secondary" />
+          </small>
+        )}
+        {post.nsfw && (
+          <small className="ml-2 badge text-bg-danger">{i18n.t("nsfw")}</small>
+        )}
       </div>
     );
   }
@@ -631,11 +621,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold mb-1">
+      <div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold">
         {this.commentsButton}
         {canShare() && (
           <button
-            className="btn btn-link"
+            className="btn btn-sm btn-link"
             onClick={linkEvent(this, this.handleShare)}
             type="button"
           >
@@ -654,12 +644,23 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {mobile && !this.props.viewOnly && this.mobileVotes}
         {UserService.Instance.myUserInfo &&
           !this.props.viewOnly &&
-          this.postActions(mobile)}
+          this.postActions()}
       </div>
     );
   }
 
-  postActions(mobile = false) {
+  get hasAdvancedButtons() {
+    return (
+      this.myPost ||
+      (this.showBody && this.postView.post.body) ||
+      amMod(this.props.moderators) ||
+      amAdmin() ||
+      this.canMod_ ||
+      this.canAdmin_
+    );
+  }
+
+  postActions() {
     // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
     // Possible enhancement: Make each button a component.
     const post_view = this.postView;
@@ -667,37 +668,53 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <>
         {this.saveButton}
         {this.crossPostButton}
-        {mobile && this.showMoreButton}
-        {(!mobile || this.state.showAdvanced) && (
-          <>
-            {!this.myPost && (
-              <>
-                {this.reportButton}
-                {this.blockButton}
-              </>
-            )}
-            {this.myPost && (this.showBody || this.state.showAdvanced) && (
-              <>
-                {this.editButton}
-                {this.deleteButton}
-              </>
-            )}
-          </>
-        )}
-        {this.state.showAdvanced && (
-          <>
-            {this.showBody && post_view.post.body && this.viewSourceButton}
-            {/* Any mod can do these, not limited to hierarchy*/}
-            {(amMod(this.props.moderators) || amAdmin()) && (
-              <>
-                {this.lockButton}
-                {this.featureButton}
-              </>
-            )}
-            {(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
-          </>
+
+        {this.showBody && post_view.post.body && this.viewSourceButton}
+
+        {this.hasAdvancedButtons && (
+          <div className="dropdown">
+            <button
+              className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
+              onClick={linkEvent(this, this.handleShowAdvanced)}
+              data-tippy-content={i18n.t("more")}
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+              aria-controls="advancedButtonsDropdown"
+              aria-label={i18n.t("more")}
+            >
+              <Icon icon="more-vertical" inline />
+            </button>
+
+            <ul className="dropdown-menu" id="advancedButtonsDropdown">
+              {!this.myPost ? (
+                <>
+                  <li>{this.reportButton}</li>
+                  <li>{this.blockButton}</li>
+                </>
+              ) : (
+                <>
+                  <li>{this.editButton}</li>
+                  <li>{this.deleteButton}</li>
+                </>
+              )}
+
+              {/* Any mod can do these, not limited to hierarchy*/}
+              {(amMod(this.props.moderators) || amAdmin()) && (
+                <>
+                  <li>
+                    <hr className="dropdown-divider" />
+                  </li>
+                  <li>{this.lockButton}</li>
+                  {this.featureButtons}
+                </>
+              )}
+
+              {(this.canMod_ || this.canAdmin_) && (
+                <li>{this.modRemoveButton}</li>
+              )}
+            </ul>
+          </div>
         )}
-        {!mobile && this.showMoreButton}
       </>
     );
   }
@@ -706,7 +723,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <Link
-        className="btn btn-link text-muted py-0 pl-0 text-muted"
+        className="btn btn-link text-muted pl-0 text-muted"
         title={i18n.t("number_of_comments", {
           count: Number(post_view.counts.comments),
           formattedCount: Number(post_view.counts.comments),
@@ -846,12 +863,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get reportButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleShowReportDialog)}
-        data-tippy-content={i18n.t("show_report_dialog")}
         aria-label={i18n.t("show_report_dialog")}
       >
-        <Icon icon="flag" inline />
+        <Icon classes="mr-1" icon="flag" inline />
+        {i18n.t("create_report")}
       </button>
     );
   }
@@ -859,12 +876,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get blockButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleBlockPersonClick)}
-        data-tippy-content={i18n.t("block_user")}
         aria-label={i18n.t("block_user")}
       >
-        {this.state.blockLoading ? <Spinner /> : <Icon icon="slash" inline />}
+        {this.state.blockLoading ? (
+          <Spinner />
+        ) : (
+          <Icon classes="mr-1" icon="slash" inline />
+        )}
+        {i18n.t("block_user")}
       </button>
     );
   }
@@ -872,12 +893,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get editButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleEditClick)}
-        data-tippy-content={i18n.t("edit")}
         aria-label={i18n.t("edit")}
       >
-        <Icon icon="edit" inline />
+        <Icon classes="mr-1" icon="edit" inline />
+        {i18n.t("edit")}
       </button>
     );
   }
@@ -887,37 +908,26 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = !deleted ? i18n.t("delete") : i18n.t("restore");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleDeleteClick)}
-        data-tippy-content={label}
         aria-label={label}
       >
         {this.state.deleteLoading ? (
           <Spinner />
         ) : (
-          <Icon
-            icon="trash"
-            classes={classNames({ "text-danger": deleted })}
-            inline
-          />
+          <>
+            <Icon
+              icon="trash"
+              classes={classNames("mr-1", { "text-danger": deleted })}
+              inline
+            />
+            {label}
+          </>
         )}
       </button>
     );
   }
 
-  get showMoreButton() {
-    return (
-      <button
-        className="btn btn-link btn-animate text-muted py-0"
-        onClick={linkEvent(this, this.handleShowAdvanced)}
-        data-tippy-content={i18n.t("more")}
-        aria-label={i18n.t("more")}
-      >
-        <Icon icon="more-vertical" inline />
-      </button>
-    );
-  }
-
   get viewSourceButton() {
     return (
       <button
@@ -940,25 +950,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = locked ? i18n.t("unlock") : i18n.t("lock");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleModLock)}
-        data-tippy-content={label}
         aria-label={label}
       >
         {this.state.lockLoading ? (
           <Spinner />
         ) : (
-          <Icon
-            icon="lock"
-            classes={classNames({ "text-danger": locked })}
-            inline
-          />
+          <>
+            <Icon
+              icon="lock"
+              classes={classNames("mr-1", { "text-danger": locked })}
+              inline
+            />
+            {label}
+          </>
         )}
       </button>
     );
   }
 
-  get featureButton() {
+  get featureButtons() {
     const featuredCommunity = this.postView.post.featured_community;
     const labelCommunity = featuredCommunity
       ? i18n.t("unfeature_from_community")
@@ -969,48 +981,56 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       ? i18n.t("unfeature_from_local")
       : i18n.t("feature_in_local");
     return (
-      <span>
-        <button
-          className="btn btn-link btn-animate text-muted py-0 pl-0"
-          onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
-          data-tippy-content={labelCommunity}
-          aria-label={labelCommunity}
-        >
-          {this.state.featureCommunityLoading ? (
-            <Spinner />
-          ) : (
-            <span>
-              <Icon
-                icon="pin"
-                classes={classNames({ "text-success": featuredCommunity })}
-                inline
-              />
-              {i18n.t("community")}
-            </span>
-          )}
-        </button>
-        {amAdmin() && (
+      <>
+        <li>
           <button
-            className="btn btn-link btn-animate text-muted py-0"
-            onClick={linkEvent(this, this.handleModFeaturePostLocal)}
-            data-tippy-content={labelLocal}
-            aria-label={labelLocal}
+            className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+            onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
+            data-tippy-content={labelCommunity}
+            aria-label={labelCommunity}
           >
-            {this.state.featureLocalLoading ? (
+            {this.state.featureCommunityLoading ? (
               <Spinner />
             ) : (
-              <span>
+              <>
                 <Icon
                   icon="pin"
-                  classes={classNames({ "text-success": featuredLocal })}
+                  classes={classNames("mr-1", {
+                    "text-success": featuredCommunity,
+                  })}
                   inline
                 />
-                {i18n.t("local")}
-              </span>
+                {i18n.t("community")}
+              </>
             )}
           </button>
-        )}
-      </span>
+        </li>
+        <li>
+          {amAdmin() && (
+            <button
+              className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
+              onClick={linkEvent(this, this.handleModFeaturePostLocal)}
+              data-tippy-content={labelLocal}
+              aria-label={labelLocal}
+            >
+              {this.state.featureLocalLoading ? (
+                <Spinner />
+              ) : (
+                <>
+                  <Icon
+                    icon="pin"
+                    classes={classNames("mr-1", {
+                      "text-success": featuredLocal,
+                    })}
+                    inline
+                  />
+                  {i18n.t("local")}
+                </>
+              )}
+            </button>
+          )}
+        </li>
+      </>
     );
   }
 
@@ -1018,7 +1038,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const removed = this.postView.post.removed;
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(
           this,
           !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit

diff --git a/src/shared/components/post/post-listings.tsx b/src/shared/components/post/post-listings.tsx
index 00370f039bfea8b104d206e1fcf497e27e400501..e6c7e5f68957cb37ca5a5bafb1e6fb8927c7c584 100644 (file)
--- a/src/shared/components/post/post-listings.tsx
+++ b/src/shared/components/post/post-listings.tsx
@@ -96,9 +96,7 @@ export class PostListings extends Component<PostListingsProps, any> {
                 onAddAdmin={this.props.onAddAdmin}
                 onTransferCommunity={this.props.onTransferCommunity}
               />
-              {idx + 1 !== this.posts.length && (
-                <hr className="my-3 border border-primary" />
-              )}
+              {idx + 1 !== this.posts.length && <hr className="my-3" />}
             </>
           ))
         ) : (

diff --git a/yarn.lock b/yarn.lock
index 7cd6447438f39b8c4f0dcfbe67541aab44abf06d..cd5bb4e1bc78e2ee219e652d8552875b79d7719f 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -1202,6 +1202,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.20.7":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
+  integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.21.9":
   version "7.21.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.21.9.tgz#bf8dad2859130ae46088a99c1f265394877446fb"
@@ -2159,6 +2166,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-query@^5.1.3:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.2.1.tgz#bc285d9d654d1df121bcd0c134880d415ca67c15"
+  integrity sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==
+  dependencies:
+    dequal "^2.0.3"
+
 array-buffer-byte-length@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
@@ -2177,7 +2191,7 @@ array-flatten@^2.1.2:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
-array-includes@^3.1.5:
+array-includes@^3.1.5, array-includes@^3.1.6:
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
   integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
@@ -2205,6 +2219,16 @@ array-uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
+array.prototype.flatmap@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
+  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
 array.prototype.reduce@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz#6b20b0daa9d9734dd6bc7ea66b5bbce395471eac"
@@ -2244,6 +2268,11 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
 
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -2284,6 +2313,18 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
   integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
+axe-core@^4.6.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
+  integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
+
+axobject-query@^3.1.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
+  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
+  dependencies:
+    dequal "^2.0.3"
+
 babel-loader@^9.1.2:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
@@ -2446,16 +2487,16 @@ bonjour-service@^1.0.11:
     fast-deep-equal "^3.1.3"
     multicast-dns "^7.2.5"
 
+"bootstrap-v4@npm:bootstrap@^4.6.2":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
+  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+
 bootstrap@^5.2.3:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.0.tgz#0718a7cc29040ee8dbf1bd652b896f3436a87c29"
   integrity sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==
 
-bootswatch@^5.2.3:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-5.3.0.tgz#7c7dd50bbe8519b0c6dbe01f4f9c3100b60228bd"
-  integrity sha512-ga2hHognDrh5h3+CaBBug6ktx3MTlnDzH57s+Mvjt9ZcNxqwpK+m3sE3YIUSr8zf2iG05elOb1mnqqcdbce2ow==
-
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -3152,6 +3193,11 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.2.tgz#673b5f233bf34d8e602b949429f8171d9121bea3"
   integrity sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==
 
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -3319,6 +3365,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 destroy@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
@@ -3696,6 +3747,28 @@ eslint-plugin-inferno@^7.32.2:
     resolve "^2.0.0-next.4"
     semver "^7.3.8"
 
+eslint-plugin-jsx-a11y@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
+  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    aria-query "^5.1.3"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.6.2"
+    axobject-query "^3.1.1"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    has "^1.0.3"
+    jsx-ast-utils "^3.3.3"
+    language-tags "=1.0.5"
+    minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    semver "^6.3.0"
+
 eslint-plugin-prettier@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
@@ -5590,6 +5663,18 @@ klona@^2.0.6:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
+language-subtag-registry@~0.3.2:
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@=1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"