Merge pull request #149 from Riyad-Murad/staging

Staging

Author: Riyad-Murad

amp-client/src/Pages/ClientPages/ClientProfile/ClientProfile.jsx

@@ -4,6 +4,7 @@ import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
 import axiosBaseUrl from "../../../Axios/axios";
+import InputField from "../../../Components/CommonComponents/InputField/InputField";
 import ActionButton from "../../../Components/CommonComponents/ActionButton/ActionButton";
 
 const ClientProfile = () => {
@@ -44,49 +45,45 @@ const ClientProfile = () => {
       <h2>Change Password</h2>
       <form className="password-form" onSubmit={handleSubmit}>
         <div className="form-group">
-          <h4 htmlFor="current-password">Current Password:</h4>
-          <input
-            id="current-password"
-            type="password"
+          <InputField
+            label="Current Password"
             placeholder="Enter current password"
             value={currentPassword}
             onChange={(e) => setCurrentPassword(e.target.value)}
-            required
+            type="password"
+            width="90%"
           />
         </div>
 
         <div className="form-group">
-          <h4 htmlFor="new-password">New Password:</h4>
-          <input
-            id="new-password"
-            type="password"
+          <InputField
+            label="New Password"
             placeholder="Enter new password"
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
-            required
+            type="password"
+            width="90%"
           />
         </div>
 
         <div className="form-group">
-          <h4 htmlFor="confirm-password">Confirm New Password:</h4>
-          <input
-            id="confirm-password"
-            type="password"
+          <InputField
+            label="Confirm New Password"
             placeholder="Confirm new password"
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
-            required
+            type="password"
+            width="90%"
           />
         </div>
 
         <ActionButton
           text="Save Changes"
           backgroundColor="#233A7E"
           color="#FFF"
-          width="100%"
+          width="50%"
           margin="20px 0 0"
         />
-        {/* {message && <p className="form-message">{message}</p>} */}
       </form>
     </div>
   );

amp-client/src/Pages/ClientPages/ClientProfile/styles.css

@@ -5,43 +5,34 @@
   margin: 50px auto;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 h2 {
   margin-bottom: 30px;
+  text-align: center;
 }
 
 .password-form {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  align-items: center;
 }
 
 .form-group {
+  width: 100%;
   margin-bottom: 20px;
-}
-
-.form-group h4 {
-  display: block;
-  margin-bottom: 5px;
-}
-
-.password-form input {
-  padding: 10px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  width: 95%;
+  display: flex;
+  justify-content: center;
 }
 
 .form-message {
   margin-top: 15px;
   color: #d00;
   font-weight: 500;
 }
-
-.password-form label {
-  font-weight: 500;
-  margin-bottom: 5px;
-  margin-top: 10px;
-  display: block;
-}