refactor: restore modal bg color and give modal elements better names

Signed-off-by: Elizabeth Kelen <[email protected]>
berty · Nov 9, 2020 · 9181af6 · 9181af6
1 parent 0bc8aef
commit 9181af6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();
         }}