Redesign tpa hint (#288)

- redesign tpa hint button accourding to new design

VAN-478

src/_style.scss

@@ -130,7 +130,8 @@ $accent-a-light: #c9f2f5;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  padding-left: 20px;
+  padding-left: 1rem;
+  width: 14rem;
 
   .icon-image {
     background-color: transparent;

src/common-components/EnterpriseSSO.jsx

@@ -32,21 +32,20 @@ const EnterpriseSSO = (props) => {
       <div className="d-flex justify-content-center m-4">
         <div className="d-flex flex-column">
           <div className="mw-450">
-            <h3>Sign in</h3>
             <Form className="m-0">
               <p>{intl.formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
               <Button
                 id={tpaProvider.id}
                 key={tpaProvider.id}
                 type="submit"
-                variant="primary"
-                className="btn-tpa"
+                variant="link"
+                className={`btn-tpa btn-${tpaProvider.id}`}
                 onClick={(e) => handleSubmit(e, tpaProvider.loginUrl)}
               >
                 {tpaProvider.iconImage ? (
                   <div aria-hidden="true">
                     <img className="icon-image" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
-                    <span className="pl-2" aria-hidden="true">{intl.formatMessage(messages['enterprisetpa.sso.button.title'], { providerName: tpaProvider.name })}</span>
+                    <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                   </div>
                 )
                   : (
@@ -56,7 +55,7 @@ const EnterpriseSSO = (props) => {
                           icon={SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? ['fab', tpaProvider.iconClass] : faSignInAlt}
                         />
                       </div>
-                      <span className="pl-2" aria-hidden="true">{intl.formatMessage(messages['enterprisetpa.sso.button.title'], { providerName: tpaProvider.name })}</span>
+                      <span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
                     </>
                   )}
               </Button>

src/common-components/Logistration.jsx

@@ -6,23 +6,27 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
-import { updatePathWithQueryParams } from '../data/utils';
+import { updatePathWithQueryParams, getTpaHint } from '../data/utils';
 import { LoginPage } from '../login';
 import { RegistrationPage } from '../register';
 
 const Logistration = (props) => {
   const { intl, selectedPage } = props;
+  const tpa = getTpaHint();
 
   return (
     <div>
-      <span className="nav nav-tabs">
-        <Link className={`nav-item nav-link ${selectedPage === REGISTER_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(REGISTER_PAGE)}>
-          {intl.formatMessage(messages['logistration.register'])}
-        </Link>
-        <Link className={`nav-item nav-link ${selectedPage === LOGIN_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(LOGIN_PAGE)}>
-          {intl.formatMessage(messages['logistration.sign.in'])}
-        </Link>
-      </span>
+      {!tpa
+      && (
+        <span className="nav nav-tabs">
+          <Link className={`nav-item nav-link ${selectedPage === REGISTER_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(REGISTER_PAGE)}>
+            {intl.formatMessage(messages['logistration.register'])}
+          </Link>
+          <Link className={`nav-item nav-link ${selectedPage === LOGIN_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(LOGIN_PAGE)}>
+            {intl.formatMessage(messages['logistration.sign.in'])}
+          </Link>
+        </span>
+      )}
       <div id="main-content" className="main-content">
         {selectedPage === LOGIN_PAGE ? <LoginPage /> : <RegistrationPage />}
       </div>

src/login/tests/LoginPage.test.jsx

@@ -366,7 +366,8 @@ describe('LoginPage', () => {
     ssoProvider.iconImage = null;
 
     const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
-    expect(loginPage.find(`button#${ssoProvider.id}`).find('span').text()).toEqual(`Sign in using ${ssoProvider.name}`);
+    expect(loginPage.find(`button#${ssoProvider.id}`).find('span').text()).toEqual(ssoProvider.name);
+    expect(loginPage.find(`button#${ssoProvider.id}`).hasClass(`btn-tpa btn-${ssoProvider.id}`)).toEqual(true);
   });
 
   it('should render tpa button for tpa_hint id matching one of the secondary providers', () => {

src/register/tests/RegistrationPage.test.jsx

@@ -546,7 +546,6 @@ describe('RegistrationPage', () => {
     // ******** test hinted third party auth ********
 
     it('should render tpa button for tpa_hint id matching one of the primary providers', () => {
-      const expectedMessage = `Sign in using ${ssoProvider.name}`;
       store = mockStore({
         ...initialState,
         commonComponents: {
@@ -564,7 +563,8 @@ describe('RegistrationPage', () => {
       ssoProvider.iconImage = null;
 
       const registerPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
-      expect(registerPage.find(`button#${ssoProvider.id}`).find('span').text()).toEqual(expectedMessage);
+      expect(registerPage.find(`button#${ssoProvider.id}`).find('span').text()).toEqual(ssoProvider.name);
+      expect(registerPage.find(`button#${ssoProvider.id}`).hasClass(`btn-tpa btn-${ssoProvider.id}`)).toEqual(true);
     });
 
     it('should render tpa button for tpa_hint id matching one of the secondary providers', () => {