App update modal background colors (#14501)

Closes RAUT-928 and RQA-2282
Opentrons · Feb 16, 2024 · e91b15a · e91b15a
1 parent 5c3d506
commit e91b15a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
diff --git a/app/src/molecules/BackgroundOverlay/index.tsx b/app/src/molecules/BackgroundOverlay/index.tsx
@@ -1,6 +1,15 @@
 import * as React from 'react'
+import { css } from 'styled-components'
+
 import { COLORS, Flex, POSITION_FIXED } from '@opentrons/components'
 
+const BACKGROUND_OVERLAY_STYLE = css`
+  position: ${POSITION_FIXED};
+  inset: 0;
+  z-index: 3;
+  background-color: ${COLORS.black90}${COLORS.opacity60HexCode};
+`
+
 export interface BackgroundOverlayProps
   extends React.ComponentProps<typeof Flex> {
   //  onClick handler so when you click anywhere in the overlay, the modal/menu closes
@@ -13,13 +22,7 @@ export function BackgroundOverlay(props: BackgroundOverlayProps): JSX.Element {
   return (
     <Flex
       aria-label="BackgroundOverlay"
-      position={POSITION_FIXED}
-      left="0"
-      right="0"
-      top="0"
-      bottom="0"
-      zIndex="3"
-      backgroundColor={COLORS.grey50}
+      css={BACKGROUND_OVERLAY_STYLE}
       onClick={onClick}
       {...flexProps}
     />

diff --git a/app/src/molecules/LegacyModal/LegacyModalShell.tsx b/app/src/molecules/LegacyModal/LegacyModalShell.tsx
@@ -84,10 +84,6 @@ const Overlay = styled.div`
   z-index: 1;
   background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
   cursor: default;
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    background-color: ${COLORS.grey50};
-  }
 `
 const ContentArea = styled.div<{ zIndex: string | number }>`
   display: flex;

diff --git a/app/src/molecules/LegacyModal/index.tsx b/app/src/molecules/LegacyModal/index.tsx
@@ -19,6 +19,9 @@ export interface LegacyModalProps extends StyleProps {
   footer?: React.ReactNode
 }
 
+/**
+ * For Desktop app use only.
+ */
 export const LegacyModal = (props: LegacyModalProps): JSX.Element => {
   const {
     type = 'info',

diff --git a/app/src/molecules/Modal/Modal.tsx b/app/src/molecules/Modal/Modal.tsx
@@ -24,6 +24,9 @@ interface ModalProps extends StyleProps {
   /** see ModalHeader component for more details */
   header?: ModalHeaderBaseProps
 }
+/**
+ * For ODD use only.
+ */
 export function Modal(props: ModalProps): JSX.Element {
   const {
     modalSize = 'medium',

diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { BORDERS, RESPONSIVENESS, SPACING } from '../ui-style-constants'
+import { BORDERS, SPACING } from '../ui-style-constants'
 import { COLORS } from '../helix-design-system'
 import { StyleProps, styleProps } from '../primitives'
 import {
@@ -78,13 +78,10 @@ const Overlay = styled.div`
   top: 0;
   bottom: 0;
   z-index: 1;
-  background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
+  background-color: ${COLORS.black90}${COLORS.opacity60HexCode};
   cursor: default;
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    background-color: ${COLORS.grey50};
-  }
 `
+
 const ContentArea = styled.div<{ zIndex: string | number }>`
   display: flex;
   position: ${POSITION_ABSOLUTE};