From 0154ee6272cc0818d01ebd3e6f853fc7a0d57dcf Mon Sep 17 00:00:00 2001
From: uzairr <uzairr@yahoo.com>
Date: Wed, 13 Jan 2021 18:48:26 +0500
Subject: [PATCH] fix signin-form-width-issue

---
 src/logistration/InstitutionLogistration.jsx           |  2 +-
 src/logistration/LoginPage.jsx                         |  2 +-
 src/logistration/RegistrationPage.jsx                  |  4 ++--
 src/logistration/_style.scss                           |  6 ++++++
 .../tests/__snapshots__/LoginPage.test.jsx.snap        | 10 +++++-----
 .../tests/__snapshots__/RegistrationPage.test.jsx.snap |  6 +++---
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/logistration/InstitutionLogistration.jsx b/src/logistration/InstitutionLogistration.jsx
index e90e6ece..bd19f40c 100644
--- a/src/logistration/InstitutionLogistration.jsx
+++ b/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>
diff --git a/src/logistration/LoginPage.jsx b/src/logistration/LoginPage.jsx
index 5d3f8d88..2fa89b48 100644
--- a/src/logistration/LoginPage.jsx
+++ b/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}
diff --git a/src/logistration/RegistrationPage.jsx b/src/logistration/RegistrationPage.jsx
index 4512b2ed..e4af1d0f 100644
--- a/src/logistration/RegistrationPage.jsx
+++ b/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) {
diff --git a/src/logistration/_style.scss b/src/logistration/_style.scss
index 9d7d23d8..b5217c3d 100644
--- a/src/logistration/_style.scss
+++ b/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;
diff --git a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
index 78d76ca5..f2f479db 100644
--- a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/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
diff --git a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
index a55df9d3..32c088c9 100644
--- a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/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"
       >