From 9181af6371948b19eb4edcdcbad0c9f174bf18cf Mon Sep 17 00:00:00 2001
From: Elizabeth Kelen <erskelen@gmail.com>
Date: Mon, 9 Nov 2020 17:22:44 -0500
Subject: [PATCH] refactor: restore modal bg color and give modal elements
 better names

Signed-off-by: Elizabeth Kelen <erskelen@gmail.com>
---
 web/src/assets/modal-snippets.module.css           |  8 ++++----
 .../components/FilterModal/FilterModal.module.css  |  1 +
 web/src/ui/components/MessageModal/MessageModal.js |  4 ++--
 .../MessageModal/MessageModal.module.css           | 14 +++++++-------
 web/src/ui/components/Modal/Modal.js               |  8 ++++----
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/web/src/assets/modal-snippets.module.css b/web/src/assets/modal-snippets.module.css
index 4efb0e91..59bf7ce6 100644
--- a/web/src/assets/modal-snippets.module.css
+++ b/web/src/assets/modal-snippets.module.css
@@ -16,7 +16,7 @@
     overflow: hidden;
 }
 
-.modalContainer {
+.modalOverlay {
     width: 120vw;
     /* border: 1px solid green; */
 
@@ -33,7 +33,7 @@
     margin-bottom: 100px;
 }
 
-.modalGuts {
+.modalContainer {
     composes: flexCol aiCenter;
     position: relative;
     margin: 1.75rem auto;
@@ -46,14 +46,14 @@
 
     max-width: 80vw;
     outline: 0;
-    background-color: var(--bg-block);
+    background-color: var(--bg-page);
 
     box-shadow: -3rem 0.5rem 20px rgba(14, 16, 45, 0.2),
         3rem 0.5rem 20px rgba(14, 16, 45, 0.2);
 }
 
 @media (min-width: tablet) {
-    .modalGuts {
+    .modalContainer {
         box-shadow: none;
     }
 }
diff --git a/web/src/ui/components/FilterModal/FilterModal.module.css b/web/src/ui/components/FilterModal/FilterModal.module.css
index 45beecab..e65ccd0a 100644
--- a/web/src/ui/components/FilterModal/FilterModal.module.css
+++ b/web/src/ui/components/FilterModal/FilterModal.module.css
@@ -1,4 +1,5 @@
 @value utils: "../../../assets/layout-utils.module.css";
+@value modalContainer from "../../../assets/modal-snippets.module.css";
 @value space_xs, space_sm, space_md, space_lg, space_xl, space_xxl from utils;
 @value flexCol, childrenMrMd, childrenMbSm, flexRow, aiCenter, flexWrap, aiWrapCenter, jcCenter from utils;
 
diff --git a/web/src/ui/components/MessageModal/MessageModal.js b/web/src/ui/components/MessageModal/MessageModal.js
index 656f1b1d..60539804 100644
--- a/web/src/ui/components/MessageModal/MessageModal.js
+++ b/web/src/ui/components/MessageModal/MessageModal.js
@@ -1,8 +1,8 @@
 import React from "react";
 import Modal from "../Modal/Modal";
 import {
+  messageModalOverlay,
   messageModalContainer,
-  messageModalGuts,
   messageModalBody,
 } from "./MessageModal.module.css";
 
@@ -15,8 +15,8 @@ const MessageModal = ({
   <Modal
     Title={Header}
     Body={Body}
-    modalGutsClassName={messageModalGuts}
     modalContainerClassName={messageModalContainer}
+    modalOverlayClassName={messageModalOverlay}
     modalBodyClassName={messageModalBody}
     Footer={Footer}
     onClose={onClose}
diff --git a/web/src/ui/components/MessageModal/MessageModal.module.css b/web/src/ui/components/MessageModal/MessageModal.module.css
index f5702b34..69524f1c 100644
--- a/web/src/ui/components/MessageModal/MessageModal.module.css
+++ b/web/src/ui/components/MessageModal/MessageModal.module.css
@@ -1,15 +1,15 @@
 @value utils: "../../../assets/layout-utils.module.css";
-@value modal, modalGuts, modalContainer, modalBody from "../../../assets/modal-snippets.module.css";
+@value modal, modalContainer, modalOverlay, modalBody from "../../../assets/modal-snippets.module.css";
 @value space_xs, space_sm, space_md, space_lg, space_xl, space_xxl from utils;
 @value aiCenter, aiWrapCenter, flexRow, wrapText, hideOnMobile, flexWrap, flexCol, aiCenter, jcCenter from utils;
 
-.messageModalContainer {
-    composes: modalContainer;
+.messageModalOverlay {
+    composes: modalOverlay;
     composes: flexCol;
 }
 
-.messageModalGuts {
-    composes: modalGuts;
+.messageModalContainer {
+    composes: modalContainer;
 }
 
 .messageModalBody {
@@ -21,10 +21,10 @@
 }
 
 @media (min-height: 21em) {
-    .messageModalContainer {
+    .messageModalOverlay {
         justify-content: center;
     }
-    .messageModalGuts {
+    .messageModalContainer {
         margin-top: -2rem;
     }
 }
diff --git a/web/src/ui/components/Modal/Modal.js b/web/src/ui/components/Modal/Modal.js
index c40be5f8..c5c44fad 100644
--- a/web/src/ui/components/Modal/Modal.js
+++ b/web/src/ui/components/Modal/Modal.js
@@ -2,8 +2,8 @@ import React from "react";
 import { X } from "react-feather";
 import {
   faded,
+  modalOverlay,
   modalContainer,
-  modalGuts,
   modalHeader,
   modalClose,
   modalTitle,
@@ -16,8 +16,8 @@ const Modal = ({
   Body = null,
   Footer = null,
   onClose = () => {},
+  modalOverlayClassName = "",
   modalContainerClassName = "",
-  modalGutsClassName = "",
   modalHeaderClassName = "",
   modalBodyClassName = "",
   modalFooterClassName = "",
@@ -31,14 +31,14 @@ const Modal = ({
       }}
     />
     <div
-      className={modalContainerClassName || modalContainer}
+      className={modalOverlayClassName || modalOverlay}
       onClick={(e) => {
         e.stopPropagation();
         onClose();
       }}
     >
       <div
-        className={modalGutsClassName || modalGuts}
+        className={modalContainerClassName || modalContainer}
         onClick={(e) => {
           e.stopPropagation();
         }}