From 0d5ac23df9ae2c202b9d4fe634acead2f3f619a1 Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 9 Jul 2025 11:39:29 +0530
Subject: [PATCH] On Change Password popup cross button is now working on click
 on it.

---
 src/pages/authentication/ChangePassword.jsx | 28 ++++++++-------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/pages/authentication/ChangePassword.jsx b/src/pages/authentication/ChangePassword.jsx
index 5191d6c3..a501c5eb 100644
--- a/src/pages/authentication/ChangePassword.jsx
+++ b/src/pages/authentication/ChangePassword.jsx
@@ -69,22 +69,17 @@ const ChangePasswordPage = ({ onClose }) => {
       className="modal d-flex align-items-center justify-content-center show"
       tabIndex="-1"
       role="dialog"
-      style={{ display: "flex", backgroundColor: "rgba(0,0,0,0.5)" }}
+      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
     >
       <div className="modal-dialog" role="document">
-        <div className="modal-header">
-          {" "}
+        <div className="modal-content p-10 rounded shadow bg-white position-relative">
           <button
             type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            style={{ top: "40px", right: "15px" }}
-            aria-label="Close"
+            className="btn-close"
+            data-bs-dismiss="modal" aria-label="Close"
+            onClick={onClose} // Use onClick to trigger onClose function
+            style={{ position: "absolute", top: "15px", right: "15px" }} // Example positioning
           ></button>
-        </div>
-
-        <div className="modal-content p-10 rounded shadow bg-white position-relative">
-          {/* Close Button */}
 
           <h5 className="mb-2">Change Password</h5>
           <p className="mb-4" style={{ fontSize: "14px" }}>
@@ -119,7 +114,6 @@ const ChangePasswordPage = ({ onClose }) => {
               )}
             </div>
 
-            {/* <div className="row"> */}
             <div className="mb-3 text-start">
               <label className="form-label">New Password</label>
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
@@ -180,14 +174,14 @@ const ChangePasswordPage = ({ onClose }) => {
                 </div>
               )}
             </div>
-            {/* </div> */}
-            <div className="d-flex justify-content-center  pt-2">
+
+            <div className="d-flex justify-content-center pt-2 text-muted small">
               Your password must have at least 8 characters and include a lower
-              case latter, an uppercase letter, a number, and a special
+              case letter, an uppercase letter, a number, and a special
               character.
             </div>
             {/* Action Buttons */}
-            <div className="d-flex justify-content-center  pt-2">
+            <div className="d-flex justify-content-center pt-4">
               <button
                 type="submit"
                 className="btn btn-primary btn-sm me-2"
@@ -211,4 +205,4 @@ const ChangePasswordPage = ({ onClose }) => {
   );
 };
 
-export default ChangePasswordPage;
+export default ChangePasswordPage;
\ No newline at end of file