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,99 +337,82 @@
         </div>
       </div>
 
-      <div class="flex py-2">
-        <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"
+      <div>
+        <h2 class="text-slate-500 text-sm font-bold mt-4">Claim Server</h2>
+        <div class="flex px-4 py-4">
+          Server
+          <input
+            type="text"
+            class="block w-full rounded border border-slate-400 px-3 py-2"
+            v-model="apiServerInput"
+          />
+          <button
+            v-if="apiServerInput != apiServer"
+            class="px-4 rounded bg-red-500 border border-slate-400"
+            @click="onClickSaveApiServer()"
           >
-            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"
-          v-model="apiServerInput"
-        />
-        <button
-          v-if="apiServerInput != apiServer"
-          class="px-4 rounded bg-red-500 border border-slate-400"
-          @click="onClickSaveApiServer()"
-        >
-          <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
-        </button>
-        <button
-          class="px-3 rounded bg-slate-200 border border-slate-400"
-          @click="apiServerInput = AppConstants.PROD_ENDORSER_API_SERVER"
-        >
-          Use Prod
-        </button>
-        <button
-          class="px-3 rounded bg-slate-200 border border-slate-400"
-          @click="apiServerInput = AppConstants.TEST_ENDORSER_API_SERVER"
-        >
-          Use Test
-        </button>
-        <button
-          class="px-3 rounded bg-slate-200 border border-slate-400"
-          @click="apiServerInput = AppConstants.LOCAL_ENDORSER_API_SERVER"
-        >
-          Use Local
-        </button>
-      </div>
-
-      <label
-        for="toggleProdWarningMessage"
-        class="flex items-center justify-between cursor-pointer my-4"
-        @click="toggleProdWarning"
-      >
-        <!-- label -->
-        <h2>Show warning if on prod server</h2>
-        <!-- toggle -->
-        <div class="relative ml-2">
-          <!-- input -->
-          <input type="checkbox" v-model="warnIfProdServer" class="sr-only" />
-          <!-- line -->
-          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
-          <!-- dot -->
-          <div
-            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
-          ></div>
+            <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+          </button>
+          <button
+            class="px-3 rounded bg-slate-200 border border-slate-400"
+            @click="apiServerInput = AppConstants.PROD_ENDORSER_API_SERVER"
+          >
+            Use Prod
+          </button>
+          <button
+            class="px-3 rounded bg-slate-200 border border-slate-400"
+            @click="apiServerInput = AppConstants.TEST_ENDORSER_API_SERVER"
+          >
+            Use Test
+          </button>
+          <button
+            class="px-3 rounded bg-slate-200 border border-slate-400"
+            @click="apiServerInput = AppConstants.LOCAL_ENDORSER_API_SERVER"
+          >
+            Use Local
+          </button>
         </div>
-      </label>
 
-      <label
-        for="toggleTestWarningMessage"
-        class="flex items-center justify-between cursor-pointer my-4"
-        @click="toggleTestWarning"
-      >
-        <!-- label -->
-        <h2>Show warning if on non-prod server</h2>
-        <!-- toggle -->
-        <div class="relative ml-2">
-          <!-- input -->
-          <input type="checkbox" v-model="warnIfTestServer" class="sr-only" />
-          <!-- line -->
-          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
-          <!-- dot -->
-          <div
-            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
-          ></div>
-        </div>
-      </label>
+        <label
+          for="toggleProdWarningMessage"
+          class="flex items-center justify-between cursor-pointer px-4 py-4"
+          @click="toggleProdWarning"
+        >
+          <!-- label -->
+          <h2>Show warning if on prod server</h2>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" v-model="warnIfProdServer" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </label>
+
+        <label
+          for="toggleTestWarningMessage"
+          class="flex items-center justify-between cursor-pointer px-4 py-4"
+          @click="toggleTestWarning"
+        >
+          <!-- label -->
+          <h2>Show warning if on non-prod server</h2>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input type="checkbox" v-model="warnIfTestServer" class="sr-only" />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></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 = "";