password icon issue fixed

src/_style.scss

@@ -656,3 +656,10 @@ select.form-control {
       text-decoration: underline;
     }
 }
+.password-visibility{
+  .btn-icon__icon-container .btn-icon__icon {
+    height: 1.5rem !important;
+    width: 1.5rem !important;
+    color: $gray-500;
+  }
+}

src/common-components/PasswordField.jsx

@@ -30,11 +30,11 @@ const PasswordField = (props) => {
   };
 
   const HideButton = (
-    <IconButton src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
+    <IconButton className="password-visibility" src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
   );
 
   const ShowButton = (
-    <IconButton src={Visibility} iconAs={Icon} onClick={setHiddenFalse} size="sm" variant="secondary" alt={formatMessage(messages['show.password'])} />
+    <IconButton className="password-visibility" src={Visibility} iconAs={Icon} onClick={setHiddenFalse} size="sm" variant="secondary" alt={formatMessage(messages['show.password'])} />
   );
   const placement = window.innerWidth < 768 ? 'top' : 'left';
   const tooltip = (

src/forgot-password/ForgotPasswordAlert.jsx

@@ -37,7 +37,10 @@ const ForgotPasswordAlert = (props) => {
               <Alert.Link
                 className="alert-link"
                 href={supportUrl}
-                onClick={() => { window.open(supportUrl, '_blank'); }}
+                onClick={e => {
+                  e.preventDefault();
+                  window.open(supportUrl, '_blank');
+                }}
               >
                 {intl.formatMessage(messages['confirmation.support.link'])}
               </Alert.Link>