@@ -8,11 +8,11 @@ const Account = (props) => {
My account
- {props.children}
+ {children}
);
}
-
-export default Account;
\ No newline at end of file
+
+export default Account;
diff --git a/client/src/components/Account/ManageAccount/ManageAccount.css b/client/src/components/Account/ManageAccount/ManageAccount.css
index 8b7946d7..fe83762a 100644
--- a/client/src/components/Account/ManageAccount/ManageAccount.css
+++ b/client/src/components/Account/ManageAccount/ManageAccount.css
@@ -1,124 +1,142 @@
+.manage-account-container {
+ max-width: 600px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ font-family: 'Segoe UI', sans-serif;
+ margin-top: 200px;
+}
-.manage__account__container {
- height: auto;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- margin-top: 20px;
+.manage-account-header {
+ text-align: center;
+ font-size: 1.8rem;
+ margin-bottom: 2rem;
+ color: #222;
}
+/* Profile Photo Section */
+.profile-photo-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
-.edit__account__container {
- width: 100%;
- height: 300px;
+.profile-photo-preview {
+ width: 120px;
+ height: 120px;
+ object-fit: cover;
+ border-radius: 50%;
+ border: 2px solid #ddd;
}
-.edit__account {
- width: 250px;
- height: 100%;
+.custom-upload-button {
+ display: flex;
+ align-items: center;
+ background-color: #007bff;
+ color: #fff;
+ padding: 0.6rem 1rem;
+ border-radius: 6px;
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
}
-.edit__account__header {
- width:100%;
- height: 20%;
- font-size: 1.7rem;
- font-weight: bolder;
+.custom-upload-button:hover {
+ background-color: #0056b3;
}
-.edit__account__form__container {
- width:100%;
- height: 80%;
+/* Form Section */
+.account-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
}
-.edit__account__form {
- width:100%;
- height: 100%;
+.form-group {
+ display: flex;
+ flex-direction: column;
}
-.edit__input__container {
- height:35%;
- width: 100%;
+.form-label {
+ margin-bottom: 0.3rem;
+ font-weight: 500;
+ color: #333;
}
-.edit__account__input {
- height: 50%;
- width: 100%;
+.form-input {
+ padding: 0.7rem 1rem;
+ border: 1px solid #ccc;
+ border-radius: 6px;
+ font-size: 1rem;
+ transition: border-color 0.2s ease;
}
-.save__changes__button__container {
- height: 30%;
- width: 100%;
- display: flex;
- justify-content: flex-start;
- align-items: center;
+.form-input::placeholder {
+ color: #aaa;
+ font-style: italic;
+ text-align: start;
}
-.save__changes__button {
- height: 60%;
- width: 50%;
- font-size: 1rem;
- background-color: #FFE26E;
- border-color: #FFE26E;
- border-style: dashed;
- font-weight:bold;
+.form-input:focus {
+ border-color: #007bff;
+ outline: none;
}
-.separator__line {
- margin-top: 20px;
- height: 5px;
- width: 50%;
- background-color: #FFE26E;
+/* Buttons */
+.actions {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2rem;
+ flex-wrap: wrap;
+ gap: 1rem;
}
-/* Delete account form */
+.save-btn,
+.delete-btn {
+ flex: 1;
+ min-width: 140px;
+ padding: 0.7rem 1rem;
+ font-size: 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ border: none;
+ transition: background-color 0.2s ease;
+}
-.delete_account__container {
- width: 250px;
- height: 200px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
+.save-btn {
+ background-color: #28a745;
+ color: #fff;
}
-.delete__account {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: flex-start;
- align-self: flex-start;
- flex-direction: column;
+.save-btn:hover {
+ background-color: #218838;
}
-.delete__account__header {
- width: 100%;
- height: 30%;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- font-size: 1.7rem;
- font-weight: bolder;
+.delete-btn {
+ background-color: #dc3545;
+ color: #fff;
}
-.delete__account__prompt {
- height: 35%;
- width: 100%;
+.delete-btn:hover {
+ background-color: #c82333;
}
-.delete__account__button__container {
- height: 35%;
+/* Responsive */
+@media (max-width: 500px) {
+ .manage-account-container {
+ padding: 1.5rem 1rem;
+ }
+
+ .actions {
+ flex-direction: column;
+ }
+
+ .save-btn,
+ .delete-btn {
width: 100%;
- display: flex;
- justify-content: flex-start;
-}
-
-.delete__account__button {
- height: 45px;
- width: 160px;
- font-size: 1rem;
- background-color: #ff6e6e;
- border-color: #ff6e6e;
- border-style: dashed;
- font-weight:bold;
-}
\ No newline at end of file
+ }
+}
diff --git a/client/src/components/Account/ManageAccount/ManageAccount.js b/client/src/components/Account/ManageAccount/ManageAccount.js
index f11aef99..bb73332f 100644
--- a/client/src/components/Account/ManageAccount/ManageAccount.js
+++ b/client/src/components/Account/ManageAccount/ManageAccount.js
@@ -1,45 +1,79 @@
+import { useState } from 'react';
import Account from '../Account';
-import './ManageAccount.css'
+import './ManageAccount.css';
+import { Upload } from 'lucide-react';
const ManageAccount = () => {
- return (
- 
+
+
+
+