add cosmatic changes

src/pages/authentication/ChangePassword.jsx

@@ -16,7 +16,10 @@ const ChangePasswordSchema = z
       .regex(/[A-Z]/, "Must contain an uppercase letter")
       .regex(/[a-z]/, "Must contain a lowercase letter")
       .regex(/\d/, "Must contain a number")
-      .regex(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, "Must contain a special character"),
+      .regex(
+        /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/,
+        "Must contain a special character"
+      ),
     confirmPassword: z.string().min(1, "Confirm Password is required"),
     oldPassword: z.string().min(1, "Old Password is required"),
   })
@@ -137,11 +140,16 @@ const ChangePasswordPage = ({ onClose }) => {
                     style={{ fontSize: "18px", color: "#6c757d" }}
                     onClick={() => setHideNewPass(!hideNewPass)}
                   >
-                    <i className={`bx ${hideNewPass ? "bx-hide" : "bx-show"}`} />
+                    <i
+                      className={`bx ${hideNewPass ? "bx-hide" : "bx-show"}`}
+                    />
                   </button>
                 </div>
                 {errors.newPassword && (
-                  <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                  <div
+                    className="danger-text text-start"
+                    style={{ fontSize: "12px" }}
+                  >
                     {errors.newPassword.message}
                   </div>
                 )}
@@ -164,11 +172,18 @@ const ChangePasswordPage = ({ onClose }) => {
                     style={{ fontSize: "18px", color: "#6c757d" }}
                     onClick={() => setHideConfirmPass(!hideConfirmPass)}
                   >
-                    <i className={`bx ${hideConfirmPass ? "bx-hide" : "bx-show"}`} />
+                    <i
+                      className={`bx ${
+                        hideConfirmPass ? "bx-hide" : "bx-show"
+                      }`}
+                    />
                   </button>
                 </div>
                 {errors.confirmPassword && (
-                  <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                  <div
+                    className="danger-text text-start"
+                    style={{ fontSize: "12px" }}
+                  >
                     {errors.confirmPassword.message}
                   </div>
                 )}
@@ -176,8 +191,12 @@ const ChangePasswordPage = ({ onClose }) => {
             </div>
 
             {/* Action Buttons */}
-            <div className="d-flex justify-content-end">
+            <div className="d-flex justify-content-end  pt-2">
-              <button type="submit" className="btn btn-primary btn-sm me-2" disabled={loading}>
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm me-2"
+                disabled={loading}
+              >
                 {loading ? "Please Wait..." : "Change Password"}
               </button>
               <button
@@ -190,22 +209,16 @@ const ChangePasswordPage = ({ onClose }) => {
               </button>
             </div>
             <div className="mb-3 text-start ">
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+              <p className="p-0 m-0">Password must be:</p>
-                Password must :
+              <p className="p-0 m-0">- at least 8 characters long</p>
-              </p>
+              <p className="p-0 m-0">
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
-                - be at least 8 characters
-              </p>
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
                 - must contain at least one uppercase letter
               </p>
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+              <p className="p-0 m-0">
                 - must contain at least one lowercase letter
               </p>
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
+              <p className="p-0 m-0">- must contain at least one number</p>
-                - must contain at least one number
+              <p className="p-0 m-0">
-              </p>
-              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
                 - must contain at least one special character
               </p>
             </div>
@@ -216,4 +229,4 @@ const ChangePasswordPage = ({ onClose }) => {
   );
 };
 
-export default ChangePasswordPage;
+export default ChangePasswordPage;