From 7b73e9f51da98de1bf864ad0270742066ef3bd22 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 4 Jan 2025 14:55:20 -0700
Subject: [PATCH] move extended details under details section in ClaimView, and
 make that section more similar to ConfirmGiftView

---
 src/views/ClaimView.vue       | 77 +++++++++++++++++++----------------
 src/views/ConfirmGiftView.vue |  6 +--
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 9a206d1..9532581 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -345,8 +345,15 @@
     </div>
 
     <!-- Note that a similar section is found in ConfirmGiftView.vue -->
-    <div>
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Details</h2>
+    <h2
+        class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
+        @click="showVeriClaimDump = !showVeriClaimDump"
+      >
+        Details
+        <fa v-if="showVeriClaimDump" icon="chevron-up" />
+        <fa v-else icon="chevron-down" />
+    </h2>
+    <div v-if="showVeriClaimDump">
       <div
         v-if="
           serverUtil.containsHiddenDid(veriClaim) &&
@@ -448,50 +455,48 @@
         This record is an edited version. The latest version is here.
       </span>
       <br />
-      <button @click="showVeriClaimDump = !showVeriClaimDump" class="ml-2">
-        Details
-        <fa v-if="showVeriClaimDump" icon="chevron-up" class="text-blue-400" />
-        <fa v-else icon="chevron-down" class="text-blue-400" />
-      </button>
       <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
       <pre
         v-if="showVeriClaimDump"
         class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
         >{{ veriClaimDump }}</pre
       >
-    </div>
 
-    <h2 class="text-xl mt-8 mb-2">Full Claim</h2>
-    <p class="mb-4">
-      The full claim includes the claim as it was originally issued, including
-      the signature (ie. the proof of issuance by that person).
-    </p>
-    <div v-if="!fullClaim">
-      <p v-if="fullClaimMessage" class="mb-4">
-        {{ fullClaimMessage }}
+      <h2 class="text-xl mt-8 mb-2">Full Claim</h2>
+      <p class="mb-4">
+        The full claim includes the claim as it was originally issued, including
+        the signature (ie. the proof of issuance by that person).
       </p>
-      <button
-        v-else
-        class="block w-full text-center text-md uppercase 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"
-        @click="showFullClaim(veriClaim.id as string)"
-      >
-        Load Full Claim Details
-      </button>
-    </div>
-    <div v-else>
-      <pre
-        class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
-        >{{ fullClaimDump }}</pre
+      <div v-if="!fullClaim">
+        <p v-if="fullClaimMessage" class="mb-4">
+          {{ fullClaimMessage }}
+        </p>
+        <button
+          v-else
+          class="text-blue-500 cursor-pointer"
+          @click="showFullClaim(veriClaim.id as string)"
+        >
+          <fa icon="file-lines" class="fa-fw" />
+          Load Full Claim Details
+        </button>
+      </div>
+      <div v-else>
+        <pre
+          class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
+          >{{ fullClaimDump }}</pre
+        >
+      </div>
+
+      <a
+        :href="apiServer + '/api/claim/' + veriClaim.id"
+        target="_blank"
+        class="text-blue-500 cursor-pointer"
       >
+        <fa icon="file-lines" class="fa-fw" />
+        <fa icon="arrow-up-right-from-square" class="ml-1 fa-fw" />
+        View on the Public Server
+      </a>
     </div>
-
-    <a
-      :href="apiServer + '/api/claim/' + veriClaim.id"
-      target="_blank"
-      class="block w-full text-center text-md uppercase 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"
-    >
-      View on the Public Server
-    </a>
   </section>
 </template>
 
diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue
index d515221..e9df052 100644
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -256,12 +256,12 @@
 
       <!-- Note that a similar section is found in ClaimView.vue -->
       <h2
-        class="font-bold uppercase text-xl text-blue-500 mt-8 mb-2 cursor-pointer"
+        class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
         @click="showVeriClaimDump = !showVeriClaimDump"
       >
         Details
-        <span v-if="!showVeriClaimDump"><fa icon="chevron-down" /></span>
-        <span v-else><fa icon="chevron-up" /></span>
+        <fa v-if="showVeriClaimDump" icon="chevron-up" />
+        <fa v-else icon="chevron-down" />
       </h2>
       <div v-if="showVeriClaimDump">
         <div