Merge remote-tracking branch 'origin/main' into fix/fix-tab-semantics…

…-a11y

* origin/main: (47 commits)
  Fix mobile navbar bug (LemmyNet#1428)
  feat: Hide 'comments' in post listing comments button; icon and title text is clear
  feat: Drop dependency for tsconfig-paths-webpack-plugin
  fix main.css vars (LemmyNet#1424)
  forgot an import
  add tsconfigpathsplugin to resolve
  component classes v2
  make suggested changes
  v0.18.0-rc.3
  make suggested changes
  v0.18.0-beta.9
  feat: Bootstrap 5 (LemmyNet#1378)
  Add scripts to make managing translations easier (LemmyNet#1414)
  Fix redirect after successful password reset
  fix: Shrink and normalize some post action button colors and sizes
  update imports
  export default everything, will fix type errors next
  fix missing imports
  fix: Litely Red was importing the wrong vars
  fix: Always show advanced post buttons dropdown
  ...

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0-rc.2",
+  "version": "0.18.0-rc.3",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
@@ -12,11 +12,14 @@
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
     "dev": "yarn start",
-    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
+    "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
     "prepare": "husky install",
     "start": "yarn build:dev --watch",
     "themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
-    "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes"
+    "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
+    "translations:generate": "node generate_translations.js",
+    "translations:init": "git submodule init && yarn translations:update",
+    "translations:update": "git submodule update --remote --recursive"
   },
   "lint-staged": {
     "*.{ts,tsx,js}": [
@@ -103,7 +106,6 @@
     "@types/toastify-js": "^1.11.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "bootstrap-v4": "npm:bootstrap@^4.6.2",
     "eslint": "^8.40.0",
     "eslint-plugin-inferno": "^7.32.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",

src/assets/css/main.css

@@ -21,22 +21,22 @@
 }
 
 .upvote:hover {
-  color: var(--info);
+  color: var(--bs-info);
 }
 
 .upvote {
   margin-bottom: -5px;
 }
 
 .downvote:hover {
-  color: var(--danger);
+  color: var(--bs-danger);
 }
 
 .downvote {
   margin-top: -10px;
 }
 
-.custom-select {
+.form-select {
   -moz-appearance: none;
 }
 
@@ -85,7 +85,7 @@
 }
 
 .post-title a:visited {
-  color: var(--gray) !important;
+  color: var(--bs-gray) !important;
 }
 
 .icon {
@@ -175,7 +175,7 @@
 }
 
 blockquote {
-  border-left: 2px solid var(--secondary);
+  border-left: 2px solid var(--bs-secondary);
   margin: 0.5em 5px;
   padding: 0.1em 5px;
 }
@@ -214,7 +214,7 @@ blockquote {
 }
 
 hr {
-  border-top: 1px solid var(--light);
+  border-top: 1px solid var(--bs-light);
 }
 
 .emoji {
@@ -266,6 +266,14 @@ hr {
   -ms-transform: scale(1.2);
 }
 
+/**
+ * TODO: Fix this in markup rather than this overly specific selector:
+ * https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons
+ */
+.btn.d-block + .btn.d-block {
+  margin-top: 0.5rem;
+}
+
 .mini-overlay {
   position: absolute;
   top: 0;
@@ -363,7 +371,7 @@ br.big {
   margin-top: 2px;
   padding: 0;
   list-style: none;
-  background: var(--light);
+  background: var(--bs-light);
 }
 
 .tribute-container li {
@@ -372,7 +380,7 @@ br.big {
 }
 
 .tribute-container li.highlight {
-  background: var(--primary);
+  background: var(--bs-primary);
 }
 
 .tribute-container li span {
@@ -407,7 +415,7 @@ br.big {
   -webkit-box-orient: vertical;
 }
 
-.emoji-picker {
+#emoji-picker {
   width: 100%;
 }
 

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

@@ -4,10 +4,4 @@ $primary: $blue;
 $secondary: #444;
 $light: $gray-800;
 
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "light": $light,
-);
-
 $link-color: $red;

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

@@ -1,3 +1,5 @@
+@import "./variables";
+
 // Colors
 $white: #fff;
 $gray-200: #ebebeb;
@@ -8,48 +10,21 @@ $gray-700: #444;
 $gray-800: #303030;
 $gray-900: #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: #375a7f;
 $red: #e74c3c;
 $yellow: #f39c12;
 $green: #00bc8c;
 $cyan: #3498db;
 
-// 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;
 $dark: $gray-300;
 
-// 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;
+$border-color: rgba($body-color, 0.25);
 $mark-bg: #333;
 $text-muted: $gray-600;
 $yiq-contrasted-threshold: 175;
@@ -94,7 +69,6 @@ $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;

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

@@ -1,9 +1,4 @@
-@import "variables.darkly";
+@import "variables.litely";
 
 $secondary: #c80000;
 $danger: darken($primary, 24%);
-
-$theme-colors: (
-  "secondary": $secondary,
-  "danger": $danger,
-);

src/assets/css/themes/_variables.litely.scss

@@ -1,58 +1,30 @@
+@import "./variables";
+
 // Colors
 $gray-100: #f8f9fa;
-$gray-200: #e9ecef;
 $gray-600: #6c757d;
 $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
 $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;
 $red: #d8486a;
 $orange: #f1641e;
-$green: #00c853;
+$green: #00a846;
 $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;
 $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;
-$border-color: $gray-700;
+$border-color: rgba($body-color, 0.25);
 $mark-bg: rgb(255, 252, 239);
 $headings-color: $gray-700;
 

src/assets/css/themes/_variables.scss

@@ -0,0 +1,6 @@
+$link-decoration: none;
+$min-contrast-ratio: 3;
+
+$container-max-widths: (
+  lg: 1140px,
+);