From 1147ee4707221ca150024a35ae2b02868b348f70 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 23 Jun 2024 17:49:21 -0600
Subject: [PATCH] refactor display logic a bit (no flow changes intended)

---
 src/views/ContactsView.vue |   2 +-
 src/views/HomeView.vue     | 157 +++++++++++++++++++------------------
 2 files changed, 83 insertions(+), 76 deletions(-)

diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 38fd167..128d2c0 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -109,7 +109,7 @@
               }"
               title="See more about this DID"
             >
-              <fa icon="circle-info" class="text-blue-500 ml-6" />
+              <fa icon="circle-info" class="text-blue-500 ml-4" />
             </router-link>
           </h2>
           <div class="text-sm truncate">
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5c2b657..601f665 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -64,98 +64,105 @@
         :to="{ name: 'quick-action-bvc' }"
         class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
       >
-        Bountiful Voluntaryist Community Actions</router-link
-      >
+        Bountiful Voluntaryist Community Actions
+      </router-link>
     </div>
 
-    <!-- show the actions for recognizing a give -->
     <div class="mb-8">
       <div v-if="isCreatingIdentifier">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
           <fa icon="spinner" class="fa-spin-pulse" /> Loading&hellip;
         </p>
       </div>
-      <div
-        v-if="!activeDid && !isCreatingIdentifier"
-        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-      >
-        <p class="text-lg mb-3">
-          Want to connect with your contacts, or share contributions or
-          projects?
-        </p>
-        <router-link
-          :to="{ name: 'start' }"
-          class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-        >
-          Create An Identifier</router-link
-        >
-      </div>
-
-      <div
-        v-else-if="!isRegistered"
-        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-      >
-        Someone must register you before you can give or offer.
-        <router-link
-          :to="{ name: 'contact-qr' }"
-          class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-        >
-          Show Them Your Identifier Info
-        </router-link>
-      </div>
 
       <div v-else>
-        <!-- activeDid && isRegistered -->
-        <div class="mb-4">
-          <h2 class="text-xl font-bold">Record Something Given By:</h2>
-        </div>
-
-        <ul
-          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+        <!-- !isCreatingIdentifier -->
+        <div
+          v-if="!activeDid"
+          class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
         >
-          <li @click="openDialog()">
-            <img
-              src="../assets/blank-square.svg"
-              class="mx-auto border border-slate-300 rounded-md mb-1"
-            />
-            <h3
-              class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-            >
-              Unnamed/Unknown
-            </h3>
-          </li>
-          <li
-            v-for="contact in allContacts.slice(0, 7)"
-            :key="contact.did"
-            @click="openDialog(contact)"
+          <p class="text-lg mb-3">
+            Want to connect with your contacts, or share contributions or
+            projects?
+          </p>
+          <router-link
+            :to="{ name: 'start' }"
+            class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
           >
-            <EntityIcon
-              :contact="contact"
-              :iconSize="64"
-              class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer"
-            />
-            <h3
-              class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-            >
-              {{ contact.name || contact.did }}
-            </h3>
-          </li>
-        </ul>
+            Create An Identifier
+          </router-link>
+        </div>
 
-        <div class="flex justify-between">
+        <div
+          v-else-if="!isRegistered"
+          class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
+        >
+          <!-- activeDid && !isRegistered -->
+          Someone must register you before you can give kudos or make offers or
+          create projects... basically before doing anything.
           <router-link
-            v-if="allContacts.length >= 7"
-            :to="{ name: 'contact-gift' }"
-            class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+            :to="{ name: 'contact-qr' }"
+            class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
           >
-            Choose From All Contacts
+            Show Them Your Identifier Info
           </router-link>
-          <button
-            @click="openGiftedPrompts()"
-            class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+        </div>
+
+        <div v-else>
+          <!-- activeDid && isRegistered -->
+
+          <!-- show the actions for recognizing a give -->
+          <div class="mb-4">
+            <h2 class="text-xl font-bold">Record Something Given By:</h2>
+          </div>
+
+          <ul
+            class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
           >
-            Ideas...
-          </button>
+            <li @click="openDialog()">
+              <img
+                src="../assets/blank-square.svg"
+                class="mx-auto border border-slate-300 rounded-md mb-1"
+              />
+              <h3
+                class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+              >
+                Unnamed/Unknown
+              </h3>
+            </li>
+            <li
+              v-for="contact in allContacts.slice(0, 7)"
+              :key="contact.did"
+              @click="openDialog(contact)"
+            >
+              <EntityIcon
+                :contact="contact"
+                :iconSize="64"
+                class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer"
+              />
+              <h3
+                class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+              >
+                {{ contact.name || contact.did }}
+              </h3>
+            </li>
+          </ul>
+
+          <div class="flex justify-between">
+            <router-link
+              v-if="allContacts.length >= 7"
+              :to="{ name: 'contact-gift' }"
+              class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+            >
+              Choose From All Contacts
+            </router-link>
+            <button
+              @click="openGiftedPrompts()"
+              class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+            >
+              Ideas...
+            </button>
+          </div>
         </div>
       </div>
     </div>