Merge pull request #77 from edx/fix-signin-form-width-issue

fix signin-form-width-issue

src/logistration/InstitutionLogistration.jsx

@@ -35,7 +35,7 @@ const InstitutionLogistration = props => {
   return (
     <>
       <div className="d-flex justify-content-center m-4">
-        <div className="d-flex flex-column mw-500">
+        <div className="flex-column">
           <h1 className="mt-5 mb-4 font-weight-normal">
             {headingTitle}
           </h1>

src/logistration/LoginPage.jsx

@@ -240,7 +240,7 @@ class LoginPage extends React.Component {
               </Form>
               {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
                 && !currentProvider ? (
-                  <div className="section-heading-line mb-4">
+                  <div className="mb-4 pt-10">
                     <h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
                   </div>
                 ) : null}

src/logistration/RegistrationPage.jsx

@@ -494,9 +494,9 @@ class RegistrationPage extends React.Component {
           <div className="row tpa-container">
             <SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
           </div>
-          <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>
         </>
       );
     } else if (thirdPartyAuthApiStatus === PENDING_STATE) {

src/logistration/_style.scss

@@ -255,6 +255,12 @@ $apple-focus-black: $apple-black;
   }
 }
 
+@media (min-width: 1024px) {
+  .mw-500 {
+    width: 500px;
+  }
+}
+
 @media (max-width: 450px) {
   .section-heading-line {
     position: relative;

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

@@ -154,7 +154,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         </button>
       </form>
       <div
-        className="section-heading-line mb-4"
+        className="mb-4 pt-10"
       >
         <h4>
           or sign in with
@@ -346,7 +346,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
         </button>
       </form>
       <div
-        className="section-heading-line mb-4"
+        className="mb-4 pt-10"
       >
         <h4>
           or sign in with
@@ -523,7 +523,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
         </button>
       </form>
       <div
-        className="section-heading-line mb-4"
+        className="mb-4 pt-10"
       >
         <h4>
           or sign in with
@@ -709,7 +709,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
         </button>
       </form>
       <div
-        className="section-heading-line mb-4"
+        className="mb-4 pt-10"
       >
         <h4>
           or sign in with
@@ -903,7 +903,7 @@ exports[`LoginPage should show error message 1`] = `
         </button>
       </form>
       <div
-        className="section-heading-line mb-4"
+        className="mb-4 pt-10"
       >
         <h4>
           or sign in with

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

@@ -274,11 +274,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>
       <form
         className="mb-4 form-group"
       >