Merge pull request 'When hovering over the login form's password box, it appears divided, with the text box and hide button becoming separate.' (#192) from Kartik_bug#379 into Issue_Jun_1W_2

Reviewed-on: #192

src/pages/authentication/LoginPage.jsx

@@ -83,47 +83,30 @@ const LoginPage = () => {
             </div>
           )}
         </div>
-        <div className="mb-3 form-password-toggle">
+       <div className="mb-3 ">
-          <div className="d-flex justify-content-center">
+          <label className="form-label" htmlFor="password">Password</label>
-            <label className="form-label" htmlFor="password">
+          <div className="input-group input-group-merge  d-flex align-items-center border rounded px-2">
-              Password
-            </label>
-          </div>
-          <div className="input-group input-group-merge">
             <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 ${hidepass ? "bx-hide" : "bx-show"}`} />
-                <i className="bx bx-hide" />
-              ) : (
-                <i className="bx bx-show" />
-              )}
             </button>
           </div>
           {errors.password && (
-            <div
+            <p className="danger-text small-text text-start">{errors.password.message}</p>
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
-              {errors.password.message}
-            </div>
           )}
         </div>
         <div className="mb-3 d-flex justify-content-between">