Moving modal styles to CSS

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 = () => {

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;
+}