feat: improve ui

tobiasprima · Mar 20, 2024 · 9dff536 · 9dff536
1 parent dc0f7bc
commit 9dff536
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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;