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

@@ -650,3 +650,9 @@ select.form-control {
 .email-top-domain-suggestion-alert-link {
   color: $primary !important;
 }
+
+#forgot-password {
+ &:hover {
+      text-decoration: underline;
+    }
+}

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>

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 () => {