From a17e2f29b25b58778f53268835dc60ef0ed9864e Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Mon, 7 Jun 2021 10:15:30 +0200 Subject: [PATCH] Fix/customer journey patches (#304) * fix: logo * fix: move proclamation show logic to useEffect * fix: add spacing on strategy headers * fix: add role sorting --- frontend/src/assets/icons/logo-white-bg.svg | 7 +++++++ .../component/common/Proclamation/Proclamation.tsx | 9 +++++++-- .../strategy/AddStrategy/AddStrategy.styles.js | 3 ++- .../user/ForgottenPassword/ForgottenPassword.tsx | 11 +++++++++-- frontend/src/component/user/Login/Login.styles.js | 3 +-- frontend/src/component/user/NewUser/NewUser.styles.ts | 3 +-- .../user/StandaloneBanner/StandaloneBanner.styles.ts | 9 +++++---- .../user/StandaloneBanner/StandaloneBanner.tsx | 11 ++++------- .../StandaloneLayout/StandaloneLayout.styles.ts | 4 ++-- .../admin/users/AddUser/AddUserForm/AddUserForm.jsx | 11 ++++++++++- 10 files changed, 48 insertions(+), 23 deletions(-) create mode 100644 frontend/src/assets/icons/logo-white-bg.svg diff --git a/frontend/src/assets/icons/logo-white-bg.svg b/frontend/src/assets/icons/logo-white-bg.svg new file mode 100644 index 0000000000..f888d4a288 --- /dev/null +++ b/frontend/src/assets/icons/logo-white-bg.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/src/component/common/Proclamation/Proclamation.tsx b/frontend/src/component/common/Proclamation/Proclamation.tsx index 175527bf1b..703a7f1c44 100644 --- a/frontend/src/component/common/Proclamation/Proclamation.tsx +++ b/frontend/src/component/common/Proclamation/Proclamation.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Alert } from '@material-ui/lab'; import ConditionallyRender from '../ConditionallyRender'; import { Typography } from '@material-ui/core'; @@ -23,13 +23,18 @@ const renderProclamation = (id: string) => { return false; } } + console.log('RETURNING TRUE'); return true; }; const Proclamation = ({ toast }: IProclamationProps) => { - const [show, setShow] = useState(renderProclamation(toast?.id || '')); + const [show, setShow] = useState(false); const styles = useStyles(); + useEffect(() => { + setShow(renderProclamation(toast?.id || '')); + }, [toast?.id]); + const onClose = () => { if (localStorage) { localStorage.setItem(toast?.id || '', 'seen'); diff --git a/frontend/src/component/feature/strategy/AddStrategy/AddStrategy.styles.js b/frontend/src/component/feature/strategy/AddStrategy/AddStrategy.styles.js index 21aacfc46b..a4d3c061ce 100644 --- a/frontend/src/component/feature/strategy/AddStrategy/AddStrategy.styles.js +++ b/frontend/src/component/feature/strategy/AddStrategy/AddStrategy.styles.js @@ -11,6 +11,7 @@ export const useStyles = makeStyles(theme => ({ }, subTitle: { fontWeight: theme.fontWeight.semi, - margin: '1rem 0', + fontSize: theme.fontSizes.subHeader, + margin: '2rem 0 0.5rem 0', }, })); diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx index 35fd30b2d5..2043e1b120 100644 --- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx +++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx @@ -50,7 +50,10 @@ const ForgottenPassword = () => { > Forgotten password @@ -79,7 +82,11 @@ const ForgottenPassword = () => { styles.container )} > - + Please provide your email address. If it exists in the system we'll send a new reset link. diff --git a/frontend/src/component/user/Login/Login.styles.js b/frontend/src/component/user/Login/Login.styles.js index bc0f5bc226..24ab08df8d 100644 --- a/frontend/src/component/user/Login/Login.styles.js +++ b/frontend/src/component/user/Login/Login.styles.js @@ -33,8 +33,7 @@ export const useStyles = makeStyles(theme => ({ title: { fontSize: theme.fontSizes.mainHeader, marginBottom: '1rem', - display: 'flex', - alignItems: 'center', + textAlign: 'center', }, logo: { marginRight: '10px', diff --git a/frontend/src/component/user/NewUser/NewUser.styles.ts b/frontend/src/component/user/NewUser/NewUser.styles.ts index 86d985c790..91617a1ded 100644 --- a/frontend/src/component/user/NewUser/NewUser.styles.ts +++ b/frontend/src/component/user/NewUser/NewUser.styles.ts @@ -10,8 +10,7 @@ export const useStyles = makeStyles(theme => ({ title: { fontSize: theme.fontSizes.mainHeader, marginBottom: '1.25rem', - display: 'flex', - alignItems: 'center', + textAlign: 'center', }, inviteText: { marginBottom: '1rem', diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts index b7941da934..45f9a4c8cc 100644 --- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts +++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts @@ -38,9 +38,9 @@ export const useStyles = makeStyles(theme => ({ fontSize: '2rem', fontWeight: '300', }, - switchesContainer: { + logoContainer: { position: 'absolute', - bottom: '15px', + bottom: '-50px', left: '-50px', display: 'flex', flexDirection: 'column', @@ -48,7 +48,8 @@ export const useStyles = makeStyles(theme => ({ display: 'none', }, }, - switchIcon: { - height: '100px', + logo: { + width: '240px', + height: '240px', }, })); diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx index 17e7a76f4a..9eb26a2436 100644 --- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx +++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx @@ -2,8 +2,8 @@ import { FC } from 'react'; import { Typography, useTheme } from '@material-ui/core'; import Gradient from '../../common/Gradient/Gradient'; -import { ReactComponent as RightToggleIcon } from '../../../assets/icons/toggleRight.svg'; -import { ReactComponent as LeftToggleIcon } from '../../../assets/icons/toggleLeft.svg'; + +import { ReactComponent as Logo } from '../../../assets/icons/logo-white-bg.svg'; import { useStyles } from './StandaloneBanner.styles'; @@ -21,7 +21,6 @@ const StandaloneBanner: FC = ({ title, children }) => { style={{ borderBottomLeftRadius: '3px', borderTopLeftRadius: '3px', - overflow: 'hidden', }} >
@@ -33,10 +32,8 @@ const StandaloneBanner: FC = ({ title, children }) => {
-
- -

- +
+
); diff --git a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts index e6a77dda08..c869faaca9 100644 --- a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts +++ b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts @@ -2,8 +2,8 @@ import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ container: { - padding: '4rem', - background: '#3a5663', + padding: '5.5rem', + background: '#EFF2F2', display: 'flex', [theme.breakpoints.down('sm')]: { flexDirection: 'column', diff --git a/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx b/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx index 1060a12425..4fab6d26d9 100644 --- a/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx +++ b/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx @@ -55,6 +55,15 @@ function AddUserForm({ }); }; + const sortRoles = (a, b) => { + if (b.name[0] < a.name[0]) { + return 1; + } else if (a.name[0] < b.name[0]) { + return -1; + } + return 0; + }; + const apiError = userApiErrors[ADD_USER_ERROR] || userApiErrors[UPDATE_USER_ERROR]; return ( @@ -134,7 +143,7 @@ function AddUserForm({ onChange={updateNumberField} data-loading > - {roles.map(role => ( + {roles.sort(sortRoles).map(role => (