From cd23485ed87be8246dc7b399f260881f7583a3f6 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Sun, 17 Mar 2024 16:07:31 +0530 Subject: [PATCH] #9: Improve Task Styling for Enhanced User Experience --- frontend/package-lock.json | 63 ++++++++++++++++++++------ frontend/package.json | 3 +- frontend/src/components/TaskDetails.js | 24 +++++----- frontend/src/index.css | 24 ++++++++-- 4 files changed, 82 insertions(+), 32 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index dbd1123..5aeff9b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,8 +11,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", @@ -1797,11 +1798,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", - "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz", + "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -1819,6 +1820,11 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -6038,9 +6044,12 @@ } }, "node_modules/date-fns": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz", - "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==", + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, "engines": { "node": ">=0.11" }, @@ -13515,6 +13524,14 @@ "node": ">=14" } }, + "node_modules/react-circular-progressbar": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz", + "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==", + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -17643,11 +17660,18 @@ } }, "@babel/runtime": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", - "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz", + "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + } } }, "@babel/runtime-corejs3": { @@ -20709,9 +20733,12 @@ } }, "date-fns": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz", - "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==" + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "requires": { + "@babel/runtime": "^7.21.0" + } }, "debug": { "version": "4.3.4", @@ -25942,6 +25969,12 @@ "whatwg-fetch": "^3.6.2" } }, + "react-circular-progressbar": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz", + "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==", + "requires": {} + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 521f27b..cd96e7f 100644 --- 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 index d7e208f..fd87907 100644 --- 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 (
-

{task.title}

- -

- Description : - {task.description} -

-

- Progress: - {task.progress} -

+
+

{task.title}

+

{task.description}

+

+

{formatDistanceToNow(parseISO(task.createdAt))} ago

+
+
+ +
delete diff --git a/frontend/src/index.css b/frontend/src/index.css index 913a231..e9edb29 100644 --- 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; -} \ No newline at end of file +} + +.progress { + display: inline-block; + height: 100px; + width: 100px; +} + +.title{ + margin: 0px; +}