New toggle-style contact amounts control

src/assets/styles/tailwind.css

@@ -9,3 +9,10 @@
         font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
     }
 }
+
+@layer components {
+	input:checked ~ .dot {
+		transform: translateX(100%);
+		background-color: #FFF !important;
+	}
+}

src/views/AccountViewView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
@@ -192,6 +192,26 @@
       </button>
     </div>
 
+    <!-- REPLACE above control with this one -->
+    <label
+      for="toggleShowAmounts"
+      class="flex items-center cursor-pointer mb-6"
+    >
+      <!-- toggle -->
+      <div class="relative">
+        <!-- input -->
+        <input type="checkbox" id="toggleShowAmounts" 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 class="ml-2">Show amounts given with contacts</div>
+    </label>
+
     <div class="flex py-2">
       <button class="text-center text-md text-blue-500" @click="checkLimits()">
         Check Limits
@@ -461,7 +481,7 @@ export default class AccountViewView extends Vue {
       "p-5": true,
       rounded: true,
       "drop-shadow-lg": true,
-      absolute: true,
+      fixed: true,
       "top-3": true,
       "inset-x-3": true,
       "transition-transform": true,

src/views/ContactAmountsView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
@@ -340,7 +340,7 @@ export default class ContactsView extends Vue {
       "p-5": true,
       rounded: true,
       "drop-shadow-lg": true,
-      absolute: true,
+      fixed: true,
       "top-3": true,
       "inset-x-3": true,
       "transition-transform": true,

src/views/ContactsView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
@@ -832,7 +832,7 @@ export default class ContactsView extends Vue {
       "p-5": true,
       rounded: true,
       "drop-shadow-lg": true,
-      absolute: true,
+      fixed: true,
       "top-3": true,
       "inset-x-3": true,
       "transition-transform": true,

src/views/DiscoverView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">

src/views/HelpView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">

src/views/NewEditProjectView.vue

@@ -283,7 +283,7 @@ export default class NewEditProjectView extends Vue {
       "p-5": true,
       rounded: true,
       "drop-shadow-lg": true,
-      absolute: true,
+      fixed: true,
       "top-3": true,
       "inset-x-3": true,
       "transition-transform": true,

src/views/ProjectViewView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">

src/views/ProjectsView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">