From 899bf2de613e0fe67073265c888a406232767ec6 Mon Sep 17 00:00:00 2001
From: uzairr <uzairr@yahoo.com>
Date: Fri, 8 Jan 2021 15:54:25 +0500
Subject: [PATCH] fix missing branding issues

---
 src/forgot-password/ForgotPasswordPage.jsx    |  2 +-
 .../ForgotPasswordPage.test.jsx.snap          |  6 ++--
 src/logistration/InstitutionLogistration.jsx  |  2 +-
 src/logistration/LoginPage.jsx                |  6 ++--
 src/logistration/_style.scss                  |  4 +++
 src/logistration/messages.jsx                 |  2 +-
 .../__snapshots__/LoginPage.test.jsx.snap     | 12 +++----
 src/reset-password/ResetFailure.jsx           |  2 +-
 src/reset-password/ResetPasswordPage.jsx      |  8 ++---
 src/reset-password/ResetSuccess.jsx           |  2 +-
 .../tests/ResetPasswordPage.test.jsx          |  2 +-
 .../ResetPasswordPage.test.jsx.snap           | 34 +++++++++----------
 12 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index 41ab3410..3ccb08d2 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -56,7 +56,7 @@ const ForgotPasswordPage = (props) => {
           {status === 'complete' ? <Redirect to={LOGIN_PAGE} /> : null}
           <div className="d-flex justify-content-center m-4">
             <div className="d-flex flex-column">
-              <Form className="mw-420">
+              <Form className="mw-500">
                 {status === 'forbidden' ? <RequestInProgressAlert /> : null}
                 <h1 className="mt-3">
                   {intl.formatMessage(messages['logisration.forgot.password.page.heading'])}
diff --git a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
index f2b95ec4..f2b62052 100644
--- a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
+++ b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
     className="d-flex flex-column"
   >
     <form
-      className="mw-420"
+      className="mw-500"
     >
       <h1
         className="mt-3"
@@ -112,7 +112,7 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
     className="d-flex flex-column"
   >
     <form
-      className="mw-420"
+      className="mw-500"
     >
       <div
         className="fade alert alert-warning show"
@@ -241,7 +241,7 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
     className="d-flex flex-column"
   >
     <form
-      className="mw-420"
+      className="mw-500"
     >
       <h1
         className="mt-3"
diff --git a/src/logistration/InstitutionLogistration.jsx b/src/logistration/InstitutionLogistration.jsx
index f8475cf1..e90e6ece 100644
--- a/src/logistration/InstitutionLogistration.jsx
+++ b/src/logistration/InstitutionLogistration.jsx
@@ -10,7 +10,7 @@ export const RenderInstitutionButton = props => {
   if (secondaryProviders !== undefined && secondaryProviders.length > 0) {
     return (
       <Button
-        className="mb-2 mt-2"
+        className="mt-2"
         block
         variant="outline-primary"
         onClick={onSubmitHandler}
diff --git a/src/logistration/LoginPage.jsx b/src/logistration/LoginPage.jsx
index 734df297..437f0ac2 100644
--- a/src/logistration/LoginPage.jsx
+++ b/src/logistration/LoginPage.jsx
@@ -142,7 +142,7 @@ class LoginPage extends React.Component {
         />
         <div className="d-flex justify-content-center m-4">
           <div className="d-flex flex-column">
-            <div className="mw-420">
+            <div className="mw-500">
               {thirdPartyAuthContext.currentProvider
               && (
                 <ThirdPartyAuthAlert
@@ -170,7 +170,7 @@ class LoginPage extends React.Component {
                     secondaryProviders={thirdPartyAuthContext.secondaryProviders}
                     buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
                   />
-                  <div className="mb-4 mt-3">
+                  <div className="mb-4 mt-20">
                     <h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
                   </div>
                 </>
@@ -228,7 +228,7 @@ class LoginPage extends React.Component {
               </Form>
               {thirdPartyAuthContext.providers.length && !thirdPartyAuthContext.currentProvider ? (
                 <>
-                  <div className="section-heading-line mb-4">
+                  <div className="mb-4 mt-20">
                     <h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
                   </div>
                   <div className="row tpa-container">
diff --git a/src/logistration/_style.scss b/src/logistration/_style.scss
index aa2db031..30768ea3 100644
--- a/src/logistration/_style.scss
+++ b/src/logistration/_style.scss
@@ -236,6 +236,10 @@ $apple-focus-black: $apple-black;
   height: 90%;
 }
 
+.mt-20 {
+  margin-top: 20px;
+}
+
 @media (min-width: 576px) {
   .reset-password-container {
     width: 420px;
diff --git a/src/logistration/messages.jsx b/src/logistration/messages.jsx
index c7758c4c..62f4036b 100644
--- a/src/logistration/messages.jsx
+++ b/src/logistration/messages.jsx
@@ -73,7 +73,7 @@ const messages = defineMessages({
   },
   'logistration.login.institution.login.page.back.button': {
     id: 'logistration.login.institution.login.page.back.button',
-    defaultMessage: 'Back',
+    defaultMessage: 'Back to sign in',
     description: 'return to login page',
   },
   'logistration.register.institution.login.button': {
diff --git a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
index e8b57928..9373effb 100644
--- a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
     className="d-flex flex-column"
   >
     <div
-      className="mw-420"
+      className="mw-500"
     >
       <div
         className="d-flex flex-row"
@@ -154,7 +154,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         </button>
       </form>
       <div
-        className="section-heading-line mb-4"
+        className="mb-4 mt-20"
       >
         <h4>
           or sign in with
@@ -200,7 +200,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
     className="d-flex flex-column"
   >
     <div
-      className="mw-420"
+      className="mw-500"
     >
       <div
         className="d-flex flex-row"
@@ -358,7 +358,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
     className="d-flex flex-column"
   >
     <div
-      className="mw-420"
+      className="mw-500"
     >
       <div
         className="d-flex flex-row"
@@ -516,7 +516,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
     className="d-flex flex-column"
   >
     <div
-      className="mw-420"
+      className="mw-500"
     >
       <div
         className="d-flex flex-row"
@@ -683,7 +683,7 @@ exports[`LoginPage should show error message 1`] = `
     className="d-flex flex-column"
   >
     <div
-      className="mw-420"
+      className="mw-500"
     >
       <div
         className="fade alert alert-danger show"
diff --git a/src/reset-password/ResetFailure.jsx b/src/reset-password/ResetFailure.jsx
index b1fdcb67..b76e3de6 100644
--- a/src/reset-password/ResetFailure.jsx
+++ b/src/reset-password/ResetFailure.jsx
@@ -8,7 +8,7 @@ const ResetFailureMessage = (props) => {
   return (
     <div className="d-flex justify-content-center m-4">
       <div className="d-flex flex-column">
-        <div className="text-center mw-420">
+        <div className="text-center mw-500">
           <Alert variant="danger">
             <FormattedMessage
               id="logistration.reset.password.request.failure.header.message"
diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx
index b146088f..3c4d8de7 100644
--- a/src/reset-password/ResetPasswordPage.jsx
+++ b/src/reset-password/ResetPasswordPage.jsx
@@ -77,12 +77,12 @@ const ResetPasswordPage = (props) => {
       <>
         {props.status === 'failure' ? <ResetFailureMessage errors={props.errors} /> : null}
         <div className="d-flex justify-content-center m-4">
-          <div className="d-flex flex-column">
+          <div className="d-flex flex-column mw-500">
             <Form>
               <div className="reset-password-container">
-                <h3 className="text-center mt-3">
+                <h1 className="mt-3">
                   {intl.formatMessage(messages['logistration.reset.password.page.heading'])}
-                </h3>
+                </h1>
                 <p className="mb-4">
                   {intl.formatMessage(messages['logistration.reset.password.page.instructions'])}
                 </p>
@@ -126,7 +126,7 @@ const ResetPasswordPage = (props) => {
               </div>
               <StatefulButton
                 type="submit"
-                className="btn-primary submit"
+                className="btn-primary"
                 state={props.status}
                 labels={{
                   default: intl.formatMessage(messages['logistration.reset.password.page.submit.button']),
diff --git a/src/reset-password/ResetSuccess.jsx b/src/reset-password/ResetSuccess.jsx
index db5d5063..c9f08c01 100644
--- a/src/reset-password/ResetSuccess.jsx
+++ b/src/reset-password/ResetSuccess.jsx
@@ -16,7 +16,7 @@ const ResetSuccessMessage = () => {
   return (
     <div className="d-flex justify-content-center m-4">
       <div className="d-flex flex-column">
-        <div className="text-center mw-420">
+        <div className="text-center mw-500">
           <Alert variant="success">
             <Alert.Heading className="text-success">
               <FormattedMessage
diff --git a/src/reset-password/tests/ResetPasswordPage.test.jsx b/src/reset-password/tests/ResetPasswordPage.test.jsx
index 4df1d7de..ac581b48 100644
--- a/src/reset-password/tests/ResetPasswordPage.test.jsx
+++ b/src/reset-password/tests/ResetPasswordPage.test.jsx
@@ -168,7 +168,7 @@ describe('ResetPasswordPage', () => {
       resetPage.find('input#reset-password-input').simulate('blur', { target: { value: newPassword } });
     });
     resetPage.find('input#confirm-password-input').simulate('change', { target: { value: newPassword } });
-    resetPage.find('button.submit').simulate('click');
+    resetPage.find('button.btn-primary').simulate('click');
 
     expect(store.dispatch).toHaveBeenCalledWith(resetPassword(formPayload, props.token, {}));
     resetPage.unmount();
diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
index 1c1b8dfe..ef794b38 100644
--- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
+++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
@@ -50,7 +50,7 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
   className="d-flex justify-content-center m-4"
 >
   <div
-    className="d-flex flex-column"
+    className="d-flex flex-column mw-500"
   >
     <form
       className=""
@@ -58,11 +58,11 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
       <div
         className="reset-password-container"
       >
-        <h3
-          className="text-center mt-3"
+        <h1
+          className="mt-3"
         >
           Reset Your Password
-        </h3>
+        </h1>
         <p
           className="mb-4"
         >
@@ -121,7 +121,7 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
       <button
         aria-disabled={true}
         aria-live="assertive"
-        className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit disabled btn btn-primary"
+        className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled btn btn-primary"
         disabled={false}
         onClick={[Function]}
         type="submit"
@@ -151,7 +151,7 @@ exports[`ResetPasswordPage should match reset password default section snapshot
   className="d-flex justify-content-center m-4"
 >
   <div
-    className="d-flex flex-column"
+    className="d-flex flex-column mw-500"
   >
     <form
       className=""
@@ -159,11 +159,11 @@ exports[`ResetPasswordPage should match reset password default section snapshot
       <div
         className="reset-password-container"
       >
-        <h3
-          className="text-center mt-3"
+        <h1
+          className="mt-3"
         >
           Reset Your Password
-        </h3>
+        </h1>
         <p
           className="mb-4"
         >
@@ -222,7 +222,7 @@ exports[`ResetPasswordPage should match reset password default section snapshot
       <button
         aria-disabled={false}
         aria-live="assertive"
-        className="pgn__stateful-btn pgn__stateful-btn-state-null btn-primary submit btn btn-primary"
+        className="pgn__stateful-btn pgn__stateful-btn-state-null btn-primary btn btn-primary"
         disabled={false}
         onClick={[Function]}
         type="submit"
@@ -246,7 +246,7 @@ exports[`ResetPasswordPage should match successful reset message section snapsho
     className="d-flex flex-column"
   >
     <div
-      className="text-center mw-420"
+      className="text-center mw-500"
     >
       <div
         className="fade alert alert-success show"
@@ -287,7 +287,7 @@ Array [
       className="d-flex flex-column"
     >
       <div
-        className="text-center mw-420"
+        className="text-center mw-500"
       >
         <div
           className="fade alert alert-danger show"
@@ -304,7 +304,7 @@ Array [
     className="d-flex justify-content-center m-4"
   >
     <div
-      className="d-flex flex-column"
+      className="d-flex flex-column mw-500"
     >
       <form
         className=""
@@ -312,11 +312,11 @@ Array [
         <div
           className="reset-password-container"
         >
-          <h3
-            className="text-center mt-3"
+          <h1
+            className="mt-3"
           >
             Reset Your Password
-          </h3>
+          </h1>
           <p
             className="mb-4"
           >
@@ -375,7 +375,7 @@ Array [
         <button
           aria-disabled={false}
           aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-failure btn-primary submit btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-failure btn-primary btn btn-primary"
           disabled={false}
           onClick={[Function]}
           type="submit"