Style Organisation

diff --git a/client/App.vue b/client/App.vue
index 11c0ac66f5c99645b9933b508998a0c4db817f7a..09d4e1ea6be49441c4e7fb9d3cbdc739aab31905 100644 (file)
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,6 +1,6 @@
 <template>\r
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">\r
-    <Toast class="ml-[20px]" :pt="toastStyle" position="bottom-right" />\r
+    <Toast position="bottom-right" />\r
     <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />\r
     <RouterView />\r
   </div>\r
@@ -40,12 +40,4 @@ const showNavBar = computed(() => {
 const showNavBarLogo = computed(() => {\r
   return route.name !== "home";\r
 });\r
-\r
-const toastStyle = {\r
-  message: "flex flex-col items-end",\r
-  container:\r
-  "bg-theme-background-elevated border border-theme-border mb-2 px-3 py-2 rounded-lg max-w-96",\r
-  icon: "invisible h-0 w-0",\r
-  summary: "font-bold",\r
-};\r
 </script>\r

diff --git a/client/components/CustomButton.vue b/client/components/CustomButton.vue
index 2a870cbb2339148b3bb8a4caa84955b26f67d439..4cd025f3c129c93e4a41528c265bfbf808bcf6b1 100644 (file)
--- a/client/components/CustomButton.vue
+++ b/client/components/CustomButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="hover:bg-theme-background-hover flex items-center rounded px-2 py-1 text-theme-text-muted"
+    class="hover:bg-theme-background-tint hover:dark:bg-theme-background-elevated flex items-center rounded px-2 py-1 text-theme-text-muted"
   >
     <SvgIcon
       v-if="iconPath"

diff --git a/client/index.js b/client/index.js
index 5c315dc281ad89690f9169248f66c46fbd19d1dc..834a22c991573fe852df764454c2092ea9276881 100644 (file)
--- a/client/index.js
+++ b/client/index.js
@@ -1,8 +1,9 @@
 import App from "/App.vue";\r
 import PrimeVue from "primevue/config";\r
-import ToastService from 'primevue/toastservice';\r
+import ToastService from "primevue/toastservice";\r
 import { createApp } from "vue";\r
 import { createPinia } from "pinia";\r
+import { primeStyles } from "./style.js";\r
 import router from "/router.js";\r
 \r
 const app = createApp(App);\r
@@ -12,6 +13,7 @@ app.use(router);
 app.use(pinia);\r
 app.use(PrimeVue, {\r
   unstyled: true,\r
+  pt: primeStyles,\r
 });\r
 app.use(ToastService);\r
 app.mount("#app");\r

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 2b1cfe9b6a3e35f3e7418f367d41a1e45a6bc16a..778a7d33f9458cb679c5e1d1f0fde38a2aab3826 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -29,7 +29,7 @@ defineProps({
 });\r
 \r
 function toggleTheme() {\r
-  document.body.classList.toggle("dark-theme");\r
+  document.body.classList.toggle("dark");\r
 }\r
 \r
 function logOut() {\r

diff --git a/client/style.css b/client/style.css
index 9320f56f4d5d236fec920a7b36ad64489f69a525..6c0306f8b0f94cc8a654c52ee1dfa3fa39117e85 100644 (file)
--- a/client/style.css
+++ b/client/style.css
@@ -18,7 +18,6 @@
         --theme-background-elevated: 255 255 255;\r
         --theme-background-tint: 243 244 245;\r
         --theme-background-highlight: 239 243 255;\r
-        --theme-background-hover: var(--theme-background-tint);\r
 \r
         --theme-text: 44 49 57;\r
         --theme-text-muted: 136 145 161;\r
@@ -28,14 +27,13 @@
         --theme-border: 236 238 240;\r
     }\r
 \r
-    body.dark-theme {\r
+    body.dark {\r
         /* --theme-brand: 248 166 107; */\r
 \r
         --theme-background: 34 38 44;\r
         --theme-background-elevated: 44 49 57;\r
         --theme-background-tint: 34 38 44;\r
         --theme-background-highlight: 136 145 161;\r
-        --theme-background-hover: var(--theme-background-elevated);\r
 \r
         --theme-text: 193 199 208;\r
         --theme-text-muted: 136 145 161;\r

diff --git a/client/style.js b/client/style.js
new file mode 100644 (file)
index 0000000..d3a8451
--- /dev/null
+++ b/client/style.js
@@ -0,0 +1,17 @@
+export const primeStyles = {
+  toast: {
+    message: "flex flex-col items-end ml-[20px]",
+    container: ({ props }) => ({
+      class: [
+        "mt-2 px-3 py-2 rounded-lg max-w-96",
+        "bg-theme-background-elevated border border-l-2 border-theme-border ",
+        {
+          "border-l-theme-success": props.message.severity == "success",
+          "border-l-theme-failure": props.message.severity == "error",
+        },
+      ],
+    }),
+    icon: "invisible h-0 w-0",
+    summary: "font-bold",
+  },
+};

diff --git a/tailwind.config.js b/tailwind.config.js
index 62814077afdae9a7afbb810262a11c45711f80f7..a5e32514af5b82dd88bff45c04f07a688f5afc76 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,9 @@
 /** @type {import('tailwindcss').Config} */\r
+const colors = require("tailwindcss/colors");\r
 \r
 module.exports = {\r
   content: ["client/**/*.{html,js,vue}"],\r
+  darkMode: "selector",\r
   theme: {\r
     fontFamily: {\r
       sans: ["Poppins", "sans-serif"],\r
@@ -13,6 +15,7 @@ module.exports = {
     },\r
     extend: {\r
       colors: {\r
+        // Dynamic\r
         "theme-brand": "rgb(var(--theme-brand) / <alpha-value>)",\r
         "theme-background": "rgb(var(--theme-background) / <alpha-value>)",\r
         "theme-background-elevated":\r
@@ -21,14 +24,15 @@ module.exports = {
           "rgb(var(--theme-background-tint) / <alpha-value>)",\r
         "theme-background-highlight":\r
           "rgb(var(--theme-background-highlight) / <alpha-value>)",\r
-        "theme-background-hover":\r
-          "rgb(var(--theme-background-hover) / <alpha-value>)",\r
         "theme-text": "rgb(var(--theme-text) / <alpha-value>)",\r
         "theme-text-muted": "rgb(var(--theme-text-muted) / <alpha-value>)",\r
         "theme-text-very-muted":\r
           "rgb(var(--theme-text-very-muted) / <alpha-value>)",\r
         "theme-shadow": "rgb(var(--theme-shadow) / <alpha-value>)",\r
         "theme-border": "rgb(var(--theme-border) / <alpha-value>)",\r
+        // Static\r
+        "theme-success": colors.emerald[500],\r
+        "theme-failure": colors.red[500],\r
       },\r
     },\r
   },\r