PR review updates #1

Opentrons · Jul 27, 2022 · 03f9a30 · 03f9a30
1 parent 70bafc5
commit 03f9a30
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 43 deletions.
diff --git a/app/src/atoms/Modal/ModalHeader.tsx b/app/src/atoms/Modal/ModalHeader.tsx
@@ -8,6 +8,7 @@ import {
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
+  JUSTIFY_CENTER,
 } from '@opentrons/components'
 
 import { StyledText } from '../text'
@@ -23,9 +24,9 @@ export interface ModalHeaderProps {
 
 const closeIconStyles = css`
   display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 14px;
+  justify-content: ${JUSTIFY_CENTER};
+  align-items: ${ALIGN_CENTER};
+  border-radius: 0.875rem;
   width: ${SPACING.spacingL};
   height: ${SPACING.spacingL};
   &:hover {
@@ -64,7 +65,7 @@ export const ModalHeader = (props: ModalHeaderProps): JSX.Element => {
                 }`}
               >
                 <Icon
-                  name={'close'}
+                  name="close"
                   width={SPACING.spacing5}
                   height={SPACING.spacing5}
                 />

diff --git a/app/src/atoms/Modal/index.tsx b/app/src/atoms/Modal/index.tsx
@@ -3,7 +3,6 @@ import { css } from 'styled-components'
 import {
   Btn,
   Icon,
-  Box,
   BaseModal,
   BaseModalProps,
   TYPOGRAPHY,
@@ -15,11 +14,8 @@ import {
   BORDERS,
 } from '@opentrons/components'
 
-import { useFeatureFlag } from '../../redux/config'
 import { StyledText } from '../text'
 import { Divider } from '../structure'
-import { ModalShell } from './ModalShell'
-import { ModalHeader } from './ModalHeader'
 import type { IconProps } from '@opentrons/components'
 
 type ModalType = 'info' | 'warning' | 'error'
@@ -61,7 +57,6 @@ export const Modal = (props: ModalProps): JSX.Element => {
     children,
     maxHeight,
   } = props
-  const liquidSetupEnabled = useFeatureFlag('enableLiquidSetup')
   const defaultHeader =
     title != null ? (
       <>
@@ -103,41 +98,8 @@ export const Modal = (props: ModalProps): JSX.Element => {
         <Divider width="100%" marginY="0" />
       </>
     ) : null
-  const modalHeader = (
-    <ModalHeader
-      onClose={onClose}
-      title={title}
-      icon={
-        ['error', 'warning'].includes(type)
-          ? {
-              name: 'ot-alert',
-              color: type === 'error' ? COLORS.error : COLORS.warning,
-              size: SPACING.spacingM,
-              marginRight: SPACING.spacing3,
-            }
-          : undefined
-      }
-    />
-  )
 
-  return liquidSetupEnabled ? (
-    <ModalShell
-      width="31.25rem"
-      header={modalHeader}
-      onOutsideClick={closeOnOutsideClick ? onClose : undefined}
-      // center within viewport aside from nav
-      marginLeft="7.125rem"
-      {...props}
-    >
-      <Box
-        paddingTop={SPACING.spacing4}
-        paddingBottom={SPACING.spacing5}
-        paddingX={SPACING.spacing5}
-      >
-        {children}
-      </Box>
-    </ModalShell>
-  ) : (
+  return (
     <BaseModal
       width={props.width ? props.width : '31.25rem'}
       noHeaderStyles