feat!: refactor/rewrite frontend

* switched from scss to tailwindcss
* rewrote all styles
* added support for dark mode (toggle-able via ctrl+,)
* added adfinis ci/cd colour theme (toggle-able via ctrl+.)
* fixed some visual bugs
* a lot more

.github/workflows/frontend.yaml

@@ -28,7 +28,7 @@ jobs:
 
     strategy:
       matrix:
-        target: [js, hbs]
+        target: [js, hbs, css]
 
     steps:
       - uses: actions/checkout@v4

frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

frontend/.stylelintrc.js

@@ -2,9 +2,23 @@
 
 module.exports = {
   plugins: ["stylelint-prettier"],
-  extends: ["stylelint-prettier/recommended", "stylelint-config-standard-scss"],
+  extends: ["stylelint-prettier/recommended", "stylelint-config-standard"],
   rules: {
-    "scss/at-extend-no-missing-placeholder": null,
-    "selector-class-pattern": null,
+    "custom-property-empty-line-before": null, // we use empty lines to group/order properties
+    "at-rule-empty-line-before": ["never", { ignoreAtRules: ["import"] }], // we use empty lines to group/order imports (su)
+    "selector-class-pattern": null, // we can ignore this because most css is styling 3rd party components where we don't control the class names
+    "import-notation": null, // doesn't really work with postcss-import
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: ["apply"], // ignore tailwind decorators
+      },
+    ],
+    "function-no-unknown": [
+      true,
+      {
+        ignoreFunctions: ["theme"], // ignore tailwind functions
+      },
+    ],
   },
 };

frontend/.template-lintrc.js

@@ -1,5 +1,6 @@
 "use strict";
 
 module.exports = {
-  extends: "recommended",
+  plugins: ["ember-template-lint-plugin-prettier"],
+  extends: ["recommended", "ember-template-lint-plugin-prettier:recommended"],
 };

frontend/app/abilities/report.js

@@ -22,7 +22,7 @@ export default class ReportAbility extends Ability {
       (this.model?.taskAssignees ?? [])
         .concat(
           this.model?.projectAssignees ?? [],
-          this.model?.customerAssignees ?? []
+          this.model?.customerAssignees ?? [],
         )
         .filter((a) => a?.user)
         .map((a) => a.user.get("id"))

frontend/app/analysis/edit/controller.js

@@ -103,7 +103,7 @@ export default class AnalysisEditController extends Controller {
       })}`,
       {
         method: "GET",
-      }
+      },
     );
 
     yield this.store.pushPayload("report-intersection", res);
@@ -252,9 +252,9 @@ export default class AnalysisEditController extends Controller {
       underscoreQueryParams(
         serializeQueryParams(
           filterQueryParams(params, "editable"),
-          queryParamsState(this)
-        )
-      )
+          queryParamsState(this),
+        ),
+      ),
     );
   }
 }