Admin css

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

@@ -45,15 +45,14 @@ export default function CreateAccountForm({teams}){
     const customStyles = {
         control: (provided) => ({
           ...provided,
-          width: '65vw',
+          width: '420px',
         minWidth: '100px',
-        maxWidth: '100%',
         minHeight: '30px',
-        maxHeight: '100%',
-          border: '2px solid grey',
+        // maxHeight: '100%',
+          border: '1.5px solid #2d2644;',
           borderRadius: '10px',
           paddingLeft: '8px',
-          backgroundColor: '#BFCDE0',
+          backgroundColor: 'white',
           margin: '10px 0px',
         }),
       };

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

@@ -22,22 +22,22 @@ export default function CreateTeamForm({users}){
     const customStyles = {
         control: (provided) => ({
           ...provided,
-          width: '65vw',
+          width: '420px',
         minWidth: '100px',
         maxWidth: '100%',
         minHeight: '30px',
         maxHeight: '100%',
-          border: '2px solid grey',
+          border: '1.5px solid #2d2644',
           borderRadius: '10px',
           paddingLeft: '8px',
-          backgroundColor: '#BFCDE0',
+          backgroundColor: 'white',
           margin: '10px 0px',
         }),
       };
     return(
         <form id="createAccountForm" onSubmit={handleSubmit(onSumbit)}>
             <label>Team Name</label>
-            <input type="text" {...register("teamName", {required:true})}/>
+            <input type="text" placeholder="Enter team name" {...register("teamName", {required:true})}/>
             <label>Team Members (One Required, First Selected Will Be Team Lead)</label>
             <Controller
                     control={control}
@@ -55,7 +55,7 @@ export default function CreateTeamForm({users}){
 
                         />)}
                     />
-            <button type="submit">Create Team</button>
+            <button type="submit" id="createTeamButton">Create Team</button>
         </form>
     )
 }

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

@@ -1,6 +1,7 @@
 import {useTable, useSortBy} from 'react-table'
 import React, { useEffect } from 'react';
-import "../css/TaskList.css"
+import "../css/TaskList.css";
+import "../css/UserTable.css";
 import SearchFilterSort from './SearchFilterSort';
 import { useState} from 'react';
 import { getTeamMembers } from '../api/teamApi';
@@ -163,7 +164,7 @@ function UserTable({teams}){
             Header: "",
             accessor: "del",
             Cell: (original) => (
-                <button id= {"delete " + original.value} value={original.value} onClick={(e)=>deleteUser(e, original.cell.row.values.role)}>
+                <button class="userDeleteBtn" id= {"delete " + original.value} value={original.value} onClick={(e)=>deleteUser(e, original.cell.row.values.role)}>
                     Delete
                 </button>
               )
@@ -173,7 +174,7 @@ function UserTable({teams}){
             accessor: "edit",
             Cell: (original) => (
                 <Link to='/edit-user-details' state={{accountToEdit: original.cell.row.values.del}}>
-                <button key= {"edit" + original.cell.row.values.del} id ={"edit" + original.cell.row.values.del}>
+                <button class="userEditBtn" key= {"edit" + original.cell.row.values.del} id ={"edit" + original.cell.row.values.del}>
                     Edit
                 </button>
                 </Link>

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

@@ -5,4 +5,12 @@
 }
 .container{
     height: 50%;
+}
+
+#searchThis {
+    background-color: #d3d4f9;
+    color: black;
+    border-radius: 10px;
+    margin: 3% 0%;
+    border: 1px solid black;
 }

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

@@ -3,5 +3,55 @@
     margin: 4% 0;
 }
 .buttonRow{
-    margin: 2% 0;
-}
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background-color: #e6e4f7;
+    width: 60%;
+    border-radius: 25px;
+    margin-top: 2%;
+}
+
+#adminHeader {
+    font-weight: 1000;
+    margin-top: 2%;
+    font-size: 2em;
+}
+
+.buttonRow a button {
+    background-color: #53789d;
+    color: white;
+    font-size: 1.25em;
+    width: 175px;
+    height: 66px;
+}
+
+.buttonRow a button:hover {
+    background-color: #3d6285;
+}
+
+.goToTeamTaskForm {
+    width: 75%;
+    margin-left: 21%;
+    margin-right: 20%;
+}
+
+.goToTeamTaskForm input {
+    background-color: #4f407d;
+    border-radius: 15px;
+    font-size: 1em;
+    border-radius: 10px;
+}
+
+.goToTeamTaskForm input:hover {
+    cursor: pointer;
+    background-color: #2d2644;
+}
+
+.goToTeamTaskForm select {
+    width: 50%;
+    background-color: #d3d4f9;
+    margin-right: 20px;
+    border-radius: 15px;
+}
+

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

@@ -15,34 +15,36 @@
     height: 100%;
     justify-content: center;
     font-family: Arial, Helvetica, sans-serif;
-    background-color: #BFCDE0;
+    background-color: #e6e4f7;
     border: none;
-    border-radius: 10px;
+    border-radius: 15px;
+    margin: 3% 10% 3% 12%;
+    width: 75%;
 }
 
 #createAccountForm select{
-    width: 65vw;
+    width: 50%;
     min-width: 100px;
     max-width: 100%;
     min-height: 30px;
     max-height: 100%;
-    border: 2px solid grey;
+    border: 1.5px solid #2d2644;
     border-radius: 10px;
     padding-left: 8px;
-    background-color: #BFCDE0;
+    background-color: white;
     margin: 10px 0px;
 }
 #createAccountForm input {
-    width: 65vw;
+    width: 50%;
     height: 7vh;
     min-width: 100px;
     max-width: 100%;
     min-height: 30px;
     max-height: 100%;
-    border: 2px solid grey;
+    border: 1.5px solid #2d2644;
     border-radius: 10px;
     padding-left: 8px;
-    background-color: #BFCDE0;
+    background-color: white;
     margin: 10px 0px;
 }
 
@@ -52,18 +54,21 @@
 }
 
 #createAccountForm button {
-    width: 100px;
-    height: 30px;
-    font-size: 1em;
+    width: 120px;
+    height: 50px;
+    font-size: 0.75em;
+    padding: 1%;
     margin-top: 20px;
     margin-bottom: 20px;
     border: none;
     border-radius: 10px;
     color: white;
+    font-size: 1.12em;
     background-color: #3f5d8b;
 }
 
 #createAccountForm button:hover {
     cursor: pointer;
     background-color: #2f486d;
-}
+}
+

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

@@ -0,0 +1,33 @@
+.search-form input {
+    background-color: #d3d4f9;
+    color: black;
+    border: 1px solid black;
+}
+
+.userEditBtn {
+    width: 65px;
+    height: 30px;
+    background-color: darkgreen;
+    border: none;
+    border-radius: 5px;
+    color: white;
+}
+
+.userEditBtn:hover {
+    cursor: pointer;
+    background-color: #004f07;
+}
+
+.userDeleteBtn {
+    width: 65px;
+    height: 30px;
+    background-color: #bf003e;
+    border: none;
+    border-radius: 5px;
+    color: white;
+}
+
+.userDeleteBtn:hover {
+    cursor: pointer;
+    background-color: #8c002d;
+}

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

@@ -44,7 +44,7 @@ export default function AdminPanel(){
         <div className='pageContainer'>
             <Header/>
             <div className='pageBody'>
-            <div className="headerText1 center">Admin Controls</div>
+            <div className="headerText1 center" id="adminHeader">Admin Controls</div>
             <div className="rowFlexbox buttonRow">
             <a href="create-account" ><button className='importButton'>Create New Account</button></a>
             <a href="/all-users"><button className="importButton">See/Edit All Users</button></a>