Update light theme toggle color

actualbudget · Oct 10, 2024 · 821d741 · 821d741
1 parent d443d12
commit 821d741
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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;