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,36 +194,40 @@
               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
             v-if="showGiveNumbers && contact.did != activeDid"
-              class="ml-auto flex gap-1.5"
+            class="ml-auto flex gap-1.5 mt-2"
           >
             <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"
@@ -290,7 +287,6 @@
             </router-link>
           </div>
         </div>
-        </div>
       </li>
     </ul>
     <p v-else>There are no contacts.</p>
@@ -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);'