Merged in login_styling (pull request #6943)

R2-3033: Fixing styling for identity login page and login modal Approved-by: Dennis Hernandez
fphgov · Sep 27, 2024 · 63cb058 · 63cb058
2 parents 5cebec8 + a1040e5
commit 63cb058
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/app/javascript/components/login-dialog/component.jsx b/app/javascript/components/login-dialog/component.jsx
@@ -1,17 +1,20 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
+import { useMemoizedSelector } from "../../libs";
 import ActionDialog, { useDialog } from "../action-dialog";
 import { useApp } from "../application/use-app";
 import { useI18n } from "../i18n";
 import Login from "../login";
 import { FORM_ID } from "../login/components/login-form/constants";
+import { getUseIdentityProvider } from "../login/selectors";
 import utils from "../login/utils";
 
 import { LOGIN_DIALOG } from "./constants";
 
 function Component() {
   const i18n = useI18n();
   const { demo } = useApp();
+  const useIdentity = useMemoizedSelector(state => getUseIdentityProvider(state));
 
   const { dialogOpen, pending } = useDialog(LOGIN_DIALOG);
 
@@ -31,6 +34,7 @@ function Component() {
       }}
       disableClose
       omitCloseAfterSuccess
+      showSuccessButton={!useIdentity}
     >
       <Login modal />
     </ActionDialog>

diff --git a/app/javascript/components/login/component.jsx b/app/javascript/components/login/component.jsx
@@ -36,7 +36,7 @@ function Component({ modal = false }) {
 
   return (
     <LoadingIndicator loading={isLoading} hasData={!isLoading}>
-      <LoginComponent modal={modal} />
+      <LoginComponent modal={modal} showTitle={false} />
     </LoadingIndicator>
   );
 }

diff --git a/app/javascript/components/login/components/idp-selection/container.jsx b/app/javascript/components/login/components/idp-selection/container.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
 import { useDispatch } from "react-redux";
+import PropTypes from "prop-types";
 
 import PageHeading from "../../../page/components/page-heading";
 import { useI18n } from "../../../i18n";
@@ -12,7 +13,7 @@ import css from "./styles.css";
 import PrimeroIdpLink from "./components/primero-idp-link";
 import PrimeroIdpSelect from "./components/primero-idp-select";
 
-function Container() {
+function Container({ showTitle = true }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -21,7 +22,7 @@ function Container() {
 
   return (
     <>
-      <PageHeading title={i18n.t("login.title")} noPadding noElevation />
+      {showTitle && <PageHeading title={i18n.t("login.title")} noPadding noElevation />}
       <PrimeroIdpSelect identityProviders={identityProviders} css={css} />
       <PrimeroIdpLink identityProviders={identityProviders} i18n={i18n} dispatch={dispatch} css={css} />
     </>
@@ -30,4 +31,8 @@ function Container() {
 
 Container.displayName = NAME;
 
+Container.propTypes = {
+  showTitle: PropTypes.bool
+};
+
 export default Container;
diff --git a/app/javascript/components/login/components/idp-selection/styles.css b/app/javascript/components/login/components/idp-selection/styles.css
@@ -21,6 +21,7 @@
 
 .linkButtonContainer {
   display: flex;
+  align-items: center;
 
   & span {
     padding-right: 3px;
@@ -56,14 +57,19 @@
 
 .idpSelectContainer {
   display: flex;
-  margin-top: 5px;
+  margin: .2em 0 .5em 0;
+  align-items: center;
+
   & form {
     min-width: 80%;
     margin-right: 5%;
   }
   & span > button {
     min-height: 38px;
   }
+  & :global(.MuiTextField-root) {
+    margin: 0;
+  }
 }
 
 .loginButton {