Better support for dark mode

src/App.tsx

@@ -5,7 +5,7 @@ import TodoCard from './components/todo/TodoCard.tsx';
 export default function App() {
 
   return (
-    <div className={"w-screen min-h-screen bg-blue-50"}>
+    <div className={"w-screen min-h-screen bg-base-300"}>
       <Navbar/>
 
       <main className={"w-full min-h-screen flex justify-center items-center"}>

src/components/Footer.tsx

@@ -1,8 +1,8 @@
 export default function Footer() {
   return (
-      <footer className={"Footer footer w-screen fixed bottom-0 p-4"}>
+      <footer className={"Footer footer w-screen absolute bottom-0 p-4"}>
         <p className={"inline-block w-full text-center"}>
-          MIT Licence © 2023 • <a className={"link"} href={"https://github.com/LucasVbr/todo-list"} target={"_blank"}>See code on GitHub</a>
+          MIT Licence © 2023 • <a className={"link no-underline hover:underline"} href={"https://github.com/LucasVbr/todo-list"} target={"_blank"}>See code on GitHub</a>
         </p>
       </footer>
   )

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 export default function Navbar() {
   return (
-      <div className={"Navbar navbar fixed top-0"}>
+      <div className={"Navbar navbar absolute top-0"}>
         <button className={"btn btn-ghost normal-case text-xl"}>Todo List App</button>
       </div>
   )

src/components/todo/TodoAddItemForm.tsx

@@ -18,12 +18,19 @@ export default function TodoAddItemForm() {
         <div className={'form-control'}>
           <div className={'input-group'}>
             <input type={'text'} value={name} placeholder={'Type here your task...'}
-                   className={'input input-bordered w-full'}
+                   className={'input border-primary w-full'}
                    onChange={evt => setName(evt.target.value)}
             />
-            <button type={'submit'} className={'btn btn-square'}>
-              <img className={'h-6 w-6'} src={'/icons/plus.svg'}
-                   alt="Plus icon"/>
+            <button type={'submit'} className={'btn btn-square btn-primary'}>
+
+              {/*Plus icon*/}
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6"
+                   fill="none"
+                   viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                <path strokeLinecap="round" strokeLinejoin="round"
+                      d="M12 4v16m8-8H4"/>
+              </svg>
+
             </button>
           </div>
         </div>

src/components/todo/TodoCard.tsx

@@ -3,12 +3,14 @@ import TodoAddItemForm from './TodoAddItemForm.tsx';
 import TodoCardFooter from './TodoCardFooter.tsx';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store.ts';
+import clsx from 'clsx';
 
 export default function TodoCard() {
   const todos = useSelector((state: RootState) => state.todo);
 
   return (
-      <div className={'TodoCard card bg-base-100 shadow-xl p-5 gap-7 transition ease-in-out delay-150'}>
+      <div className={clsx('TodoCard',
+          'card max-w-6xl p-5 shadow-xl gap-7 bg-base-100')}>
         <TodoAddItemForm/>
         {todos.length > 0 && (
             <>

src/components/todo/TodoItem.tsx

@@ -13,9 +13,12 @@ export default function TodoItem({todo}: Props) {
   const handleCheck = () => dispatch(checkTodo(todo.id));
 
   return (
-      <label className={clsx('TodoItem', 'shadow rounded-lg p-4 w-full flex items-center justify-between cursor-pointer')}>
-        {todo.name}
-        <input type={"checkbox"} onChange={handleCheck} checked={todo.checked} className={"checkbox checkbox-primary"}/>
+      <label className={clsx('TodoItem',
+          'border-[1px] border-base-300 shadow rounded-lg p-4 w-full cursor-pointer',
+          'flex items-center justify-between gap-5')}>
+        <span className={"break-all"}>{todo.name}</span>
+        <input type={'checkbox'} onChange={handleCheck} checked={todo.checked}
+               className={'checkbox checkbox-primary'}/>
       </label>
   );
 }