Merge pull request #159 from Snazzah/bots-look-cool

src/components/ui/Checkbox.tsx

@@ -51,7 +51,7 @@ const CheckboxDescription = styled.span`
     color: var(--secondary-foreground);
 `;
 
-const Checkmark = styled.div<{ checked: boolean }>`
+const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
     margin: 4px;
     width: 24px;
     height: 24px;
@@ -66,6 +66,16 @@ const Checkmark = styled.div<{ checked: boolean }>`
         color: var(--secondary-background);
     }
 
+    ${(props) =>
+        props.contrast &&
+        css`
+            background: var(--primary-background);
+
+            svg {
+                color: var(--primary-background);
+            }
+        `}
+
     ${(props) =>
         props.checked &&
         css`
@@ -76,6 +86,7 @@ const Checkmark = styled.div<{ checked: boolean }>`
 export interface CheckboxProps {
     checked: boolean;
     disabled?: boolean;
+    contrast?: boolean;
     className?: string;
     children: Children;
     description?: Children;
@@ -100,7 +111,7 @@ export default function Checkbox(props: CheckboxProps) {
                     !props.disabled && props.onChange(!props.checked)
                 }
             />
-            <Checkmark checked={props.checked} className="check">
+            <Checkmark checked={props.checked} contrast={props.contrast} className="check">
                 <Check size={20} />
             </Checkmark>
         </CheckboxBase>