Changes the Casing of the project status to accept any input, added a classname to the main div and css style properties

Author: Priscilla-MacGatus

web/src/App.jsx

@@ -50,7 +50,7 @@ function App() {
       {
         id: `T${prevTaskInfo.length + 1}`,
         ProjectTask: taskName,
-        ProjectStatus: ProjectStatus,
+        ProjectStatus: ProjectStatus.toLowerCase(),
         date: deadline,
         participants: participants.split(','),
         project: projectName,

web/src/components/domains/New-Task/new-task.jsx

@@ -16,7 +16,9 @@ const NewTaskForm = ({ handleButton }) => {
   return (
     <div className={styles.taskBox}>
       <div className={styles.Box}>
-        <label htmlFor="taskName">Task Name: </label>
+        <label className={styles.label} htmlFor="taskName">
+          Task Name:{' '}
+        </label>
         <input
           type="text"
           value={textTask}
@@ -26,7 +28,9 @@ const NewTaskForm = ({ handleButton }) => {
         />
       </div>
       <div className={styles.Box}>
-        <label htmlFor="projectName">Project Name: </label>
+        <label className={styles.label} htmlFor="projectName">
+          Project Name:{' '}
+        </label>
         <input
           type="text"
           value={textProject}
@@ -36,7 +40,9 @@ const NewTaskForm = ({ handleButton }) => {
         />
       </div>
       <div className={styles.Box}>
-        <label htmlFor="state">Project Status: </label>
+        <label className={styles.label} htmlFor="state">
+          Project Status:{' '}
+        </label>
         <input
           type="text"
           value={ProjectStatus}
@@ -45,8 +51,11 @@ const NewTaskForm = ({ handleButton }) => {
           onChange={(e) => setProjectStatus(e.target.value)}
         />
       </div>
+
       <div className={styles.Box}>
-        <label htmlFor="participants">Assign Participants: </label>
+        <label className={styles.label} htmlFor="participants">
+          Assign Participants:{' '}
+        </label>
         <input
           type="text"
           value={participants}
@@ -55,8 +64,11 @@ const NewTaskForm = ({ handleButton }) => {
           onChange={(e) => setParticipants(e.target.value)}
         />
       </div>
+
       <div className={styles.Box}>
-        <label htmlFor="date">Pick Deadline:</label>
+        <label className={styles.label} htmlFor="date">
+          Pick Deadline:
+        </label>
         <input
           value={deadline}
           type="date"

web/src/components/domains/New-Task/new-task.module.css

@@ -0,0 +1,24 @@
+.taskName,
+.projectNameInput,
+.status,
+.date,
+.participants {
+  width: 300px;
+  height: 3vh;
+  border: 2px solid grey;
+}
+
+.clickButton {
+  background-color: red;
+  width: 100px;
+  height: 30px;
+}
+
+.Box {
+  margin-bottom: 20px;
+}
+
+.label {
+  font-size: 25px;
+  font-weight: 500;
+}

web/src/components/domains/task/TaskItem/TaskItem.jsx

@@ -5,13 +5,13 @@ import ParticipantIcon from '../../../Icons/participantIcon';
 
 function TaskItem(props) {
   const colorState = () => {
-    if (props.ProjectStatus === 'Low') {
+    if (props.ProjectStatus.toLowerCase() === 'low') {
       return styles.buttonGreen;
     }
-    if (props.ProjectStatus === 'Medium') {
+    if (props.ProjectStatus.toLowerCase() === 'medium') {
       return styles.buttonOrange;
     }
-    if (props.ProjectStatus === 'High') {
+    if (props.ProjectStatus.toLowerCase() === 'high') {
       return styles.buttonRed;
     }
   };