From 48ac2685b7fc3e9cf5f177b2a39fbb645d23003d Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Sun, 2 Apr 2023 10:57:21 +0800
Subject: [PATCH] New toggle-style contact amounts control

---
 src/assets/styles/tailwind.css |  7 +++++++
 src/views/AccountViewView.vue  | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index e4a92e7..b05122d 100644
--- a/src/assets/styles/tailwind.css
+++ b/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;
+	}
+}
\ No newline at end of file
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 8134518..000eb8d 100644
--- a/src/views/AccountViewView.vue
+++ b/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