fix(app): modal tweaks (#12723)

* Center modals on screen [RAUT-432] * Fix spacing on run cancel modal [RAUT-432] * Fix duplicated commits [RAUT-432]
Opentrons · May 22, 2023 · c3f2240 · c3f2240
1 parent 4344a03
commit c3f2240
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 18 deletions.
diff --git a/app/src/molecules/Modal/OnDeviceDisplay/Modal.tsx b/app/src/molecules/Modal/OnDeviceDisplay/Modal.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import {
+  ALIGN_CENTER,
   BORDERS,
   COLORS,
   Flex,
   SPACING,
   DIRECTION_COLUMN,
   JUSTIFY_CENTER,
-  ALIGN_CENTER,
 } from '@opentrons/components'
 import { BackgroundOverlay } from '../../BackgroundOverlay'
 import { ModalHeader } from './ModalHeader'
@@ -51,8 +51,8 @@ export function Modal(props: ModalProps): JSX.Element {
         e.stopPropagation()
         onOutsideClick(e)
       }}
-      justifyContent={JUSTIFY_CENTER}
       alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_CENTER}
     >
       <Flex
         backgroundColor={isError ? COLORS.red2 : COLORS.white}

diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx
@@ -7,7 +7,6 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
-  TYPOGRAPHY,
   SPACING,
 } from '@opentrons/components'
 import {
@@ -83,23 +82,12 @@ export function ConfirmCancelRunModal({
       <Flex flexDirection={DIRECTION_COLUMN}>
         <Flex
           flexDirection={DIRECTION_COLUMN}
-          padding={SPACING.spacing32}
           gridGap={SPACING.spacing12}
+          paddingBottom={SPACING.spacing40}
+          paddingTop={`${isActiveRun ? SPACING.spacing32 : '0'}`}
         >
-          <StyledText
-            fontSize={TYPOGRAPHY.fontSize22}
-            lineHeight={TYPOGRAPHY.lineHeight28}
-            fontWeight={TYPOGRAPHY.fontWeightRegular}
-          >
-            {t('cancel_run_alert_info')}
-          </StyledText>
-          <StyledText
-            fontSize={TYPOGRAPHY.fontSize22}
-            lineHeight={TYPOGRAPHY.lineHeight28}
-            fontWeight={TYPOGRAPHY.fontWeightRegular}
-          >
-            {t('cancel_run_module_info')}
-          </StyledText>
+          <StyledText as="p">{t('cancel_run_alert_info')}</StyledText>
+          <StyledText as="p">{t('cancel_run_module_info')}</StyledText>
         </Flex>
         <Flex
           flexDirection={DIRECTION_ROW}