clean up BackgroundOverlay

Opentrons · Feb 15, 2024 · 242f5d1 · 242f5d1
1 parent 1959af1
commit 242f5d1
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/app/src/molecules/BackgroundOverlay/index.tsx b/app/src/molecules/BackgroundOverlay/index.tsx
@@ -1,5 +1,24 @@
 import * as React from 'react'
-import { COLORS, Flex, POSITION_FIXED } from '@opentrons/components'
+import { css } from 'styled-components'
+
+import {
+  COLORS,
+  Flex,
+  POSITION_FIXED,
+  RESPONSIVENESS,
+} from '@opentrons/components'
+
+const BACKGROUND_OVERLAY_STYLE = css`
+  position: ${POSITION_FIXED};
+  inset: 0;
+  z-index: 3;
+  aria-label: 'BackgroundOverlay';
+  background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    background-color: ${COLORS.black90}${COLORS.opacity60HexCode};
+  }
+`
 
 export interface BackgroundOverlayProps
   extends React.ComponentProps<typeof Flex> {
@@ -11,17 +30,6 @@ export function BackgroundOverlay(props: BackgroundOverlayProps): JSX.Element {
   const { onClick, ...flexProps } = props
 
   return (
-    <Flex
-      aria-label="BackgroundOverlay"
-      position={POSITION_FIXED}
-      left="0"
-      right="0"
-      top="0"
-      bottom="0"
-      zIndex="3"
-      backgroundColor={`${COLORS.black90}${COLORS.opacity60HexCode}`}
-      onClick={onClick}
-      {...flexProps}
-    />
+    <Flex css={BACKGROUND_OVERLAY_STYLE} onClick={onClick} {...flexProps} />
   )
 }