iiitl#9: Improve Task Styling for Enhanced User Experience

piyushkumar079 · Mar 17, 2024 · cd23485 · cd23485
1 parent 50a9b8b
commit cd23485
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 32 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,8 +7,9 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.30.0",
     "react": "^18.1.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

diff --git a/frontend/src/components/TaskDetails.js b/frontend/src/components/TaskDetails.js
@@ -1,6 +1,8 @@
 import { useTasksContext } from "../hooks/usetasksContext";
 import { useAuthContext } from "../hooks/useAuthContext";
-
+import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+import { formatDistanceToNow, parseISO } from "date-fns";
 const TaskDetails = ({ task }) => {
   const { dispatch } = useTasksContext();
   const { user } = useAuthContext();
@@ -23,18 +25,18 @@ const TaskDetails = ({ task }) => {
     }
   };
 
+  // console.log(task);
   return (
     <div className="task-details">
-      <h3>{task.title}</h3>
-
-      <p>
-        <strong>Description : </strong>
-        {task.description}
-      </p>
-      <p>
-        <strong>Progress: </strong>
-        {task.progress}
-      </p>
+      <div className="text">
+        <h3 className="title">{task.title}</h3>
+        <p>{task.description}</p>
+        <p></p>
+        <p>{formatDistanceToNow(parseISO(task.createdAt))} ago</p>
+      </div>
+      <div className="progress">
+        <CircularProgressbar value={task.progress} text={`${task.progress}%`} />
+      </div>
       <span className="material-symbols-outlined" onClick={handleClick}>
         delete
       </span>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -39,11 +39,15 @@ header a {
   gap: 100px;
 }
 .task-details {
+  display: inline-block;
   background: #fff;
-  border-radius: 4px;
+  border-radius: 13px;
   margin: 20px auto;
   padding: 20px;
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  max-width: 70%;  
   box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
 }
 .task-details h4 {
@@ -58,12 +62,12 @@ header a {
 }
 .task-details span {
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 0px;
+  right: 0px;
   cursor: pointer;
   background: #f1f1f1;
   padding: 6px;
-  border-radius: 50%;
+  border-radius: 40%;
   color: #333;
 }
 
@@ -119,4 +123,14 @@ form.signup, form.login {
   padding: 20px;
   background: #fff;
   border-radius: 4px;
-}
+}
+
+.progress {
+  display: inline-block;
+  height: 100px; 
+  width: 100px; 
+}
+
+.title{
+  margin: 0px;
+}