From 04125e89bef517411e103cdabcfa64a1bb563423 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sun, 27 Jul 2025 20:25:21 +1000
Subject: [PATCH] fix: fade in fade out + styling

---
 components/ConfirmationModal.vue | 110 ++++++++++----------------
 components/ModalStack.vue        |  40 ++++++++--
 components/NotificationModal.vue |  37 ++-------
 components/TextInputModal.vue    | 129 ++++++++++++-------------------
 4 files changed, 128 insertions(+), 188 deletions(-)

diff --git a/components/ConfirmationModal.vue b/components/ConfirmationModal.vue
index 55b9342..3c16f71 100644
--- a/components/ConfirmationModal.vue
+++ b/components/ConfirmationModal.vue
@@ -1,82 +1,52 @@
 <template>
-  <TransitionRoot
-    as="template"
-    :show="true"
-    :style="{ 'z-index': props.zHeight }"
-  >
-    <Dialog class="relative z-50" @close="emit('event', 'cancel')">
-      <TransitionChild
-        as="template"
-        enter="ease-out duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-200"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
+  <div class="relative z-50" @close="emit('event', 'cancel')">
+    <div class="fixed inset-0 bg-zinc-950/75" />
+
+    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+      <div
+        class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
       >
         <div
-          class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
-        />
-      </TransitionChild>
-
-      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div
-          class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
+          class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
         >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div
-              class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
-            >
-              <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
-                <div class="sm:flex sm:items-start">
-                  <div class="mt-3 text-center sm:mt-0 sm:text-left">
-                    <DialogTitle
-                      as="h3"
-                      class="text-base font-semibold text-zinc-100"
-                      >{{ props.data.title }}
-                    </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-sm text-zinc-400">
-                        {{ props.data.description }}
-                      </p>
-                    </div>
-                  </div>
+          <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
+            <div class="sm:flex sm:items-start">
+              <div class="mt-3 text-center sm:mt-0 sm:text-left">
+                <h3 class="text-base font-semibold text-zinc-100">
+                  {{ props.data.title }}
+                </h3>
+                <div class="mt-2">
+                  <p class="text-sm text-zinc-400">
+                    {{ props.data.description }}
+                  </p>
                 </div>
               </div>
-              <div
-                class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
-              >
-                <LoadingButton
-                  :loading="props.loading"
-                  @click="emit('event', 'confirm')"
-                  type="submit"
-                  class="w-full sm:w-fit"
-                >
-                  {{ props.data.buttonText ?? "Confirm" }}
-                </LoadingButton>
-                <button
-                  type="button"
-                  class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
-                  @click="emit('event', 'cancel')"
-                  ref="cancelButtonRef"
-                >
-                  Cancel
-                </button>
-              </div>
             </div>
-          </TransitionChild>
+          </div>
+          <div
+            class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
+          >
+            <LoadingButton
+              :loading="props.loading"
+              @click="emit('event', 'confirm')"
+              type="submit"
+              class="w-full sm:w-fit"
+            >
+              {{ props.data.buttonText ?? "Confirm" }}
+            </LoadingButton>
+            <button
+              type="button"
+              class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
+              @click="emit('event', 'cancel')"
+              ref="cancelButtonRef"
+            >
+              Cancel
+            </button>
+          </div>
         </div>
       </div>
-    </Dialog>
-  </TransitionRoot>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/components/ModalStack.vue b/components/ModalStack.vue
index d42d747..983877d 100644
--- a/components/ModalStack.vue
+++ b/components/ModalStack.vue
@@ -1,15 +1,39 @@
 <template>
-  <component
-    v-for="(modal, modalIdx) in stack"
-    :is="modal.component"
-    :z-height="(modalIdx + 1) * 50"
-    :loading="modal.loading"
-    :data="modal.data"
-    @event="(event: string, ...args: any[]) => handleCallback(modalIdx, event, args)"
-  />
+  <TransitionGroup name="modal">
+    <component
+      v-for="(modal, modalIdx) in stack"
+      :key="modal.data"
+      :is="modal.component"
+      :z-height="(modalIdx + 1) * 50"
+      :loading="modal.loading"
+      :data="modal.data"
+      @event="
+        (event: string, ...args: any[]) => handleCallback(modalIdx, event, args)
+      "
+    />
+  </TransitionGroup>
   <div id="modalstack" />
 </template>
 
+<style>
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.2s ease;
+}
+.modal-enter-from {
+  opacity: 0;
+}
+.modal-enter-to {
+  opacity: 100;
+}
+.modal-leave-from {
+  opacity: 100;
+}
+.modal-leave-to {
+  opacity: 0;
+}
+</style>
+
 <script setup lang="ts">
 const stack = useModalStack();
 
diff --git a/components/NotificationModal.vue b/components/NotificationModal.vue
index 7c3d939..d6a46f4 100644
--- a/components/NotificationModal.vue
+++ b/components/NotificationModal.vue
@@ -1,48 +1,23 @@
 <template>
-  <TransitionRoot
-    as="template"
-    :show="true"
-    :style="{ 'z-index': props.zHeight }"
-  >
-    <Dialog class="relative z-50" @close="emit('event', 'close')">
-      <TransitionChild
-        as="template"
-        enter="ease-out duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-200"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
+    <div class="relative z-50" @close="emit('event', 'close')">
         <div
-          class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
+          class="fixed inset-0 bg-zinc-950/75"
         />
-      </TransitionChild>
 
       <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
         <div
           class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
         >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
             <div
               class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
             >
               <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                   <div class="mt-3 text-center sm:mt-0 sm:text-left">
-                    <DialogTitle
-                      as="h3"
+                    <h3
                       class="text-base font-semibold text-zinc-100"
                       >{{ props.data.title }}
-                    </DialogTitle>
+                  </h3>
                     <div class="mt-2">
                       <p class="text-sm text-zinc-400">
                         {{ props.data.description }}
@@ -64,11 +39,9 @@
                 </LoadingButton>
               </div>
             </div>
-          </TransitionChild>
         </div>
       </div>
-    </Dialog>
-  </TransitionRoot>
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/components/TextInputModal.vue b/components/TextInputModal.vue
index cccb753..6d646bc 100644
--- a/components/TextInputModal.vue
+++ b/components/TextInputModal.vue
@@ -1,91 +1,64 @@
 <template>
-  <TransitionRoot
-    as="template"
-    :show="true"
-    :style="{ 'z-index': props.zHeight }"
-  >
-    <Dialog class="relative z-50" @close="emit('event', 'cancel')">
-      <TransitionChild
-        as="template"
-        enter="ease-out duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-200"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
+  <div class="relative z-50" @close="emit('event', 'cancel')">
+    <div class="fixed inset-0 bg-zinc-950/75" />
+
+    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+      <div
+        class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
       >
         <div
-          class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
-        />
-      </TransitionChild>
-
-      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div
-          class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
+          class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
         >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div
-              class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
-            >
-              <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
-                <div class="sm:flex sm:items-start">
-                  <div class="mt-3 text-center sm:mt-0 sm:text-left">
-                    <DialogTitle
-                      as="h3"
-                      class="text-base font-semibold text-zinc-100"
-                      >{{ props.data.title }}
-                    </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-sm text-zinc-400">
-                        {{ props.data.description }}
-                      </p>
-                    </div>
-                    <form @submit.prevent="() => emit('event', 'submit', v)">
-                      <input
-                        v-model="v"
-                        type="text"
-                        :placeholder="$t('library.collection.namePlaceholder')"
-                        class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-                      />
-                      <button class="hidden" type="submit" />
-                    </form>
-                  </div>
+          <div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
+            <div class="sm:flex sm:items-start">
+              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
+                <h3 class="text-base font-semibold text-zinc-100">
+                  {{ props.data.title }}
+                </h3>
+                <div class="mt-1">
+                  <p class="text-sm text-zinc-400">
+                    {{ props.data.description }}
+                  </p>
                 </div>
-              </div>
-              <div
-                class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
-              >
-                <LoadingButton
-                  :loading="props.loading"
-                  @click="emit('event', 'submit', v)"
-                  type="submit"
-                  class="w-full sm:w-fit"
+                <form
+                  class="mt-4 w-full"
+                  @submit.prevent="() => emit('event', 'submit', v)"
                 >
-                  {{ props.data.buttonText ?? "Confirm" }}
-                </LoadingButton>
-                <button
-                  type="button"
-                  class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
-                  @click="emit('event', 'cancel')"
-                  ref="cancelButtonRef"
-                >
-                  Cancel
-                </button>
+                  <input
+                    v-model="v"
+                    type="text"
+                    :placeholder="props.data.placeholder"
+                    class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+                  />
+                  <button class="hidden" type="submit" />
+                </form>
               </div>
             </div>
-          </TransitionChild>
+          </div>
+          <div
+            class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
+          >
+            <LoadingButton
+              :loading="props.loading"
+              @click="emit('event', 'submit', v)"
+              type="submit"
+              class="w-full sm:w-fit"
+            >
+              {{ props.data.buttonText ?? "Submit" }}
+            </LoadingButton>
+            <button
+              type="button"
+              class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
+              @click="emit('event', 'cancel')"
+              ref="cancelButtonRef"
+            >
+              Cancel
+            </button>
+          </div>
         </div>
       </div>
-    </Dialog>
-  </TransitionRoot>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">