From 821d741963b2f0fb51c40a4bd9c74270a7065756 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 10 Oct 2024 02:45:53 -0700
Subject: [PATCH] Update light theme toggle color

---
 .../src/components/common/Toggle.tsx          | 70 ++++++++++---------
 .../src/style/themes/development.ts           |  2 +-
 .../desktop-client/src/style/themes/light.ts  |  2 +-
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/packages/desktop-client/src/components/common/Toggle.tsx b/packages/desktop-client/src/components/common/Toggle.tsx
index 0e8b72bb3f1..594c8d9086b 100644
--- a/packages/desktop-client/src/components/common/Toggle.tsx
+++ b/packages/desktop-client/src/components/common/Toggle.tsx
@@ -40,43 +40,49 @@ export const Toggle = ({
       <label
         data-toggle-container
         data-on={isOn}
-        className={`${css({
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          cursor: 'pointer',
-          width: '32px',
-          height: '16px',
-          borderRadius: '100px',
-          position: 'relative',
-          transition: 'background-color .2s',
-          background: isOn
-            ? theme.checkboxToggleBackgroundSelected
-            : theme.checkboxToggleBackground,
-        })}`}
+        className={String(
+          css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'pointer',
+            width: '32px',
+            height: '16px',
+            borderRadius: '100px',
+            position: 'relative',
+            transition: 'background-color .2s',
+            backgroundColor: isOn
+              ? theme.checkboxToggleBackgroundSelected
+              : theme.checkboxToggleBackground,
+          }),
+        )}
         htmlFor={id}
       >
         <span
           data-toggle
           data-on={isOn}
-          className={`${css(
-            {
-              content: ' ',
-              position: 'absolute',
-              top: '2px',
-              left: '2px',
-              width: '12px',
-              height: '12px',
-              borderRadius: '100px',
-              transition: '0.2s',
-              boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
-              background: isDisabled ? theme.checkboxToggleDisabled : '#fff',
-            },
-            isOn && {
-              left: 'calc(100% - 2px)',
-              transform: 'translateX(-100%)',
-            },
-          )}`}
+          className={String(
+            css(
+              {
+                content: ' ',
+                position: 'absolute',
+                top: '2px',
+                left: '2px',
+                width: '12px',
+                height: '12px',
+                borderRadius: '100px',
+                transition: '0.2s',
+                boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
+                backgroundColor: isDisabled
+                  ? theme.checkboxToggleDisabled
+                  : '#fff',
+              },
+              isOn && {
+                left: 'calc(100% - 2px)',
+                transform: 'translateX(-100%)',
+              },
+            ),
+          )}
         />
       </label>
     </View>
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index 3281d81cd32..099b1d7b491 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -176,7 +176,7 @@ export const checkboxBackgroundSelected = colorPalette.blue500;
 export const checkboxBorderSelected = colorPalette.blue500;
 export const checkboxShadowSelected = colorPalette.blue300;
 export const checkboxToggleBackground = colorPalette.gray400;
-export const checkboxToggleBackgroundSelected = colorPalette.blue500;
+export const checkboxToggleBackgroundSelected = colorPalette.purple600;
 export const checkboxToggleDisabled = colorPalette.gray200;
 
 export const pillBackground = colorPalette.navy150;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index e79a4640e81..aa2b0eed205 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -178,7 +178,7 @@ export const checkboxBackgroundSelected = colorPalette.blue500;
 export const checkboxBorderSelected = colorPalette.blue500;
 export const checkboxShadowSelected = colorPalette.blue300;
 export const checkboxToggleBackground = colorPalette.gray400;
-export const checkboxToggleBackgroundSelected = colorPalette.blue500;
+export const checkboxToggleBackgroundSelected = colorPalette.purple600;
 export const checkboxToggleDisabled = colorPalette.gray200;
 
 export const pillBackground = colorPalette.navy150;