From d4c764e8549439ee615b6b76af8baf05161bf54b Mon Sep 17 00:00:00 2001
From: Lewis England <lewis2004@hotmail.com>
Date: Thu, 18 May 2023 09:29:15 +0000
Subject: [PATCH] style: override browser default checkbox behaviour

---
 src/components/tasklist/item.jsx | 4 ++--
 src/styles/globals.css           | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/tasklist/item.jsx b/src/components/tasklist/item.jsx
index bf748af6..680aab78 100644
--- a/src/components/tasklist/item.jsx
+++ b/src/components/tasklist/item.jsx
@@ -3,7 +3,7 @@ export default function Item({ task }) {
     <li key={task.title}>
       <div className="flex block w-full text-left transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10">
         <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
-          <input type="checkbox" className="bg-theme-500/10 text-sm font-medium rounded-l-m" id={task.title} checked={task.checked} readOnly/>
+          <input type="checkbox" className="checkbox bg-theme-500/10 text-theme-200 dark:text-theme-700" id={task.title} defaultChecked={task.checked}/>
         </div>
         <div className="flex-1 flex items-center justify-between rounded-r-md ">
           <div className="flex-1 grow pl-3 py-2 text-xs">{task.title}</div>
@@ -11,4 +11,4 @@ export default function Item({ task }) {
       </div>
     </li>
   );
-}
+}
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ea780576..56d64a06 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -57,4 +57,8 @@ body {
 
 ::-webkit-details-marker {
   display: none;
+}
+
+.checkbox {
+  border-radius: 0.25em;
 }
\ No newline at end of file