fix styles at Modal.module.css and BasketModal.module.css for dark theme

infoshareacademy · Feb 11, 2024 · d0b418e · d0b418e
1 parent 4437e66
commit d0b418e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/my-app/src/Components/BasketModal/BasketModal.module.css b/my-app/src/Components/BasketModal/BasketModal.module.css
@@ -9,13 +9,13 @@
   transition: 0.4s;
 }
 
-.light {
+.light.basket-modal__button-close {
   background-color: var(--box-dark-color-light);
   color: var(--dark-text-color-light);
 }
 
-.dark {
-  background-color: var(--box-dark-color-dark);
+.dark.basket-modal__button-close {
+  background-color: var(--box-lighter-color-dark);
   color: var(--dark-text-color-dark);
 }
 

diff --git a/my-app/src/Components/Modal/Modal.jsx b/my-app/src/Components/Modal/Modal.jsx
@@ -1,13 +1,16 @@
 import styles from "./Modal.module.css";
 import { ThemeContext } from "../../providers/theme.tsx";
 import { useContext } from "react";
+import classnames from "classnames";
 
 export const Modal = ({ children }) => {
   const { theme } = useContext(ThemeContext);
 
   return (
-    <div className={`${styles["modal__container"]} ${styles[theme]}`}>
-      <div className={styles["modal__content"]}>{children}</div>
+    <div className={classnames(styles["modal__container"], styles[theme])}>
+      <div className={classnames(styles["modal__content"], styles[theme])}>
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/my-app/src/Components/Modal/Modal.module.css b/my-app/src/Components/Modal/Modal.module.css
@@ -1,7 +1,6 @@
 .modal__container {
   height: 470px;
   min-width: 50%;
-  background-color: var(--box-light-color);
   position: absolute;
   z-index: 3;
   display: flex;
@@ -12,23 +11,20 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: var(--main-text-color);
 }
 
 .modal__content {
   margin: 20px;
 }
 
-.light {
-  background: var(--box-light-color-light);
+.light.modal__container {
+  background-color: var(--box-light-color-light);
+  box-shadow: 0px 0px 36px -24px #42445a;
   color: var(--main-text-color-light);
 }
 
-.dark {
-  background: var(--box-light-color-dark);
-  color: var(--main-text-color-dark);
-}
-
 .dark.modal__container {
+  background-color: var(--box-dark-color-dark);
   box-shadow: 0px 0px 36px -24px var(--shadow-color-dark);
-}
+  color: var(--main-text-color-dark);
+}