Toggle color fix for disable state

Fixes: brave/brave-browser#22645
brave · May 31, 2022 · b329a29 · b329a29
1 parent c6cbe4d
commit b329a29
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/components/brave_new_tab_ui/components/toggle/style.ts b/components/brave_new_tab_ui/components/toggle/style.ts
@@ -75,14 +75,17 @@ const transform = (p: Props) => {
 const transformBullet = (p: Props) => `${transform(p).x}, calc(-50% - ${transform(p).y})`
 
 export const StyledBullet = styled('label')<Props>`
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 50%;
-  transition: all .4s ease;
-  transform: ${p => `translate(${transformBullet(p)})`};
-  width: ${p => p.size === 'small' ? '16px' : '20px'};
-  height: ${p => p.size === 'small' ? '16px' : '20px'};
-  background-color: ${p => p.disabled && 'rgba(235,236,240,0.8)' || p.checked ? '#fb542b' : '#ebecf0'};
-  display: block;
-  box-shadow: 0 3px 3px rgba(0,0,0,0.05);
-`
+   box-sizing: border-box;
+   position: relative;
+   border-radius: 50%;
+   transition: all .4s ease;
+   transform: ${p => `translate(${transformBullet(p)})`};
+   width: ${p => p.size === 'small' ? '16px' : '20px'};
+   height: ${p => p.size === 'small' ? '16px' : '20px'};
+   background-color: ${p => {
+    if (p.disabled) return 'rgba(235,236,240,0.8)'
+    return p.checked ? '#fb542b' : '#ebecf0'
+   }};
+   display: block;
+   box-shadow: 0 3px 3px rgba(0,0,0,0.05);
+ `