From 6015d30d0d35139dc9ae5de2aa2bbefc2793f3d5 Mon Sep 17 00:00:00 2001
From: lucywalt <lucywltrs@gmail.com>
Date: Wed, 2 Apr 2025 14:18:09 -0700
Subject: [PATCH] Fixed css for edit user details

---
 .../react-app/src/css/EditUserDetails.css     | 25 +++++++++++++++++++
 .../react-app/src/pages/EditUserDetails.jsx   | 22 ++++++++++------
 2 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 frontend/react-app/src/css/EditUserDetails.css

diff --git a/frontend/react-app/src/css/EditUserDetails.css b/frontend/react-app/src/css/EditUserDetails.css
new file mode 100644
index 0000000..16fd498
--- /dev/null
+++ b/frontend/react-app/src/css/EditUserDetails.css
@@ -0,0 +1,25 @@
+#editUserDetailsBody {
+    display:flex;
+    flex-direction: column;
+    width: 50%;
+    padding: 5%;
+    padding-left: 20%;
+    /* background-color: pink; */
+    background-color: #e6e4f7;
+    font-size: 0.85em;
+    margin-bottom: 2%;
+}
+
+#editUserDetailsBody h1 {
+    font-size: 1.5em;
+    margin: 2% 0%;
+}
+
+#editUserDetailsBody input {
+    width: 60%;
+}
+
+#editUserDetailsBody button {
+    margin: 0% 20%;
+    font-size: 1.25em;
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/EditUserDetails.jsx b/frontend/react-app/src/pages/EditUserDetails.jsx
index fd93f30..954ee8c 100644
--- a/frontend/react-app/src/pages/EditUserDetails.jsx
+++ b/frontend/react-app/src/pages/EditUserDetails.jsx
@@ -5,6 +5,7 @@ import { modifyAdminEmail, modifyAdminName } from "../api/adminAccountApi"
 import {getTeamMemberById, modifyTeamMemberEmail, modifyTeamMemberName } from "../api/teamMemberAccountApi"
 import {useForm} from 'react-hook-form'
 import { resetPassword } from "../api/adminApi"
+import '../css/EditUserDetails.css';
 
 export default function EditUserDetails(){
     const {register, handleSubmit} = useForm();
@@ -98,11 +99,13 @@ export default function EditUserDetails(){
         <div className="pageContainer">
             <Header/>
             <form onSubmit={handleSubmit(onSubmit)} id = 'createAccountForm' className="pageBody">
-                Change user info for: {accountInfo.userName}
+                <div id="editUserDetailsBody">
+                <h1>Change user info for: {accountInfo.userName}</h1>
                 <label htmlFor="">
                    <div>
-                        UserName:
-                        <input type="text" defaultValue={accountInfo.userName} id="" {...register("userName",
+                        Username
+                        <br/>
+                        <input type="text" defaultValue={accountInfo.userName} id="" placeholder="Enter username" {...register("userName",
                             {
                                 required: true
                             }
@@ -112,7 +115,8 @@ export default function EditUserDetails(){
                 <label htmlFor="">
                    <div>
                         Email:
-                        <input type="text" defaultValue={accountInfo.userEmail} id="" {...register("userEmail",
+                        <br/>
+                        <input type="text" defaultValue={accountInfo.userEmail} id="" placeholder="Enter email" {...register("userEmail",
                             {
                                 required: true
                             })}/>
@@ -121,19 +125,21 @@ export default function EditUserDetails(){
                 <label htmlFor="">
                    <div>
                         Set a new Password:
-                        <input type={'password'} id="" {...register("password")}/>
+                        <br/>
+                        <input type={'password'} id="" {...register("password")} placeholder="Enter a new password"/>
                    </div>
                 </label>
                 <div>
                 <label htmlFor="">
                    <div>
                         Confirm new Password:
-                        <input type={'password'} id="" {...register("passwordCon")}/>
+                        <br/>
+                        <input type={'password'} id="" {...register("passwordCon")} placeholder="Confirm new password"/>
                    </div>
                 </label>
                 </div>
-                <button type="submit">Change userInfo</button>
-                
+                <button type="submit">Update</button>
+                </div>
             </form>
         </div>
     )