From: Adam Dullage <redacted>
Date: Mon, 29 Apr 2024 12:08:01 +0000 (+0100)
Subject: Style Organisation
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=2fe9f64ab29fb0e5206eaece611694d6ea8e7aaa;p=flatnotes.git

Style Organisation
---

diff --git a/client/App.vue b/client/App.vue
index 11c0ac6..09d4e1e 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">
-    <Toast class="ml-[20px]" :pt="toastStyle" position="bottom-right" />
+    <Toast position="bottom-right" />
     <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />
     <RouterView />
   </div>
@@ -40,12 +40,4 @@ const showNavBar = computed(() => {
 const showNavBarLogo = computed(() => {
   return route.name !== "home";
 });
-
-const toastStyle = {
-  message: "flex flex-col items-end",
-  container:
-  "bg-theme-background-elevated border border-theme-border mb-2 px-3 py-2 rounded-lg max-w-96",
-  icon: "invisible h-0 w-0",
-  summary: "font-bold",
-};
 </script>
diff --git a/client/components/CustomButton.vue b/client/components/CustomButton.vue
index 2a870cb..4cd025f 100644
--- 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 5c315dc..834a22c 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,8 +1,9 @@
 import App from "/App.vue";
 import PrimeVue from "primevue/config";
-import ToastService from 'primevue/toastservice';
+import ToastService from "primevue/toastservice";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import { primeStyles } from "./style.js";
 import router from "/router.js";
 
 const app = createApp(App);
@@ -12,6 +13,7 @@ app.use(router);
 app.use(pinia);
 app.use(PrimeVue, {
   unstyled: true,
+  pt: primeStyles,
 });
 app.use(ToastService);
 app.mount("#app");
diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 2b1cfe9..778a7d3 100644
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -29,7 +29,7 @@ defineProps({
 });
 
 function toggleTheme() {
-  document.body.classList.toggle("dark-theme");
+  document.body.classList.toggle("dark");
 }
 
 function logOut() {
diff --git a/client/style.css b/client/style.css
index 9320f56..6c0306f 100644
--- a/client/style.css
+++ b/client/style.css
@@ -18,7 +18,6 @@
         --theme-background-elevated: 255 255 255;
         --theme-background-tint: 243 244 245;
         --theme-background-highlight: 239 243 255;
-        --theme-background-hover: var(--theme-background-tint);
 
         --theme-text: 44 49 57;
         --theme-text-muted: 136 145 161;
@@ -28,14 +27,13 @@
         --theme-border: 236 238 240;
     }
 
-    body.dark-theme {
+    body.dark {
         /* --theme-brand: 248 166 107; */
 
         --theme-background: 34 38 44;
         --theme-background-elevated: 44 49 57;
         --theme-background-tint: 34 38 44;
         --theme-background-highlight: 136 145 161;
-        --theme-background-hover: var(--theme-background-elevated);
 
         --theme-text: 193 199 208;
         --theme-text-muted: 136 145 161;
diff --git a/client/style.js b/client/style.js
new file mode 100644
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 6281407..a5e3251 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,9 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
 
 module.exports = {
   content: ["client/**/*.{html,js,vue}"],
+  darkMode: "selector",
   theme: {
     fontFamily: {
       sans: ["Poppins", "sans-serif"],
@@ -13,6 +15,7 @@ module.exports = {
     },
     extend: {
       colors: {
+        // Dynamic
         "theme-brand": "rgb(var(--theme-brand) / <alpha-value>)",
         "theme-background": "rgb(var(--theme-background) / <alpha-value>)",
         "theme-background-elevated":
@@ -21,14 +24,15 @@ module.exports = {
           "rgb(var(--theme-background-tint) / <alpha-value>)",
         "theme-background-highlight":
           "rgb(var(--theme-background-highlight) / <alpha-value>)",
-        "theme-background-hover":
-          "rgb(var(--theme-background-hover) / <alpha-value>)",
         "theme-text": "rgb(var(--theme-text) / <alpha-value>)",
         "theme-text-muted": "rgb(var(--theme-text-muted) / <alpha-value>)",
         "theme-text-very-muted":
           "rgb(var(--theme-text-very-muted) / <alpha-value>)",
         "theme-shadow": "rgb(var(--theme-shadow) / <alpha-value>)",
         "theme-border": "rgb(var(--theme-border) / <alpha-value>)",
+        // Static
+        "theme-success": colors.emerald[500],
+        "theme-failure": colors.red[500],
       },
     },
   },