From b61ef1d0822496dfb052a34c39df342e87899110 Mon Sep 17 00:00:00 2001
From: Jethary Rader <66035149+jerader@users.noreply.github.com>
Date: Tue, 7 Dec 2021 13:57:31 -0700
Subject: [PATCH] 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 <sakibh97@gmail.com>
---
 .../ConfirmPickUpTipModal.tsx                 | 81 ++++++++++++++-----
 .../__tests__/ConfirmPickUpTipModal.test.tsx  | 59 +++++---------
 .../LabwarePositionCheck/index.tsx            |  2 -
 .../LabwarePositionCheck/styles.css           |  3 -
 4 files changed, 82 insertions(+), 63 deletions(-)
 delete mode 100644 app/src/organisms/ProtocolSetup/LabwarePositionCheck/styles.css

diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/ConfirmPickUpTipModal.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/ConfirmPickUpTipModal.tsx
index 63312248d9f..d7f5bb0a639 100644
--- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/ConfirmPickUpTipModal.tsx
+++ b/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>
   )
 }
diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/ConfirmPickUpTipModal.test.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/ConfirmPickUpTipModal.test.tsx
index f1a45744917..bbc0cad7e06 100644
--- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/ConfirmPickUpTipModal.test.tsx
+++ b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/__tests__/ConfirmPickUpTipModal.test.tsx
@@ -1,46 +1,35 @@
 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()
@@ -48,15 +37,7 @@ describe('ConfirmPickUpTipModal', () => {
   })
   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')
   })
 })
diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx
index 27332df2b3f..351903ce374 100644
--- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/index.tsx
+++ b/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}
diff --git a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/styles.css b/app/src/organisms/ProtocolSetup/LabwarePositionCheck/styles.css
deleted file mode 100644
index 21c204f7496..00000000000
--- a/app/src/organisms/ProtocolSetup/LabwarePositionCheck/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.confirm_pickup_tip_button {
-  width: auto;
-}