tweak UI for give-confirmation screen

src/views/ConfirmGiftView.vue

@@ -55,7 +55,7 @@
           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 ml-2 px-4 py-2 rounded-md"
           :href="urlForNewGive"
         >
-          Record One of Your Own
+          Record a Similar One
         </a>
       </div>
 
@@ -77,20 +77,21 @@
                     veriClaim.claim.object.amountOfThisGood,
                   )
                 }}
-                600
               </div>
               <div>
                 <fa icon="message" class="fa-fw text-slate-400" />
-                {{ veriClaim.claim?.object ? "and" : "" }}
+                {{ veriClaim.claim?.object ? "and:" : "" }}
                 {{ veriClaim.claim?.description }}
               </div>
+              <div class="ml-6">to</div>
               <div>
                 <fa icon="arrow-up" class="fa-fw text-slate-400" />
-                to {{ recipientName }}
+                {{ recipientName }}
               </div>
               <div>
                 <fa icon="calendar" class="fa-fw text-slate-400" />
-                {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
+                on
+                {{ veriClaim.issuedAt?.substring(0, 10) }}
               </div>
 
               <!-- Fullfills Links -->
@@ -140,39 +141,8 @@
         </div>
       </div>
       <div class="mt-2">
-        <fa icon="comment" class="fa-fw text-slate-400" />
+        <fa icon="comment" class="text-slate-400" />
-        {{ issuerName }} said that.
+        {{ issuerName }} posted that.
-      </div>
-
-      <div class="flex justify-center">
-        <button
-          v-if="
-            libsUtil.isGiveRecordTheUserCanConfirm(
-              veriClaim,
-              activeDid,
-              confirmerIdList,
-            )
-          "
-          @click="confirmConfirmClaim()"
-          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"
-        >
-          Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
-        </button>
-        <button
-          v-else
-          @click="notifyWhyCannotConfirm()"
-          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 px-4 py-2 rounded-md"
-        >
-          Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
-        </button>
-        <a
-          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 ml-2 px-4 py-2 rounded-md"
-          :href="urlForNewGive"
-        >
-          Record One of Your Own
-        </a>
       </div>
 
       <div v-if="libsUtil.isGiveAction(veriClaim)" class="mt-4">
@@ -298,7 +268,8 @@
         @click="showDetails = !showDetails"
       >
         {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
-        <span v-if="!showDetails">...</span>
+        <span v-if="!showDetails"><fa icon="chevron-down" /></span>
+        <span v-else><fa icon="chevron-up" /></span>
       </h2>
       <div v-if="showDetails">
         <div