Create task CSS updates

frontend/react-app/src/components/CreateTaskForm.jsx

@@ -20,17 +20,15 @@ function CreateTaskForm({userId}){
     const customStyles = {
         control: (provided) => ({
           ...provided,
-          width: '100%',
-        minWidth: '100px',
-        maxWidth: '100%',
-        minHeight: '30px',
-        maxHeight: '100%',
-          border: '2px solid grey',
-          borderRadius: '10px',
-          paddingLeft: '8px',
-          backgroundColor: '#BFCDE0',
-          margin: '10px 0px',
-          cursor: 'pointer'
+        marginLeft: '25%',
+        width: '50%',
+        padding: '16px 20px',
+        border: 'none',
+        borderRadius: '4px',
+        backgroundColor: 'white',
+        cursor: 'pointer',
+        border: '1.5px solid #3B3355',
+        borderRadius: '10px'
         }),
         option: (provided, state) =>({
             ...provided,
@@ -101,14 +99,14 @@ function CreateTaskForm({userId}){
         <form onSubmit={handleSubmit(onSubmit)} className='CreateTaskForm'>
             <label className='majorLabel'>
                     Task Name
-                    <div>
+
                     <input type="text" name="name" id="name" className='input'{...register("title", { 
                         required:{
                             value: true,
                             message: 'Please set a Task Name'
                         }
-                        })}/>
-                    </div>
+                        })} placeholder="Enter a title" />
+
                     </label>
                 <label className='majorLabel'>
                 <div>
@@ -130,6 +128,7 @@ function CreateTaskForm({userId}){
                 </label>
                 <label className='majorLabel'>
                     Assigned To:
+                    <br/>
                     {data.length !== 0&&(<Controller
                                     control={control}
                                     className='Select'
@@ -152,11 +151,13 @@ function CreateTaskForm({userId}){
                             </select>
                         )}
                 </label>
+                <br/>
                 <label className='majorLabel'>
                     Add Description
 
                 <div>
-                    <input type="text" name="input-description" id="description" className='input'{...register("description", { required: true })}/>
+                    {/* <input type="text" name="input-description" id="description" className='input'{...register("description", { required: true })}/> */}
+                    <textarea name="input-description" id="description" className='input'{...register("description", { required: true })} placeholder="Enter description" rows="4"/>
                 </div>
                 </label>
                 <label>
@@ -189,7 +190,7 @@ function CreateTaskForm({userId}){
                     <input type="file" name="input-photos" id="photos" multiple accept="image/*"/>
                 </div> 
                 </label>*/}
-                <input type="submit" value="Create Task"/>
+                <input type="submit" value="Create Task" id="createTaskBtn"/>
 
         </form>
     );

frontend/react-app/src/css/CreateTask.css

@@ -16,4 +16,9 @@
     margin-left: 5%;
     margin-right: 5%;
     font-family: Calibri;
+}
+
+.createTaskPageBody {
+    margin: auto;
+    width: 60%;
 }

frontend/react-app/src/css/CreateTaskForm.css

@@ -1,29 +1,72 @@
 .CreateTaskForm{
     width: 100%;
+    padding-top: 30px;
+    padding-bottom: 30px;
 }
 .CreateTaskForm input {
-    width: 100%;
+    width: 50%;
+    padding: 12px 20px;
+    margin-left: 25%;
+    box-sizing: border-box;
+    background-color: white;
+    cursor:text;
+    border: 1.5px solid #3B3355;
+    border-radius: 10px;
+  }
+
+  .CreateTaskForm textarea {
+    width: 50%;
     padding: 12px 20px;
-    margin: 8px 2px;
+    margin-left: 25%;
     box-sizing: border-box;
-    background-color: #bfcde0;
+    background-color: white;
     cursor:text;
+    border: 1.5px solid #3B3355;
+    border-radius: 10px;
   }
 .CreateTaskForm  select {
-    width: 100%;
+    margin-left: 25%;
+    width: 50%;
     padding: 16px 20px;
     border: none;
     border-radius: 4px;
-    background-color: #bfcde0;
+    background-color: white;
     cursor: pointer;
+    border: 1.5px solid #3B3355;
+    border-radius: 10px;
   }
 
   .CreateTaskForm  input[type=submit] {
+    margin-left: 25%;
     background-color: #1d1e22;
     border: none;
     color: white;
     padding: 16px 32px;
     text-decoration: none;
     margin: 4px 2px;
     cursor: pointer;
-  }
+    width: 50%;
+  }
+
+  .CreateTaskForm label {
+    margin-left: 25%;
+  }
+
+  #createTaskBtn {
+    margin-left: 25%;
+    background-color: #52529e;
+    color: white;
+    font-size: 1em;
+  }
+
+  #createTaskBtn:hover {
+    background-color: #2d2644;
+  }
+
+  #description {
+    height: 100px;
+
+  }
+
+
+

frontend/react-app/src/css/home.css

@@ -103,6 +103,7 @@ tbody {
     /* background-color: #f6edff; */
     background-color: white;
     width: 100%;
+    height: 100%;
 }
 
 #taskSection input {

frontend/react-app/src/index.css

@@ -1,7 +1,8 @@
 html {
     margin:0;
     padding:0;
-    background-color: #4e456e;
+    /* background-color: #4e456e; */
+    background-color: white;
     font-family: Calibri;
  }
  .rowFlexbox{

frontend/react-app/src/pages/CreateTask.jsx

@@ -11,7 +11,7 @@ function CreateTask(){
     return (
         <div className='pageContainer'>
             <Header/>
-            <div className='pageBody'>
+            <div className='createTaskPageBody'>
 
                     <CreateTaskForm
                     team={fakeTeamData}