fix: model text visibility in light theme (#210)

src/components/Error/ErrorSolutions.jsx

@@ -15,7 +15,7 @@ function ErrorSolutions({ solutions }) {
   return (
     <ul id="scroll-solution">
       {solutions.split("<").map((solution, index) => (
-        <li key={index} className="text-sm text-white break-all" >
+        <li key={index} className="text-sm break-all" >
           {solution}
         </li>
       ))}

src/components/Error/ErrorType.jsx

@@ -6,7 +6,7 @@ function ErrorType({ type }) {
     <span
       className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative block before:bg-[${errorTypeColor}]`}
     >
-      <span className="relative text-white text-sm -top-1">{type}</span>
+      <span className="relative text-sm -top-1">{type}</span>
     </span>
   );
 }

src/components/Error/ModalSolutions.jsx

@@ -1,15 +1,20 @@
-import React from "react";
+import React,{ useContext } from "react";
 import { MdKeyboardArrowLeft, MdContentCopy } from "react-icons/md";
 import ErrorSolutions from "./ErrorSolutions";
 import useColorBorderBox from "../../hooks/useColorBorderBox";
 import ErrorType from "./ErrorType";
 import Modal from "react-modal";
 import toast from "react-hot-toast";
+import { ThemeContext } from '../../context/ThemeContext';
 
 Modal.setAppElement("#root");
 
 const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
   const { errorTypeColor } = useColorBorderBox(error.type);
+  const { theme } = useContext(ThemeContext);
+  const overlayBackgroundColor = theme === 'dark' 
+    ? 'rgba(0, 0, 0, 0.6)' 
+    : 'rgba(0, 0, 0, 0.2)';
 
   return (
     <Modal
@@ -23,7 +28,7 @@ const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
       id="main-div"
       style={{
         overlay: {
-          backgroundColor: "rgba(0, 0 ,0, .6)",
+          backgroundColor: overlayBackgroundColor,
         },
         content: {
           position: "fixed",