From 2cdcd9a424f8c215aa4888dc43a4301fef5fef1e Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Fri, 21 Jul 2023 12:00:47 +1000
Subject: [PATCH] fix button types not displayed correctly

---
 .../js/components/dialogs/SMDialogConfirm.vue | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/dialogs/SMDialogConfirm.vue b/resources/js/components/dialogs/SMDialogConfirm.vue
index d3aac7c..a3e3819 100644
--- a/resources/js/components/dialogs/SMDialogConfirm.vue
+++ b/resources/js/components/dialogs/SMDialogConfirm.vue
@@ -9,13 +9,13 @@
             <div class="flex flex-justify-between pt-4">
                 <button
                     type="button"
-                    class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    :class="buttonClass(props.cancel.type)"
                     @click="handleClickCancel()">
                     {{ props.cancel.label }}
                 </button>
                 <button
                     type="button"
-                    class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    :class="buttonClass(props.confirm.type)"
                     @click="handleClickConfirm()">
                     {{ props.confirm.label }}
                 </button>
@@ -91,6 +91,35 @@ const eventKeyUp = (event: KeyboardEvent): boolean => {
     return false;
 };
 
+const buttonClass = (type: string): Array<string> => {
+    let baseClasses = [
+        "font-medium",
+        "px-6",
+        "py-1.5",
+        "rounded-md",
+        "hover:shadow-md",
+        "transition",
+        "text-sm",
+        "text-white",
+        "cursor-pointer",
+    ];
+
+    if (type === "secondary") {
+        baseClasses = baseClasses.concat(["bg-gray-400", "hover:bg-gray-300"]);
+    } else if (type === "danger") {
+        baseClasses = baseClasses.concat(["bg-red-600", "hover:bg-red-500"]);
+    } else if (type === "success") {
+        baseClasses = baseClasses.concat([
+            "bg-green-600",
+            "hover:bg-green-500",
+        ]);
+    } else {
+        baseClasses = baseClasses.concat(["bg-sky-600", "hover:bg-sky-500"]);
+    }
+
+    return baseClasses;
+};
+
 onMounted(() => {
     applicationStore.addKeyUpListener(eventKeyUp);
 });