src/libs/endorserServer.ts

@@ -407,7 +407,7 @@ export function contactForDid(
  * @param contact
  * @param allMyDids
  * @return { known: boolean, displayName: string, profileImageUrl?: string }
- *  where 'known' is true if the display name is some easily-recogizable name, false if it's a generic name like "Someone Unnamed"
+ *  where 'known' is true if they are in the contacts
  */
 export function didInfoForContact(
   did: string | undefined,
@@ -422,7 +422,7 @@ export function didInfoForContact(
   } else if (contact) {
     return {
       displayName: contact.name || "Contact With No Name",
-      known: !!contact.name,
+      known: !!contact,
       profileImageUrl: contact.profileImageUrl,
     };
   } else {

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">

src/views/DiscoverView.vue

@@ -37,7 +37,7 @@
               isRemoteActive = false;
               searchLocal();
             "
-            v-bind:class="computedLocalTabClassNames()"
+            v-bind:class="computedLocalTabStyleClassNames()"
           >
             Nearby
             <span
@@ -57,7 +57,7 @@
               isLocalActive = false;
               searchAll();
             "
-            v-bind:class="computedRemoteTabClassNames()"
+            v-bind:class="computedRemoteTabStyleClassNames()"
           >
             Anywhere
             <span
@@ -422,7 +422,7 @@ export default class DiscoverView extends Vue {
     this.$router.push(route);
   }
 
-  public computedLocalTabClassNames() {
+  public computedLocalTabStyleClassNames() {
     return {
       "inline-block": true,
       "py-3": true,
@@ -440,7 +440,7 @@ export default class DiscoverView extends Vue {
     };
   }
 
-  public computedRemoteTabClassNames() {
+  public computedRemoteTabStyleClassNames() {
     return {
       "inline-block": true,
       "py-3": true,

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>
+        <!-- !isCreatingIdentifier -->
+        <div
+          v-if="!activeDid"
+          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>
 
-        <ul
-          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+        <div
+          v-else-if="!isRegistered"
+          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)"
-          >
-            <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">
+          <!-- 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>
@@ -200,14 +207,22 @@
             </div>
 
             <div class="grid grid-cols-12">
-              <span class="col-span-1 justify-self-start">
+              <span class="pt-1 col-span-1 justify-self-start">
                 <span>
                   <fa
-                    v-if="record.giver.known || record.receiver.known"
                     icon="circle-user"
-                    class="pt-1 text-slate-500"
+                    :class="
+                      computeKnownPersonIconStyleClassNames(
+                        record.giver.known || record.receiver.known,
+                      )
+                    "
+                    @click="toastUser('This involves your contacts.')"
+                  />
+                  <fa
+                    icon="gift"
+                    class="pl-3 text-slate-500"
+                    @click="toastUser('This is a gift.')"
                   />
-                  <fa v-else icon="gift" class="pt-1 pl-3 text-slate-500" />
                 </span>
               </span>
               <span class="col-span-10 justify-self-stretch">
@@ -758,5 +773,21 @@ export default class HomeView extends Vue {
   openFeedFilters() {
     (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
   }
+
+  toastUser(message) {
+    this.$notify(
+      {
+        group: "alert",
+        type: "toast",
+        title: "FYI",
+        text: message,
+      },
+      2000,
+    );
+  }
+
+  computeKnownPersonIconStyleClassNames(known: boolean) {
+    return known ? "text-slate-500" : "text-slate-100";
+  }
 }
 </script>