feat: improve UI (#6)

tobiasprima · Mar 20, 2024 · 8a8788f · 8a8788f
2 parents b1990d5 + 9dff536
commit 8a8788f
Show file tree

Hide file tree

Showing 2 changed files with 154 additions and 44 deletions.
diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash, faUpload } from '@fortawesome/free-solid-svg-icons'
+import { faPlus, faTrash, faUpload, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { useState } from 'react'
 import { 
     useGetTodosQuery,
     useAddTodoMutation,
     useUpdateTodoMutation,
     useDoneTodoMutation,
-    useDeleteTodoMutation 
+    useDeleteTodoMutation
 } from '../../app/api/apiSlice'
 
 const TodoList = () => {
@@ -31,21 +31,22 @@ const TodoList = () => {
     }
 
     const newItemSection = 
-    <form onSubmit={handleSubmit}>
-        <label htmlFor="new-todo">Add to list</label>
-        <div className="new-todo">
-            <input 
-            type="text"
-            id="new-todo"
-            value={newTodo}
-            onChange={(e)=> setNewTodo(e.target.value)}
-            placeholder="Add New Todo"
-            />
-        </div>
-        <button className="submit">
-            <FontAwesomeIcon icon={faUpload} />
-        </button>
-    </form>
+    <div className="new-item-section">
+        <form onSubmit={handleSubmit}>
+            <label htmlFor="new-todo">Add to list</label>
+            <div className="new-todo">
+                <input 
+                type="text"
+                id="new-todo"
+                value={newTodo}
+                onChange={(e)=> setNewTodo(e.target.value)}
+                />
+            </div>
+            <button className="submit">
+                <FontAwesomeIcon icon={faPlus} />
+            </button>
+        </form>
+    </div>
 
     let content;
     if (isLoading) {
@@ -64,7 +65,7 @@ const TodoList = () => {
                         <label htmlFor={todo._id}>{todo.title}</label>
                     </div>
                     <button className="trash" onClick={()=> deleteTodo({ id: todo._id})}>
-                        <FontAwesomeIcon icon={faTrash}/>
+                        <FontAwesomeIcon icon={faXmark}/>
                     </button>
                 </article>
             )
@@ -75,9 +76,30 @@ const TodoList = () => {
 
   return (
     <main>
-        <h1>Todo List</h1>
-        {newItemSection}
-        {content}
+        <header>
+            <h1>Todo List</h1>
+            <p>Add Things to do</p>
+        </header>
+        <hr />
+        <div className='progress-container'>
+            <div className="progress-label">
+                {todos ? Math.round((todos.filter(todo => todo.status).length / todos.length) * 100) : 0}%
+            </div>
+            <progress
+            className="progress-bar" 
+            value={todos ? todos.filter(todo => todo.status).length : 0} 
+            max={todos ? todos.length : 0}
+            />
+        </div>
+
+        <div className="content">
+            {content}
+        </div>
+        <hr />
+        <div className="bottom-section">
+            <p>Add to list</p>
+            {newItemSection}
+        </div>
     </main>
   )
 }

diff --git a/src/index.css b/src/index.css
@@ -1,8 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
 
 body {
-  font-family: 'Nunito', sans-serif;
+  font-family: Arial, sans-serif;
   font-size: 1.5rem;
+  color: #9f9fb0;
+}
+
+html{
+  background-image: linear-gradient(to bottom right, #eef6fe, #ecedfe);
+  min-height: 100vh;
 }
 
 input[type="text"], button {
@@ -12,18 +18,45 @@ input[type="text"], button {
 main {
   margin: auto;
   max-width: 600px;
+  width: 100%;
 }
 
 h1 {
   margin-bottom: 0.5rem;
+  color: #909ac0;
 }
 
 article {
   padding: 1rem;
   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;
+}
+
+p {
+  color: #909ac0;
+  padding-left: 0.3rem;
+  padding-bottom: 0;
+  margin-bottom: 0.5rem;
+}
+
+.new-item-section {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  max-width: 100%;
+  max-height: 50px;
+}
+
+.new-item-section form {
+  display: flex;
+  align-items: center;
+  flex: 1;
 }
 
 .todo {
@@ -32,37 +65,41 @@ article {
   align-items: center;
 }
 
+.todo input[type="checkbox"]:checked + label {
+  text-decoration: line-through;
+}
+
 input[type="checkbox"] {
   min-width: 30px;
   min-height: 30px;
   margin-right: 1rem;
+  border-radius: 10%;
+  border: 1px solid #7491d0;
+  accent-color: #7491d0;
+}
+
+.checkbox label:before {
+  border-radius: 10%;
 }
 
+
 button {
   min-width: 50px;
   min-height: 50px;
-  border: 1px solid #333;
+  border: 1px solid white;
   border-radius: 10%;
   cursor: pointer;
 }
 
 .trash {
-  background-color: #fff;
-  color: mediumvioletred;
-}
-
-.trash:focus, .trash:hover {
-  filter:brightness(120%)
+  min-width: auto;
+  min-height: auto;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+  background-color: transparent;
 }
 
-form {
-  padding: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid #333;
-  margin-bottom: 1rem;
-}
 
 form label {
   position: absolute;
@@ -71,21 +108,72 @@ form label {
 
 .new-todo {
   width: 100%;
-  padding-right: 30px;
+  height: 50px;
+  padding-right: 25px;
 }
 
+
 input[type="text"] {
   width: 100%;
   padding: 0.5rem;
-  border-radius: 10px;
-  border: 0.5px solid #333;
+  border-radius: 5px;
+  border: 0.5px solid white;
 }
 
 .submit {
-  background-color: gray;
+  background-color: #798ed2;
   color: #fff;
 }
 
-.submit:focus, .submit:hover {
-  background-color: limegreen;
+.submit:hover {
+  background-color: white;
+}
+
+.bottom-section {
+  position: fixed;
+  bottom: 0;
+  padding-bottom: 4rem;
+  max-width: 600px;
+  width: 100%;
+}
+
+.progress-container {
+  margin: auto;
+  max-width: 600px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-bottom: 1rem;
+}
+
+.progress-bar {
+  width: 100%;
+  top: 60px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: white;
+  background-image: white
+}
+
+.progress-bar::-webkit-progress-bar {
+  background-color: white;
+  border-radius: 10px;
+}
+
+.progress-bar::-webkit-progress-value {
+  background-image: linear-gradient(to right, #99b5fa, #92aafa);
+  border-radius: 10px;
+
+}
+
+.progress-label {
+  margin-right: 1rem
+}
+
+.content{
+  margin-bottom: 2rem;
+}
+
+.submit:hover .svg-inline--fa {
+  color: black;
 }