move extended details under details section in ClaimView, and make that section more similar to ConfirmGiftView

src/views/ClaimView.vue

@@ -345,8 +345,15 @@
     </div>
 
     <!-- Note that a similar section is found in ConfirmGiftView.vue -->
-    <div>
+    <h2
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Details</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,18 +455,12 @@
         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">
@@ -472,9 +473,10 @@
         </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"
+          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>
@@ -488,10 +490,13 @@
       <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"
+        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>
   </section>
 </template>
 

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>
+        <fa v-if="showVeriClaimDump" icon="chevron-up" />
-        <span v-else><fa icon="chevron-up" /></span>
+        <fa v-else icon="chevron-down" />
       </h2>
       <div v-if="showVeriClaimDump">
         <div