From b29e31119df0dc2d67c771de384a6313b3ee7cc8 Mon Sep 17 00:00:00 2001
From: izMystic <mystic@izmystic.dev>
Date: Fri, 22 Oct 2021 00:14:18 -0400
Subject: [PATCH] feat(notift): CSS classes

---
 config.lua      | 10 +++++-----
 html/app.js     |  4 ++--
 html/index.html |  4 ++++
 html/style.css  | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 html/testing.js | 10 +++++-----
 5 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 html/style.css

diff --git a/config.lua b/config.lua
index a10eedf..8966088 100644
--- a/config.lua
+++ b/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'
     }
 }
diff --git a/html/app.js b/html/app.js
index 652e9dd..50ff2fb 100644
--- a/html/app.js
+++ b/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,
       });
     };
diff --git a/html/index.html b/html/index.html
index 97ef4b2..5abf792 100644
--- a/html/index.html
+++ b/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
diff --git a/html/style.css b/html/style.css
new file mode 100644
index 0000000..8bcb983
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/html/testing.js b/html/testing.js
index f0987ae..5181f57 100644
--- a/html/testing.js
+++ b/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",
     },
   },