From 8358d64355409d49f64bb86ee80457cc5f86fe90 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 31 Aug 2023 17:19:43 -0700
Subject: [PATCH] refactor(web): modal footer visibility

---
 web/components/Modal.vue                      | 23 ++++++++++++++-----
 .../UserProfile/CallbackFeedback.vue          |  4 ++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/components/Modal.vue b/web/components/Modal.vue
index 629dea585..50fab3a94 100644
--- a/web/components/Modal.vue
+++ b/web/components/Modal.vue
@@ -111,12 +111,23 @@ const ariaLablledById = computed((): string|undefined => props.title ? `ModalTit
             </header>
             <slot name="main" />
 
-            <footer v-if="$slots['footer']" class="text-14px relative -mx-16px -mb-16px sm:-mx-24px sm:-mb-24px p-4 sm:p-6">
-              <div class="absolute z-0 inset-0 opacity-10 bg-beta" />
-              <div class="relative z-10">
-                <slot name="footer" />
-              </div>
-            </footer>
+            <TransitionChild
+              appear
+              as="template"
+              enter="duration-300 ease-out"
+              enter-from="opacity-0"
+              enter-to="opacity-100"
+              leave="duration-200 ease-in"
+              leave-from="opacity-100"
+              leave-to="opacity-0"
+            >
+              <footer v-if="$slots['footer']" class="text-14px relative -mx-16px -mb-16px sm:-mx-24px sm:-mb-24px p-4 sm:p-6">
+                <div class="absolute z-0 inset-0 opacity-10 bg-beta" />
+                <div class="relative z-10">
+                  <slot name="footer" />
+                </div>
+              </footer>
+            </TransitionChild>
           </div>
         </TransitionChild>
       </div>
diff --git a/web/components/UserProfile/CallbackFeedback.vue b/web/components/UserProfile/CallbackFeedback.vue
index eb02b2b4a..fca74bd6d 100644
--- a/web/components/UserProfile/CallbackFeedback.vue
+++ b/web/components/UserProfile/CallbackFeedback.vue
@@ -243,8 +243,8 @@ const accountActionStatusCopy = computed((): { text: string; } => {
       </div>
     </template>
 
-    <template #footer>
-      <div v-if="callbackStatus === 'success'" class="flex flex-row justify-center gap-16px">
+    <template v-if="callbackStatus === 'success'" #footer>
+      <div class="flex flex-row justify-center gap-16px">
         <BrandButton
           v-if="showSignInCta"
           btn-style="underline"