refactor(app): are you sure you want to cancel modal on desktop app

app/src/atoms/buttons/RadioButton.tsx

@@ -36,23 +36,29 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   const isLarge = radioButtonType === 'large'
 
   const SettingButton = styled.input`
-    display: none;
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      display: none;
+    }
   `
 
   const AVAILABLE_BUTTON_STYLE = css`
-    background: ${COLORS.blue35};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      background: ${COLORS.blue35};
 
-    &:active {
-      background-color: ${COLORS.blue40};
+      &:active {
+        background-color: ${COLORS.blue40};
+      }
     }
   `
 
   const SELECTED_BUTTON_STYLE = css`
-    background: ${COLORS.blue50};
-    color: ${COLORS.white};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      background: ${COLORS.blue50};
+      color: ${COLORS.white};
 
-    &:active {
-      background-color: ${COLORS.blue60};
+      &:active {
+        background-color: ${COLORS.blue60};
+      }
     }
   `
 
@@ -65,16 +71,19 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   // TODO: (ew, 2023-04-21): button is not tabbable, so focus state
   // is not possible on ODD. It's testable in storybook but not in real life.
   const SettingButtonLabel = styled.label`
-    border-radius: ${BORDERS.borderRadius16};
-    cursor: pointer;
-    padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
-    width: 100%;
+    padding: ${SPACING.spacing4};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      border-radius: ${BORDERS.borderRadius16};
+      cursor: pointer;
+      padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
+      width: 100%;
 
-    ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-    ${disabled && DISABLED_BUTTON_STYLE}
+      ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
+      ${disabled && DISABLED_BUTTON_STYLE}
 
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      cursor: default;
+        cursor: default;
+      }
     }
   `
 
@@ -90,11 +99,8 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
       />
       <SettingButtonLabel role="label" htmlFor={buttonLabel}>
         <LegacyStyledText
-          fontSize={isLarge ? TYPOGRAPHY.fontSize28 : TYPOGRAPHY.fontSize22}
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          lineHeight={
-            isLarge ? TYPOGRAPHY.lineHeight36 : TYPOGRAPHY.lineHeight28
-          }
+          oddStyle={isLarge ? 'level4HeaderRegular' : 'bodyTextRegular'}
+          desktopStyle="bodyDefaultRegular"
         >
           {buttonLabel}
         </LegacyStyledText>

app/src/atoms/buttons/SmallButton.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { useSelector } from 'react-redux'
+
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -15,6 +17,7 @@ import {
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
 import type { IconName, StyleProps } from '@opentrons/components'
+import { getIsOnDevice } from '../../redux/config'
 
 export type SmallButtonTypes =
   | 'alert'
@@ -50,6 +53,8 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
     ...buttonProps
   } = props
 
+  const isOnDevice = useSelector(getIsOnDevice)
+
   const SMALL_BUTTON_PROPS_BY_TYPE: Record<
     SmallButtonTypes,
     {
@@ -148,6 +153,8 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
     }
   `
 
+  const TEXT_SIZE = isOnDevice ? '1.375rem' : '0.875rem'
+
   return (
     <Btn
       css={SMALL_BUTTON_STYLE}
@@ -181,8 +188,10 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
         ) : null}
 
         <LegacyStyledText
-          fontSize="1.375rem"
-          lineHeight={TYPOGRAPHY.lineHeight28}
+          fontSize={TEXT_SIZE}
+          lineHeight={
+            isOnDevice ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
+          }
           fontWeight={TYPOGRAPHY.fontWeightSemiBold}
         >
           {buttonText}

app/src/molecules/InterventionModal/index.tsx

@@ -139,6 +139,7 @@ export function InterventionModal({
   const isOnDevice = useSelector(getIsOnDevice)
   const modalStyle = isOnDevice ? MODAL_ODD_STYLE : MODAL_DESKTOP_STYLE
   const headerStyle = isOnDevice ? BASE_HEADER_STYLE : DESKTOP_HEADER_STYLE
+  const titleSpacing = isOnDevice ? SPACING.spacing12 : SPACING.spacing4
 
   return (
     <Flex {...WRAPPER_STYLE}>
@@ -154,14 +155,26 @@ export function InterventionModal({
             {...headerStyle}
             backgroundColor={headerColor}
             justifyContent={headerJustifyContent}
-            onClick={iconHeadingOnClick}
           >
             {titleHeading}
-            <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing12}>
+            <Flex
+              alignItems={ALIGN_CENTER}
+              gridGap={titleSpacing}
+              onClick={iconHeadingOnClick}
+            >
               {iconName != null ? (
-                <Icon name={iconName} size={SPACING.spacing32} />
+                isOnDevice ? (
+                  <Icon name={iconName} size={SPACING.spacing32} />
+                ) : (
+                  <Icon
+                    width={16}
+                    height={16}
+                    name={iconName}
+                    size={SPACING.spacing32}
+                  />
+                )
               ) : null}
-              {iconHeading != null ? iconHeading : null}
+              {iconHeading ?? null}
             </Flex>
           </Flex>
           {children}

app/src/organisms/ErrorRecoveryFlows/ErrorRecoveryWizard.tsx

@@ -93,7 +93,8 @@ export function ErrorRecoveryComponent(
     const titleText = props.hasLaunchedRecovery
       ? t('recovery_mode')
       : t('cancel_run')
-    return <LegacyStyledText as="h4Bold">{titleText}</LegacyStyledText>
+    // change this to default typography
+    return <LegacyStyledText as={'h4Bold'}>{titleText}</LegacyStyledText>
   }
 
   const buildIconHeading = (): JSX.Element => (

app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
@@ -9,10 +10,12 @@ import {
   Icon,
   SPACING,
   LegacyStyledText,
+  RESPONSIVENESS,
 } from '@opentrons/components'
 
 import { RECOVERY_MAP } from '../constants'
 import { RecoveryFooterButtons, RecoveryContentWrapper } from '../shared'
+
 import { SelectRecoveryOption } from './SelectRecoveryOption'
 
 import type { RecoveryContentProps } from '../types'
@@ -65,11 +68,11 @@ function CancelRunConfirmation({
         alignItems={ALIGN_CENTER}
         gridGap={SPACING.spacing24}
         height="100%"
-        width="848px"
+        css={FLEX_WIDTH}
       >
         <Icon
           name="ot-alert"
-          size="3.75rem"
+          css={ICON_SIZE}
           marginTop={SPACING.spacing24}
           color={COLORS.red50}
         />
@@ -140,3 +143,19 @@ export function useOnCancelRun({
 
   return { showBtnLoadingState, handleCancelRunClick }
 }
+
+const FLEX_WIDTH = css`
+  width: 666px;
+  @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+    width: 848px;
+  }
+`
+
+const ICON_SIZE = css`
+  width: 2.5rem;
+  height: 2.5rem;
+  @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+    width: 3.75rem;
+    height: 3.75rem;
+  }
+`

app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx

@@ -49,7 +49,7 @@ export function ErrorDetailsModal(
   if (props.isOnDevice) {
     return <ErrorDetailsModalODD {...props} />
   } else {
-    return null
+    return <ErrorDetailsModalDesktop {...props} />
   }
 }
 
@@ -102,6 +102,53 @@ export function ErrorDetailsModalODD(
   )
 }
 
+export function ErrorDetailsModalDesktop(
+  props: ErrorDetailsModalProps
+): JSX.Element {
+  const { failedCommand, toggleModal, isOnDevice } = props
+  const errorKind = getErrorKind(failedCommand)
+  const errorName = useErrorName(errorKind)
+
+  const getIsOverpressureErrorKind = (): boolean => {
+    switch (errorKind) {
+      case ERROR_KINDS.OVERPRESSURE_PREPARE_TO_ASPIRATE:
+      case ERROR_KINDS.OVERPRESSURE_WHILE_ASPIRATING:
+      case ERROR_KINDS.OVERPRESSURE_WHILE_DISPENSING:
+        return true
+      default:
+        return false
+    }
+  }
+
+  const modalHeader: ModalHeaderBaseProps = {
+    title: errorName,
+    hasExitIcon: true,
+  }
+
+  return createPortal(
+    <Modal
+      header={modalHeader}
+      onOutsideClick={toggleModal}
+      // gridGap={SPACING.spacing32}
+    >
+      <Flex gridGap={SPACING.spacing24} flexDirection={DIRECTION_COLUMN}>
+        {getIsOverpressureErrorKind() ? (
+          <OverpressureBanner isOnDevice={isOnDevice} />
+        ) : null}
+        <Flex
+          gridGap={SPACING.spacing16}
+          backgroundColor={COLORS.grey35}
+          borderRadius={BORDERS.borderRadius8}
+          padding={`${SPACING.spacing16} ${SPACING.spacing20}`}
+        >
+          <StepInfo {...props} textStyle="label" />
+        </Flex>
+      </Flex>
+    </Modal>,
+    getTopPortalEl()
+  )
+}
+
 export function OverpressureBanner(props: {
   isOnDevice: boolean
 }): JSX.Element | null {

app/src/organisms/ErrorRecoveryFlows/shared/RecoveryContentWrapper.tsx

@@ -35,6 +35,23 @@ export function RecoveryContentWrapper({
   )
 }
 
+export function RecoverySingleColumnContentDesktop({
+  children,
+  ...styleProps
+}: SingleColumnContentWrapperProps): JSX.Element {
+  return (
+    <Flex
+      padding={SPACING.spacing32}
+      gridGap={SPACING.spacing24}
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      {...styleProps}
+    >
+      {children}
+    </Flex>
+  )
+}
+
 const STYLE = css`
   gap: ${SPACING.spacing24};
   width: 100%;

components/src/atoms/StyledText/LegacyStyledText.tsx

@@ -29,6 +29,7 @@ const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
     }
   `,
   h4: css`
+    ${TYPOGRAPHY.level4DesktopHeaderRegular}
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       ${TYPOGRAPHY.level4HeaderRegular};
     }
@@ -58,7 +59,12 @@ const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
       ${TYPOGRAPHY.level3HeaderSemiBold}
     }
   `,
-  h4SemiBold: TYPOGRAPHY.level4HeaderSemiBold,
+  h4SemiBold: css`
+    ${TYPOGRAPHY.level4HeaderDesktopSemiBold}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level4HeaderSemiBold},
+    }
+  `,
   h6SemiBold: TYPOGRAPHY.h6SemiBold,
   pSemiBold: css`
     ${TYPOGRAPHY.pSemiBold}
@@ -74,8 +80,18 @@ const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
     }
   `,
   h2Bold: TYPOGRAPHY.level2HeaderBold,
-  h3Bold: TYPOGRAPHY.level3HeaderBold,
-  h4Bold: TYPOGRAPHY.level4HeaderBold,
+  h3Bold: css`
+    ${TYPOGRAPHY.levelDesktop3HeaderBold}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level3HeaderBold}
+    }
+  `,
+  h4Bold: css`
+    ${TYPOGRAPHY.level4DesketopHeaderBold}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level4HeaderBold}
+    }
+  `,
   pBold: TYPOGRAPHY.bodyTextBold,
   labelBold: TYPOGRAPHY.smallBodyTextBold,
 }