Design and uniformity tweaks

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>
+      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Claim</h2>
-      <pre>{{ util.inspect(veriClaim, false, null) }}</pre>
+      <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>
+    <h2 class="font-bold uppercase text-xl mt-8 mb-2">Full Claim</h2>
-    <p>
+    <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">
+    <a
-      <button class="bg-blue-600 text-white mt-4 px-4 py-2 rounded-md mb-4">
+      :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
-      </button>
     </a>
   </section>
 </template>