From 5d47a9cf179cb8bf0180994ec588dd93657eb741 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <eric.wagoner@iinteractive.com>
Date: Wed, 28 Jun 2023 11:16:56 -0400
Subject: [PATCH] fix(app): DQA for pipette detach flow [RAUT-420] (#12974)

* Add ODD round corners to LegacyModal and update stories that used it [RAUT-420]

* Update spacing on GenericWizardTile and maximize animation size [RAUT-420]
---
 .../GenericWizardTile/GenericWizardTile.stories.tsx  |  6 +++---
 app/src/molecules/GenericWizardTile/index.tsx        | 12 ++++++------
 app/src/molecules/LegacyModal/LegacyModalShell.tsx   |  3 +++
 .../SimpleWizardBody/SimpleWizardBody.stories.tsx    |  6 +++---
 app/src/organisms/PipetteWizardFlows/utils.tsx       |  4 ++--
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx b/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx
index 2958f811f86..7a40c1d191a 100644
--- a/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx
+++ b/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx
@@ -7,7 +7,7 @@ import {
 } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
 import { Skeleton } from '../../atoms/Skeleton'
-import { ModalShell } from '../Modal'
+import { LegacyModalShell } from '../LegacyModal'
 import { WizardHeader } from '../WizardHeader'
 import { GenericWizardTile } from './index'
 
@@ -21,10 +21,10 @@ export default {
 const Template: Story<
   React.ComponentProps<typeof GenericWizardTile>
 > = args => (
-  <ModalShell>
+  <LegacyModalShell>
     <WizardHeader currentStep={3} totalSteps={4} title="Example Title" />
     <GenericWizardTile {...args} />
-  </ModalShell>
+  </LegacyModalShell>
 )
 const body = (
   <StyledText as="p">
diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx
index 340c4c6d255..be1b67bbb39 100644
--- a/app/src/molecules/GenericWizardTile/index.tsx
+++ b/app/src/molecules/GenericWizardTile/index.tsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
+  ALIGN_CENTER,
   DIRECTION_COLUMN,
   Flex,
   SPACING,
@@ -11,7 +12,6 @@ import {
   TYPOGRAPHY,
   COLORS,
   Btn,
-  ALIGN_FLEX_END,
   JUSTIFY_FLEX_END,
   JUSTIFY_START,
   JUSTIFY_CENTER,
@@ -64,7 +64,7 @@ const TILE_CONTAINER_STYLE = css`
   padding: ${SPACING.spacing32};
   height: 24.625rem;
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    height: 30rem;
+    height: 29.5rem;
   }
 `
 export interface GenericWizardTileProps {
@@ -114,20 +114,20 @@ export function GenericWizardTile(props: GenericWizardTileProps): JSX.Element {
 
   return (
     <Flex css={TILE_CONTAINER_STYLE}>
-      <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing40}>
+      <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing24}>
         <Flex
           flexDirection={DIRECTION_COLUMN}
           flex="1"
-          gridGap={SPACING.spacing16}
+          gridGap={SPACING.spacing8}
         >
           {typeof header === 'string' ? <Title>{header}</Title> : header}
-          {bodyText}
+          <StyledText as="p">{bodyText}</StyledText>
         </Flex>
         <Flex flex="1" justifyContent={JUSTIFY_CENTER}>
           {rightHandBody}
         </Flex>
       </Flex>
-      <Flex justifyContent={buttonPositioning} alignItems={ALIGN_FLEX_END}>
+      <Flex justifyContent={buttonPositioning} alignItems={ALIGN_CENTER}>
         {back != null ? (
           <Btn onClick={back} disabled={backIsDisabled} aria-label="back">
             <StyledText
diff --git a/app/src/molecules/LegacyModal/LegacyModalShell.tsx b/app/src/molecules/LegacyModal/LegacyModalShell.tsx
index 95be9442273..9a6101554ee 100644
--- a/app/src/molecules/LegacyModal/LegacyModalShell.tsx
+++ b/app/src/molecules/LegacyModal/LegacyModalShell.tsx
@@ -114,6 +114,9 @@ const ModalArea = styled.div<
   box-shadow: ${BORDERS.smallDropShadow};
   height: ${({ isFullPage }) => (isFullPage ? '100%' : 'auto')};
   background-color: ${COLORS.white};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadiusSize4};
+  }
   ${styleProps};
 `
 
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx
index 7518c5f270c..5670b0ebb1e 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { COLORS, PrimaryButton } from '@opentrons/components'
-import { ModalShell } from '../Modal'
+import { LegacyModalShell } from '../LegacyModal'
 import { WizardHeader } from '../WizardHeader'
 import { SimpleWizardBody } from './index'
 
@@ -12,10 +12,10 @@ export default {
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof SimpleWizardBody>> = args => (
-  <ModalShell>
+  <LegacyModalShell>
     <WizardHeader currentStep={3} totalSteps={4} title="Attach a pipette" />
     <SimpleWizardBody {...args} />
-  </ModalShell>
+  </LegacyModalShell>
 )
 
 export const AlertIcon = Template.bind({})
diff --git a/app/src/organisms/PipetteWizardFlows/utils.tsx b/app/src/organisms/PipetteWizardFlows/utils.tsx
index c6d70c46958..28a20556652 100644
--- a/app/src/organisms/PipetteWizardFlows/utils.tsx
+++ b/app/src/organisms/PipetteWizardFlows/utils.tsx
@@ -75,8 +75,8 @@ export function getPipetteAnimations(
     <video
       css={css`
         padding-top: ${SPACING.spacing4};
-        max-width: 100%;
-        max-height: ${section === SECTIONS.ATTACH_PROBE ||
+        width: 100%;
+        min-height: ${section === SECTIONS.ATTACH_PROBE ||
         section === SECTIONS.DETACH_PROBE
           ? `20rem`
           : `12rem`};