UI tweaks

src/views/ContactQRScanShowView.vue

@@ -23,20 +23,20 @@
       </h1>
     </div>
 
-    <p
+    <div
       v-if="!givenName"
-      class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 my-4"
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 my-4"
     >
-      <span class="text-red">Beware!</span>
-      You aren't sharing your name, so quickly
-      <br />
-      <span
-        class="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-1 rounded-md"
+      <p class="mb-2">
+      <b>Note:</b> your identity currently does <b>not</b> include a name.
+      </p>
+      <button
+        class="inline-block 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-4 py-2 rounded-md"
         @click="openUserNameDialog"
       >
-        click here to set it for them.
-      </span>
-    </p>
+        Set Your Name
+      </button>
+    </div>
 
     <UserNameDialog ref="userNameDialog" />