Merge remote-tracking branch 'origin/jdenticon-entity-photos'

src/views/ContactsView.vue

@@ -76,12 +76,17 @@
     <!-- Results List -->
     <ul v-if="contacts.length > 0" class="border-t border-slate-300">
       <li
-        class="border-b border-slate-300 py-4"
+        class="border-b border-slate-300 pt-2.5 pb-4"
         v-for="contact in contacts"
         :key="contact.did"
       >
         <div class="grow overflow-hidden">
           <h2 class="text-base font-semibold">
+            <EntityIcon
+              :entityId="contact.did"
+              :iconSize="24"
+              class="inline-block align-text-bottom border border-slate-300 rounded"
+            ></EntityIcon>
             {{ contact.name || "(no name)" }}
           </h2>
           <div class="text-sm truncate">{{ contact.did }}</div>
@@ -144,7 +149,7 @@
               class="ml-auto flex gap-1.5"
             >
               <button
-                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+                class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-l-md"
                 @click="onClickAddGive(activeDid, contact.did)"
                 title="givenByMeDescriptions[contact.did]"
               >
@@ -159,11 +164,11 @@
                         : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <fa icon="plus" class="fa-fw" />
+                <fa icon="plus" />
               </button>
 
               <button
-                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+                class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-r-md -ml-1.5 border-l border-blue-400"
                 @click="onClickAddGive(contact.did, activeDid)"
                 title="givenToMeDescriptions[contact.did]"
               >
@@ -178,7 +183,7 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <fa icon="plus" class="fa-fw" />
+                <fa icon="plus" />
               </button>
 
               <router-link
@@ -221,12 +226,13 @@ import {
 import { Component, Vue } from "vue-facing-decorator";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import EntityIcon from "@/components/EntityIcon";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
 @Component({
-  components: { AlertMessage, QuickNav },
+  components: { AlertMessage, QuickNav, EntityIcon },
 })
 export default class ContactsView extends Vue {
   activeDid = "";