Merge pull request 'UI improvements' (#46) from contacts-view-improvements into master

Reviewed-on: trent_larson/kick-starter-for-time-pwa#46

src/views/ContactsView.vue

@@ -70,9 +70,9 @@
     </div>
 
     <!-- Results List -->
-    <ul v-if="contacts.length > 0">
+    <ul v-if="contacts.length > 0" class="border-t border-slate-300">
       <li
-        class="border-b border-slate-300"
+        class="border-b border-slate-300 py-4"
         v-for="contact in contacts"
         :key="contact.did"
       >
@@ -85,70 +85,82 @@
             Public Key (base 64): {{ contact.publicKeyBase64 }}
           </div>
 
-          <button
-            v-if="contact.seesMe"
-            class="tooltip"
-            @click="setVisibility(contact, false)"
-          >
-            <fa icon="eye" class="text-slate-900 fa-fw ml-1" />
-            <span class="tooltiptext">They can see you</span>
-          </button>
-          <button v-else class="tooltip" @click="setVisibility(contact, true)">
-            <span class="tooltiptext">They cannot see you</span>
-            <fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" />
-          </button>
+          <div id="ContactActions" class="flex gap-1.5 mt-2">
+            <button
+              v-if="contact.seesMe"
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              @click="setVisibility(contact, false)"
+              title="They can see you"
+            >
+              <fa icon="eye" class="fa-fw" />
+            </button>
+            <button
+              v-else
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              @click="setVisibility(contact, true)"
+              title="They cannot see you"
+            >
+              <fa icon="eye-slash" class="fa-fw" />
+            </button>
 
-          <button class="tooltip" @click="checkVisibility(contact)">
-            <span class="tooltiptext">Check Visibility</span>
-            <fa icon="rotate" class="text-slate-900 fa-fw ml-1" />
-          </button>
+            <button
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              @click="checkVisibility(contact)"
+              title="Check Visibility"
+            >
+              <fa icon="rotate" class="fa-fw" />
+            </button>
 
-          <button v-if="contact.registered" class="tooltip">
-            <span class="tooltiptext">Registered</span>
-            <fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" />
-          </button>
-          <button v-else @click="register(contact)" class="tooltip">
-            <span class="tooltiptext">Registration Unknown</span>
-            <fa
-              icon="person-circle-question"
-              class="text-slate-900 fa-fw ml-1"
-            />
-          </button>
+            <button
+              v-if="contact.registered"
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              title="Registered"
+            >
+              <fa icon="person-circle-check" class="fa-fw" />
+            </button>
+            <button
+              v-else
+              @click="register(contact)"
+              class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+              title="Registration unknown"
+            >
+              <fa icon="person-circle-question" class="fa-fw" />
+            </button>
 
-          <button @click="deleteContact(contact)" class="px-9 tooltip">
-            <span class="tooltiptext">Delete!</span>
-            <fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
-          </button>
+            <button
+              @click="deleteContact(contact)"
+              class="text-sm uppercase bg-red-600 text-white px-2 py-1.5 rounded-md"
+              title="Delete"
+            >
+              <fa icon="trash-can" class="fa-fw" />
+            </button>
 
-          <div v-if="showGiveNumbers" class="float-right">
-            <div class="float-right">
-              <div class="tooltip">
-                to:
+            <div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
+              <button
+                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+                @click="onClickAddGive(activeDid, contact.did)"
+                title="givenByMeDescriptions[contact.did]"
+              >
+                To:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
                     ? ((givenByMeConfirmed[contact.did] || 0)
-                       + (givenByMeUnconfirmed[contact.did] || 0))
+                      + (givenByMeUnconfirmed[contact.did] || 0))
                     : this.showGiveConfirmed
                         ? (givenByMeConfirmed[contact.did] || 0)
                         : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <span
-                  v-if="givenByMeDescriptions[contact.did]"
-                  class="tooltiptext-left"
-                >
-                  {{ givenByMeDescriptions[contact.did] }}
-                </span>
-                <button
-                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-                  @click="onClickAddGive(activeDid, contact.did)"
-                >
-                  +
-                </button>
-              </div>
-              <div class="tooltip px-2">
-                from:
+                <fa icon="plus" class="fa-fw" />
+              </button>
+
+              <button
+                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+                @click="onClickAddGive(contact.did, activeDid)"
+                title="givenToMeDescriptions[contact.did]"
+              >
+                From:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
@@ -159,28 +171,18 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <span
-                  v-if="givenToMeDescriptions[contact.did]"
-                  class="tooltiptext-left"
-                >
-                  {{ givenToMeDescriptions[contact.did] }}
-                </span>
-                <button
-                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-                  @click="onClickAddGive(contact.did, activeDid)"
-                >
-                  +
-                </button>
-              </div>
+                <fa icon="plus" class="fa-fw" />
+              </button>
+
               <router-link
                 :to="{
                   name: 'contact-amounts',
                   query: { contactDid: contact.did },
                 }"
-                class="tooltip"
+                class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+                title="See all given activity"
               >
-                <fa icon="file-lines" class="text-slate-600 fa-fw ml-1" />
-                <span class="tooltiptext-left">See All Given Activity</span>
+                <fa icon="file-lines" class="fa-fw" />
               </router-link>
             </div>
           </div>