Contact list tweaks

src/views/ContactsView.vue

@@ -106,7 +106,7 @@
           />
           <button
             href=""
-            class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
+            class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
             :style="
               contactsSelected.length > 0
                 ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
@@ -127,7 +127,7 @@
       <div class="w-full text-right">
         <button
           href=""
-          class="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-1 py-1 rounded-md"
+          class="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-3 py-1.5 rounded-md"
           @click="toggleShowContactAmounts()"
         >
           {{
@@ -177,14 +177,7 @@
         data-testId="contactListItem"
       >
         <div class="grow overflow-hidden">
-          <div class="flex items-center">
+          <div class="flex items-center gap-3">
-            <EntityIcon
-              :contact="contact"
-              :iconSize="48"
-              class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
-              @click="showLargeIdenticon = contact"
-            />
-
             <input
               type="checkbox"
               v-if="!showGiveNumbers"
@@ -201,94 +194,97 @@
               data-testId="contactCheckOne"
             />
 
-            <h2
+            <EntityIcon
-              class="text-base font-semibold ml-2 w-1/3 truncate flex-shrink-0"
+              :contact="contact"
-            >
+              :iconSize="48"
+              class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+              @click="showLargeIdenticon = contact"
+            />
+
+            <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
               {{ contactNameNonBreakingSpace(contact.name) }}
             </h2>
 
             <span>
-              <div class="flex items-center">
+              <div class="flex gap-2 items-center">
                 <router-link
                   :to="{
                     path: '/did/' + encodeURIComponent(contact.did),
                   }"
                   title="See more about this person"
                 >
-                  <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
+                  <fa icon="circle-info" class="text-xl text-blue-500" />
                 </router-link>
 
-                <span class="ml-4 text-sm overflow-hidden">{{
+                <span class="text-sm overflow-hidden">{{
                   libsUtil.shortDid(contact.did)
                 }}</span>
               </div>
-              <div class="ml-4 text-sm">
+              <div class="text-sm">
                 {{ contact.notes }}
               </div>
             </span>
           </div>
-          <div id="ContactActions" class="flex gap-1.5 mt-2">
+          <div
-            <div
+            v-if="showGiveNumbers && contact.did != activeDid"
-              v-if="showGiveNumbers && contact.did != activeDid"
+            class="ml-auto flex gap-1.5 mt-2"
-              class="ml-auto flex gap-1.5"
+          >
+            <button
+              class="text-sm 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-2 py-1.5 rounded-l-md"
+              @click="confirmShowGiftedDialog(contact.did, activeDid)"
+              :title="givenToMeDescriptions[contact.did] || ''"
+            >
+              From:
+              <br />
+              {{
+                /* eslint-disable prettier/prettier */
+                this.showGiveTotals
+                  ? ((givenToMeConfirmed[contact.did] || 0)
+                      + (givenToMeUnconfirmed[contact.did] || 0))
+                  : this.showGiveConfirmed
+                      ? (givenToMeConfirmed[contact.did] || 0)
+                      : (givenToMeUnconfirmed[contact.did] || 0)
+                /* eslint-enable prettier/prettier */
+              }}
+            </button>
+
+            <button
+              class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
+              @click="confirmShowGiftedDialog(activeDid, contact.did)"
+              :title="givenByMeDescriptions[contact.did] || ''"
+            >
+              To:
+              <br />
+              {{
+                /* eslint-disable prettier/prettier */
+                this.showGiveTotals
+                  ? ((givenByMeConfirmed[contact.did] || 0)
+                    + (givenByMeUnconfirmed[contact.did] || 0))
+                  : this.showGiveConfirmed
+                      ? (givenByMeConfirmed[contact.did] || 0)
+                      : (givenByMeUnconfirmed[contact.did] || 0)
+                /* eslint-enable prettier/prettier */
+              }}
+            </button>
+
+            <button
+              class="text-sm 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-2 py-1.5 rounded-md border border-blue-400"
+              @click="openOfferDialog(contact.did, contact.name)"
+              data-testId="offerButton"
+            >
+              Offer
+            </button>
+
+            <router-link
+              :to="{
+                name: 'contact-amounts',
+                query: { contactDid: contact.did },
+              }"
+              class="text-sm 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-1.5 rounded-md border border-slate-400"
+              title="See more given activity"
             >
-              <button
+              <fa icon="file-lines" class="fa-fw" />
-                class="text-sm 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-2 py-1.5 rounded-l-md"
+            </router-link>
-                @click="confirmShowGiftedDialog(contact.did, activeDid)"
-                :title="givenToMeDescriptions[contact.did] || ''"
-              >
-                From:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  this.showGiveTotals
-                    ? ((givenToMeConfirmed[contact.did] || 0)
-                        + (givenToMeUnconfirmed[contact.did] || 0))
-                    : this.showGiveConfirmed
-                        ? (givenToMeConfirmed[contact.did] || 0)
-                        : (givenToMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </button>
-
-              <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
-                @click="confirmShowGiftedDialog(activeDid, contact.did)"
-                :title="givenByMeDescriptions[contact.did] || ''"
-              >
-                To:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  this.showGiveTotals
-                    ? ((givenByMeConfirmed[contact.did] || 0)
-                      + (givenByMeUnconfirmed[contact.did] || 0))
-                    : this.showGiveConfirmed
-                        ? (givenByMeConfirmed[contact.did] || 0)
-                        : (givenByMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </button>
-
-              <button
-                class="text-sm 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-2 py-1.5 rounded-md border border-blue-400"
-                @click="openOfferDialog(contact.did, contact.name)"
-                data-testId="offerButton"
-              >
-                Offer
-              </button>
-
-              <router-link
-                :to="{
-                  name: 'contact-amounts',
-                  query: { contactDid: contact.did },
-                }"
-                class="text-sm 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-1.5 rounded-md border border-slate-400"
-                title="See more given activity"
-              >
-                <fa icon="file-lines" class="fa-fw" />
-              </router-link>
-            </div>
           </div>
         </div>
       </li>
@@ -310,7 +306,7 @@
       />
       <button
         href=""
-        class="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 ml-2 px-1 py-1 rounded-md"
+        class="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 ml-3 px-3 py-1.5 rounded-md"
         :style="
           contactsSelected.length > 0
             ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'