tweak styles

Author: lkleuver

frontend/lib/icon/generated.tsx

@@ -89,6 +89,12 @@ export const IconCheckmark = (props: React.SVGAttributes<SVGElement>) => (
   </svg>
 );
 
+export const IconCheckmarkSmall = (props: React.SVGAttributes<SVGElement>) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 14">
+    <path d="M5.2,10.9h0c-.3,0-.5-.1-.7-.3l-2.9-2.9c-.4-.4-.4-1,0-1.4.4-.4,1-.4,1.4,0l2.2,2.2,5.7-5.7c.4-.4,1-.4,1.4,0s.4,1,0,1.4l-6.4,6.4c-.2.2-.4.3-.7.3Z" />
+  </svg>
+);
+
 export const IconChevronRight = (props: React.SVGAttributes<SVGElement>) => (
   <svg {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path

frontend/lib/icon/svg/checkmarkSmall.svg

@@ -16,17 +16,31 @@
   > div {
     display: inline-block;
     margin-right: 8px;
+    flex: 0 0 20px;
     width: 20px;
     height: 20px;
     border-radius: 6px;
     padding: 0;
-    border: 1px solid var(--base-dark-blue);
-    background-color: var(--bg-highlight);
+    border: 1px solid var(--border-color-default);
+    background-color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 1px 1px rgba(66, 210, 243, 0.4);
+      border: 1px solid var(--blue-dark-400);
+    }
+
+    &:global(.checked) {
+      background-color: var(--bg-highlight);
+      border-color: var(--base-dark-blue);
+    }
+
     svg {
       width: 14px;
+      fill: var(--base-dark-blue);
     }
   }
 

frontend/lib/ui/Checkbox/Checkbox.module.css

@@ -7,15 +7,21 @@ type Props = {
 };
 
 export const DefaultCheckbox: Story<Props> = ({ label }) => (
-  <Checkbox id="default-checkbox" defaultChecked={false}>
-    {label}
-  </Checkbox>
-);
+  <div>
+    <Checkbox id="default-checkbox" defaultChecked={false}>
+      {label}
+    </Checkbox>
+
+    <Checkbox id="default-checkbox-error" defaultChecked={false} hasError>
+      {label}
+    </Checkbox>
 
-export const ErrorCheckbox: Story<Props> = ({ label }) => (
-  <Checkbox id="default-checkbox" hasError defaultChecked={false}>
-    {label}
-  </Checkbox>
+    <div style={{ width: 200 }}>
+      <Checkbox id="default-checkbox-cramped" defaultChecked={false}>
+        {label}
+      </Checkbox>
+    </div>
+  </div>
 );
 
 export default {

frontend/lib/ui/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { IconCheckmark } from "@kiesraad/icon";
+import { IconCheckmarkSmall } from "@kiesraad/icon";
 import { cn } from "@kiesraad/util";
 
 import cls from "./Checkbox.module.css";
@@ -29,8 +29,13 @@ export function Checkbox({ id, children, defaultChecked, hasError }: CheckboxPro
       aria-label="input"
       id={`checkbox-container-${id}`}
     >
-      <div aria-hidden={true} onClick={toggleCheckbox} id={`checkbox-button-${id}`}>
-        {checked ? <IconCheckmark aria-label="Aangevinkt" /> : null}
+      <div
+        className={checked ? "checked" : "unchecked"}
+        aria-hidden={true}
+        onClick={toggleCheckbox}
+        id={`checkbox-button-${id}`}
+      >
+        {checked ? <IconCheckmarkSmall aria-label="Aangevinkt" /> : null}
       </div>
       <input type="checkbox" id={id} name={id} checked={checked} onChange={toggleCheckbox} />
       <label htmlFor={id}>{children}</label>