Merge pull request #95 from PocketDerm/modal-global-fix

Modal global fix
curology · Apr 26, 2019 · 2400b7d · 2400b7d
2 parents 1313433 + a91da75
commit 2400b7d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/shared-components/modal/index.js b/src/shared-components/modal/index.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
+import { Global } from '@emotion/core';
 
 import CloseIcon from '../../svgs/icons/close-icon.svg';
 import keyPressMatch from '../../utils/keyPressMatch';
 import KEYCODES from '../../constants/keycodes';
 import {
-  ModalContainer,
   ModalOverlay,
   ModalBox,
   ModalCloseIcon,
@@ -90,12 +90,18 @@ class Modal extends React.Component {
 
   render() {
     const { isVisible } = this.state;
-    const {
-      isOpen, children, className, canBeClosed, 
-    } = this.props;
+    const { isOpen, children, className, canBeClosed } = this.props;
 
     return (
-      <ModalContainer>
+      <React.Fragment>
+        <Global
+          styles={{
+            '.ReactModalPortal': {
+              position: 'relative',
+              zIndex: 99999999,
+            },
+          }}
+        />
         <ReactModal
           className={`prevent-default ${className}`}
           contentLabel="Modal"
@@ -120,7 +126,7 @@ class Modal extends React.Component {
             </ModalBox>
           </ModalOverlay>
         </ReactModal>
-      </ModalContainer>
+      </React.Fragment>
     );
   }
 }

diff --git a/src/shared-components/modal/style.js b/src/shared-components/modal/style.js
@@ -3,13 +3,6 @@ import styled from '@emotion/styled';
 import Typography from '../typography';
 import { COLORS, MEDIA_QUERIES, SPACING } from '../../constants';
 
-export const ModalContainer = styled.div`
-  .ReactModalPortal {
-    position: relative;
-    z-index: 99999999;
-  }
-`;
-
 export const ModalOverlay = styled.div`
   -webkit-overflow-scrolling: touch;
   background-color: ${COLORS.overlay};
@@ -29,9 +22,8 @@ export const ModalOverlay = styled.div`
   }
 `;
 
-const determineScale = ({ isVisible }) => (
-  isVisible ? 'scale(1, 1)' : 'scale(0.95, 0.95)'
-);
+const determineScale = ({ isVisible }) =>
+  isVisible ? 'scale(1, 1)' : 'scale(0.95, 0.95)';
 
 export const ModalBox = styled.div`
   background-color: ${COLORS.white};
@@ -70,7 +62,7 @@ export const ContentContainer = styled.div`
 
   ${MEDIA_QUERIES.mdUp} {
     padding: ${({ tight }) =>
-    tight ? SPACING.large : `${SPACING.xlarge} 5rem`};
+      tight ? SPACING.large : `${SPACING.xlarge} 5rem`};
   }
 `;