Optimized item actions

- Edited button labels for brevity
- Repositioned Totals toggle
- Restyled note about recent hours
- Various text size and spacing changes

src/views/ContactsView.vue

@@ -78,7 +78,7 @@
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
       />
       <button
-        class="px-4 rounded-r bg-green-200 border border-l-0 border-green-400"
+        class="px-4 rounded-r bg-green-200 border border-green-400"
         @click="onClickNewContact()"
       >
         <font-awesome icon="plus" class="fa-fw" />
@@ -86,8 +86,8 @@
     </div>
 
     <div v-if="contacts.length > 0" class="flex justify-between">
-      <div class="w-full text-left">
-        <div v-if="!showGiveNumbers">
+      <div class="">
+        <div v-if="!showGiveNumbers" class="flex items-center">
           <input
             type="checkbox"
             :checked="contactsSelected.length === contacts.length"
@@ -101,52 +101,29 @@
           />
           <button
             v-if="!showGiveNumbers"
-            href=""
-            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="
+            :class="
               contactsSelected.length > 0
-                ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
-                : 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
+                ? 'text-md 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-3 px-3 py-1.5 rounded-md cursor-pointer'
+                : '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-slate-300 ml-3 px-3 py-1.5 rounded-md cursor-not-allowed'
             "
             data-testId="copySelectedContactsButtonTop"
             @click="copySelectedContacts()"
           >
-            Copy Selections
-          </button>
-          <button @click="showCopySelectionsInfo()">
-            <font-awesome
-              icon="circle-info"
-              class="text-xl text-blue-500 ml-4"
-            />
+            Copy
           </button>
+          <font-awesome
+            @click="showCopySelectionsInfo()"
+            icon="circle-info"
+            class="text-2xl text-blue-500 ml-2"
+          />
         </div>
       </div>
 
-      <div class="w-full text-right">
+      <div class="flex items-center gap-2">
         <button
+          v-if="showGiveNumbers"
           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-3 py-1.5 rounded-md"
-          @click="toggleShowContactAmounts()"
-        >
-          {{
-            showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
-          }}
-        </button>
-      </div>
-    </div>
-    <div v-if="showGiveNumbers" class="flex justify-between mt-1">
-      <div class="w-full text-right">
-        In the following, only the most recent hours are included. To see more,
-        click
-        <span
-          class="text-sm uppercase 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"
-        >
-          <font-awesome icon="file-lines" class="fa-fw" />
-        </span>
-        <br />
-        <button
-          href=""
-          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
+          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
           :class="showGiveAmountsClassNames()"
           @click="toggleShowGiveTotals()"
         >
@@ -159,6 +136,28 @@
           }}
           <font-awesome icon="left-right" class="fa-fw" />
         </button>
+
+        <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-3 py-1.5 rounded-md"
+          @click="toggleShowContactAmounts()"
+        >
+          {{
+            showGiveNumbers ? "Hide Actions" : "See Actions"
+          }}
+        </button>
+      </div>
+    </div>
+    <div v-if="showGiveNumbers" class="my-3">
+      <div class="w-full text-center text-sm italic text-slate-600">
+        Only the most recent hours are included. <br />To see more,
+        click
+        <span
+          class="text-sm uppercase 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-0.5 rounded"
+        >
+          <font-awesome icon="file-lines" class="text-xs fa-fw" />
+        </span>
+        <br />
       </div>
     </div>
 
@@ -166,7 +165,7 @@
     <ul
       v-if="contacts.length > 0"
       id="listContacts"
-      class="border-t border-slate-300 mt-1"
+      class="border-t border-slate-300 my-2"
     >
       <li
         v-for="contact in filteredContacts()"
@@ -174,125 +173,127 @@
         class="border-b border-slate-300 pt-1 pb-1"
         data-testId="contactListItem"
       >
-        <div class="grow overflow-hidden">
-          <div class="flex items-center justify-between gap-3">
-            <div class="flex items-center gap-3">
-              <input
-                v-if="!showGiveNumbers"
-                type="checkbox"
-                :checked="contactsSelected.includes(contact.did)"
-                class="ml-2 h-6 w-6 flex-shrink-0"
-                data-testId="contactCheckOne"
-                @click="
-                  contactsSelected.includes(contact.did)
-                    ? contactsSelected.splice(
-                        contactsSelected.indexOf(contact.did),
-                        1,
-                      )
-                    : contactsSelected.push(contact.did)
-                "
-              />
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex overflow-hidden min-w-0 items-center gap-3">
+            <input
+              v-if="!showGiveNumbers"
+              type="checkbox"
+              :checked="contactsSelected.includes(contact.did)"
+              class="ml-2 h-6 w-6 flex-shrink-0"
+              data-testId="contactCheckOne"
+              @click="
+                contactsSelected.includes(contact.did)
+                  ? contactsSelected.splice(
+                      contactsSelected.indexOf(contact.did),
+                      1,
+                    )
+                  : contactsSelected.push(contact.did)
+              "
+            />
 
-              <div
-                class="flex-shrink-0 w-12 h-12 flex items-center justify-center"
-              >
-                <EntityIcon
-                  :contact="contact"
-                  :icon-size="48"
-                  class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
-                  @click="showLargeIdenticon = contact"
-                />
-              </div>
+            <EntityIcon
+              :contact="contact"
+              :icon-size="48"
+              class="shrink-0 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) }}
+            <div class="overflow-hidden">
+              <h2 class="text-base font-semibold truncate">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
+                  {{ contactNameNonBreakingSpace(contact.name) }}
+                </router-link>
               </h2>
 
-              <span>
-                <div class="flex gap-2 items-center">
-                  <router-link
-                    :to="{
-                      path: '/did/' + encodeURIComponent(contact.did),
-                    }"
-                    title="See more about this person"
-                  >
-                    <font-awesome
-                      icon="circle-info"
-                      class="text-xl text-blue-500"
-                    />
-                  </router-link>
+              <div class="flex gap-1.5 items-center overflow-hidden">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
+                  <font-awesome
+                    icon="circle-info"
+                    class="text-base text-blue-500"
+                  />
+                </router-link>
 
-                  <span class="text-sm overflow-hidden">{{
-                    libsUtil.shortDid(contact.did)
-                  }}</span>
-                </div>
-                <div class="text-sm">
-                  {{ contact.notes }}
-                </div>
-              </span>
+                <span class="text-xs truncate">{{
+                  contact.did
+                }}</span>
+              </div>
+              <div class="text-sm">
+                {{ contact.notes }}
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="showGiveNumbers && contact.did != activeDid"
+            class="flex gap-1.5 items-end"
+          >
+            <div class='text-center'>
+              <div class="text-xs leading-none mb-1">From/To</div>
+              <div class="flex items-center">
+                <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.5 py-1.5 rounded-l-md"
+                  :title="givenToMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(contact.did, activeDid)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenToMeConfirmed[contact.did] || 0)
+                          + (givenToMeUnconfirmed[contact.did] || 0))
+                      : 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 px-2.5 py-1.5 rounded-r-md border-l"
+                  :title="givenByMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(activeDid, contact.did)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenByMeConfirmed[contact.did] || 0)
+                        + (givenByMeUnconfirmed[contact.did] || 0))
+                      : showGiveConfirmed
+                          ? (givenByMeConfirmed[contact.did] || 0)
+                          : (givenByMeUnconfirmed[contact.did] || 0)
+                    /* eslint-enable prettier/prettier */
+                  }}
+                </button>
+              </div>
             </div>
 
-            <div
-              v-if="showGiveNumbers && contact.did != activeDid"
-              class="flex gap-2 items-center"
+            <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"
+              data-testId="offerButton"
+              @click="openOfferDialog(contact.did, contact.name)"
             >
-              <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"
-                :title="givenToMeDescriptions[contact.did] || ''"
-                @click="confirmShowGiftedDialog(contact.did, activeDid)"
-              >
-                From:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  showGiveTotals
-                    ? ((givenToMeConfirmed[contact.did] || 0)
-                        + (givenToMeUnconfirmed[contact.did] || 0))
-                    : showGiveConfirmed
-                        ? (givenToMeConfirmed[contact.did] || 0)
-                        : (givenToMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </button>
+              Offer
+            </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"
-                :title="givenByMeDescriptions[contact.did] || ''"
-                @click="confirmShowGiftedDialog(activeDid, contact.did)"
-              >
-                To:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  showGiveTotals
-                    ? ((givenByMeConfirmed[contact.did] || 0)
-                      + (givenByMeUnconfirmed[contact.did] || 0))
-                    : 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"
-                data-testId="offerButton"
-                @click="openOfferDialog(contact.did, contact.name)"
-              >
-                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"
-              >
-                <font-awesome icon="file-lines" class="fa-fw" />
-              </router-link>
-            </div>
+            <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"
+              title="See more given activity"
+            >
+              <font-awesome icon="file-lines" class="fa-fw" />
+            </router-link>
           </div>
         </div>
       </li>
@@ -314,16 +315,14 @@
       />
       <button
         v-if="!showGiveNumbers"
-        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-3 px-3 py-1.5 rounded-md"
-        :style="
+        :class="
           contactsSelected.length > 0
-            ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
-            : 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
+            ? 'text-md 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-3 px-3 py-1.5 rounded-md cursor-pointer'
+            : '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-slate-300 ml-3 px-3 py-1.5 rounded-md cursor-not-allowed'
         "
         @click="copySelectedContacts()"
       >
-        Copy Selections
+        Copy
       </button>
     </div>