fix: made checkbox stroke thicker (#2212)

open-sauced · Nov 28, 2023 · 1d7781a · 1d7781a
2 parents 37290c0 + 3235f57
commit 1d7781a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx
@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
           {...props}
           id={getId()}
         >
-          <CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
+          <CheckboxPrimitive.Indicator className={clsx("p-0.5 flex items-center justify-center text-white")}>
             <FiCheck className="w-full h-full" />
           </CheckboxPrimitive.Indicator>
         </CheckboxPrimitive.Root>

diff --git a/styles/globals.css b/styles/globals.css
@@ -25,6 +25,11 @@ h6 {
   @apply tracking-tight;
 }
 
+/* See https://github.com/open-sauced/app/issues/2210 */
+[role="checkbox"] > [data-state="checked"] > svg {
+  stroke-width: 5;
+}
+
 .auto-grow-input:not(:empty) {
   color: black;
 }