From 26b730e33a7946f0f3f72bf1893dca4689a0c774 Mon Sep 17 00:00:00 2001
From: lucywalt <lucywltrs@gmail.com>
Date: Wed, 2 Apr 2025 13:19:26 -0700
Subject: [PATCH] Polished edit task page

---
 .../react-app/src/components/EditTaskForm.jsx   | 17 ++++++++++-------
 frontend/react-app/src/css/CreateTaskForm.css   |  4 ++++
 frontend/react-app/src/css/EditTask.css         | 11 +++++++++++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/react-app/src/components/EditTaskForm.jsx b/frontend/react-app/src/components/EditTaskForm.jsx
index c91ae850..64fadf67 100644
--- a/frontend/react-app/src/components/EditTaskForm.jsx
+++ b/frontend/react-app/src/components/EditTaskForm.jsx
@@ -7,16 +7,18 @@ import { unassignTeamMemberFromTask } from '../api/isAssignedApi';
 const customStyles = {
     control: (provided) => ({
       ...provided,
-      width: '100%',
+      width: '560px;',
     minWidth: '100px',
     maxWidth: '100%',
     minHeight: '30px',
     maxHeight: '100%',
-      border: '2px solid grey',
+      border: '1.5px solid #2d2644',
       borderRadius: '10px',
       paddingLeft: '8px',
-      backgroundColor: '#BFCDE0',
-      margin: '10px 0px',
+      backgroundColor: 'white',
+      margin: 'auto',
+      marginTop: '0.5%',
+      marginBottom: '1%',
       cursor: 'pointer'
     }),
     option: (provided, state) =>({
@@ -92,7 +94,7 @@ function EditTaskForm({task, team}){
                         <label className='majorLabel'>
                                 Task Name
                                 <div>
-                                <input type="text" name="name" id="name" className='input' defaultValue={task.title}{...register("name", { 
+                                <input type="text" placeholder="Add task name" name="name" id="name" className='input' defaultValue={task.title}{...register("name", { 
                                     required:{
                                         value: true,
                                         message: 'Please set a Task Name'
@@ -147,7 +149,8 @@ function EditTaskForm({task, team}){
                             Description
                             
                             <div>
-                                <input type="text" name="input-description" id="description" className='input' defaultValue={task.description}  {...register("description", { required: false })}/>
+                                {/* <input type="text" name="input-description" id="description" className='input' defaultValue={task.description}  {...register("description", { required: false })}/> */}
+                                <textarea name="input-description" id="description" placeholder="Add description" className='input' defaultValue={task.description}  {...register("description", { required: false })}/>
                             </div>
                             </label>
                             <label className='majorLabel'>
@@ -156,7 +159,7 @@ function EditTaskForm({task, team}){
                                     <input type='date' name="input-dueDate" id="dueDate" className='input' defaultValue={task.dueDate}  {...register("dueDate", { required: false })}/>
                                 </div>
                             </label>
-                            <input type="submit" value="Edit Task" id="button"/>
+                            <input type="submit" value="Edit Task" id="editTaskButton"/>
                         
                     </form>
     )
diff --git a/frontend/react-app/src/css/CreateTaskForm.css b/frontend/react-app/src/css/CreateTaskForm.css
index a8ed0d94..26bea1f0 100644
--- a/frontend/react-app/src/css/CreateTaskForm.css
+++ b/frontend/react-app/src/css/CreateTaskForm.css
@@ -2,6 +2,10 @@
     width: 100%;
     padding-top: 30px;
     padding-bottom: 30px;
+    background-color: #e6e4f7;
+    margin-top: 3%;
+    margin-bottom: 3%;
+    border-radius: 20px;
 }
 .CreateTaskForm input {
     width: 50%;
diff --git a/frontend/react-app/src/css/EditTask.css b/frontend/react-app/src/css/EditTask.css
index cdadf092..0243e5da 100644
--- a/frontend/react-app/src/css/EditTask.css
+++ b/frontend/react-app/src/css/EditTask.css
@@ -70,4 +70,15 @@ select {
   
   input[type="checkbox"]:disabled:after {
     -webkit-filter: opacity(0.4);
+  }
+
+  #editTaskButton {
+    background-color: #3f5d8b;
+    width: 25%;
+    margin-left: 38%;
+    margin-top: 2%;
+  }
+
+  #editTaskButton:hover {
+    background-color: #24416c;
   }
\ No newline at end of file