From e5bc0dbce105f959aee6a2afeeddb04bdb67a7e2 Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Tue, 4 Feb 2025 05:42:31 +0100 Subject: [PATCH 1/9] first commit --- web/package-lock.json | 35 +++++++++++- .../domains/task/TaskItem/TaskItem.jsx | 52 ++++++++++++++++- .../domains/task/TaskItem/TaskItem.module.css | 57 +++++++++++++++++++ .../domains/task/TaskList/TaskList.jsx | 41 ++++++++++++- .../domains/task/TaskList/TaskList.module.css | 12 ++++ web/src/index.css | 11 +++- 6 files changed, 199 insertions(+), 9 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/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index a1832ec..bc04b2c 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -1,11 +1,57 @@ import styles from './TaskItem.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. Add the necessary props to the component. */ -export function TaskItem(props) { - return
; +// assigning styling for priorities +export function TaskItem({ + title, + priority, + realiseDate, + designers, + projectName, +}) { + const getPriorityClass = () => { + if (priority === 'Low') return `${styles.lowPriority}`; + if (priority === 'Medium') return `${styles.mediumPriority}`; + if (priority === 'High') return `${styles.highPriority}`; + return ''; + }; + + return ( +
+
{title}
+
+
+ {priority} +
+
+
+ sunset +
{realiseDate}
+
+
+ user-group-man-man--v1 +
{designers}
+
+
{projectName}
+
+ ); } + +TaskItem.propTypes = { + title: PropTypes.string.isRequired, + priority: PropTypes.string.isRequired, + realiseDate: PropTypes.string.isRequired, + designers: PropTypes.string.isRequired, + projectName: PropTypes.string.isRequired, +}; diff --git a/web/src/components/domains/task/TaskItem/TaskItem.module.css b/web/src/components/domains/task/TaskItem/TaskItem.module.css index e69de29..7531813 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 @@ +.itemWrapper { + background-color: var(--light-blue); + display: flex; + align-items: center; + justify-content: space-around; + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + border-radius: 10px; +} + +.itemWrapper > div { + width: 25%; + padding-left: 20px; +} + +.titleStyle { + font-weight: bold; +} + +.priorityStyle { + text-align: center; + border-radius: 15px; + width: fit-content; + padding: 5px; +} + +.lowPriority { + color: white; + background-color: var(--green); +} + +.mediumPriority { + color: white; + background-color: var(--orange); +} + +.highPriority { + color: white; + background-color: var(--red); +} + +.dateStyle { + gap: 5px; + display: flex; + align-items: center; +} + +.designersStyle { + gap: 5px; + display: flex; + align-items: center; +} + +.projectStyle { + font-weight: bold; +} diff --git a/web/src/components/domains/task/TaskList/TaskList.jsx b/web/src/components/domains/task/TaskList/TaskList.jsx index 624be89..4393989 100644 --- a/web/src/components/domains/task/TaskList/TaskList.jsx +++ b/web/src/components/domains/task/TaskList/TaskList.jsx @@ -1,3 +1,4 @@ +import { TaskItem } from '../TaskItem/TaskItem'; import styles from './TaskList.module.css'; /* @@ -8,7 +9,43 @@ Create a taskItems array and return a list of components. export function TaskList() { // create some task items here and return one task list for each item you have - const taskItems = []; - return
; + const taskItems = [ + { + title: 'Re-work UI/UX', + priority: 'Low', + realiseDate: '12/05/2025', + designers: 'Said, Rachael', + projectName: 'Time App', + }, + { + title: 'Dark mode toggle', + priority: 'High', + realiseDate: '09/03/2025', + designers: 'Umair, Precious', + projectName: 'ASA Darkmode Feature', + }, + { + title: 'Accessibility checks', + priority: 'Medium', + realiseDate: '15/04/2025', + designers: 'Michael, Ricardo', + projectName: 'Time App', + }, + { + title: 'Notification integration', + priority: 'High', + realiseDate: '11/03/2025', + designers: 'Ebtesam, Deborah', + projectName: 'Time App', + }, + ]; + + return ( +
+ {taskItems.map((task) => ( + + ))} +
+ ); } diff --git a/web/src/components/domains/task/TaskList/TaskList.module.css b/web/src/components/domains/task/TaskList/TaskList.module.css index e69de29..0e2853e 100644 --- a/web/src/components/domains/task/TaskList/TaskList.module.css +++ b/web/src/components/domains/task/TaskList/TaskList.module.css @@ -0,0 +1,12 @@ +.listWrapper { + background-color: var(--light-grey); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 40px; + gap: 10px; + border-radius: 10px; + margin-left: 50px; + margin-right: 50px; +} diff --git a/web/src/index.css b/web/src/index.css index e3eba55..46a1f07 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -4,13 +4,22 @@ box-sizing: border-box; } +:root { + --green: #6fcf97; + --light-grey: #ebebeb; + --light-blue: #d0d9e1; + --orange: #f2994a; + --red: #eb5757; +} + html, body { height: 100%; } body { - font-family: inherit; + font-family: Arial, Helvetica, sans-serif; + line-height: inherit; font-size: 100%; -webkit-font-smoothing: antialiased; From 415f24eb827d1dc612cb2537fa7996b0933cd1b0 Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Sat, 8 Feb 2025 15:10:05 +0100 Subject: [PATCH 2/9] TaskForm component is created and added to the App component --- web/src/App.jsx | 2 ++ web/src/components/domains/task/TaskForm/TaskForm.jsx | 0 web/src/components/domains/task/TaskForm/TaskForm.module.css | 0 3 files changed, 2 insertions(+) create mode 100644 web/src/components/domains/task/TaskForm/TaskForm.jsx create mode 100644 web/src/components/domains/task/TaskForm/TaskForm.module.css diff --git a/web/src/App.jsx b/web/src/App.jsx index 34be849..3f47b40 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -1,9 +1,11 @@ import { TaskList } from './components/domains/task/TaskList/TaskList'; +import { TaskForm } from './components/domains/task/TaskForm/TaskForm'; function App() { return ( <> + ); } diff --git a/web/src/components/domains/task/TaskForm/TaskForm.jsx b/web/src/components/domains/task/TaskForm/TaskForm.jsx new file mode 100644 index 0000000..e69de29 diff --git a/web/src/components/domains/task/TaskForm/TaskForm.module.css b/web/src/components/domains/task/TaskForm/TaskForm.module.css new file mode 100644 index 0000000..e69de29 From d39b44d73a8c03cb3fffb1047173ca6678fa74ce Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Sat, 8 Feb 2025 16:01:01 +0100 Subject: [PATCH 3/9] jsx in TaskForm.jsx is created --- .../domains/task/TaskForm/TaskForm.jsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/web/src/components/domains/task/TaskForm/TaskForm.jsx b/web/src/components/domains/task/TaskForm/TaskForm.jsx index e69de29..52f23ff 100644 --- a/web/src/components/domains/task/TaskForm/TaskForm.jsx +++ b/web/src/components/domains/task/TaskForm/TaskForm.jsx @@ -0,0 +1,52 @@ +import styles from './TaskForm.module.css'; +import PropTypes from 'prop-types'; + +export function TaskForm() { + return ( + <> +
+
+

New Task

+
+ {/* Task title */} + + + {/* Project name */} + + + {/* Priority */} + +
+
+
+ + ); +} From 5568a9e14771b6c868a3d442a672f64da3dc334f Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Sat, 8 Feb 2025 17:22:56 +0100 Subject: [PATCH 4/9] made working button --- web/src/App.jsx | 6 +- .../domains/task/TaskForm/TaskForm.jsx | 98 +++++++++++-------- .../domains/task/TaskForm/TaskForm.module.css | 41 ++++++++ .../domains/task/TaskItem/TaskItem.module.css | 1 + 4 files changed, 102 insertions(+), 44 deletions(-) diff --git a/web/src/App.jsx b/web/src/App.jsx index 3f47b40..fb77bdb 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -2,10 +2,14 @@ import { TaskList } from './components/domains/task/TaskList/TaskList'; import { TaskForm } from './components/domains/task/TaskForm/TaskForm'; function App() { + function createTask() { + console.log('it works'); + } + return ( <> - + ); } diff --git a/web/src/components/domains/task/TaskForm/TaskForm.jsx b/web/src/components/domains/task/TaskForm/TaskForm.jsx index 52f23ff..1187650 100644 --- a/web/src/components/domains/task/TaskForm/TaskForm.jsx +++ b/web/src/components/domains/task/TaskForm/TaskForm.jsx @@ -1,52 +1,64 @@ import styles from './TaskForm.module.css'; -import PropTypes from 'prop-types'; +import { PropTypes } from 'prop-types'; -export function TaskForm() { +function TaskForm(props) { return ( - <> -
-
-

New Task

-
- {/* Task title */} - + +

New Task

+
+ {/* Task title */} + - {/* Project name */} - + {/* Project name */} + - {/* Priority */} -
- + */} + + + ); } + +export { TaskForm }; + +TaskForm.propTypes = { + handleClick: PropTypes.func.isRequired, +}; diff --git a/web/src/components/domains/task/TaskForm/TaskForm.module.css b/web/src/components/domains/task/TaskForm/TaskForm.module.css index e69de29..c1bc90f 100644 --- a/web/src/components/domains/task/TaskForm/TaskForm.module.css +++ b/web/src/components/domains/task/TaskForm/TaskForm.module.css @@ -0,0 +1,41 @@ +.formWrapper { + background-color: var(--light-grey); + display: flex; + flex-direction: column; + justify-content: center; + align-items: right; + padding: 40px; + gap: 10px; + border-radius: 10px; + margin: 50px; +} + +.fieldsetStyle { + display: flex; + flex-wrap: wrap; + border: none; + gap: 40px; +} + +.taskLabelStyle { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.taskInputStyle { + border-radius: 7px; + border: 2px solid black; + padding: 5px; + margin-top: 7px; +} + +.formButton { + text-align: center; + border-radius: 15px; + width: fit-content; + padding: 5px; + background-color: var(--light-blue); + margin-top: 10px; + padding: 10px; +} diff --git a/web/src/components/domains/task/TaskItem/TaskItem.module.css b/web/src/components/domains/task/TaskItem/TaskItem.module.css index 7531813..fcc2493 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.module.css +++ b/web/src/components/domains/task/TaskItem/TaskItem.module.css @@ -21,6 +21,7 @@ .priorityStyle { text-align: center; border-radius: 15px; + background-color: var(--light-blue); width: fit-content; padding: 5px; } From 6140096db952c3eac30a0f07806e335bf6b0dda8 Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Wed, 12 Feb 2025 15:56:04 +0100 Subject: [PATCH 5/9] task form has been created --- web/src/App.jsx | 38 +++++++++++-- .../domains/task/TaskForm/TaskForm.jsx | 54 +++++++++++-------- .../domains/task/TaskList/TaskList.jsx | 54 +++++++------------ 3 files changed, 84 insertions(+), 62 deletions(-) diff --git a/web/src/App.jsx b/web/src/App.jsx index fb77bdb..2b37c4d 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -1,14 +1,46 @@ +import { useState } from 'react'; import { TaskList } from './components/domains/task/TaskList/TaskList'; import { TaskForm } from './components/domains/task/TaskForm/TaskForm'; function App() { - function createTask() { - console.log('it works'); + const [tasks, setTasks] = useState([ + { + title: 'Re-work UI/UX', + priority: 'Low', + realiseDate: '12/05/2025', + designers: 'Said, Rachael', + projectName: 'Time App', + }, + { + title: 'Dark mode toggle', + priority: 'High', + realiseDate: '09/03/2025', + designers: 'Umair, Precious', + projectName: 'ASA Darkmode Feature', + }, + { + title: 'Accessibility checks', + priority: 'Medium', + realiseDate: '15/04/2025', + designers: 'Michael, Ricardo', + projectName: 'Time App', + }, + { + title: 'Notification integration', + priority: 'High', + realiseDate: '11/03/2025', + designers: 'Ebtesam, Deborah', + projectName: 'Time App', + }, + ]); + + function createTask(newTask) { + setTasks([...tasks, newTask]); } return ( <> - + ); diff --git a/web/src/components/domains/task/TaskForm/TaskForm.jsx b/web/src/components/domains/task/TaskForm/TaskForm.jsx index 1187650..be036b9 100644 --- a/web/src/components/domains/task/TaskForm/TaskForm.jsx +++ b/web/src/components/domains/task/TaskForm/TaskForm.jsx @@ -1,7 +1,30 @@ +import { useState } from 'react'; import styles from './TaskForm.module.css'; import { PropTypes } from 'prop-types'; -function TaskForm(props) { +function TaskForm({ handleClick }) { + const [taskTitle, setTaskTitle] = useState(''); + const [taskProject, setTaskProject] = useState(''); + + function submitTask() { + if (!taskTitle.trim() || !taskProject.trim()) { + alert('Please enter both title and project name.'); + return; + } + + const newTask = { + title: taskTitle, + priority: 'Medium', + realiseDate: new Date().toLocaleDateString(), + designers: 'Unassigned', + projectName: taskProject, + }; + + handleClick(newTask); // Send the new task to App component + setTaskTitle(''); + setTaskProject(''); + } + return (

New Task

@@ -11,8 +34,10 @@ function TaskForm(props) { Title setTaskTitle(e.target.value)} required /> @@ -22,36 +47,19 @@ function TaskForm(props) { Project setTaskProject(e.target.value)} required /> - - {/* - */}
); diff --git a/web/src/components/domains/task/TaskList/TaskList.jsx b/web/src/components/domains/task/TaskList/TaskList.jsx index 4393989..5bbf233 100644 --- a/web/src/components/domains/task/TaskList/TaskList.jsx +++ b/web/src/components/domains/task/TaskList/TaskList.jsx @@ -1,5 +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. @@ -7,45 +8,26 @@ Please make sure to add styles using CSS Modules. Create a taskItems array and return a list of components. */ -export function TaskList() { - // create some task items here and return one task list for each item you have - - const taskItems = [ - { - title: 'Re-work UI/UX', - priority: 'Low', - realiseDate: '12/05/2025', - designers: 'Said, Rachael', - projectName: 'Time App', - }, - { - title: 'Dark mode toggle', - priority: 'High', - realiseDate: '09/03/2025', - designers: 'Umair, Precious', - projectName: 'ASA Darkmode Feature', - }, - { - title: 'Accessibility checks', - priority: 'Medium', - realiseDate: '15/04/2025', - designers: 'Michael, Ricardo', - projectName: 'Time App', - }, - { - title: 'Notification integration', - priority: 'High', - realiseDate: '11/03/2025', - designers: 'Ebtesam, Deborah', - projectName: 'Time App', - }, - ]; - +function TaskList({ taskItems }) { return (
- {taskItems.map((task) => ( - + {taskItems.map((task, index) => ( + ))}
); } + +export { TaskList }; + +TaskList.propTypes = { + taskItems: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string.isRequired, + priority: PropTypes.string.isRequired, + realiseDate: PropTypes.string.isRequired, + designers: PropTypes.string.isRequired, + projectName: PropTypes.string.isRequired, + }), + ).isRequired, +}; From 97a39799da207319c24cb6e3b1cb84897111184c Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Thu, 13 Feb 2025 13:04:37 +0100 Subject: [PATCH 6/9] Resolved icons issue (IMG --> SVG) --- .DS_Store | Bin 0 -> 6148 bytes web/icons/pers.svg | 1 + web/icons/sun.svg | 1 + .../domains/task/TaskItem/PersIcon.jsx | 20 ++++++++++++++++++ .../domains/task/TaskItem/SunIcon.jsx | 20 ++++++++++++++++++ .../domains/task/TaskItem/TaskItem.jsx | 12 ++++------- 6 files changed, 46 insertions(+), 8 deletions(-) create mode 100644 .DS_Store create mode 100644 web/icons/pers.svg create mode 100644 web/icons/sun.svg create mode 100644 web/src/components/domains/task/TaskItem/PersIcon.jsx create mode 100644 web/src/components/domains/task/TaskItem/SunIcon.jsx diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ce80289cffe028e2e742c6bd8231468b4d5424da GIT binary patch literal 6148 zcmeHK%}T>S5Z-O8Nhm@N3OxqA7EG%M#Y>3w1&ruHr6we3FlI}WnnNk%tS{t~_&m<+ zZop#BB6bFLzxmzGevtiPjB$S%j~KHVV)o1&8g+fw#4Ht-ILUd?N;$TN{Yf~U!DvIvO*Vt^PR2DY04eJ+^& z?WTcNPYe(PEezoP;6Ow4G}a2`)&U(}pE2G;L;)S&5{QmQPh+hRA|PCq0;*E3pBP+~ zgWu74p2k|CDra2I4CCmTo5u^6vxDD}>5O{{sV4@AflUUw%CzzPzkpw+^^w0>LKZPV z4E!?&cyAg^eOQz}TYoGM&sqoC12h!Ot5E>~ed7`U2JRyR8B}oxb;$EH)(UYH^viNU Ox(G-@s3Qh`fq^fIG)ZRw literal 0 HcmV?d00001 diff --git a/web/icons/pers.svg b/web/icons/pers.svg new file mode 100644 index 0000000..6f4106f --- /dev/null +++ b/web/icons/pers.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/icons/sun.svg b/web/icons/sun.svg new file mode 100644 index 0000000..c0550d4 --- /dev/null +++ b/web/icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/components/domains/task/TaskItem/PersIcon.jsx b/web/src/components/domains/task/TaskItem/PersIcon.jsx new file mode 100644 index 0000000..049ea08 --- /dev/null +++ b/web/src/components/domains/task/TaskItem/PersIcon.jsx @@ -0,0 +1,20 @@ +const MyIcon = () => ( + + + + + + + + + + +); + +export default MyIcon; diff --git a/web/src/components/domains/task/TaskItem/SunIcon.jsx b/web/src/components/domains/task/TaskItem/SunIcon.jsx new file mode 100644 index 0000000..69602b2 --- /dev/null +++ b/web/src/components/domains/task/TaskItem/SunIcon.jsx @@ -0,0 +1,20 @@ +const MyIcon = () => ( + + + + + + + + + + +); + +export default MyIcon; diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index bc04b2c..a38ccb4 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -1,5 +1,7 @@ import styles from './TaskItem.module.css'; import PropTypes from 'prop-types'; +import SunIcon from './SunIcon'; +import PersIcon from './PersIcon'; /* Please create the component following the design from the Figma file. Please make sure to add styles using CSS Modules. @@ -30,17 +32,11 @@ export function TaskItem({
- sunset +
{realiseDate}
- user-group-man-man--v1 +
{designers}
{projectName}
From 61a7610596009b8859f0a39db8851d791be7c66e Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Thu, 13 Feb 2025 13:10:06 +0100 Subject: [PATCH 7/9] Prop names corrected --- .../domains/task/TaskItem/TaskItem.jsx | 14 +++++++------- .../domains/task/TaskList/TaskList.jsx | 16 ++++++++-------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index a38ccb4..d61ac85 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -12,8 +12,8 @@ Add the necessary props to the component. export function TaskItem({ title, priority, - realiseDate, - designers, + releaseDate, + assignedTo, projectName, }) { const getPriorityClass = () => { @@ -33,11 +33,11 @@ export function TaskItem({
-
{realiseDate}
+
{releaseDate}
-
+
-
{designers}
+
{assignedTo}
{projectName}
@@ -47,7 +47,7 @@ export function TaskItem({ TaskItem.propTypes = { title: PropTypes.string.isRequired, priority: PropTypes.string.isRequired, - realiseDate: PropTypes.string.isRequired, - designers: PropTypes.string.isRequired, + releaseDate: PropTypes.string.isRequired, + assignedTo: PropTypes.string.isRequired, projectName: PropTypes.string.isRequired, }; diff --git a/web/src/components/domains/task/TaskList/TaskList.jsx b/web/src/components/domains/task/TaskList/TaskList.jsx index 4393989..2b0f0a2 100644 --- a/web/src/components/domains/task/TaskList/TaskList.jsx +++ b/web/src/components/domains/task/TaskList/TaskList.jsx @@ -14,29 +14,29 @@ export function TaskList() { { title: 'Re-work UI/UX', priority: 'Low', - realiseDate: '12/05/2025', - designers: 'Said, Rachael', + releaseDate: '12/05/2025', + assignedTo: 'Said, Rachael', projectName: 'Time App', }, { title: 'Dark mode toggle', priority: 'High', - realiseDate: '09/03/2025', - designers: 'Umair, Precious', + releaseDate: '09/03/2025', + assignedTo: 'Umair, Precious', projectName: 'ASA Darkmode Feature', }, { title: 'Accessibility checks', priority: 'Medium', - realiseDate: '15/04/2025', - designers: 'Michael, Ricardo', + releaseDate: '15/04/2025', + assignedTo: 'Michael, Ricardo', projectName: 'Time App', }, { title: 'Notification integration', priority: 'High', - realiseDate: '11/03/2025', - designers: 'Ebtesam, Deborah', + releaseDate: '11/03/2025', + assignedTo: 'Ebtesam, Deborah', projectName: 'Time App', }, ]; From 75b9defeb21ad38df13190c8e310ea41db71055b Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Thu, 13 Feb 2025 13:19:18 +0100 Subject: [PATCH 8/9] style names corrected (removed 'Style' ending) --- web/src/components/domains/task/TaskItem/TaskItem.jsx | 10 +++++----- .../domains/task/TaskItem/TaskItem.module.css | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/web/src/components/domains/task/TaskItem/TaskItem.jsx b/web/src/components/domains/task/TaskItem/TaskItem.jsx index d61ac85..eb2ff3d 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.jsx +++ b/web/src/components/domains/task/TaskItem/TaskItem.jsx @@ -25,21 +25,21 @@ export function TaskItem({ return (
-
{title}
+
{title}
-
+
{priority}
-
+
{releaseDate}
-
+
{assignedTo}
-
{projectName}
+
{projectName}
); } diff --git a/web/src/components/domains/task/TaskItem/TaskItem.module.css b/web/src/components/domains/task/TaskItem/TaskItem.module.css index 7531813..3f9d4fb 100644 --- a/web/src/components/domains/task/TaskItem/TaskItem.module.css +++ b/web/src/components/domains/task/TaskItem/TaskItem.module.css @@ -14,11 +14,11 @@ padding-left: 20px; } -.titleStyle { +.title { font-weight: bold; } -.priorityStyle { +.priority { text-align: center; border-radius: 15px; width: fit-content; @@ -40,18 +40,18 @@ background-color: var(--red); } -.dateStyle { +.date { gap: 5px; display: flex; align-items: center; } -.designersStyle { +.assignedTo { gap: 5px; display: flex; align-items: center; } -.projectStyle { +.project { font-weight: bold; } From 9f018189595fa44273cbdb5befaf2c1099643b00 Mon Sep 17 00:00:00 2001 From: FrenchFry36 Date: Sat, 15 Feb 2025 15:18:44 +0100 Subject: [PATCH 9/9] package.json update --- web/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/package.json b/web/package.json index 965426e..ff06ed1 100644 --- a/web/package.json +++ b/web/package.json @@ -9,7 +9,7 @@ "format": "prettier --write .", "lint": "eslint . --ext .js,.jsx", "preview": "vite preview", - "update-upstream": "node scripts/setup.js git@github.com:Migracode-Barcelona/task-tracker.git" + "update-upstream": "node scripts/setup.js https://github.com/Migracode-Barcelona/task-tracker.git" }, "dependencies": { "react": "^18.3.1",