From 2ea7479d75ccf1903e6bfc8a06b36f88f16c9c6d Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 7 Jun 2025 16:03:47 -0600
Subject: [PATCH] fix verbiage and fix the contact actions to be on the
 right-hand side

---
 src/components/DataExportSection.vue |   4 +-
 src/views/AccountViewView.vue        |  30 ++--
 src/views/ContactsView.vue           | 222 ++++++++++++++-------------
 3 files changed, 127 insertions(+), 129 deletions(-)

diff --git a/src/components/DataExportSection.vue b/src/components/DataExportSection.vue
index 01cd1d92..842b2201 100644
--- a/src/components/DataExportSection.vue
+++ b/src/components/DataExportSection.vue
@@ -24,9 +24,7 @@ backup and database export, with platform-specific download instructions. * *
       class="block w-full text-center 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 px-1.5 py-2 rounded-md"
       @click="exportDatabase()"
     >
-      Download Settings & Contacts
-      <br />
-      (excluding Identifier Data)
+      Download Contacts
     </button>
     <a
       ref="downloadLink"
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 6f826d95..e781724b 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -508,7 +508,7 @@
 
       <!-- Deep Identity Details -->
       <span class="text-slate-500 text-sm font-bold mb-2">
-        Deep Identifier Details
+        Identifier Details
       </span>
       <div
         id="sectionDeepIdentifier"
@@ -591,20 +591,9 @@
         Switch Identifier
       </router-link>
 
-      <div class="flex mt-4">
-        <button>
-          <router-link
-            :to="{ name: 'statistics' }"
-            class="block w-fit text-center 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-4 py-2 rounded-md mb-2"
-          >
-            See Global Animated History of Giving
-          </router-link>
-        </button>
-      </div>
-
       <div id="sectionImportContactsSettings" class="mt-4">
         <h2 class="text-slate-500 text-sm font-bold">
-          Import Contacts & Settings Database
+          Import Contacts
         </h2>
 
         <div class="ml-4 mt-2">
@@ -635,9 +624,7 @@
                   class="block text-center 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 px-1.5 py-2 rounded-md mb-6"
                   @click="checkContactImports()"
                 >
-                  Import Only Contacts
-                  <br />
-                  after comparing
+                  Import Contacts
                 </button>
               </div>
             </div>
@@ -973,6 +960,17 @@
       >
         Test Page
       </router-link>
+
+      <div class="flex mt-2">
+        <button>
+          <router-link
+            :to="{ name: 'statistics' }"
+            class="block w-fit text-center 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-4 py-2 rounded-md"
+          >
+            See Global Animated History of Giving
+          </router-link>
+        </button>
+      </div>
     </section>
   </main>
 </template>
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index beebf6e0..b862ffee 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -180,117 +180,119 @@
         data-testId="contactListItem"
       >
         <div class="grow overflow-hidden">
-          <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)
-              "
-            />
-
-            <EntityIcon
-              :contact="contact"
-              :icon-size="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 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>
-
-                <span class="text-sm overflow-hidden">{{
-                  libsUtil.shortDid(contact.did)
-                }}</span>
+          <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-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>
-              <div class="text-sm">
-                {{ contact.notes }}
-              </div>
-            </span>
-          </div>
-          <div
-            v-if="showGiveNumbers && contact.did != activeDid"
-            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"
-              :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>
-
-            <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>
+
+              <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
+                {{ contactNameNonBreakingSpace(contact.name) }}
+              </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>
+
+                  <span class="text-sm overflow-hidden">{{
+                    libsUtil.shortDid(contact.did)
+                  }}</span>
+                </div>
+                <div class="text-sm">
+                  {{ contact.notes }}
+                </div>
+              </span>
+            </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-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>
+
+              <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>
           </div>
         </div>
       </li>