remove padding for this screen

Opentrons · Oct 24, 2024 · c238b38 · c238b38
1 parent 010f3dd
commit c238b38
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx
@@ -35,6 +35,8 @@ export interface ModalShellProps extends StyleProps {
   position?: Position
   /** Optional visible overlay */
   showOverlay?: boolean
+  /** Optional remove padding */
+  noPadding?: boolean
 }
 
 /**
@@ -58,6 +60,7 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
     zIndexOverlay = 1,
     position = 'center',
     showOverlay = true,
+    noPadding = false,
     ...styleProps
   } = props
 
@@ -71,7 +74,7 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
         if (onOutsideClick != null) onOutsideClick(e)
       }}
     >
-      <ContentArea zIndex={zIndex} position={position}>
+      <ContentArea zIndex={zIndex} position={position} noPadding={noPadding}>
         <ModalArea
           aria-label="ModalShell_ModalArea"
           isFullPage={fullPage}
@@ -102,7 +105,11 @@ const Overlay = styled.div<{ zIndex: string | number; showOverlay: boolean }>`
   cursor: ${CURSOR_DEFAULT};
 `
 
-const ContentArea = styled.div<{ zIndex: string | number; position: Position }>`
+const ContentArea = styled.div<{
+  zIndex: string | number
+  position: Position
+  noPadding: boolean
+}>`
   display: flex;
   position: ${POSITION_ABSOLUTE};
   align-items: ${({ position }) =>
@@ -116,7 +123,7 @@ const ContentArea = styled.div<{ zIndex: string | number; position: Position }>`
   width: 100%;
   height: 100%;
   z-index: ${({ zIndex }) => zIndex};
-  padding: ${SPACING.spacing16};
+  padding: ${({ noPadding }) => (noPadding ? 0 : SPACING.spacing16)};
 `
 
 const ModalArea = styled.div<

diff --git a/protocol-designer/src/organisms/DisabledScreen/index.tsx b/protocol-designer/src/organisms/DisabledScreen/index.tsx
@@ -22,6 +22,7 @@ export function DisabledScreen(): JSX.Element {
     <ModalShell
       backgroundColor={`${COLORS.black90}${COLORS.opacity40HexCode}`}
       overflow={OVERFLOW_HIDDEN}
+      noPadding
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}