From abdbc2c182f693b1a853f2a30f85c19aa4d70ebe Mon Sep 17 00:00:00 2001
From: Suresh Pradhana <sureshpradhana19@gmail.com>
Date: Sun, 28 Jul 2024 17:06:19 +0530
Subject: [PATCH] fix: model text visibility in light theme (#210)

---
 src/components/Error/ErrorSolutions.jsx | 2 +-
 src/components/Error/ErrorType.jsx      | 2 +-
 src/components/Error/ModalSolutions.jsx | 9 +++++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Error/ErrorSolutions.jsx b/src/components/Error/ErrorSolutions.jsx
index e4d53fb..321af18 100644
--- a/src/components/Error/ErrorSolutions.jsx
+++ b/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>
       ))}
diff --git a/src/components/Error/ErrorType.jsx b/src/components/Error/ErrorType.jsx
index 6370afc..f3a199d 100644
--- a/src/components/Error/ErrorType.jsx
+++ b/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>
   );
 }
diff --git a/src/components/Error/ModalSolutions.jsx b/src/components/Error/ModalSolutions.jsx
index 2e1a185..d56eab4 100644
--- a/src/components/Error/ModalSolutions.jsx
+++ b/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",