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

@@ -0,0 +1,7 @@
+<svg width="334" height="334" viewBox="0 0 334 334" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="167" cy="167" r="167" fill="white"/>
+<rect x="96.3462" y="96.3457" width="44.9615" height="141.308" fill="#1A4049"/>
+<rect x="192.692" y="96.3457" width="44.9615" height="141.308" fill="#1A4049"/>
+<path d="M237.654 192.693L237.654 237.655L96.3461 237.655L96.3461 192.693L237.654 192.693Z" fill="#1A4049"/>
+<rect x="192.692" y="192.693" width="44.9615" height="44.9615" fill="#817AFE"/>
+</svg>

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');

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',
     },
 }));

frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx

@@ -50,7 +50,10 @@ const ForgottenPassword = () => {
             >
                 <Typography
                     variant="h2"
-                    className={commonStyles.title}
+                    className={classnames(
+                        commonStyles.title,
+                        commonStyles.textCenter
+                    )}
                     data-loading
                 >
                     Forgotten password
@@ -79,7 +82,11 @@ const ForgottenPassword = () => {
                         styles.container
                     )}
                 >
-                    <Typography variant="body1" data-loading>
+                    <Typography
+                        variant="body1"
+                        data-loading
+                        className={commonStyles.textCenter}
+                    >
                         Please provide your email address. If it exists in the
                         system we'll send a new reset link.
                     </Typography>

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',
+        textAlign: 'center',
-        alignItems: 'center',
     },
     logo: {
         marginRight: '10px',

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',
+        textAlign: 'center',
-        alignItems: 'center',
     },
     inviteText: {
         marginBottom: '1rem',

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: {
+    logo: {
-        height: '100px',
+        width: '240px',
+        height: '240px',
     },
 }));

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<IStandaloneBannerProps> = ({ title, children }) => {
             style={{
                 borderBottomLeftRadius: '3px',
                 borderTopLeftRadius: '3px',
-                overflow: 'hidden',
             }}
         >
             <div className={styles.container}>
@@ -33,10 +32,8 @@ const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
                 </Typography>
             </div>
 
-            <div className={styles.switchesContainer}>
+            <div className={styles.logoContainer}>
-                <RightToggleIcon className={styles.switchIcon} />
+                <Logo className={styles.logo} />
-                <br></br>
-                <LeftToggleIcon className={styles.switchIcon} />
             </div>
         </Gradient>
     );

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',
+        padding: '5.5rem',
-        background: '#3a5663',
+        background: '#EFF2F2',
         display: 'flex',
         [theme.breakpoints.down('sm')]: {
             flexDirection: 'column',

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 => (
                                 <FormControlLabel
                                     key={`role-${role.id}`}
                                     labelPlacement="end"