From 8024dc393f45e1934605037dcf28092942d8e3b8 Mon Sep 17 00:00:00 2001 From: Afere precious Date: Wed, 5 Feb 2025 09:47:29 +0100 Subject: [PATCH 1/4] Done with my live session task manager exercise. --- web/package-lock.json | 35 ++++++++++- web/src/App.jsx | 59 +++++++++++++++++- .../domains/task/TaskItem/TaskItem.jsx | 61 ++++++++++++++++++- .../domains/task/TaskItem/TaskItem.module.css | 57 +++++++++++++++++ .../domains/task/TaskList/TaskList.jsx | 36 ++++++++++- .../domains/task/TaskList/TaskList.module.css | 7 +++ 6 files changed, 245 insertions(+), 10 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index e5f013a..88599cc 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -24,7 +24,6 @@ "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", "prettier": "^3.4.2", - "sass": "^1.83.4", "vite": "^6.0.5" }, "engines": { @@ -1020,6 +1019,7 @@ "hasInstallScript": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -1062,6 +1062,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1083,6 +1084,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1104,6 +1106,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1125,6 +1128,7 @@ "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1146,6 +1150,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1167,6 +1172,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1188,6 +1194,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1209,6 +1216,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1230,6 +1238,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1251,6 +1260,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1272,6 +1282,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1293,6 +1304,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1314,6 +1326,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1948,6 +1961,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "fill-range": "^7.1.1" }, @@ -2092,6 +2106,8 @@ "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "readdirp": "^4.0.1" }, @@ -2280,6 +2296,7 @@ "dev": true, "license": "Apache-2.0", "optional": true, + "peer": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -2859,6 +2876,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -3202,7 +3220,9 @@ "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz", "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/import-fresh": { "version": "3.3.0", @@ -3458,6 +3478,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "engines": { "node": ">=0.12.0" } @@ -3824,6 +3845,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -3884,7 +3906,8 @@ "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", "dev": true, "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/node-releases": { "version": "2.0.19", @@ -4122,6 +4145,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "engines": { "node": ">=8.6" }, @@ -4277,6 +4301,8 @@ "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">= 14.18.0" }, @@ -4457,6 +4483,8 @@ "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -4810,6 +4838,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "is-number": "^7.0.0" }, diff --git a/web/src/App.jsx b/web/src/App.jsx index 34be849..123ccb3 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -1,9 +1,64 @@ -import { TaskList } from './components/domains/task/TaskList/TaskList'; +// import TaskItem from './components/domains/task/TaskItem/TaskItem'; +import TaskList from './components/domains/task/TaskList/TaskList'; function App() { return ( <> - +

Task Manager

+ {/* */} + + ); } diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index a1832ec..f27a045 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -1,4 +1,5 @@ import styles from './TaskItem.module.css'; +import PropTypes from 'prop-types'; /* Please create the component following the design from the Figma file. @@ -6,6 +7,62 @@ Please make sure to add styles using CSS Modules. Add the necessary props to the component. */ -export function TaskItem(props) { - return
; +function TaskItem(props) { + function colorBox() { + if (props.priority === 'low') { + return styles.btnGreen; + } + if (props.priority === 'medium') { + return styles.btnYellow; + } + if (props.priority === 'high') { + return styles.btnRed; + } + } + return ( +
+

{props.ProjectName}

+ +

+ + {props.photos.map((photo, index) => ( + Photo + ))} + + {props.dueDate} +

+ +

+ + {props.studentPhotos.map((pic, index) => ( + Photo + ))} + + {props.assignee} +

+

{props.project}

+
+ ); } + +TaskItem.propTypes = { + ProjectName: PropTypes.string.isRequired, + priority: PropTypes.oneOf(['low', 'medium', 'high']).isRequired, + dueDate: PropTypes.string.isRequired, + assignee: PropTypes.string.isRequired, + project: PropTypes.string.isRequired, + photos: PropTypes.arrayOf(PropTypes.string).isRequired, + studentPhotos: PropTypes.arrayOf(PropTypes.string).isRequired, +}; + +export default TaskItem; diff --git a/web/src/components/domains/task/TaskItem/TaskItem.module.css b/web/src/components/domains/task/TaskItem/TaskItem.module.css index e69de29..208fad8 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.module.css +++ b/web/src/components/domains/task/TaskItem/TaskItem.module.css @@ -0,0 +1,57 @@ +.mainContainer { + border-radius: 20px; + background-color: #e7e5df; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + margin: 15px; + padding: 10px; +} + +.projectItem { + font-weight: bold; + font-size: smaller; +} +.btnGreen { + background-color: green; + border-radius: 10px; + width: 60px; + height: 20px; + color: white; + font-size: smaller; +} +.btnRed { + background-color: red; + border-radius: 10px; + width: 60px; + height: 20px; + color: white; + font-size: smaller; +} +.btnYellow { + background-color: orange; + border-radius: 10px; + width: 60px; + height: 20px; + color: white; + font-size: smaller; +} +h1 { + text-align: center; + margin-top: 3rem; + margin-bottom: 1rem; +} +h4 { + font-size: smaller; +} +.dueDate { + font-size: smaller; + display: flex; + align-items: center; + gap: 5px; +} +.assignee { + font-size: smaller; + display: flex; + align-items: center; + gap: 5px; +} diff --git a/web/src/components/domains/task/TaskList/TaskList.jsx b/web/src/components/domains/task/TaskList/TaskList.jsx index 624be89..e524725 100644 --- a/web/src/components/domains/task/TaskList/TaskList.jsx +++ b/web/src/components/domains/task/TaskList/TaskList.jsx @@ -1,4 +1,6 @@ +import TaskItem from '../TaskItem/TaskItem'; import styles from './TaskList.module.css'; +import PropTypes from 'prop-types'; /* Please create the component following the design from the Figma file. @@ -6,9 +8,37 @@ Please make sure to add styles using CSS Modules. Create a taskItems array and return a list of components. */ -export function TaskList() { +function TaskList(props) { // create some task items here and return one task list for each item you have - const taskItems = []; - return
; + return ( +
+ {props.tasks.map((task) => ( + + ))} +
+ ); } +TaskList.propTypes = { + tasks: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.PropTypes.number.isRequired, + ProjectName: PropTypes.string.isRequired, + priority: PropTypes.string.isRequired, + dueDate: PropTypes.string.isRequired, + assignee: PropTypes.string.isRequired, + project: PropTypes.string.isRequired, + photos: PropTypes.arrayOf(PropTypes.string).isRequired, + }), + ).isRequired, +}; +export default TaskList; diff --git a/web/src/components/domains/task/TaskList/TaskList.module.css b/web/src/components/domains/task/TaskList/TaskList.module.css index e69de29..b4ebf7d 100644 --- a/web/src/components/domains/task/TaskList/TaskList.module.css +++ b/web/src/components/domains/task/TaskList/TaskList.module.css @@ -0,0 +1,7 @@ +.listWrapper { + padding: 5px; + max-width: 800px; + margin: auto; + background-color: rgb(241, 234, 234); + border-radius: 7px; +} From 57550c27fd450fe93270c4ecc88d56ccced0cb54 Mon Sep 17 00:00:00 2001 From: Afere precious Date: Fri, 7 Feb 2025 14:41:32 +0100 Subject: [PATCH 2/4] i updated my code and put the icons in different component, and i also limited the use of props. --- .../domains/task/TaskItem/MyIconSunset.jsx | 75 ++++++++++++++++++ .../domains/task/TaskItem/StudentIcon.jsx | 46 +++++++++++ .../domains/task/TaskItem/TaskItem.jsx | 77 ++++++++++--------- .../domains/task/TaskList/TaskList.jsx | 19 ++--- 4 files changed, 170 insertions(+), 47 deletions(-) create mode 100644 web/src/components/domains/task/TaskItem/MyIconSunset.jsx create mode 100644 web/src/components/domains/task/TaskItem/StudentIcon.jsx diff --git a/web/src/components/domains/task/TaskItem/MyIconSunset.jsx b/web/src/components/domains/task/TaskItem/MyIconSunset.jsx new file mode 100644 index 0000000..7871251 --- /dev/null +++ b/web/src/components/domains/task/TaskItem/MyIconSunset.jsx @@ -0,0 +1,75 @@ +const MyIconSunset = () => ( + + + + + + + + + + + + + + + + + +); + +export default MyIconSunset; diff --git a/web/src/components/domains/task/TaskItem/StudentIcon.jsx b/web/src/components/domains/task/TaskItem/StudentIcon.jsx new file mode 100644 index 0000000..6c17149 --- /dev/null +++ b/web/src/components/domains/task/TaskItem/StudentIcon.jsx @@ -0,0 +1,46 @@ +const StudentIcon = () => ( + + + + + + + + + + + + + +); +export default StudentIcon; diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index f27a045..cc2db6c 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -1,3 +1,5 @@ +import MyIconSunset from './MyIconSunset'; +import StudentIcon from './StudentIcon'; import styles from './TaskItem.module.css'; import PropTypes from 'prop-types'; @@ -7,51 +9,56 @@ Please make sure to add styles using CSS Modules. Add the necessary props to the component. */ -function TaskItem(props) { +function TaskItem({ ProjectName, priority, dueDate, assignee, project }) { function colorBox() { - if (props.priority === 'low') { + if (priority === 'low') { return styles.btnGreen; } - if (props.priority === 'medium') { + if (priority === 'medium') { return styles.btnYellow; } - if (props.priority === 'high') { + if (priority === 'high') { return styles.btnRed; } } + return ( -
-

{props.ProjectName}

- -

- - {props.photos.map((photo, index) => ( - Photo - ))} - - {props.dueDate} -

+ <> +
+

{ProjectName}

+
+ +

+ + {MyIconSunset().map((photo, index) => ( + Photo + ))} + + {dueDate} +

+
-

- - {props.studentPhotos.map((pic, index) => ( - Photo - ))} - - {props.assignee} -

-

{props.project}

-
+

+ + {StudentIcon().map((pic, index) => ( + Photo + ))} + + {assignee} +

+

{project}

+
+ ); } diff --git a/web/src/components/domains/task/TaskList/TaskList.jsx b/web/src/components/domains/task/TaskList/TaskList.jsx index e524725..aabbc91 100644 --- a/web/src/components/domains/task/TaskList/TaskList.jsx +++ b/web/src/components/domains/task/TaskList/TaskList.jsx @@ -1,19 +1,10 @@ import TaskItem from '../TaskItem/TaskItem'; import styles from './TaskList.module.css'; import PropTypes from 'prop-types'; - -/* -Please create the component following the design from the Figma file. -Please make sure to add styles using CSS Modules. -Create a taskItems array and return a list of components. -*/ - -function TaskList(props) { - // create some task items here and return one task list for each item you have - +function TaskList({ tasks }) { return (
- {props.tasks.map((task) => ( + {tasks.map((task) => ( ); } + +// PropTypes validation TaskList.propTypes = { tasks: PropTypes.arrayOf( PropTypes.shape({ - id: PropTypes.PropTypes.number.isRequired, + id: PropTypes.number.isRequired, ProjectName: PropTypes.string.isRequired, priority: PropTypes.string.isRequired, dueDate: PropTypes.string.isRequired, assignee: PropTypes.string.isRequired, project: PropTypes.string.isRequired, photos: PropTypes.arrayOf(PropTypes.string).isRequired, + studentPhotos: PropTypes.arrayOf(PropTypes.string).isRequired, }), ).isRequired, }; + export default TaskList; From 3cdf18296c3de12e0d7866a6e6803871f9b4da8b Mon Sep 17 00:00:00 2001 From: Afere precious Date: Fri, 7 Feb 2025 15:36:50 +0100 Subject: [PATCH 3/4] i made changes to the button and did my final changes to my code. --- .../domains/task/TaskItem/MyIconSunset.jsx | 6 ++--- .../domains/task/TaskItem/StudentIcon.jsx | 7 ++--- .../domains/task/TaskItem/TaskItem.jsx | 27 ++++++------------- .../domains/task/TaskItem/TaskItem.module.css | 26 +++++++----------- 4 files changed, 24 insertions(+), 42 deletions(-) diff --git a/web/src/components/domains/task/TaskItem/MyIconSunset.jsx b/web/src/components/domains/task/TaskItem/MyIconSunset.jsx index 7871251..81edf38 100644 --- a/web/src/components/domains/task/TaskItem/MyIconSunset.jsx +++ b/web/src/components/domains/task/TaskItem/MyIconSunset.jsx @@ -1,7 +1,7 @@ const MyIconSunset = () => ( ( - + diff --git a/web/src/components/domains/task/TaskItem/StudentIcon.jsx b/web/src/components/domains/task/TaskItem/StudentIcon.jsx index 6c17149..5f278ee 100644 --- a/web/src/components/domains/task/TaskItem/StudentIcon.jsx +++ b/web/src/components/domains/task/TaskItem/StudentIcon.jsx @@ -1,7 +1,7 @@ const StudentIcon = () => ( ( - + ); + export default StudentIcon; diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index cc2db6c..af47f17 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -12,13 +12,13 @@ Add the necessary props to the component. function TaskItem({ ProjectName, priority, dueDate, assignee, project }) { function colorBox() { if (priority === 'low') { - return styles.btnGreen; + return `${styles.btn} ${styles.btnGreen}`; } if (priority === 'medium') { - return styles.btnYellow; + return `${styles.btn} ${styles.btnYellow}`; } if (priority === 'high') { - return styles.btnRed; + return `${styles.btn} ${styles.btnRed}`; } } @@ -28,16 +28,11 @@ function TaskItem({ ProjectName, priority, dueDate, assignee, project }) {

{ProjectName}

+
+

- {MyIconSunset().map((photo, index) => ( - Photo - ))} + {dueDate}

@@ -45,17 +40,11 @@ function TaskItem({ ProjectName, priority, dueDate, assignee, project }) {

- {StudentIcon().map((pic, index) => ( - Photo - ))} + {assignee}

+

{project}

diff --git a/web/src/components/domains/task/TaskItem/TaskItem.module.css b/web/src/components/domains/task/TaskItem/TaskItem.module.css index 208fad8..58a5729 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.module.css +++ b/web/src/components/domains/task/TaskItem/TaskItem.module.css @@ -9,31 +9,23 @@ .projectItem { font-weight: bold; - font-size: smaller; + font-size: small; } -.btnGreen { - background-color: green; +.btn { border-radius: 10px; width: 60px; height: 20px; color: white; - font-size: smaller; + font-size: small; +} +.btnGreen { + background-color: green; } .btnRed { background-color: red; - border-radius: 10px; - width: 60px; - height: 20px; - color: white; - font-size: smaller; } .btnYellow { background-color: orange; - border-radius: 10px; - width: 60px; - height: 20px; - color: white; - font-size: smaller; } h1 { text-align: center; @@ -41,16 +33,16 @@ h1 { margin-bottom: 1rem; } h4 { - font-size: smaller; + font-size: small; } .dueDate { - font-size: smaller; + font-size: small; display: flex; align-items: center; gap: 5px; } .assignee { - font-size: smaller; + font-size: small; display: flex; align-items: center; gap: 5px; From 9ee81274832896a8becff3b7b06b07dcc8d9e881 Mon Sep 17 00:00:00 2001 From: Afere precious Date: Mon, 10 Feb 2025 15:16:20 +0100 Subject: [PATCH 4/4] -Created a NewTask Component -Which Include a form -Added `.trim` to remove white spaces from input. -Stopped submission if it contains only whitespace. -Ensured input field reset after adding a task. --- web/src/App.jsx | 104 +++++++++--------- .../domains/task/TaskItem/NewTask.jsx | 73 ++++++++++++ .../domains/task/TaskItem/NewTask.module.css | 51 +++++++++ .../domains/task/TaskItem/TaskItem.jsx | 26 ++--- .../domains/task/TaskList/TaskList.jsx | 20 ++-- 5 files changed, 196 insertions(+), 78 deletions(-) create mode 100644 web/src/components/domains/task/TaskItem/NewTask.jsx create mode 100644 web/src/components/domains/task/TaskItem/NewTask.module.css diff --git a/web/src/App.jsx b/web/src/App.jsx index 123ccb3..6d6c111 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -1,64 +1,64 @@ // import TaskItem from './components/domains/task/TaskItem/TaskItem'; +import NewTask from './components/domains/task/TaskItem/NewTask'; import TaskList from './components/domains/task/TaskList/TaskList'; +import { useState } from 'react'; function App() { + const [taskInform, setTaskInform] = useState([ + { + id: 1, + ProjectName: 'Re-work UI/UX', + Priority: 'low', + DueDate: '12/05/2025', + Assignee: 'Said & Rachel', + Project: 'Time App', + }, + { + id: 2, + ProjectName: 'Dark mode toggle', + Priority: 'high', + DueDate: '09/03/2025', + Assignee: 'Umair & Precious', + Project: 'Asa Dark-mode Feature', + }, + { + id: 3, + ProjectName: 'Accessibility check', + Priority: 'medium', + DueDate: '15/04/2025', + Assignee: 'Michel & Ricardo', + Project: 'Timer App', + }, + { + id: 4, + ProjectName: 'Notification Integration', + Priority: 'high', + DueDate: '11/03/2025', + Assignee: 'Ebetsam & Deborah', + Project: 'Timer App', + }, + ]); + function newTaskList(event, ProjectName, Project, Assignee) { + event.preventDefault(); + setTaskInform((prevtask) => [ + ...prevtask, + { + id: 5, + ProjectName, + DueDate: new Date().toLocaleDateString(), + Project, + Assignee, + Priority: 'high', + }, + ]); + } return ( <>

Task Manager

{/* */} - + + ); } diff --git a/web/src/components/domains/task/TaskItem/NewTask.jsx b/web/src/components/domains/task/TaskItem/NewTask.jsx new file mode 100644 index 0000000..dc5b272 --- /dev/null +++ b/web/src/components/domains/task/TaskItem/NewTask.jsx @@ -0,0 +1,73 @@ +import { useState } from 'react'; +import PropTypes from 'prop-types'; +import styles from './NewTask.module.css'; +function NewTask({ submit }) { + const [formTitle, setFormTitle] = useState(''); + const [formProject, setFormProject] = useState(''); + const [formAssignee, setFormAssignee] = useState(''); + + function handleSubmit(event) { + event.preventDefault(); + if (!formTitle.trim() || !formProject.trim() || !formAssignee.trim()) { + return; + } + submit(event, formTitle, formProject, formAssignee); + + setFormAssignee(''); + setFormProject(''); + setFormTitle(''); + } + + return ( + <> +
+
+ + setFormTitle(e.target.value)} + /> + + setFormProject(e.target.value)} + /> + + setFormAssignee(e.target.value)} + /> +
+ +
+ + ); +} +export default NewTask; + +NewTask.propTypes = { + submit: PropTypes.func.isRequired, +}; + +{ + /*
+
+ + setNewItem(e.target.value)} + type="text" + id="item" + /> +
+ +
*/ +} diff --git a/web/src/components/domains/task/TaskItem/NewTask.module.css b/web/src/components/domains/task/TaskItem/NewTask.module.css new file mode 100644 index 0000000..395e80b --- /dev/null +++ b/web/src/components/domains/task/TaskItem/NewTask.module.css @@ -0,0 +1,51 @@ +form { + max-width: 600px; + margin: 20px auto; + padding: 20px; + background-color: rgb(241, 234, 234); + border-radius: 8px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); +} +.titleContainer { + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; +} + +label { + font-size: 15px; + font-weight: bold; + margin-bottom: 3px; +} + +input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 15px; + transition: border-color 0.3s ease; +} + +input:focus { + outline: none; + border-color: #007bff; + box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5); +} + +.btn { + padding: 10px 15px; + font-size: 15px; + font-weight: bold; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-top: 15px; +} + +.btn:hover { + background-color: #0056b3; +} diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index af47f17..6a68184 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -9,15 +9,15 @@ Please make sure to add styles using CSS Modules. Add the necessary props to the component. */ -function TaskItem({ ProjectName, priority, dueDate, assignee, project }) { +function TaskItem({ ProjectName, Priority, DueDate, Assignee, Project }) { function colorBox() { - if (priority === 'low') { + if (Priority === 'low') { return `${styles.btn} ${styles.btnGreen}`; } - if (priority === 'medium') { + if (Priority === 'medium') { return `${styles.btn} ${styles.btnYellow}`; } - if (priority === 'high') { + if (Priority === 'high') { return `${styles.btn} ${styles.btnRed}`; } } @@ -27,14 +27,14 @@ function TaskItem({ ProjectName, priority, dueDate, assignee, project }) {

{ProjectName}

- +

- {dueDate} + {DueDate}

@@ -42,10 +42,10 @@ function TaskItem({ ProjectName, priority, dueDate, assignee, project }) { - {assignee} + {Assignee}

-

{project}

+

{Project}

); @@ -53,12 +53,10 @@ function TaskItem({ ProjectName, priority, dueDate, assignee, project }) { TaskItem.propTypes = { ProjectName: PropTypes.string.isRequired, - priority: PropTypes.oneOf(['low', 'medium', 'high']).isRequired, - dueDate: PropTypes.string.isRequired, - assignee: PropTypes.string.isRequired, - project: PropTypes.string.isRequired, - photos: PropTypes.arrayOf(PropTypes.string).isRequired, - studentPhotos: PropTypes.arrayOf(PropTypes.string).isRequired, + Priority: PropTypes.oneOf(['low', 'medium', 'high']).isRequired, + DueDate: PropTypes.string.isRequired, + Assignee: PropTypes.string.isRequired, + Project: PropTypes.string.isRequired, }; export default TaskItem; diff --git a/web/src/components/domains/task/TaskList/TaskList.jsx b/web/src/components/domains/task/TaskList/TaskList.jsx index aabbc91..a8b1efa 100644 --- a/web/src/components/domains/task/TaskList/TaskList.jsx +++ b/web/src/components/domains/task/TaskList/TaskList.jsx @@ -8,12 +8,10 @@ function TaskList({ tasks }) { ))}
@@ -26,12 +24,10 @@ TaskList.propTypes = { PropTypes.shape({ id: PropTypes.number.isRequired, ProjectName: PropTypes.string.isRequired, - priority: PropTypes.string.isRequired, - dueDate: PropTypes.string.isRequired, - assignee: PropTypes.string.isRequired, - project: PropTypes.string.isRequired, - photos: PropTypes.arrayOf(PropTypes.string).isRequired, - studentPhotos: PropTypes.arrayOf(PropTypes.string).isRequired, + Priority: PropTypes.string.isRequired, + DueDate: PropTypes.string.isRequired, + Assignee: PropTypes.string.isRequired, + Project: PropTypes.string.isRequired, }), ).isRequired, };