From 3e65885e1fdd09d53afe674aaf202a5bfb811b78 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 28 Feb 2025 03:40:42 +0530
Subject: [PATCH] (feat:toggle) greener colors, flexible

---
 frontend/src/components/ToggleSwitch.tsx | 55 +++++++++++++++++-------
 frontend/tailwind.config.cjs             | 19 ++++++--
 2 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/ToggleSwitch.tsx b/frontend/src/components/ToggleSwitch.tsx
index 061d2563..8293ece2 100644
--- a/frontend/src/components/ToggleSwitch.tsx
+++ b/frontend/src/components/ToggleSwitch.tsx
@@ -6,9 +6,8 @@ type ToggleSwitchProps = {
   className?: string;
   label?: string;
   disabled?: boolean;
-  activeColor?: string;
-  inactiveColor?: string;
-  id?: string;
+  size?: 'small' | 'medium' | 'large';
+  labelPosition?: 'left' | 'right';
 };
 
 const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
@@ -17,17 +16,44 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
   className = '',
   label,
   disabled = false,
-  activeColor = 'bg-purple-30',
-  inactiveColor = 'bg-transparent',
-  id,
+  size = 'medium',
+  labelPosition = 'left',
 }) => {
+  // Size configurations
+  const sizeConfig = {
+    small: {
+      box: 'h-6 w-10',
+      toggle: 'h-4 w-4 left-1 top-1',
+      translate: 'translate-x-4',
+    },
+    medium: {
+      box: 'h-8 w-14',
+      toggle: 'h-6 w-6 left-1 top-1',
+      translate: 'translate-x-full',
+    },
+    large: {
+      box: 'h-10 w-16',
+      toggle: 'h-8 w-8 left-1 top-1',
+      translate: 'translate-x-full',
+    },
+  };
+
+  const { box, toggle, translate } = sizeConfig[size];
+
   return (
     <label
-      className={`cursor-pointer select-none justify-between flex flex-row items-center ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
-      htmlFor={id}
+      className={`cursor-pointer select-none flex flex-row items-center ${
+        labelPosition === 'right' ? 'flex-row-reverse' : ''
+      } ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
     >
       {label && (
-        <span className="mr-2 text-eerie-black dark:text-white">{label}</span>
+        <span
+          className={`text-eerie-black dark:text-white ${
+            labelPosition === 'left' ? 'mr-1' : 'ml-1'
+          }`}
+        >
+          {label}
+        </span>
       )}
       <div className="relative">
         <input
@@ -36,18 +62,15 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
           onChange={(e) => onChange(e.target.checked)}
           className="sr-only"
           disabled={disabled}
-          id={id}
         />
         <div
-          className={`box block h-8 w-14 rounded-full border border-purple-30 ${
-            checked
-              ? `${activeColor} dark:${activeColor}`
-              : `${inactiveColor} dark:${inactiveColor}`
+          className={`box block ${box} rounded-full ${
+            checked ? 'bg-apple-green' : 'bg-silver dark:bg-charcoal-grey'
           }`}
         ></div>
         <div
-          className={`absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full transition ${
-            checked ? 'translate-x-full bg-silver' : 'bg-purple-30'
+          className={`absolute ${toggle} flex items-center justify-center rounded-full transition bg-white ${
+            checked ? `${translate} bg-silver` : ''
           }`}
         ></div>
       </div>
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index d8546373..8ff9518a 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -56,11 +56,24 @@ module.exports = {
         'dim-gray': '#6A6A6A',
         'cultured': '#f4f4f4',
         'charleston-green': '#2b2c31',
-        'grey':'#7e7e7e',
-        'lotion':'#fbfbfb',
-        'platinum':'#e6e6e6',
+        'charleston-green-2' : '#26272e',
+        'grey': '#7e7e7e',
+        'lotion': '#fbfbfb',
+        'platinum': '#e6e6e6',
         'eerie-black-2': '#191919',
         'light-silver': '#D9D9D9',
+        'carbon': '#2E2E2E',
+        'onyx':'#35363B',
+
+        // New colors for edit buttons
+        'purple-hover': '#6C4AB0', //royal purple
+        'rich-black': '#0F1419', // chinese-black-2
+        'light-gray-hover': '#D9DCDE', //gainsboro
+        'charcoal': '#35383C',//onyx 2
+        'philippine-grey': '#929292',
+        'charcoal-grey':'#53545D',
+        'rosso-corsa': '#D30000',
+        'apple-green': '#4CAF50',
       },
     },
   },