Merge pull request #473 from etn-ccis/4338---theme-object-style-changes

Update login workflow styles to use sx objects and add styles we need
etn-ccis · Sep 13, 2023 · 7b46e70 · 7b46e70
2 parents e57a6c5 + cac4194
commit 7b46e70
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 115 deletions.
diff --git a/login-workflow/src/components/Dialog/BasicDialog.tsx b/login-workflow/src/components/Dialog/BasicDialog.tsx
@@ -5,7 +5,6 @@ import Typography from '@mui/material/Typography';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
-import { useTheme, SxProps, Theme } from '@mui/material/styles';
 
 /**
  * Component that renders a basic dialog with a title, body description, and a close button.
@@ -19,36 +18,6 @@ import { useTheme, SxProps, Theme } from '@mui/material/styles';
  * @category Component
  */
 
-export const DialogTitleStyles = (theme: Theme): SxProps<Theme> => ({
-    p: `${theme.spacing(4)} ${theme.spacing(3)} 0 ${theme.spacing(3)}`,
-    [theme.breakpoints.down('sm')]: {
-        p: `${theme.spacing(2)} ${theme.spacing(2)} 0 ${theme.spacing(2)}`,
-    },
-});
-
-export const DialogContentStyles = (theme: Theme): SxProps<Theme> => ({
-    flex: '1 1 0px',
-    overflow: 'auto',
-    display: 'flex',
-    flexDirection: 'column',
-    p: `${theme.spacing(2)} ${theme.spacing(3)}`,
-    [theme.breakpoints.down('sm')]: {
-        p: `${theme.spacing(2)} ${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)}`,
-    },
-});
-
-export const DialogActionsStyles = (theme: Theme): SxProps<Theme> => ({
-    p: 3,
-    justifyContent: 'flex-end',
-    [theme.breakpoints.down('sm')]: {
-        p: 2,
-    },
-});
-
-export const DialogButtonStyles = (fullWidth = false): SxProps<Theme> => ({
-    width: fullWidth ? '100%' : 100,
-});
-
 export type BasicDialogProps = Omit<DialogProps, 'open'> & {
     /**
      * The title for the screen
@@ -80,16 +49,38 @@ export type BasicDialogProps = Omit<DialogProps, 'open'> & {
 
 export const BasicDialog: React.FC<React.PropsWithChildren<React.PropsWithChildren<BasicDialogProps>>> = (props) => {
     const { title, body, dismissButtonText, open = false, sx, ...dialogProps } = props;
-    const theme = useTheme();
 
     return (
         <Dialog sx={sx} {...dialogProps} open={open}>
-            <DialogTitle sx={DialogTitleStyles(theme)}>{title}</DialogTitle>
-            <DialogContent sx={{ ...DialogContentStyles(theme), flex: '1 1 auto' }}>
+            <DialogTitle
+                sx={{
+                    pt: { md: 4, sm: 2 },
+                    px: { md: 3, sm: 2 },
+                    pb: 0,
+                }}
+            >
+                {title}
+            </DialogTitle>
+            <DialogContent
+                sx={{
+                    flex: '1 1 auto',
+                    overflow: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    pt: 2,
+                    px: { md: 3, sm: 2 },
+                    pb: { md: 2, sm: 3 },
+                }}
+            >
                 <Typography>{body}</Typography>
             </DialogContent>
-            <DialogActions sx={DialogActionsStyles(theme)}>
-                <Button variant="text" color="primary" onClick={dialogProps.onClose} sx={DialogButtonStyles()}>
+            <DialogActions
+                sx={{
+                    justifyContent: 'flex-end',
+                    p: { md: 3, sm: 2 },
+                }}
+            >
+                <Button variant="text" color="primary" onClick={dialogProps.onClose} sx={{ width: 100 }}>
                     {dismissButtonText || 'Okay'}
                 </Button>
             </DialogActions>

diff --git a/login-workflow/src/components/Error/ErrorManager.tsx b/login-workflow/src/components/Error/ErrorManager.tsx
@@ -41,6 +41,7 @@ export type ErrorManagerProps = {
     };
     children?: React.ReactNode;
 };
+
 /**
  * Component that manages the display of error messages. Can be configured to display a dialog, a message box, or neither.
  *

diff --git a/login-workflow/src/components/Error/ErrorMessageBox.tsx b/login-workflow/src/components/Error/ErrorMessageBox.tsx
@@ -37,6 +37,7 @@ export type ErrorMessageBoxProps = {
      */
     sx?: SxProps<Theme>;
 };
+
 /**
  * Component that renders a basic message box with an error message and a configurable dismiss button.
  *
@@ -51,6 +52,7 @@ export type ErrorMessageBoxProps = {
  */
 const ErrorMessageBox = (props: ErrorMessageBoxProps): JSX.Element => {
     const { errorMessage, backgroundColor, dismissible = true, fontColor, onClose = (): void => {}, sx } = props;
+
     return (
         <Box
             sx={[

diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx
@@ -1,7 +1,5 @@
 import React, { ChangeEvent, useState, useCallback } from 'react';
-import { useTheme } from '@mui/material/styles';
 import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
-import { TextFieldStyles } from '../../styles';
 import { SetPasswordProps } from './types';
 import { PasswordTextField } from '../PasswordTextField';
 import { PasswordRequirements } from '../PasswordRequirements';
@@ -42,7 +40,6 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
         passwordTextFieldProps,
         confirmPasswordTextFieldProps,
     } = props;
-    const theme = useTheme();
 
     // Local State
     const [passwordInput, setPasswordInput] = useState(initialNewPasswordValue);
@@ -89,7 +86,9 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
                 label={newPasswordLabel}
                 value={passwordInput}
                 error={shouldValidatePassword && !isValidPassword()}
-                sx={TextFieldStyles(theme)}
+                sx={{
+                    mt: { md: 4, sm: 3 },
+                }}
                 {...passwordTextFieldProps}
                 onChange={(evt: ChangeEvent<HTMLInputElement>): void => {
                     // eslint-disable-next-line no-unused-expressions
@@ -120,7 +119,9 @@ export const SetPassword: React.FC<React.PropsWithChildren<SetPasswordProps>> =
                 name="confirm"
                 inputRef={confirmRef}
                 label={confirmPasswordLabel}
-                sx={TextFieldStyles(theme)}
+                sx={{
+                    mt: { md: 4, sm: 3 },
+                }}
                 value={confirmInput}
                 error={hasConfirmPasswordError()}
                 helperText={hasConfirmPasswordError() ? passwordNotMatchError : ''}

diff --git a/login-workflow/src/components/Spinner/Spinner.tsx b/login-workflow/src/components/Spinner/Spinner.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import { useTheme } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 
 export type SpinnerProps = BoxProps & {
@@ -18,7 +17,6 @@ export type SpinnerProps = BoxProps & {
  */
 export const Spinner: React.FC<SpinnerProps> = (props) => {
     const { visible, sx, ...otherProps } = props;
-    const theme = useTheme();
 
     return visible ? (
         <Box
@@ -30,7 +28,8 @@ export const Spinner: React.FC<SpinnerProps> = (props) => {
                     right: 0,
                     bottom: 0,
                     zIndex: 1000,
-                    backgroundColor: theme.palette.mode === 'light' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.7)',
+                    backgroundColor: (theme) =>
+                        theme.palette.mode === 'light' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.7)',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',

diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Box from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
 import defaultBackgroundImage from '../../assets/images/background.svg';
 import Card from '@mui/material/Card';
 import { Spinner } from '../Spinner/Spinner';
@@ -30,7 +29,6 @@ const useUtilityClasses = (ownerState: WorkflowCardBaseProps): Record<WorkflowCa
 
 export const WorkflowCard: React.FC<WorkflowCardBaseProps> = (props) => {
     const { loading, backgroundImage, sx, children, ...otherBoxProps } = props;
-    const theme = useTheme();
     const defaultClasses = useUtilityClasses(props);
 
     return (
@@ -39,7 +37,7 @@ export const WorkflowCard: React.FC<WorkflowCardBaseProps> = (props) => {
                 {
                     height: '100vh',
                     width: '100%',
-                    backgroundColor: theme.palette.mode === 'light' ? 'primary.main' : 'primary.dark',
+                    backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'primary.main' : 'primary.dark'),
                     backgroundImage: backgroundImage ? `url(${backgroundImage})` : `url(${defaultBackgroundImage})`,
                     display: 'flex',
                     alignItems: 'center',

diff --git a/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx b/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx
@@ -308,18 +308,13 @@ export const LoginScreenBase: React.FC<React.PropsWithChildren<LoginScreenProps>
                 <Box
                     sx={{
                         display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
                         alignItems: 'center',
                         width: '100%',
                         mt: 1,
                         mb: 5,
-                        flexWrap: 'nowrap',
-                        [theme.breakpoints.down('sm')]: {
-                            flexWrap: 'wrap',
-                            flexDirection: 'column',
-                            justifyContent: 'center',
-                        },
+                        flexWrap: { md: 'nowrap', sm: 'wrap' },
+                        flexDirection: { md: 'row', sm: 'column' },
+                        justifyContent: { md: 'space-between', sm: 'center' },
                     }}
                     className={defaultClasses.rememberMeLoginRowWrapper}
                     data-testid={defaultClasses.rememberMeLoginRowWrapper}
@@ -330,10 +325,7 @@ export const LoginScreenBase: React.FC<React.PropsWithChildren<LoginScreenProps>
                                 display: 'flex',
                                 alignItems: 'center',
                                 ml: -1.5,
-                                mr: 1,
-                                [theme.breakpoints.down('sm')]: {
-                                    mr: 0,
-                                },
+                                mr: { md: 1, sm: 0 },
                             }}
                             className={defaultClasses.rememberMeWrapper}
                             data-testid={defaultClasses.rememberMeWrapper}

diff --git a/login-workflow/src/styles/index.tsx b/login-workflow/src/styles/index.tsx
@@ -1,59 +1,3 @@
-import { SxProps, Theme } from '@mui/material/styles';
-
-export const DialogTitleStyles = (theme: Theme): SxProps<Theme> => ({
-    p: `${theme.spacing(4)} ${theme.spacing(3)} 0 ${theme.spacing(3)}`,
-    [theme.breakpoints.down('sm')]: {
-        p: `${theme.spacing(2)} ${theme.spacing(2)} 0 ${theme.spacing(2)}`,
-    },
-});
-
-export const DialogContentStyles = (theme: Theme): SxProps<Theme> => ({
-    flex: '1 1 0px',
-    overflow: 'auto',
-    display: 'flex',
-    flexDirection: 'column',
-    p: `${theme.spacing(2)} ${theme.spacing(3)}`,
-    [theme.breakpoints.down('sm')]: {
-        p: `${theme.spacing(2)} ${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(2)}`,
-    },
-});
-
-export const DialogActionsStyles = (theme: Theme): SxProps<Theme> => ({
-    p: 3,
-    justifyContent: 'flex-end',
-    [theme.breakpoints.down('sm')]: {
-        p: 2,
-    },
-});
-
-export const DialogButtonStyles = (fullWidth = false): SxProps<Theme> => ({
-    width: fullWidth ? '100%' : 100,
-});
-
-export const FullDividerStyles = (theme: Theme): SxProps<Theme> => ({
-    m: `${theme.spacing(5)} -${theme.spacing(3)} ${theme.spacing(4)}`,
-    [theme.breakpoints.down('sm')]: {
-        m: `${theme.spacing(5)} -${theme.spacing(2)} ${theme.spacing(4)}`,
-    },
-});
-
-export const StepperStyles = {
-    background: 'transparent',
-    width: '100%',
-    p: 0,
-};
-
-export const StepperDotStyles = (theme: Theme): any => ({
-    m: `0px ${theme.spacing(0.5)}`,
-});
-
-export const TextFieldStyles = (theme: Theme): SxProps<Theme> => ({
-    mt: 4,
-    [theme.breakpoints.down('sm')]: {
-        mt: 3,
-    },
-});
-
 export const LinkStyles = {
     fontWeight: 600,
     textTransform: 'none',
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,6 +41,7 @@ export type ErrorManagerProps = { @@
         };
         children?: React.ReactNode;
     };
     /**
      * Component that manages the display of error messages. Can be configured to display a dialog, a message box, or neither.
      *
@@ Expand Down @@