From 9514de899cc990a03cab28eff7388db0a0f74c70 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 18 Nov 2024 18:22:11 -0700
Subject: [PATCH] make the import selection more obvious, plus other verbiage

---
 src/components/PushNotificationPermission.vue |  2 +-
 src/views/AccountViewView.vue                 | 49 ++++++++++++-------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/PushNotificationPermission.vue b/src/components/PushNotificationPermission.vue
index 0458306..c20596b 100644
--- a/src/components/PushNotificationPermission.vue
+++ b/src/components/PushNotificationPermission.vue
@@ -19,7 +19,7 @@
             Would you like to be notified of new activity once a day?
           </p>
           <p v-else class="text-lg mb-4">
-            Waiting for system initialization, which may take up to 10
+            Waiting for system initialization, which may take up to 5
             seconds...
             <fa icon="spinner" spin />
           </p>
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index a147feb..8410985 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -424,24 +424,37 @@
 
         <div class="ml-4 mt-2">
           <input type="file" @change="uploadImportFile" class="ml-2" />
-          <div v-if="showContactImport()" class="mt-4">
-            <button
-              class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
-              @click="confirmSubmitImportFile()"
-            >
-              Overwrite Settings & Contacts
-              <br />
-              (which doesn't include Identifier Data)
-            </button>
-            <button
-              class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
-              @click="checkContactImports()"
-            >
-              Import Only Contacts
-              <br />
-              after comparing
-            </button>
-          </div>
+          <transition
+            enter-active-class="transform ease-out duration-300 transition"
+            enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
+            enter-to-class="translate-y-0 opacity-100 sm:translate-y-0"
+            leave-active-class="transition ease-in duration-500"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+          >
+            <div v-if="showContactImport()" class="mt-4">
+              <div class="flex justify-center">
+                <button
+                  class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="confirmSubmitImportFile()"
+                >
+                  Overwrite Settings & Contacts
+                  <br />
+                  (which doesn't include Identifier Data)
+                </button>
+              </div>
+              <div class="flex justify-center">
+                <button
+                  class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="checkContactImports()"
+                >
+                  Import Only Contacts
+                  <br />
+                  after comparing
+                </button>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>