dark mode styles added

src/components/MarketPlace/MainSection.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from "react";
-import DataIteration from "../Helpers/DataIteration";
-import AvailableJobsCard from "../Cards/AvailableJobsCard";
-import ListView from "../../assets/images/list-view.png";
 import GridView from "../../assets/images/grid-view.svg";
+import ListView from "../../assets/images/list-view.png";
+import AvailableJobsCard from "../Cards/AvailableJobsCard";
+import DataIteration from "../Helpers/DataIteration";
 import SelectBox from "../Helpers/SelectBox";
 
 export default function MainSection({

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -125,10 +125,10 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           <CloseIcon onClose={onClose} />
         </div>
 
-        <div className="md:flex bg-white rounded-lg">
+        <div className="md:flex bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
           <div className="p-4 w-full md:w-[75%] md:border-r-1">
             <div className="min-h-[263px]">
-              <h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
+              <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
 
@@ -152,11 +152,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 },
               ].map(({ name, content, danger }, idx) => (
                 <div className={`my-3 md:flex items-center`} key={idx}>
-                  <label className="w-full md:w-[19%] text-slate-900 tracking-wide font-semibold whitespace-pre-wrap">
+                  <label className="w-full md:w-[19%] tracking-wide font-semibold whitespace-pre-wrap">
                     {name}
                   </label>
                   <div
-                    className={`w-full md:w-3/4 text-slate-900 market-pop ${
+                    className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
                       name !== "Delivery Detail"
                         ? " h-full max-h-28 flex items-center"
                         : " overflow-y-auto max-h-[100px]"
@@ -164,20 +164,20 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   >
                     {danger ? (
                       <p
-                        className={``}
+                        className={`dark:text-white`}
                         dangerouslySetInnerHTML={{
                           __html: danger && content,
                         }}
                       />
                     ) : (
-                      <p className={`w-full text-slate-900`}>
+                      <p className={`w-full text-slate-900 dark:text-white`}>
                         {name !== "Delivery Detail" ? (
                           <>
                             {typeof content !== "object" ? content : null}
                             {typeof content === "object" && (
                               <>
                                 <hr className="mb-1" />
-                                <span className="flex items-center gap-2">
+                                <span className="flex items-center gap-2 dark:text-white">
                                   {content?.text}
                                   <strong>{thePrice}</strong>
                                 </span>
@@ -197,11 +197,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             <hr />
             <div className="my-3 w-full flex flex-col gap-3">
               <div className="w-full">
-                <label className="w-full text-slate-900 tracking-wide">
+                <label className="w-full text-slate-900 dark:text-white tracking-wide">
                   If you have any questions about this task:
                 </label>
                 <textarea
-                  className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
+                  className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
                   rows="5"
                   style={{ resize: "none" }}
                   placeholder="Enter message here ..."
@@ -226,7 +226,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           </div>
 
           <div className="w-full md:w-[23%] h-full ">
-            <div className="mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
+            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center py-4 gap-2">
                 <p className="w-full text-slate-900 tracking-wide my-1">
                   Interested in the task?
@@ -261,7 +261,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </>
               </div>
 
-              <div className="">
+              <div className="text-slate-900">
                 <p className="flex items-center tracking-wide">
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>

src/components/MarketPlace/index.jsx

@@ -1,7 +1,7 @@
-import Layout from "../Partials/Layout";
-import MainSection from "./MainSection";
-import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MainSection from "./MainSection";
 
 export default function MarketPlace({ commonHeadData }) {
   let { jobLists } = useSelector((state) => state.jobLists);
@@ -20,4 +20,4 @@ export default function MarketPlace({ commonHeadData }) {
       </Layout>
     </>
   );
-}
+}