From ef47bbf8a4fd8276638dcadc525d056daf4dd5c7 Mon Sep 17 00:00:00 2001
From: Umesh Desai <umesh@marcoaiot.com>
Date: Mon, 9 Jun 2025 10:23:52 +0530
Subject: [PATCH] When hovering over the login form's password box, it appears
 divided, with the text box and hide button becoming separate.

---
 src/pages/authentication/LoginPage.jsx | 37 +++++++-------------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx
index 8ba33fca..8c0c6a50 100644
--- a/src/pages/authentication/LoginPage.jsx
+++ b/src/pages/authentication/LoginPage.jsx
@@ -83,47 +83,30 @@ const LoginPage = () => {
             </div>
           )}
         </div>
-        <div className="mb-3 form-password-toggle">
-          <div className="d-flex justify-content-center">
-            <label className="form-label" htmlFor="password">
-              Password
-            </label>
-          </div>
-          <div className="input-group input-group-merge">
+       <div className="mb-3 ">
+          <label className="form-label" htmlFor="password">Password</label>
+          <div className="input-group input-group-merge  d-flex align-items-center border rounded px-2">
             <input
               type={hidepass ? "password" : "text"}
-              autoComplete="true"
               id="password"
+              autoComplete="true"
+              className="form-control border-0 shadow-none"
               {...register("password")}
-              className="form-control"
-              name="password"
               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+              style={{ flex: 1 }}
               aria-describedby="password"
             />
             <button
               type="button"
-              className="btn border-top border-end border-bottom"
+              className="btn btn-link p-0 ms-2"
+              style={{ fontSize: "18px", color: "#6c757d", }}
               onClick={() => setHidepass(!hidepass)}
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: 0,
-              }}
             >
-              {hidepass ? (
-                <i className="bx bx-hide" />
-              ) : (
-                <i className="bx bx-show" />
-              )}
+              <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
             </button>
           </div>
           {errors.password && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
-              {errors.password.message}
-            </div>
+            <p className="danger-text small-text text-start">{errors.password.message}</p>
           )}
         </div>
         <div className="mb-3 d-flex justify-content-between">