From df1fbb05d2a3b83b7df831e2c45d0cd25fa875b2 Mon Sep 17 00:00:00 2001
From: Kesney Lucas <kesneyferro@gmail.com>
Date: Sun, 2 Nov 2025 15:31:09 -0600
Subject: [PATCH 1/3] fix: rename event parameter fro consistency and linter

---
 app/components/Checkbox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Checkbox.tsx b/app/components/Checkbox.tsx
index 02624ef..ef26803 100644
--- a/app/components/Checkbox.tsx
+++ b/app/components/Checkbox.tsx
@@ -17,9 +17,9 @@ export default function Checkbox({
   disabled = false,
   className,
 }: CheckboxProps) {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
     if (onChange) {
-      onChange(e.target.checked);
+      onChange(ev.target.checked);
     }
   };
 

From fb21175924d491ccbe082dc0ba0a01afd097811a Mon Sep 17 00:00:00 2001
From: Kesney Lucas <kesneyferro@gmail.com>
Date: Sun, 9 Nov 2025 15:30:35 -0600
Subject: [PATCH 2/3] refactor: replace SVG icon with Material Icon in Checkbox
 component

---
 app/components/Checkbox.tsx   | 19 ++++++++++---------
 public/assets/icons/check.svg |  3 ---
 2 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 public/assets/icons/check.svg

diff --git a/app/components/Checkbox.tsx b/app/components/Checkbox.tsx
index ef26803..2009ea3 100644
--- a/app/components/Checkbox.tsx
+++ b/app/components/Checkbox.tsx
@@ -1,5 +1,4 @@
 "use client";
-import Image from "next/image";
 import styled from "styled-components";
 
 type CheckboxProps = {
@@ -31,14 +30,7 @@ export default function Checkbox({
         disabled={disabled}
       />
       <StyledCheckbox checked={checked}>
-        {checked && (
-          <Image
-            src="/assets/icons/check.svg"
-            alt="checked"
-            width={16}
-            height={16}
-          />
-        )}
+        {checked && <MaterialIcon>check</MaterialIcon>}
       </StyledCheckbox>
       <Label>{label}</Label>
     </CheckboxContainer>
@@ -94,3 +86,12 @@ const Label = styled.span`
   line-height: 1.5;
   color: var(--black);
 `;
+
+const MaterialIcon = styled.span`
+  font-family: "Material Symbols Outlined";
+  font-size: 16px;
+  line-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/public/assets/icons/check.svg b/public/assets/icons/check.svg
deleted file mode 100644
index 0ee2e94..0000000
--- a/public/assets/icons/check.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.95825 15L3.20825 10.25L4.39575 9.06249L7.95825 12.625L15.6041 4.97916L16.7916 6.16666L7.95825 15Z" fill="black"/>
-</svg>

From 75655a5b1ac1f802fb335a3bf0d0e30faffc9ba7 Mon Sep 17 00:00:00 2001
From: Rachel Koh <rachelkohhuiqi@gmail.com>
Date: Sun, 30 Nov 2025 15:17:12 -0500
Subject: [PATCH 3/3] nit: fix toggling checkbox occasionally causing different
 heights in UI

---
 app/components/Checkbox.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/Checkbox.tsx b/app/components/Checkbox.tsx
index 2009ea3..6f55cd0 100644
--- a/app/components/Checkbox.tsx
+++ b/app/components/Checkbox.tsx
@@ -30,7 +30,7 @@ export default function Checkbox({
         disabled={disabled}
       />
       <StyledCheckbox checked={checked}>
-        {checked && <MaterialIcon>check</MaterialIcon>}
+        <MaterialIcon checked={checked}>check</MaterialIcon>
       </StyledCheckbox>
       <Label>{label}</Label>
     </CheckboxContainer>
@@ -87,11 +87,12 @@ const Label = styled.span`
   color: var(--black);
 `;
 
-const MaterialIcon = styled.span`
-  font-family: "Material Symbols Outlined";
+const MaterialIcon = styled.span<{ checked: boolean }>`
+  font-family: "Material Symbols Rounded";
   font-size: 16px;
   line-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  opacity: ${(props) => (props.checked ? 1 : 0)};
 `;