Merge pull request #68 from edx/fix-css-styles-v2

fix css styles

src/forgot-password/ForgotPasswordPage.jsx

@@ -58,9 +58,9 @@ const ForgotPasswordPage = (props) => {
             <div className="d-flex flex-column">
               <Form className="mw-420">
                 {status === 'forbidden' ? <RequestInProgressAlert /> : null}
-                <h3 className="text-center mt-3">
+                <h1 className="mt-3">
                   {intl.formatMessage(messages['logisration.forgot.password.page.heading'])}
-                </h3>
+                </h1>
                 <p className="mb-4">
                   {intl.formatMessage(messages['logisration.forgot.password.page.instructions'])}
                 </p>
@@ -88,7 +88,7 @@ const ForgotPasswordPage = (props) => {
                 <LoginHelpLinks page="forgot-password" />
                 <StatefulButton
                   type="button"
-                  className="btn-primary submit mt-3"
+                  className="btn-primary mt-3"
                   state={status}
                   labels={{
                     default: intl.formatMessage(messages['logisration.forgot.password.page.submit.button']),

src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap

@@ -10,11 +10,11 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
     <form
       className="mw-420"
     >
-      <h3
-        className="text-center mt-3"
+      <h1
+        className="mt-3"
       >
         Password assistance
-      </h3>
+      </h1>
       <p
         className="mb-4"
       >
@@ -88,7 +88,7 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
       <button
         aria-disabled={false}
         aria-live="assertive"
-        className="pgn__stateful-btn pgn__stateful-btn-state-null btn-primary submit mt-3 btn btn-primary"
+        className="pgn__stateful-btn pgn__stateful-btn-state-null btn-primary mt-3 btn btn-primary"
         disabled={false}
         onClick={[Function]}
         type="button"
@@ -139,11 +139,11 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
           Your previous request is still in progress, please try again in a few moments.
         </span>
       </div>
-      <h3
-        className="text-center mt-3"
+      <h1
+        className="mt-3"
       >
         Password assistance
-      </h3>
+      </h1>
       <p
         className="mb-4"
       >
@@ -217,7 +217,7 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
       <button
         aria-disabled={false}
         aria-live="assertive"
-        className="pgn__stateful-btn pgn__stateful-btn-state-forbidden btn-primary submit mt-3 btn btn-primary"
+        className="pgn__stateful-btn pgn__stateful-btn-state-forbidden btn-primary mt-3 btn btn-primary"
         disabled={false}
         onClick={[Function]}
         type="button"
@@ -243,11 +243,11 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
     <form
       className="mw-420"
     >
-      <h3
-        className="text-center mt-3"
+      <h1
+        className="mt-3"
       >
         Password assistance
-      </h3>
+      </h1>
       <p
         className="mb-4"
       >
@@ -321,7 +321,7 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
       <button
         aria-disabled={true}
         aria-live="assertive"
-        className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit mt-3 disabled btn btn-primary"
+        className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary mt-3 disabled btn btn-primary"
         disabled={false}
         onClick={[Function]}
         type="button"

src/logistration/InstitutionLogistration.jsx

@@ -36,9 +36,9 @@ const InstitutionLogistration = props => {
     <>
       <div className="d-flex justify-content-center m-4">
         <div className="d-flex flex-column mw-500">
-          <h3 className="mt-5 mb-4 font-weight-normal">
+          <h1 className="mt-5 mb-4 font-weight-normal">
             {headingTitle}
-          </h3>
+          </h1>
           <p className="mb-2">
             {intl.formatMessage(messages['logistration.institution.login.page.sub.heading'])}
           </p>
@@ -51,7 +51,7 @@ const InstitutionLogistration = props => {
               ))}
             </ul>
           </div>
-          <div className="section-heading-line mb-4">
+          <div className="mb-4">
             <h4>or</h4>
           </div>
           <Button

src/logistration/LoginPage.jsx

@@ -155,9 +155,9 @@ class LoginPage extends React.Component {
               <div className="d-flex flex-row">
                 <p>
                   {intl.formatMessage(messages['logistration.first.time.here'])}
-                  <a className="ml-1" href={REGISTER_PAGE}>
+                  <Hyperlink className="ml-1" href={REGISTER_PAGE}>
                     {intl.formatMessage(messages['logistration.create.an.account'])}.
-                  </a>
+                  </Hyperlink>
                 </p>
               </div>
               <h2 className="text-left mt-2 mb-3">
@@ -170,7 +170,7 @@ class LoginPage extends React.Component {
                     secondaryProviders={thirdPartyAuthContext.secondaryProviders}
                     buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
                   />
-                  <div className="section-heading-line mb-4">
+                  <div className="mb-4">
                     <h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
                   </div>
                 </>

src/logistration/RegistrationPage.jsx

@@ -463,9 +463,9 @@ class RegistrationPage extends React.Component {
               </div>
               {(providers.length || secondaryProviders.length) && !currentProvider ? (
                 <div className="d-block mb-4 mt-4">
-                  <span className="d-block mx-auto mb-4 section-heading-line">
+                  <h4 className="d-block mx-auto mb-4">
                     {intl.formatMessage(messages['logistration.create.an.account.using'])}
-                  </span>
+                  </h4>
                   <div className="row tpa-container">
                     <SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
                   </div>
@@ -474,9 +474,9 @@ class RegistrationPage extends React.Component {
                     secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders}
                     buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.button'])}
                   />
-                  <span className="d-block mx-auto text-center mt-4 section-heading-line">
+                  <h4 className="d-block mx-auto mt-4">
                     {intl.formatMessage(messages['logistration.create.a.new.one.here'])}
-                  </span>
+                  </h4>
                 </div>
               ) : null}
               <Form className="mb-4 form-group">

src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap

@@ -18,6 +18,8 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
           <a
             className="ml-1"
             href="/register"
+            onClick={[Function]}
+            target="_self"
           >
             Create an Account
             .
@@ -208,6 +210,8 @@ exports[`LoginPage should match default section snapshot 1`] = `
           <a
             className="ml-1"
             href="/register"
+            onClick={[Function]}
+            target="_self"
           >
             Create an Account
             .
@@ -364,6 +368,8 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           <a
             className="ml-1"
             href="/register"
+            onClick={[Function]}
+            target="_self"
           >
             Create an Account
             .
@@ -520,6 +526,8 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           <a
             className="ml-1"
             href="/register"
+            onClick={[Function]}
+            target="_self"
           >
             Create an Account
             .
@@ -702,6 +710,8 @@ exports[`LoginPage should show error message 1`] = `
           <a
             className="ml-1"
             href="/register"
+            onClick={[Function]}
+            target="_self"
           >
             Create an Account
             .

src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap

@@ -197,11 +197,11 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
       <div
         className="d-block mb-4 mt-4"
       >
-        <span
-          className="d-block mx-auto mb-4 section-heading-line"
+        <h4
+          className="d-block mx-auto mb-4"
         >
           Create an account using
-        </span>
+        </h4>
         <div
           className="row tpa-container"
         >
@@ -228,11 +228,11 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
             </span>
           </button>
         </div>
-        <span
-          className="d-block mx-auto text-center mt-4 section-heading-line"
+        <h4
+          className="d-block mx-auto mt-4"
         >
           or create a new one here
-        </span>
+        </h4>
       </div>
       <form
         className="mb-4 form-group"