fix default server display in advanced section & refactor UI

src/views/AccountViewView.vue

@@ -231,9 +231,9 @@
       </p>
 
       <!-- Deep Identity Details -->
-      <h2 class="text-sm uppercase font-semibold mb-3">
+      <span class="text-slate-500 text-sm font-bold mb-2">
         Deep Identifier Details
-      </h2>
+      </span>
       <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
@@ -287,13 +287,23 @@
         </div>
       </div>
 
+      <!-- id used by puppeteer test script -->
+      <router-link
+        id="switch-identity-link"
+        :to="{ name: 'identity-switcher' }"
+        class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        Switch Identifier
+      </router-link>
+
       <label
         for="toggleShowAmounts"
         class="flex items-center justify-between cursor-pointer my-4"
         @click="handleChange"
       >
         <!-- label -->
-        <h2>Show amounts given with contacts</h2>
+        <span class="text-slate-500 text-sm font-bold">Contacts</span>
+        <span class="ml-2">Show amounts given</span>
         <!-- toggle -->
         <div class="relative ml-2">
           <!-- input -->
@@ -313,7 +323,7 @@
       </label>
 
       <div class="grid-cols-2 mb-4">
-        <span class="text-slate-500 text-sm font-bold mb-2">Data Import</span>
+        <span class="text-slate-500 text-sm font-bold">Import</span>
         <input type="file" @change="uploadFile" class="ml-2" />
         <div v-if="showContactImport()">
           <button
@@ -327,28 +337,10 @@
         </div>
       </div>
 
-      <div class="flex py-2">
+      <div>
-        <button>
+        <h2 class="text-slate-500 text-sm font-bold mt-4">Claim Server</h2>
-          <router-link
+        <div class="flex px-4 py-4">
-            :to="{ name: 'statistics' }"
+          Server
-            class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-          >
-            See Global Animated History of Giving
-          </router-link>
-        </button>
-      </div>
-
-      <!-- id used by puppeteer test script -->
-      <router-link
-        id="switch-identity-link"
-        :to="{ name: 'identity-switcher' }"
-        class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-      >
-        Switch Identifier
-      </router-link>
-
-      <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"
@@ -383,7 +375,7 @@
 
         <label
           for="toggleProdWarningMessage"
-        class="flex items-center justify-between cursor-pointer my-4"
+          class="flex items-center justify-between cursor-pointer px-4 py-4"
           @click="toggleProdWarning"
         >
           <!-- label -->
@@ -403,7 +395,7 @@
 
         <label
           for="toggleTestWarningMessage"
-        class="flex items-center justify-between cursor-pointer my-4"
+          class="flex items-center justify-between cursor-pointer px-4 py-4"
           @click="toggleTestWarning"
         >
           <!-- label -->
@@ -420,6 +412,7 @@
             ></div>
           </div>
         </label>
+      </div>
 
       <div class="flex py-4">
         <h2 class="text-slate-500 text-sm font-bold mb-2">
@@ -459,8 +452,19 @@
       <span class="px-4 text-sm" v-if="!webPushServerInput">
         When that setting is blank, this app will use the default web push
         server URL:
-        {{ AppConstants.DEFAULT_PUSH_SERVER }}
+        {{ DEFAULT_PUSH_SERVER }}
       </span>
+
+      <div class="flex mt-4">
+        <button>
+          <router-link
+            :to="{ name: 'statistics' }"
+            class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+          >
+            See Global Animated History of Giving
+          </router-link>
+        </button>
+      </div>
     </div>
   </section>
 </template>
@@ -476,7 +480,7 @@ import { useClipboard } from "@vueuse/core";
 
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { AppString } from "@/constants/app";
+import { AppString, DEFAULT_PUSH_SERVER } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
@@ -507,6 +511,7 @@ export default class AccountViewView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
 
   AppConstants = AppString;
+  DEFAULT_PUSH_SERVER = DEFAULT_PUSH_SERVER;
 
   activeDid = "";
   apiServer = "";