From 3c0f6ce0dee76020db9fad8d965d85c38f06717d Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 18 Dec 2023 19:44:03 +0800
Subject: [PATCH] Design and uniformity tweaks

---
 src/views/ClaimView.vue | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 34b43108..375e3492 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -19,9 +19,9 @@
     <!-- Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
       <div>
-        <div class="block pb-4 flex gap-4 overflow-hidden">
+        <div class="block flex gap-4 overflow-hidden">
           <div class="overflow-hidden">
-            <h2 class="text-xl">{{ veriClaim.id }}</h2>
+            <h2 class="text-md font-bold">{{ veriClaim.id }}</h2>
             <div class="text-sm">
               <div>
                 {{ veriClaim.claimType }}
@@ -45,7 +45,7 @@
     </div>
 
     <div>
-      <h2 class="font-bold text-2xl">Confirmations</h2>
+      <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">
@@ -136,22 +136,24 @@
     </div>
 
     <div>
-      <h2 class="font-bold text-2xl mt-8">Claim</h2>
-      <pre>{{ util.inspect(veriClaim, false, null) }}</pre>
+      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Claim</h2>
+      <pre class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md">
+        {{ util.inspect(veriClaim, false, null) }}
+      </pre>
     </div>
 
-    <h2 class="font-bold text-2xl mt-8">Full Claim</h2>
-    <p>
+    <h2 class="font-bold uppercase 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">
-      <div v-if="fullClaimMessage">
+      <p v-if="fullClaimMessage" class="mb-4">
         {{ fullClaimMessage }}
-      </div>
+      </p>
       <button
         v-else
-        class="bg-blue-600 text-white mt-4 px-4 py-2 rounded-md mb-4"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
         @click="showFullClaim(veriClaim.id)"
       >
         Load Full Claim Details
@@ -161,10 +163,12 @@
       <pre>{{ util.inspect(fullClaim, false, null) }}</pre>
     </div>
 
-    <a :href="apiServer + '/api/claim/' + veriClaim.id" target="_blank">
-      <button class="bg-blue-600 text-white mt-4 px-4 py-2 rounded-md mb-4">
-        View on the Public Server
-      </button>
+    <a
+      :href="apiServer + '/api/claim/' + veriClaim.id"
+      target="_blank"
+      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+    >
+      View on the Public Server
     </a>
   </section>
 </template>