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

@@ -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