Improve the checkbox

scality · Jul 4, 2023 · 8d264ab · 8d264ab
1 parent 9a84a7a
commit 8d264ab
Showing 1 changed file with 17 additions and 8 deletions.
diff --git a/src/lib/components/checkbox/Checkbox.component.tsx b/src/lib/components/checkbox/Checkbox.component.tsx
@@ -73,7 +73,8 @@ const StyledCheckbox = styled.label<{
     border: 0;
     background-color: transparent;
     background-size: contain;
-    box-shadow: inset 0 0 0 ${spacing.r1} ${(props) => getTheme(props).border};
+    box-shadow: inset 0 0 0 ${spacing.r1}
+      ${(props) => getTheme(props).textSecondary};
   }
 
   /* Checked */
@@ -84,24 +85,32 @@ const StyledCheckbox = styled.label<{
 
   [type='checkbox']:checked::before {
     box-shadow: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
+    background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="%23fff" stroke-width="1.5"/%3E %3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center;
   }
 
   /* Indeterminate */
 
   [type='checkbox']:indeterminate::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='4' y1='11' x2='18' y2='11' style='stroke:%23fff;stroke-width:2'/%3E %3C/svg%3E");
+    box-shadow: inset 0 0 0 ${spacing.r1}
+      ${(props) => getTheme(props).selectedActive};
+    background-color: ${(props) => getTheme(props).highlight};
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:%23fff;stroke-width:4'/%3E %3C/svg%3E");
   }
 
   /* Hover & focus */
   [type='checkbox']:hover {
     ${(props) =>
-      !props.disabled &&
-      `box-shadow: inset 0 0 0 ${spacing.r1} ${getTheme(props).infoPrimary};`}
+      !props.disabled && `background-color: ${getTheme(props).highlight};`}
   }
-  [type='checkbox']:focus {
-    box-shadow: inset 0 0 0 ${spacing.r1}
-      ${(props) => getTheme(props).infoPrimary};
+
+  [type='checkbox']:hover::before {
+    ${(props) =>
+      !props.disabled &&
+      `box-shadow: inset 0 0 0 ${spacing.r1} ${
+        getTheme(props).selectedActive
+      };`}
   }
 
   [type='checkbox']:focus-visible:enabled {