feat(notift): CSS classes

config.lua

@@ -47,23 +47,23 @@ QBConfig.Notify.NotificationStyling = {
 -- The "icon" key is the css-icon code, this project uses `Material Icons` & `Font Awesome`
 QBConfig.Notify.VariantDefinitions = {
     success = {
-        color = 'green',
+        classes = 'success',
         icon = 'done'
     },
     primary = {
-        color = 'blue',
+        classes = 'primary',
         icon = 'info'
     },
     error = {
-        color = 'red',
+        classes = 'error',
         icon = 'dangerous'
     },
     police = {
-        color = 'blue',
+        classes = 'police',
         icon = 'local_police'
     },
     ambulance = {
-        color = 'red',
+        classes = 'ambulance',
         icon = 'fas fa-ambulance'
     }
 }

html/app.js

@@ -20,7 +20,7 @@ const app = Vue.createApp({
       if (data?.action !== "notify") return;
 
       const { text, length, type, caption } = data;
-      const { color, icon } = determineStyleFromVariant(type);
+      const { classes, icon } = determineStyleFromVariant(type);
 
       // Make sure we have sucessfully fetched out config properly
       if (!NOTIFY_CONFIG) {
@@ -44,7 +44,7 @@ const app = Vue.createApp({
         position: NOTIFY_CONFIG.NotificationStyling.position ?? "right",
         timeout: length,
         caption,
-        color,
+        classes,
         icon,
       });
     };

html/index.html

@@ -18,6 +18,10 @@
       rel="stylesheet"
       type="text/css"
     />
+    <link
+      href="style.css"
+      rel="stylesheet"
+    />
     <script
       src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"
       defer

html/style.css

@@ -0,0 +1,49 @@
+.success {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    background-color: rgba(23, 23, 23, 80%);
+    border-left: 5px solid #20bb44
+}
+
+.primary {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    background-color: rgba(23, 23, 23, 80%);
+    border-left: 5px solid #1c75d2
+}
+
+.error {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    background-color: rgba(23, 23, 23, 80%);
+    border-left: 5px solid #c10114
+}
+
+.police {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    background-color: rgba(23, 23, 23, 80%);
+    border-left: 5px solid #2197f2
+}
+
+.ambulance {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    background-color: rgba(23, 23, 23, 80%);
+    border-left: 5px solid #f44236
+}

html/testing.js

@@ -21,23 +21,23 @@ export const BrowserMockConfigData = {
   },
   VariantDefinitions: {
     success: {
-      color: "green",
+      classes: "success",
       icon: "done",
     },
     primary: {
-      color: "blue",
+      classes: "primary",
       icon: "info",
     },
     error: {
-      color: "red",
+      classes: "error",
       icon: "dangerous",
     },
     police: {
-      color: "blue",
+      classes: "police",
       icon: "local_police",
     },
     ambulance: {
-      color: "red",
+      classes: "ambulance",
       icon: "fas fa-ambulance",
     },
   },