refactor look of identity page

src/views/AccountViewView.vue

@@ -77,48 +77,6 @@
         </button>
         <span v-show="showDidCopy">Copied!</span>
       </div>
-
-      <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
-      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
-        <code class="truncate">{{ publicBase64 }}</code>
-        <button
-          @click="
-            doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
-          "
-          class="ml-2"
-        >
-          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
-        </button>
-        <span v-show="showB64Copy">Copied!</span>
-      </div>
-
-      <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
-      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
-        <code class="truncate">{{ publicHex }}</code>
-        <button
-          @click="
-            doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
-          "
-          class="ml-2"
-        >
-          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
-        </button>
-        <span v-show="showPubCopy">Copied!</span>
-      </div>
-
-      <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
-      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
-        <code class="truncate">{{ derivationPath }}</code>
-        <button
-          @click="
-            doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
-          "
-          class="ml-2"
-        >
-          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
-        </button>
-        <span v-show="showDerCopy">Copied!</span>
-      </div>
     </div>
 
     <router-link
@@ -142,8 +100,10 @@
           )
         "
       >
+        <!-- label -->
+        <div>App Notifications</div>
         <!-- toggle -->
-        <div class="relative">
+        <div class="relative ml-2">
           <!-- input -->
           <input type="checkbox" name="toggleNotifications" class="sr-only" />
           <!-- line -->
@@ -153,8 +113,6 @@
             class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
           ></div>
         </div>
-        <!-- label -->
-        <div class="ml-2">App Notifications</div>
       </label>
       <label
         for="toggleMuteNotifications"
@@ -169,8 +127,10 @@
           )
         "
       >
+        <!-- label -->
+        <div>Mute Notifications</div>
         <!-- toggle -->
-        <div class="relative">
+        <div class="relative ml-2">
           <!-- input -->
           <input
             type="checkbox"
@@ -184,8 +144,6 @@
             class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
           ></div>
         </div>
-        <!-- label -->
-        <div class="ml-2">Mute Notifications</div>
       </label>
     </div>
 
@@ -262,14 +220,76 @@
     >
       Advanced
     </h3>
+
     <div v-if="showAdvanced">
+      <!-- Deep Identity Details -->
+      <h2 class="text-slate-500 text-sm font-bold mb-2 py-2">
+        Deep Identity Details
+      </h2>
+      <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+        <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
+        <div
+          class="text-sm text-slate-500 flex justify-start items-center mb-1"
+        >
+          <code class="truncate">{{ publicBase64 }}</code>
+          <button
+            @click="
+              doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
+            "
+            class="ml-2"
+          >
+            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          </button>
+          <span v-show="showB64Copy">Copied!</span>
+        </div>
+
+        <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
+        <div
+          class="text-sm text-slate-500 flex justify-start items-center mb-1"
+        >
+          <code class="truncate">{{ publicHex }}</code>
+          <button
+            @click="
+              doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
+            "
+            class="ml-2"
+          >
+            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          </button>
+          <span v-show="showPubCopy">Copied!</span>
+        </div>
+
+        <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
+        <div
+          class="text-sm text-slate-500 flex justify-start items-center mb-1"
+        >
+          <code class="truncate">{{ derivationPath }}</code>
+          <button
+            @click="
+              doCopyTwoSecRedo(
+                derivationPath,
+                () => (showDerCopy = !showDerCopy),
+              )
+            "
+            class="ml-2"
+          >
+            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          </button>
+          <span v-show="showDerCopy">Copied!</span>
+        </div>
+      </div>
+
       <label
         for="toggleShowAmounts"
-        class="flex items-center cursor-pointer mb-6"
+        class="flex items-center cursor-pointer py-2"
         @click="handleChange"
       >
+        <!-- label -->
+        <h2 class="text-slate-500 text-sm font-bold mb-2">
+          Show amounts given with contacts
+        </h2>
         <!-- toggle -->
-        <div class="relative">
+        <div class="relative ml-2">
           <!-- input -->
           <input
             type="checkbox"
@@ -284,23 +304,31 @@
             class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
           ></div>
         </div>
-        <!-- label -->
-        <div class="ml-2">Show amounts given with contacts</div>
       </label>
 
       <div class="flex py-2">
+        <button class="text-blue-500">
           <!-- id used by puppeteer test script -->
           <router-link
             id="switch-identity-link"
             :to="{ name: 'identity-switcher' }"
-          class="block text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+            class="block text-center"
           >
             Switch Identity / No Identity
           </router-link>
+        </button>
       </div>
 
       <div class="flex py-2">
-        Claim Server
+        <button class="text-blue-500">
+          <router-link :to="{ name: 'statistics' }" class="block text-center">
+            See Achievements & Statistics
+          </router-link>
+        </button>
+      </div>
+
+      <div class="flex py-4">
+        <h2 class="text-slate-500 text-sm font-bold mb-2">Claim Server</h2>
         <input
           type="text"
           class="block w-full rounded border border-slate-400 px-3 py-2"
@@ -332,17 +360,6 @@
           Use Local
         </button>
       </div>
-
-      <div>
-        <button class="text-blue-500">
-          <router-link
-            :to="{ name: 'statistics' }"
-            class="block text-center py-3"
-          >
-            See Achievements & Statistics
-          </router-link>
-        </button>
-      </div>
     </div>
   </section>
 </template>
@@ -427,7 +444,7 @@ export default class AccountViewView extends Vue {
     }
 
     // Return parsed identity or null if not found
-    return JSON.parse(account?.identity || "null");
+    return JSON.parse((account?.identity as string) || "null");
   }
 
   /**