Nav tweaks

ClickUp task 86b3dgv2f

src/components/QuickNav.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- QUICK NAV -->
   <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2 max-w-3xl mx-auto">
+    <ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
       <!-- Home Feed -->
       <li
         :class="{

src/views/AccountViewView.vue

@@ -256,7 +256,7 @@
       <span class="mb-2 font-bold">Location for Searches</span>
       <router-link
         :to="{ name: 'search-area' }"
-        class="text-m 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-1.5 py-2 rounded-md mb-2"
+        class="text-m 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-4 py-2 rounded-md mb-2"
       >
         {{ isSearchAreasSet ? "Change" : "Set" }} Search Area…
       </router-link>

src/views/ClaimView.vue

@@ -204,7 +204,7 @@
     <div v-if="libsUtil.isGiveAction(veriClaim)">
       <div class="flex columns-3">
         <button
-          class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-4 py-2 rounded-md"
+          class="col-span-1 bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-4 py-2 rounded-md"
           v-if="
             libsUtil.isGiveRecordTheUserCanConfirm(
               isRegistered,

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="24"
-              class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer"
-              @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] || ''"
             >
-              <button
+              From:
-                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"
+              <br />
-                @click="confirmShowGiftedDialog(contact.did, activeDid)"
+              {{
-                :title="givenToMeDescriptions[contact.did] || ''"
+                /* eslint-disable prettier/prettier */
-              >
+                this.showGiveTotals
-                From:
+                  ? ((givenToMeConfirmed[contact.did] || 0)
-                <br />
+                      + (givenToMeUnconfirmed[contact.did] || 0))
-                {{
+                  : this.showGiveConfirmed
-                  /* eslint-disable prettier/prettier */
+                      ? (givenToMeConfirmed[contact.did] || 0)
-                  this.showGiveTotals
+                      : (givenToMeUnconfirmed[contact.did] || 0)
-                    ? ((givenToMeConfirmed[contact.did] || 0)
+                /* eslint-enable prettier/prettier */
-                        + (givenToMeUnconfirmed[contact.did] || 0))
+              }}
-                    : this.showGiveConfirmed
+            </button>
-                        ? (givenToMeConfirmed[contact.did] || 0)
-                        : (givenToMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </button>
 
-              <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"
+              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)"
+              @click="confirmShowGiftedDialog(activeDid, contact.did)"
-                :title="givenByMeDescriptions[contact.did] || ''"
+              :title="givenByMeDescriptions[contact.did] || ''"
-              >
+            >
-                To:
+              To:
-                <br />
+              <br />
-                {{
+              {{
-                  /* eslint-disable prettier/prettier */
+                /* eslint-disable prettier/prettier */
-                  this.showGiveTotals
+                this.showGiveTotals
-                    ? ((givenByMeConfirmed[contact.did] || 0)
+                  ? ((givenByMeConfirmed[contact.did] || 0)
-                      + (givenByMeUnconfirmed[contact.did] || 0))
+                    + (givenByMeUnconfirmed[contact.did] || 0))
-                    : this.showGiveConfirmed
+                  : this.showGiveConfirmed
-                        ? (givenByMeConfirmed[contact.did] || 0)
+                      ? (givenByMeConfirmed[contact.did] || 0)
-                        : (givenByMeUnconfirmed[contact.did] || 0)
+                      : (givenByMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
+                /* eslint-enable prettier/prettier */
-                }}
+              }}
-              </button>
+            </button>
 
-              <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"
+              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)"
+              @click="openOfferDialog(contact.did, contact.name)"
-                data-testId="offerButton"
+              data-testId="offerButton"
-              >
+            >
-                Offer
+              Offer
-              </button>
+            </button>
 
-              <router-link
+            <router-link
-                :to="{
+              :to="{
-                  name: 'contact-amounts',
+                name: 'contact-amounts',
-                  query: { contactDid: contact.did },
+                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"
+              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"
+              title="See more given activity"
-              >
+            >
-                <fa icon="file-lines" class="fa-fw" />
+              <fa icon="file-lines" class="fa-fw" />
-              </router-link>
+            </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);'

src/views/HomeView.vue

@@ -3,7 +3,7 @@
   <TopMessage />
 
   <!-- CONTENT -->
-  <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
       {{ AppString.APP_NAME }}
     </h1>

src/views/ProjectViewView.vue

@@ -237,7 +237,7 @@
             <button
               data-testId="offerButton"
               @click="openOfferDialog()"
-              class="block w-full 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-1 rounded-md"
+              class="block w-full 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-3 py-1.5 text-sm leading-tight rounded-md"
             >
               Offer to this (maybe with conditions)...
             </button>
@@ -318,7 +318,7 @@
           <div class="text-center">
             <button
               @click="openGiftDialogToProject()"
-              class="block w-full 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-1rounded-md"
+              class="block w-full 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-3 py-1.5 text-sm leading-tight rounded-md"
             >
               Given To This...
             </button>
@@ -470,7 +470,7 @@
           <div class="text-center">
             <button
               @click="openGiftDialogFromProject()"
-              class="block w-full 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-1 rounded-md"
+              class="block w-full 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-3 py-1.5 text-sm leading-tight rounded-md"
             >
               Given By This...
             </button>

src/views/ProjectsView.vue

@@ -233,7 +233,7 @@
         >
           <a
             @click="onClickLoadProject(project.handleId)"
-            class="block py-4 flex gap-4"
+            class="block py-4 flex gap-4 cursor-pointer"
           >
             <div class="flex-none">
               <ProjectIcon