Merge fixes

src/views/ClaimView.vue

@@ -345,8 +345,15 @@
     </div>
 
     <!-- Note that a similar section is found in ConfirmGiftView.vue -->
-    <div>
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Details</h2>
+    <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-right" />
+    </h2>
+    <div v-if="showVeriClaimDump">
       <div
         v-if="
           serverUtil.containsHiddenDid(veriClaim) &&
@@ -448,50 +455,48 @@
         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">
-      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">
-      <p v-if="fullClaimMessage" class="mb-4">
-        {{ fullClaimMessage }}
+      <h2 class="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>
-      <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"
-        @click="showFullClaim(veriClaim.id as string)"
-      >
-        Load Full Claim Details
-      </button>
-    </div>
-    <div v-else>
-      <pre
-        class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
-        >{{ fullClaimDump }}</pre
-      >
-    </div>
+      <div v-if="!fullClaim">
+        <p v-if="fullClaimMessage" class="mb-4">
+          {{ fullClaimMessage }}
+        </p>
+        <button
+          v-else
+          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>
+      <div v-else>
+        <pre
+          class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
+          >{{ fullClaimDump }}</pre
+        >
+      </div>
 
-    <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"
-    >
-      View on the Public Server
-    </a>
+      <a
+        :href="apiServer + '/api/claim/' + veriClaim.id"
+        target="_blank"
+        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>
 
@@ -601,7 +606,7 @@ export default class ClaimView extends Vue {
           title: "Error Loading Profile",
           text: "See the Help page for problems with your personal data.",
         },
-        -1,
+        5000,
       );
     }
 
@@ -618,7 +623,7 @@ export default class ClaimView extends Vue {
           title: "Error",
           text: "No claim ID was provided.",
         },
-        -1,
+        5000,
       );
     }
 
@@ -680,7 +685,7 @@ export default class ClaimView extends Vue {
             title: "Error",
             text: "There was a problem retrieving that claim.",
           },
-          -1,
+          5000,
         );
         return;
       }
@@ -727,7 +732,7 @@ export default class ClaimView extends Vue {
               title: "Error",
               text: "Got error retrieving linked provider data.",
             },
-            -1,
+            5000,
           );
         }
       } else if (this.veriClaim.claimType === "Offer") {
@@ -750,7 +755,7 @@ export default class ClaimView extends Vue {
               title: "Error",
               text: "Got error retrieving linked offer data.",
             },
-            -1,
+            5000,
           );
         }
       }
@@ -805,7 +810,7 @@ export default class ClaimView extends Vue {
             title: "Error",
             text: "There was a problem getting that claim.",
           },
-          -1,
+          5000,
         );
       }
     } catch (error: unknown) {
@@ -849,7 +854,7 @@ export default class ClaimView extends Vue {
             title: "Error",
             text: "Something went wrong retrieving that claim.",
           },
-          -1,
+          5000,
         );
       }
     }
@@ -912,7 +917,7 @@ export default class ClaimView extends Vue {
           title: "Error",
           text: "There was a problem submitting the confirmation.",
         },
-        -1,
+        5000,
       );
     }
   }