From c23dc94ba5de48986f16452c2186fa8404248206 Mon Sep 17 00:00:00 2001
From: Rares Vanca <raresvanca@gmail.com>
Date: Fri, 24 May 2024 23:26:21 +0300
Subject: [PATCH] M3 Switches

---
 polybius-web/src/components/list_tile_switch.rs | 12 ++++++------
 polybius-web/tailwind.config.js                 |  5 ++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/polybius-web/src/components/list_tile_switch.rs b/polybius-web/src/components/list_tile_switch.rs
index da24f8c..c8082f5 100644
--- a/polybius-web/src/components/list_tile_switch.rs
+++ b/polybius-web/src/components/list_tile_switch.rs
@@ -14,24 +14,24 @@ pub fn ListTileSwitch(props: &ListTileSwitchProps) -> Html {
     // Button clases
 
     let color_classes = if props.checked {
-        classes!("bg-primary-500")
+        classes!("bg-primary-500 dark:bg-primary-300 border-4".to_string())
     } else {
-        classes!("bg-gray-300", "dark:bg-gray-700/50")
+        classes!("bg-gray-300 dark:bg-gray-800 border-8".to_string())
     };
 
-    let mut button_classes = classes!(String::from("relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"));
+    let mut button_classes = classes!("relative inline-flex h-8 w-13 shrink-0 cursor-pointer rounded-full border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2".to_string());
 
     button_classes.extend(color_classes);
 
     // Toggle classes
 
     let position_classes = if props.checked {
-        classes!("translate-x-5")
+        classes!("translate-x-5 w-6 h-6 bg-primary-100 dark:bg-primary-800".to_string())
     } else {
-        classes!("translate-x-0")
+        classes!("translate-x-0 w-4 h-4 bg-gray-700 dark:bg-gray-400".to_string())
     };
 
-    let mut toggle_classes = classes!(String::from("pointer-events-none inline-block h-5 w-5 rounded-full bg-primary-50 shadow ring-0 transition duration-200 ease-in-out"));
+    let mut toggle_classes = classes!(String::from("pointer-events-none inline-block rounded-full shadow ring-0 transition duration-200 ease-in-out"));
 
     toggle_classes.extend(position_classes);
 
diff --git a/polybius-web/tailwind.config.js b/polybius-web/tailwind.config.js
index fa1d081..8480731 100644
--- a/polybius-web/tailwind.config.js
+++ b/polybius-web/tailwind.config.js
@@ -24,7 +24,10 @@ module.exports = {
       },
       fontFamily: {
         'display': ['Major Mono Display', 'monospace'],
-      }
+      },
+      width: {
+        '13': '3.25rem',
+      },
     },
   },
   variants: {