From de0d1b46603a4140ad0ff2c149e4fd91277c2fff Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 28 Jan 2025 15:18:04 +1100
Subject: [PATCH] feat: ui and functionality changes

---
 components/LoadingButton.vue     | 23 +++++++++++++++--------
 components/ModalStack.vue        |  1 +
 components/NotificationModal.vue |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/components/LoadingButton.vue b/components/LoadingButton.vue
index 8a4605a..c37b1d6 100644
--- a/components/LoadingButton.vue
+++ b/components/LoadingButton.vue
@@ -1,8 +1,5 @@
 <template>
-  <button
-    type="submit"
-    class="inline-flex h-9 items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 text-white bg-blue-600 hover:bg-blue-500 disabled:text-zinc-400 disabled:bg-blue-600/10 disabled:hover:bg-blue-600/10"
-  >
+  <button type="submit" :class="styles[style]">
     <div v-if="props.loading" role="status">
       <svg
         aria-hidden="true"
@@ -22,12 +19,22 @@
       </svg>
       <span class="sr-only">Loading...</span>
     </div>
-    <span v-else>
-      <slot />
-    </span>
+    <slot v-else />
   </button>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ loading: boolean }>();
+type Style = "default" | "none";
+const props = defineProps<{
+  loading: boolean;
+  style?: Style;
+}>();
+
+const style = props.style ?? "default";
+
+const styles: { [key in Style]: string } = {
+  ["default"]:
+    "inline-flex min-h-9 items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 text-white bg-blue-600 hover:bg-blue-500 disabled:text-zinc-400 disabled:bg-blue-600/10 disabled:hover:bg-blue-600/10",
+  ["none"]: "",
+};
 </script>
diff --git a/components/ModalStack.vue b/components/ModalStack.vue
index fa523bb..3d64d93 100644
--- a/components/ModalStack.vue
+++ b/components/ModalStack.vue
@@ -7,6 +7,7 @@
     :data="modal.data"
     @event="(event: string) => handleCallback(modalIdx, event)"
   />
+  <div id="modalstack" />
 </template>
 
 <script setup lang="ts">
diff --git a/components/NotificationModal.vue b/components/NotificationModal.vue
index 12df3e8..7c3d939 100644
--- a/components/NotificationModal.vue
+++ b/components/NotificationModal.vue
@@ -60,7 +60,7 @@
                   type="submit"
                   class="w-full sm:w-fit"
                 >
-                  {{ props.data.buttonText ?? "Confirm" }}
+                  {{ props.data.buttonText ?? "Close" }}
                 </LoadingButton>
               </div>
             </div>