dark mode page turns

app/component/Pagination.js

@@ -4,7 +4,7 @@ function Pagination() {
   return (
     <PaginationMUI
       // count={doctors.length / 12} org
-      count={20} // test
+      count={20}
       color="primary"
       sx={{
         "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {

app/globals.css

@@ -520,6 +520,11 @@ html {
   border-radius: 8px !important;
 }
 
+.dark .MuiPagination-root .MuiPagination-ul .MuiButtonBase-root,
+.dark .MuiPagination-root .MuiPagination-ul .MuiPaginationItem-root {
+  color: #a1a1a1 !important;
+}
+
 .dark .MuiTableContainer-root {
   background: transparent !important;
 }

components/panel/turns/head/SearchDoctor.js

@@ -8,8 +8,8 @@ function SearchDoctor() {
     <div className="flex flex-col sm:flex-row items-start sm:items-center gap-y-[20px] justify-between mt-[20px] md:mt-[22px] lg:mt-[24px] ">
       <ButtonGroup
         variant="contained"
-        className="!bg-[#FFF] lg:!w-[55%] !rounded-[4px] !overflow-hidden 
+        className="lg:!w-[55%] !rounded-[4px] !overflow-hidden 
-                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
+                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF] dark:!border-[#343645]"
       >
         <TextField
           variant="standard"
@@ -21,14 +21,14 @@ function SearchDoctor() {
             "& .MuiInputBase-root": { height: "100%" },
             "& .MuiInput-root": { borderBottom: "none" },
             "& .MuiInputBase-input": {
-              background: "transparent",
+              // background: "red !important",
               color: "#7E7E7E",
               padding: "0",
             },
           }}
           placeholder="جستجو براساس نام پزشک..."
           dir="rtl"
-          className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+          className={`!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
         />
         <Button
           className="

components/panel/turns/list/Table.js

@@ -17,7 +17,7 @@ function Table({ data, loading }) {
         {data.list_of_doctors_appointments.map((row, idx) => (
           <TableRow key={idx} className="!border-0 !border-b !border-[#DBDBDB]">
             <TableCell
-              className="!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
+              className="!text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
               align="center"
             >
               <TextLoading width={15} height={18} loading={loading}>
@@ -25,7 +25,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
+              className="!text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
               component="th"
               scope="row"
             >
@@ -39,7 +39,7 @@ function Table({ data, loading }) {
               </div>
             </TableCell>
             <TableCell
-              className="!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap"
+              className="!text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap"
               align="right"
             >
               <TextLoading width={50} height={18} loading={loading}>
@@ -47,7 +47,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap"
+              className="!text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap"
               align="left"
             >
               <TextLoading width={50} height={18} loading={loading}>
@@ -55,7 +55,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!text-[#616161] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap"
+              className="!text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap"
               align="right"
             >
               <TextLoading width={50} height={18} loading={loading}>
@@ -63,7 +63,7 @@ function Table({ data, loading }) {
               </TextLoading>
             </TableCell>
             <TableCell
-              className="!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
+              className="!text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
               align="left"
             >
               <CustomLoading width={80} height={22} loading={loading}>