feat(app): confirm pick up tip button style (#8968)

* feat(app): confirm pick up tip button style

closes #8961

* fix test

* address pr comment

* added borderRadius and overlayColor props to BaseModal

Co-authored-by: Sakib Hossain <[email protected]>

app/src/organisms/ProtocolSetup/LabwarePositionCheck/ConfirmPickUpTipModal.tsx

@@ -1,29 +1,72 @@
-import { AlertModal } from '@opentrons/components'
 import * as React from 'react'
-import styles from './styles.css'
+import {
+ BaseModal,
+ BORDER_RADIUS_1,
+ C_BLUE,
+ C_WHITE,
+ DIRECTION_COLUMN,
+ DIRECTION_ROW,
+ Flex,
+ FONT_WEIGHT_SEMIBOLD,
+ JUSTIFY_FLEX_END,
+ NewPrimaryBtn,
+ NewSecondaryBtn,
+ OVERLAY_BLACK_90,
+ SPACING_1,
+ SPACING_3,
+ SPACING_5,
+ Text,
+ TEXT_TRANSFORM_UPPERCASE,
+} from '@opentrons/components'
+import { useTranslation } from 'react-i18next'
 interface Props {
- title: string
- confirmText: string
- denyText: string
  onConfirm: () => void
  onDeny: () => void
+ confirmText: string
 }
 
 export const ConfirmPickUpTipModal = (props: Props): JSX.Element => {
+ const { t } = useTranslation(['labware_position_check'])
+
  return (
- <AlertModal
- heading={props.title}
- buttons={[
- { children: props.denyText, onClick: props.onDeny },
- {
- children: props.confirmText,
- onClick: props.onConfirm,
- className: styles.confirm_pickup_tip_button,
- },
- ]}
- alertOverlay
- >
- {null}
- </AlertModal>
+ <BaseModal borderRadius={BORDER_RADIUS_1} overlayColor={OVERLAY_BLACK_90}>
+ <Flex flexDirection={DIRECTION_COLUMN}>
+ <Text
+ as={'h4'}
+ textTransform={TEXT_TRANSFORM_UPPERCASE}
+ fontWeight={FONT_WEIGHT_SEMIBOLD}
+ marginBottom={SPACING_3}
+ marginLeft={SPACING_1}
+ >
+ {t('confirm_pick_up_tip_modal_title')}
+ </Text>
+ <Flex
+ flexDirection={DIRECTION_ROW}
+ justifyContent={JUSTIFY_FLEX_END}
+ paddingTop={SPACING_5}
+ >
+ <Flex paddingRight={SPACING_3}>
+ <NewSecondaryBtn
+ onClick={props.onDeny}
+ width={'auto'}
+ backgroundColor={C_WHITE}
+ color={C_BLUE}
+ id={'ConfirmPickUpTipModal_Deny'}
+ >
+ {t('confirm_pick_up_tip_modal_try_again_text')}
+ </NewSecondaryBtn>
+ </Flex>
+ <NewPrimaryBtn
+ onClick={props.onConfirm}
+ width={'auto'}
+ backgroundColor={C_BLUE}
+ color={C_WHITE}
+ id={'ConfirmPickUpTipModal_Deny'}
+ >
+ {props.confirmText}
+ </NewPrimaryBtn>
+ </Flex>
+ </Flex>
+ </BaseModal>
  )
 }

app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/ConfirmPickUpTipModal.test.tsx

@@ -1,62 +1,43 @@
 import * as React from 'react'
-import { when, resetAllWhenMocks } from 'jest-when'
-import { render } from '@testing-library/react'
-import { AlertModal, partialComponentPropsMatcher } from '@opentrons/components'
+import { resetAllWhenMocks } from 'jest-when'
+import { BaseModal, renderWithProviders } from '@opentrons/components'
 import { ConfirmPickUpTipModal } from '../ConfirmPickUpTipModal'
+import { i18n } from '../../../../i18n'
 
 jest.mock('@opentrons/components', () => {
  const actualComponents = jest.requireActual('@opentrons/components')
  return {
  ...actualComponents,
- AlertModal: jest.fn(() => <div></div>),
+ BaseModal: jest.fn(() => <div></div>),
  }
 })
 
-const mockAlertModal = AlertModal as jest.MockedFunction<typeof AlertModal>
+const mockBaseModal = BaseModal as jest.MockedFunction<typeof BaseModal>
+
+const render = (props: React.ComponentProps<typeof ConfirmPickUpTipModal>) => {
+ return renderWithProviders(<ConfirmPickUpTipModal {...props} />, {
+ i18nInstance: i18n,
+ })[0]
+}
 
 describe('ConfirmPickUpTipModal', () => {
- let title: string
- let denyText: string
- let confirmText: string
- let onDeny: () => void
- let onConfirm: () => void
+ let props: React.ComponentProps<typeof ConfirmPickUpTipModal>
+
  beforeEach(() => {
- title = 'mock title'
- denyText = 'mock deny text'
- confirmText = 'mock confirm text'
- onDeny = jest.fn()
- onConfirm = jest.fn()
- when(mockAlertModal)
- .calledWith(
- partialComponentPropsMatcher({
- heading: title,
- buttons: [
- { children: denyText, onClick: onDeny },
- {
- children: confirmText,
- onClick: onConfirm,
- className: expect.anything(),
- },
- ],
- })
- )
- .mockReturnValue(<div>mock alert item</div>)
+ props = {
+ onConfirm: jest.fn(),
+ onDeny: jest.fn(),
+ confirmText: 'confirm text',
+ }
+ mockBaseModal.mockReturnValue(<div>mock alert item</div>)
  })
  afterEach(() => {
  resetAllWhenMocks()
  jest.restoreAllMocks()
  })
  it('should render an alert modal with the correct props', () => {
  // mockAlertModal.mockImplementation(args => console.log(args))
- const { getByText } = render(
- <ConfirmPickUpTipModal
- title={title}
- denyText={denyText}
- confirmText={confirmText}
- onDeny={onDeny}
- onConfirm={onConfirm}
- />
- )
+ const { getByText } = render(props)
  getByText('mock alert item')
  })
 })

app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx

@@ -125,8 +125,6 @@ export const LabwarePositionCheck = (
  } else if (showPickUpTipConfirmationModal) {
  modalContent = (
  <ConfirmPickUpTipModal
- title={t('confirm_pick_up_tip_modal_title')}
- denyText={t('confirm_pick_up_tip_modal_try_again_text')}
  confirmText={ctaText}
  onConfirm={proceed}
  onDeny={onUnsuccessfulPickUpTip}