From f9b34ebd94f9c2fbb23f553856e1db85dd6c524a Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sat, 19 Jan 2019 13:26:13 -0500
Subject: [PATCH] Moving modal styles to CSS

---
 gatsby-browser.js      | 20 +++++---------------
 src/globals.module.css | 23 +++++++++++++++++++++++
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/gatsby-browser.js b/gatsby-browser.js
index 662ad55..a49eecc 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -7,24 +7,14 @@ import i18n from 'i18n';
 import Layout from 'components/Layout';
 
 import 'site.css';
+import style from 'globals.module.css';
 
 Modal.setAppElement('#___gatsby');
 
-Modal.defaultStyles.overlay = {
-  ...Modal.defaultStyles.overlay,
-  backgroundColor: 'rgba(0, 0, 0, 0.25)'
-};
-Modal.defaultStyles.content = {
-  ...Modal.defaultStyles.content,
-  background: 'transparent',
-  border: '0 solid',
-  borderRadius: '0',
-  overflow: null,
-  padding: '2rem',
-  top: '7rem',
-  bottom: '7rem',
-  left: '2rem',
-  right: '2rem'
+Modal.defaultProps = {
+  ...Modal.defaultProps,
+  className: style.modal,
+  overlayClassName: style.modalOverlay
 };
 
 export const onClientEntry = () => {
diff --git a/src/globals.module.css b/src/globals.module.css
index 38bf9ab..99598fd 100644
--- a/src/globals.module.css
+++ b/src/globals.module.css
@@ -134,3 +134,26 @@
     border-right: 0.1rem solid color(var(--color-black) alpha(0.2));
   }
 }
+
+.modal {
+  position: absolute;
+  top: 9rem;
+  bottom: 9rem;
+  left: 4rem;
+  right: 4rem;
+  outline: none;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}
+
+.modalOverlay {
+  background-color: rgba(0, 0, 0, 0.25);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}