fix(app): Fix spinner sizing on ODD and desktop (#15862)

There's a lot of places in the ODD that return either an InProgressModal
or a SimpleWizardBody. This used to be fine because the InProgressMOdal
had sizing, but now it doesn't so that it can be used inside other
components, so those places all have an in-progress modal collapsed on
top of the spinner icon.

To fix this, let's make a component that is explicitly "InProgressModal
designed to work alongside SimpleWizardBody", defined in
SimpleWizardBody. We can make sure it's the same by splittin SWB into a
container component and a contents component, and reusing the container.
The container is also where styleprops go.

Finally, take all the component that return (cond ? <InProgressModal />
:
<SimpleWizardBody>...</SimpleWizardBody) and make them use a
SimpleWizardInProgressBody instead of an InProgressModal. Since the
SimpleWizardInProgressBody uses the same sizing as the SWB, the result
will always be the correct size.

## Testing
- [x] On the ODD, change pipette and pipette calibration have the right
size spinners
- [x] On the ODD, change gripper and gripper calibration have the right
size spinners

app/src/molecules/InProgressModal/InProgressModal.stories.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { InProgressModal as InProgressModalComponent } from './'
+import { SimpleWizardInProgressBody } from '../SimpleWizardBody'
+
+const meta: Meta<typeof InProgressModalComponent> = {
+  title: 'App/Molecules/InProgressModal',
+  component: InProgressModalComponent,
+  argTypes: {
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    body: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+export default meta
+
+export type Story = StoryObj<typeof InProgressModalComponent>
+
+export const InProgressModal: Story = {
+  args: {
+    description: 'here is a description',
+    body: 'Here is the body of the whole thing',
+  },
+}
+
+export const InProgressModalSimpleWizard: Story = {
+  args: {
+    description: 'here is a description',
+    body: 'Here is the body of the whole thing',
+  },
+  render: args => <SimpleWizardInProgressBody {...args} />,
+}

app/src/molecules/InProgressModal/InProgressModal.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { css } from 'styled-components'
-import { useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
   COLORS,
@@ -13,7 +12,6 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { getIsOnDevice } from '../../redux/config'
 
 interface Props {
   //  optional override of the spinner
@@ -61,33 +59,35 @@ const MODAL_STYLE = css`
 `
 const SPINNER_STYLE = css`
   color: ${COLORS.grey60};
-  opacity: 100%;
+  width: 5.125rem;
+  height: 5.125rem;
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    color: ${COLORS.black90};
-    opacity: 70%;
+    width: 6.25rem;
+    height: 6.25rem;
+  }
+`
+
+const DESCRIPTION_CONTAINER_STYLE = css`
+  padding-x: 6.5625rem;
+  gap: ${SPACING.spacing8};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding-x: ${SPACING.spacing40};
+    gap: ${SPACING.spacing4};
   }
 `
 
 export function InProgressModal(props: Props): JSX.Element {
   const { alternativeSpinner, children, description, body } = props
-  const isOnDevice = useSelector(getIsOnDevice)
 
   return (
     <Flex css={MODAL_STYLE}>
       {alternativeSpinner ?? (
-        <Icon
-          name="ot-spinner"
-          aria-label="spinner"
-          size={isOnDevice ? '6.25rem' : '5.125rem'}
-          css={SPINNER_STYLE}
-          spin
-        />
+        <Icon name="ot-spinner" aria-label="spinner" css={SPINNER_STYLE} spin />
       )}
       <Flex
-        paddingX={isOnDevice ? SPACING.spacing40 : '6.5625rem'}
-        gridGap={isOnDevice ? SPACING.spacing4 : SPACING.spacing8}
         flexDirection={DIRECTION_COLUMN}
         alignItems={ALIGN_CENTER}
+        css={DESCRIPTION_CONTAINER_STYLE}
       >
         {description != null && (
           <LegacyStyledText css={DESCRIPTION_STYLE}>

app/src/molecules/InProgressModal/index.tsx

@@ -0,0 +1 @@
+export { InProgressModal } from './InProgressModal'

app/src/molecules/SimpleWizardBody/SimpleWizardBodyContainer.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { css } from 'styled-components'
+
+import {
+  Flex,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
+  RESPONSIVENESS,
+} from '@opentrons/components'
+import type { StyleProps } from '@opentrons/components'
+
+const WIZARD_CONTAINER_STYLE = css`
+  min-height: 394px;
+  flex-direction: ${DIRECTION_COLUMN};
+  justify-content: ${JUSTIFY_SPACE_BETWEEN};
+  height: 'auto';
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    height: 472px;
+  }
+`
+
+export interface SimpleWizardBodyContainerProps extends StyleProps {
+  children?: JSX.Element | JSX.Element[] | null
+}
+
+export function SimpleWizardBodyContainer({
+  children,
+  ...styleProps
+}: SimpleWizardBodyContainerProps): JSX.Element {
+  return (
+    <Flex css={WIZARD_CONTAINER_STYLE} {...styleProps}>
+      {children}
+    </Flex>
+  )
+}

app/src/molecules/SimpleWizardBody/SimpleWizardBodyContent.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react'
+import { useSelector } from 'react-redux'
+import { css } from 'styled-components'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
+  JUSTIFY_CENTER,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_FLEX_START,
+  JUSTIFY_SPACE_BETWEEN,
+  POSITION_ABSOLUTE,
+  RESPONSIVENESS,
+  SPACING,
+  LegacyStyledText,
+  TYPOGRAPHY,
+} from '@opentrons/components'
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import SuccessIcon from '../../assets/images/icon_success.png'
+import { getIsOnDevice } from '../../redux/config'
+
+import { Skeleton } from '../../atoms/Skeleton'
+import type { RobotType } from '@opentrons/shared-data'
+
+interface Props {
+  iconColor: string
+  header: string
+  isSuccess: boolean
+  children?: React.ReactNode
+  subHeader?: string | JSX.Element
+  isPending?: boolean
+  robotType?: RobotType
+  /**
+   *  this prop is to change justifyContent of OnDeviceDisplay buttons
+   *  TODO(jr, 8/9/23): this SHOULD be refactored so the
+   *  buttons' justifyContent is specified at the parent level
+   */
+  justifyContentForOddButton?: string
+}
+
+const BACKGROUND_SIZE = '47rem'
+
+const HEADER_STYLE = css`
+  ${TYPOGRAPHY.h1Default};
+  margin-top: ${SPACING.spacing24};
+  margin-bottom: ${SPACING.spacing8};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: ${SPACING.spacing40};
+  }
+`
+const SUBHEADER_STYLE = css`
+  ${TYPOGRAPHY.pRegular};
+  margin-left: 6.25rem;
+  margin-right: 6.25rem;
+  margin-bottom: ${SPACING.spacing32};
+  text-align: ${TYPOGRAPHY.textAlignCenter};
+  height: 1.75rem;
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    font-size: ${TYPOGRAPHY.fontSize28};
+    line-height: ${TYPOGRAPHY.lineHeight36};
+    margin-left: 4.5rem;
+    margin-right: 4.5rem;
+  }
+`
+
+const FLEX_SPACING_STYLE = css`
+  height: 1.75rem;
+  margin-bottom: ${SPACING.spacing32};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    height: 0rem;
+  }
+`
+
+export function SimpleWizardBodyContent(props: Props): JSX.Element {
+  const {
+    iconColor,
+    children,
+    header,
+    subHeader,
+    isSuccess,
+    isPending,
+    robotType = FLEX_ROBOT_TYPE,
+  } = props
+  const isOnDevice = useSelector(getIsOnDevice)
+
+  const BUTTON_STYLE = css`
+    width: 100%;
+    justify-content: ${JUSTIFY_FLEX_END};
+    padding-right: ${SPACING.spacing32};
+    padding-bottom: ${SPACING.spacing32};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      justify-content: ${props.justifyContentForOddButton ??
+      JUSTIFY_SPACE_BETWEEN};
+      padding-bottom: ${SPACING.spacing32};
+      padding-left: ${SPACING.spacing32};
+    }
+  `
+
+  const ICON_POSITION_STYLE = css`
+    justify-content: ${JUSTIFY_CENTER};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      justify-content: ${JUSTIFY_FLEX_START};
+      margin-top: ${isSuccess ? SPACING.spacing32 : '8.1875rem'};
+    }
+  `
+
+  return (
+    <>
+      <Flex
+        width="100%"
+        alignItems={ALIGN_CENTER}
+        css={ICON_POSITION_STYLE}
+        flexDirection={DIRECTION_COLUMN}
+        flex="1 0 auto"
+      >
+        {isPending ? (
+          <Flex
+            gridGap={SPACING.spacing24}
+            flexDirection={DIRECTION_COLUMN}
+            justifyContent={JUSTIFY_CENTER}
+          >
+            <Skeleton
+              width="6.25rem"
+              height="6.25rem"
+              backgroundSize={BACKGROUND_SIZE}
+            />
+            <Skeleton
+              width="18rem"
+              height="1.125rem"
+              backgroundSize={BACKGROUND_SIZE}
+            />
+          </Flex>
+        ) : (
+          <>
+            {isSuccess ? (
+              <img
+                width={robotType === FLEX_ROBOT_TYPE ? '170px' : '160px'}
+                height={robotType === FLEX_ROBOT_TYPE ? '141px' : '120px'}
+                src={SuccessIcon}
+                alt="Success Icon"
+              />
+            ) : (
+              <Icon
+                name="ot-alert"
+                size={isOnDevice ? '3.75rem' : '2.5rem'}
+                color={iconColor}
+                aria-label="ot-alert"
+              />
+            )}
+            <LegacyStyledText css={HEADER_STYLE}>{header}</LegacyStyledText>
+            {subHeader != null ? (
+              <LegacyStyledText css={SUBHEADER_STYLE}>
+                {subHeader}
+              </LegacyStyledText>
+            ) : (
+              <Flex aria-label="flex_spacing" css={FLEX_SPACING_STYLE} />
+            )}
+          </>
+        )}
+      </Flex>
+      <Flex
+        position={POSITION_ABSOLUTE}
+        bottom={0}
+        right={0}
+        css={BUTTON_STYLE}
+      >
+        {children}
+      </Flex>
+    </>
+  )
+}

app/src/molecules/SimpleWizardBody/SimpleWizardInProgressBody.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import type { StyleProps } from '@opentrons/components'
+import { InProgressModal } from '../InProgressModal/InProgressModal'
+import { SimpleWizardBodyContainer } from './SimpleWizardBodyContainer'
+
+export type SimpleWizardInProgressBodyProps = React.ComponentProps<
+  typeof InProgressModal
+> &
+  StyleProps
+
+export function SimpleWizardInProgressBody({
+  alternativeSpinner,
+  description,
+  body,
+  children,
+  ...styleProps
+}: SimpleWizardInProgressBodyProps): JSX.Element {
+  return (
+    <SimpleWizardBodyContainer {...styleProps}>
+      <InProgressModal
+        alternativeSpinner={alternativeSpinner}
+        description={description}
+        body={body}
+      >
+        {children}
+      </InProgressModal>
+    </SimpleWizardBodyContainer>
+  )
+}