From eeb8d23016e1eb9e3725902096741fc55dabe35c Mon Sep 17 00:00:00 2001 From: manojleaton Date: Tue, 12 Sep 2023 19:06:51 +0530 Subject: [PATCH 1/2] removed theme object --- .../src/components/Dialog/BasicDialog.tsx | 58 +++++++++---------- .../src/components/Error/ErrorManager.tsx | 1 + .../src/components/Error/ErrorMessageBox.tsx | 2 + .../components/SetPassword/SetPassword.tsx | 7 +-- .../src/components/Spinner/Spinner.tsx | 5 +- .../components/WorkflowCard/WorkflowCard.tsx | 4 +- .../screens/LoginScreen/LoginScreenBase.tsx | 16 ++--- login-workflow/src/styles/index.tsx | 46 ++++++--------- 8 files changed, 59 insertions(+), 80 deletions(-) diff --git a/login-workflow/src/components/Dialog/BasicDialog.tsx b/login-workflow/src/components/Dialog/BasicDialog.tsx index 593d8627..096da24f 100644 --- a/login-workflow/src/components/Dialog/BasicDialog.tsx +++ b/login-workflow/src/components/Dialog/BasicDialog.tsx @@ -5,7 +5,7 @@ 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'; +import { SxProps, Theme } from '@mui/material/styles'; /** * Component that renders a basic dialog with a title, body description, and a close button. @@ -19,32 +19,6 @@ import { useTheme, SxProps, Theme } from '@mui/material/styles'; * @category Component */ -export const DialogTitleStyles = (theme: Theme): SxProps => ({ - 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 => ({ - 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 => ({ - p: 3, - justifyContent: 'flex-end', - [theme.breakpoints.down('sm')]: { - p: 2, - }, -}); - export const DialogButtonStyles = (fullWidth = false): SxProps => ({ width: fullWidth ? '100%' : 100, }); @@ -80,15 +54,37 @@ export type BasicDialogProps = Omit & { export const BasicDialog: React.FC>> = (props) => { const { title, body, dismissButtonText, open = false, sx, ...dialogProps } = props; - const theme = useTheme(); return ( - {title} - + + {title} + + {body} - + diff --git a/login-workflow/src/components/Error/ErrorManager.tsx b/login-workflow/src/components/Error/ErrorManager.tsx index 638303cd..efb45132 100644 --- 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 index 00f2f0a0..e168271b 100644 --- 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; }; + /** * 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 ( > = passwordNotMatchError, onSubmit, } = props; - const theme = useTheme(); // Local State const [passwordInput, setPasswordInput] = useState(initialNewPasswordValue); @@ -106,7 +103,9 @@ export const SetPassword: React.FC> = name="confirm" inputRef={confirmRef} label={confirmPasswordLabel} - sx={TextFieldStyles(theme)} + sx={{ + mt: { md: 4, sm: 3 }, + }} value={confirmInput} onChange={(evt: ChangeEvent): void => onConfirmChange(evt.target.value)} onKeyUp={(e): void => { diff --git a/login-workflow/src/components/Spinner/Spinner.tsx b/login-workflow/src/components/Spinner/Spinner.tsx index 5fccad52..7bd82f69 100644 --- 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 = (props) => { const { visible, sx, ...otherProps } = props; - const theme = useTheme(); return visible ? ( = (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 index 4f0bde39..69cbab3e 100644 --- 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 = (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 = (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 index 48794192..7c1fb2bc 100644 --- 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 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 index e352d699..e822825f 100644 --- a/login-workflow/src/styles/index.tsx +++ b/login-workflow/src/styles/index.tsx @@ -1,40 +1,34 @@ import { SxProps, Theme } from '@mui/material/styles'; -export const DialogTitleStyles = (theme: Theme): SxProps => ({ - 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 DialogTitleStyles = (): SxProps => ({ + pt: { md: 4, sm: 2 }, + px: { md: 3, sm: 2 }, + pb: 0, }); -export const DialogContentStyles = (theme: Theme): SxProps => ({ +export const DialogContentStyles = (): SxProps => ({ 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)}`, - }, + pt: 2, + px: { md: 3, sm: 2 }, + pb: { md: 2, sm: 3 }, }); -export const DialogActionsStyles = (theme: Theme): SxProps => ({ - p: 3, +export const DialogActionsStyles = (): SxProps => ({ justifyContent: 'flex-end', - [theme.breakpoints.down('sm')]: { - p: 2, - }, + p: { md: 3, sm: 2 }, }); export const DialogButtonStyles = (fullWidth = false): SxProps => ({ width: fullWidth ? '100%' : 100, }); -export const FullDividerStyles = (theme: Theme): SxProps => ({ - 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 FullDividerStyles = (): SxProps => ({ + mt: 5, + mb: 4, + mx: { md: -3, sm: -2 }, }); export const StepperStyles = { @@ -43,15 +37,13 @@ export const StepperStyles = { p: 0, }; -export const StepperDotStyles = (theme: Theme): any => ({ - m: `0px ${theme.spacing(0.5)}`, +export const StepperDotStyles = (): any => ({ + my: 0, + mx: 0.5, }); -export const TextFieldStyles = (theme: Theme): SxProps => ({ - mt: 4, - [theme.breakpoints.down('sm')]: { - mt: 3, - }, +export const TextFieldStyles = (): SxProps => ({ + mt: { md: 4, sm: 3 }, }); export const LinkStyles = { From cac419466971228ae683dd086f72ac3cacff5293 Mon Sep 17 00:00:00 2001 From: manojleaton Date: Wed, 13 Sep 2023 17:51:23 +0530 Subject: [PATCH 2/2] review comments incorporation --- .../src/components/Dialog/BasicDialog.tsx | 7 +-- .../components/SetPassword/SetPassword.tsx | 4 +- login-workflow/src/styles/index.tsx | 48 ------------------- 3 files changed, 4 insertions(+), 55 deletions(-) diff --git a/login-workflow/src/components/Dialog/BasicDialog.tsx b/login-workflow/src/components/Dialog/BasicDialog.tsx index 096da24f..482a90eb 100644 --- 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 { SxProps, Theme } from '@mui/material/styles'; /** * Component that renders a basic dialog with a title, body description, and a close button. @@ -19,10 +18,6 @@ import { SxProps, Theme } from '@mui/material/styles'; * @category Component */ -export const DialogButtonStyles = (fullWidth = false): SxProps => ({ - width: fullWidth ? '100%' : 100, -}); - export type BasicDialogProps = Omit & { /** * The title for the screen @@ -85,7 +80,7 @@ export const BasicDialog: React.FC - diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index c6884c2b..fa696cfe 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -86,7 +86,9 @@ export const SetPassword: React.FC> = label={newPasswordLabel} value={passwordInput} error={shouldValidatePassword && !isValidPassword()} - sx={TextFieldStyles(theme)} + sx={{ + mt: { md: 4, sm: 3 }, + }} {...passwordTextFieldProps} onChange={(evt: ChangeEvent): void => { // eslint-disable-next-line no-unused-expressions diff --git a/login-workflow/src/styles/index.tsx b/login-workflow/src/styles/index.tsx index e822825f..aa2a98f0 100644 --- a/login-workflow/src/styles/index.tsx +++ b/login-workflow/src/styles/index.tsx @@ -1,51 +1,3 @@ -import { SxProps, Theme } from '@mui/material/styles'; - -export const DialogTitleStyles = (): SxProps => ({ - pt: { md: 4, sm: 2 }, - px: { md: 3, sm: 2 }, - pb: 0, -}); - -export const DialogContentStyles = (): SxProps => ({ - flex: '1 1 0px', - overflow: 'auto', - display: 'flex', - flexDirection: 'column', - pt: 2, - px: { md: 3, sm: 2 }, - pb: { md: 2, sm: 3 }, -}); - -export const DialogActionsStyles = (): SxProps => ({ - justifyContent: 'flex-end', - p: { md: 3, sm: 2 }, -}); - -export const DialogButtonStyles = (fullWidth = false): SxProps => ({ - width: fullWidth ? '100%' : 100, -}); - -export const FullDividerStyles = (): SxProps => ({ - mt: 5, - mb: 4, - mx: { md: -3, sm: -2 }, -}); - -export const StepperStyles = { - background: 'transparent', - width: '100%', - p: 0, -}; - -export const StepperDotStyles = (): any => ({ - my: 0, - mx: 0.5, -}); - -export const TextFieldStyles = (): SxProps => ({ - mt: { md: 4, sm: 3 }, -}); - export const LinkStyles = { fontWeight: 600, textTransform: 'none',