From 9dff536c9b381aa622bf485f9073039f9802dc51 Mon Sep 17 00:00:00 2001
From: Tobias Prima <primatjahja@gmail.com>
Date: Wed, 20 Mar 2024 20:24:35 +0800
Subject: [PATCH] feat: improve ui

---
 src/features/todos/TodoList.js |  3 +--
 src/index.css                  | 22 ++++++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
index 421d7d4..e235626 100644
--- a/src/features/todos/TodoList.js
+++ b/src/features/todos/TodoList.js
@@ -40,7 +40,6 @@ const TodoList = () => {
                 id="new-todo"
                 value={newTodo}
                 onChange={(e)=> setNewTodo(e.target.value)}
-                placeholder="Add New Todo"
                 />
             </div>
             <button className="submit">
@@ -98,7 +97,7 @@ const TodoList = () => {
         </div>
         <hr />
         <div className="bottom-section">
-            <h3>Add to list</h3>
+            <p>Add to list</p>
             {newItemSection}
         </div>
     </main>
diff --git a/src/index.css b/src/index.css
index 8e84fcb..33630c2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
 
 body {
-  font-family: 'Roboto';
+  font-family: Arial, sans-serif;
   font-size: 1.5rem;
   color: #9f9fb0;
 }
@@ -31,13 +31,18 @@ article {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: 1px solid hsl(0, 0%, 58%);
+  border: 1px solid white;
+  border-radius: 5px;
+  border-left: 8px solid #7d8fc9 ;
+  background-color: white;
   margin-bottom: 1.5rem;
 }
 
-h3 {
-  margin-bottom: 0.3rem;
+p {
   color: #909ac0;
+  padding-left: 0.3rem;
+  padding-bottom: 0;
+  margin-bottom: 0.5rem;
 }
 
 .new-item-section {
@@ -68,11 +73,16 @@ input[type="checkbox"] {
   min-width: 30px;
   min-height: 30px;
   margin-right: 1rem;
-  border-radius: 50px;
-  border: 2px solid #7491d0;
+  border-radius: 10%;
+  border: 1px solid #7491d0;
   accent-color: #7491d0;
 }
 
+.checkbox label:before {
+  border-radius: 10%;
+}
+
+
 button {
   min-width: 50px;
   min-height: 50px;