From 8055a2ff90e9310395197e5d29e282b5d81e23e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luc=C3=A0s?= <vabrelucas@gmail.com>
Date: Fri, 16 Jun 2023 18:33:40 +0200
Subject: [PATCH 1/2] Better support for dark mode

---
 src/App.tsx                             |  2 +-
 src/components/Footer.tsx               |  4 ++--
 src/components/Navbar.tsx               |  2 +-
 src/components/todo/TodoAddItemForm.tsx | 15 +++++++++++----
 src/components/todo/TodoCard.tsx        |  4 +++-
 src/components/todo/TodoItem.tsx        |  9 ++++++---
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a30096d..c85d4c6 100644
--- a/src/App.tsx
+++ b/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"}>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ca10f2b..c5c5918 100644
--- a/src/components/Footer.tsx
+++ b/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>
   )
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 97f59df..7e42fb3 100644
--- a/src/components/Navbar.tsx
+++ b/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>
   )
diff --git a/src/components/todo/TodoAddItemForm.tsx b/src/components/todo/TodoAddItemForm.tsx
index 591f5c0..653b14a 100644
--- a/src/components/todo/TodoAddItemForm.tsx
+++ b/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>
diff --git a/src/components/todo/TodoCard.tsx b/src/components/todo/TodoCard.tsx
index 472da24..8ca0090 100644
--- a/src/components/todo/TodoCard.tsx
+++ b/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 && (
             <>
diff --git a/src/components/todo/TodoItem.tsx b/src/components/todo/TodoItem.tsx
index 89e6958..487b49f 100644
--- a/src/components/todo/TodoItem.tsx
+++ b/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>
   );
 }
\ No newline at end of file

From 08e287444de53a2fb41b0a4760b86a0215a67a7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luc=C3=A0s?= <vabrelucas@gmail.com>
Date: Fri, 16 Jun 2023 20:19:14 +0200
Subject: [PATCH 2/2] Install clsx and heroicons

---
 package-lock.json                       |  9 +++++++++
 package.json                            |  2 ++
 src/components/Footer.tsx               |  2 +-
 src/components/Navbar.tsx               | 12 +++++++++---
 src/components/todo/TodoAddItemForm.tsx | 17 +++++------------
 src/components/todo/TodoCardFooter.tsx  |  6 +++++-
 src/components/todo/TodoItem.tsx        |  3 ++-
 src/components/todo/TodoItemList.tsx    |  3 ++-
 8 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 44583bd..b91f267 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "todo-list",
       "version": "0.0.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "@reduxjs/toolkit": "^1.9.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -462,6 +463,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
diff --git a/package.json b/package.json
index 5b6fad2..f57a426 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev-host": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@reduxjs/toolkit": "^1.9.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c5c5918..6847ba5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ export default function Footer() {
   return (
       <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 no-underline hover:underline"} href={"https://github.com/LucasVbr/todo-list"} target={"_blank"}>See code on GitHub</a>
+          MIT Licence © 2023 • <a className={"link link-hover"} href={"https://github.com/LucasVbr/todo-list"} target={"_blank"}>See code on GitHub</a>
         </p>
       </footer>
   )
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 7e42fb3..aa86577 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,7 +1,13 @@
+import clsx from 'clsx';
+
 export default function Navbar() {
   return (
-      <div className={"Navbar navbar absolute top-0"}>
-        <button className={"btn btn-ghost normal-case text-xl"}>Todo List App</button>
+      <div className={clsx('Navbar',
+          'navbar absolute top-0',
+          'flex justify-between')}>
+        <button className={'btn btn-ghost normal-case text-xl'}>
+          Todo List App
+        </button>
       </div>
-  )
+  );
 }
\ No newline at end of file
diff --git a/src/components/todo/TodoAddItemForm.tsx b/src/components/todo/TodoAddItemForm.tsx
index 653b14a..44925ee 100644
--- a/src/components/todo/TodoAddItemForm.tsx
+++ b/src/components/todo/TodoAddItemForm.tsx
@@ -1,6 +1,7 @@
 import {FormEvent, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {addTodo} from '../../features/todo/todoSlice.ts';
+import {PlusIcon} from '@heroicons/react/24/outline';
 
 export default function TodoAddItemForm() {
   const [name, setName] = useState('');
@@ -17,20 +18,12 @@ export default function TodoAddItemForm() {
       <form onSubmit={handleSubmit} className={'TodoAddItemForm'}>
         <div className={'form-control'}>
           <div className={'input-group'}>
-            <input type={'text'} value={name} placeholder={'Type here your task...'}
+            <input type={'text'} value={name}
+                   placeholder={'Type here your task...'}
                    className={'input border-primary w-full'}
-                   onChange={evt => setName(evt.target.value)}
-            />
+                   onChange={evt => setName(evt.target.value)}/>
             <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>
-
+              <PlusIcon className={"h-6 w-6"}/>
             </button>
           </div>
         </div>
diff --git a/src/components/todo/TodoCardFooter.tsx b/src/components/todo/TodoCardFooter.tsx
index eeb272e..3eaa717 100644
--- a/src/components/todo/TodoCardFooter.tsx
+++ b/src/components/todo/TodoCardFooter.tsx
@@ -6,7 +6,11 @@ import TodoState from '../../models/TodoState.ts';
 export default function TodoCardFooter() {
 
   const dispatch = useDispatch();
-  const selectedTodosCount: number = useSelector((state: RootState) => state.todo.filter((todo: TodoState) => !todo.checked).length);
+  const selectedTodosCount: number = useSelector(
+      (state: RootState) => state.todo.filter(
+          (todo: TodoState) => !todo.checked
+      ).length
+  );
 
   const handleDelete = () => dispatch(deleteSelectedTodos());
 
diff --git a/src/components/todo/TodoItem.tsx b/src/components/todo/TodoItem.tsx
index 487b49f..9ff3234 100644
--- a/src/components/todo/TodoItem.tsx
+++ b/src/components/todo/TodoItem.tsx
@@ -14,7 +14,8 @@ export default function TodoItem({todo}: Props) {
 
   return (
       <label className={clsx('TodoItem',
-          'border-[1px] border-base-300 shadow rounded-lg p-4 w-full cursor-pointer',
+          'w-full p-4 rounded-lg cursor-pointer',
+          'border-[1px] border-base-300 shadow',
           'flex items-center justify-between gap-5')}>
         <span className={"break-all"}>{todo.name}</span>
         <input type={'checkbox'} onChange={handleCheck} checked={todo.checked}
diff --git a/src/components/todo/TodoItemList.tsx b/src/components/todo/TodoItemList.tsx
index b181368..42353e6 100644
--- a/src/components/todo/TodoItemList.tsx
+++ b/src/components/todo/TodoItemList.tsx
@@ -1,5 +1,6 @@
 import TodoItem from './TodoItem.tsx';
 import type TodoState from '../../models/TodoState.ts';
+import clsx from 'clsx';
 
 type Props = {
   todos: TodoState[]
@@ -7,7 +8,7 @@ type Props = {
 
 export default function TodoItemList({todos}: Props) {
   return (
-      <div className={'TodoItemList w-full flex flex-col gap-2'}>
+      <div className={clsx('TodoItemList', 'w-full flex flex-col gap-2')}>
         {todos.map((todo: TodoState, index) => <TodoItem todo={todo} key={index}/>)}
       </div>
   );