From 6ed475ef35bd4f812de31ff802e47cea7ab2278c Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Mon, 30 Sep 2024 07:55:55 +0330
Subject: [PATCH] dark mode page turns

---
 app/component/Pagination.js                 |  2 +-
 app/globals.css                             |  5 +++++
 components/panel/turns/head/SearchDoctor.js |  8 ++++----
 components/panel/turns/list/Table.js        | 12 ++++++------
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/component/Pagination.js b/app/component/Pagination.js
index 650818a..76a5264 100644
--- a/app/component/Pagination.js
+++ b/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": {
diff --git a/app/globals.css b/app/globals.css
index 56c46d0..f80a076 100644
--- a/app/globals.css
+++ b/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;
 }
diff --git a/components/panel/turns/head/SearchDoctor.js b/components/panel/turns/head/SearchDoctor.js
index 0ab8d12..c16b66c 100644
--- a/components/panel/turns/head/SearchDoctor.js
+++ b/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 
-                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
+        className="lg:!w-[55%] !rounded-[4px] !overflow-hidden 
+                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="
diff --git a/components/panel/turns/list/Table.js b/components/panel/turns/list/Table.js
index addabe1..b2c3312 100644
--- a/components/panel/turns/list/Table.js
+++ b/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}>