refactor confirmation section to show together and more cleanly

src/views/ClaimView.vue

@@ -131,6 +131,18 @@
       </div>
     </div>
 
+    <div class="mt-8">
+      <button
+        v-if="libsUtil.canFulfillOffer(veriClaim)"
+        @click="openFulfillGiftDialog()"
+        class="col-span-1 block w-fit 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"
+      >
+        Affirm Delivery
+        <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
+      </button>
+    </div>
+
+    <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 px-4 py-2 rounded-md"
@@ -147,31 +159,20 @@
           Confirm
           <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
+        <h2 v-else class="font-bold uppercase text-xl mt-2 mb-2">Confirmations</h2>
 
-      <span class="px-4 py-2">
+        <span class="mt-0.5 px-4 py-2">
           <router-link
             v-if="libsUtil.isGiveAction(veriClaim)"
             :to="'/confirm-gift/' + encodeURIComponent(veriClaim.id)"
             class="col-span-1 text-blue-500"
           >
-          Confirmation Details...
+            Details...
           </router-link>
         </span>
-
-      <button
-        v-if="libsUtil.canFulfillOffer(veriClaim)"
-        @click="openFulfillGiftDialog()"
-        class="col-span-1 block w-fit 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"
-      >
-        Affirm Delivery
-        <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
-      </button>
       </div>
       <GiftedDialog ref="customGiveDialog" />
 
-    <div v-if="libsUtil.isGiveAction(veriClaim)">
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Confirmations</h2>
-
       <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
       <span v-else-if="totalConfirmers() === 1">
         One person has confirmed this.