diff --git a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx b/app/src/molecules/LegacyModal/LegacyModalHeader.tsx index 725df7c0c4b..8c884deef80 100644 --- a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx +++ b/app/src/molecules/LegacyModal/LegacyModalHeader.tsx @@ -8,8 +8,8 @@ import { Icon, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, - SPACING, LegacyStyledText, + SPACING, TYPOGRAPHY, } from '@opentrons/components' @@ -19,6 +19,8 @@ import type { IconProps } from '@opentrons/components' export interface LegacyModalHeaderProps { onClose?: React.MouseEventHandler title: React.ReactNode + titleElement1?: JSX.Element + titleElement2?: JSX.Element backgroundColor?: string color?: string icon?: IconProps @@ -44,7 +46,16 @@ const closeIconStyles = css` export const LegacyModalHeader = ( props: LegacyModalHeaderProps ): JSX.Element => { - const { icon, onClose, title, backgroundColor, color, closeButton } = props + const { + icon, + onClose, + title, + titleElement1, + titleElement2, + backgroundColor, + color, + closeButton, + } = props return ( <> - + {icon != null && } + {titleElement1} + {titleElement2} + {/* TODO (nd: 08/07/2024) Convert to StyledText once designs are resolved */} { childrenPadding = `${SPACING.spacing16} ${SPACING.spacing24} ${SPACING.spacing24}`, children, footer, + titleElement1, + titleElement2, ...styleProps } = props @@ -58,6 +62,8 @@ export const LegacyModal = (props: LegacyModalProps): JSX.Element => { } childrenPadding={0} + marginLeft="0" >