refactor name setting and other small messaging & types

src/views/AccountViewView.vue

@@ -52,7 +52,17 @@
 
     <!-- Identity Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-semibold mb-2">{{ givenName }}</h2>
+      <h2 v-if="givenName" class="text-xl font-semibold mb-2">
+        {{ givenName }}
+      </h2>
+      <span v-else>
+        <router-link
+          :to="{ name: 'new-edit-account' }"
+          class="text-xs bg-blue-500 text-white px-1.5 py-1 rounded-md"
+        >
+          (set name)
+        </router-link>
+      </span>
 
       <div class="text-slate-500 text-sm font-bold">ID</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
@@ -113,7 +123,7 @@
 
     <router-link
       :to="{ name: 'new-edit-account' }"
-      class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+      class="block text-center text-lg font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md mb-2"
     >
       Edit Identity
     </router-link>