From 58d9ec389f9442851c9ba2bc02ba3bd114458cf0 Mon Sep 17 00:00:00 2001
From: Shafqat Farhan <shafqat.farhan@arbisoft.com>
Date: Tue, 15 Jun 2021 19:53:51 +0500
Subject: [PATCH] VAN-613 - Updated styles for Need help signing in? button
 (#347)

* VAN-613 - Updated styles for Need help signing in? button

* VAN-613 - Updated margin for button

* VAN-613 - Fixed failing test
---
 src/_style.scss                                      |  6 ++++++
 src/forgot-password/ForgotPasswordPage.jsx           | 12 ++++++++++--
 .../tests/ForgotPasswordPage.test.jsx                |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/_style.scss b/src/_style.scss
index 84a0d3b0..b25d06ae 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -650,3 +650,9 @@ select.form-control {
 .email-top-domain-suggestion-alert-link {
   color: $primary !important;
 }
+
+#forgot-password {
+ &:hover {
+      text-decoration: underline;
+    }
+}
diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index a0eec177..9461fbf1 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -28,6 +28,7 @@ const ForgotPasswordPage = (props) => {
   const platformName = getConfig().SITE_NAME;
   const regex = new RegExp(VALID_EMAIL_REGEX, 'i');
   const [validationError, setValidationError] = useState('');
+  const supportUrl = getConfig().LOGIN_ISSUE_SUPPORT_LINK;
 
   useEffect(() => {
     sendPageEvent('login_and_registration', 'reset');
@@ -109,8 +110,15 @@ const ForgotPasswordPage = (props) => {
                   onClick={handleSubmit}
                   onMouseDown={(e) => e.preventDefault()}
                 />
-                <Hyperlink id="forgot-password" className="btn btn-link font-weight-500 text-body" destination={getConfig().LOGIN_ISSUE_SUPPORT_LINK}>
-                  {intl.formatMessage(messages['need.help.sign.in.text'])}
+                <Hyperlink
+                  id="forgot-password"
+                  className="ml-4 font-weight-500 text-body"
+                  destination={supportUrl}
+                  onClick={e => {
+                    e.preventDefault();
+                    window.open(supportUrl, '_blank');
+                  }}
+                >{intl.formatMessage(messages['need.help.sign.in.text'])}
                 </Hyperlink>
                 <p className="mt-5 one-rem-font">{intl.formatMessage(messages['additional.help.text'])}
                   <span><Hyperlink isInline destination={`mailto:${getConfig().INFO_EMAIL}`}>{getConfig().INFO_EMAIL}</Hyperlink></span>
diff --git a/src/forgot-password/tests/ForgotPasswordPage.test.jsx b/src/forgot-password/tests/ForgotPasswordPage.test.jsx
index 23605491..c4d0a767 100644
--- a/src/forgot-password/tests/ForgotPasswordPage.test.jsx
+++ b/src/forgot-password/tests/ForgotPasswordPage.test.jsx
@@ -54,7 +54,7 @@ describe('ForgotPasswordPage', () => {
 
   it('should display need other help signing in button', () => {
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
-    expect(wrapper.find('#forgot-password.btn-link').first().text()).toEqual('Need help signing in?');
+    expect(wrapper.find('#forgot-password').first().text()).toEqual('Need help signing in?');
   });
 
   it('should display email validation error message', async () => {