design dark mode page working day and special day

app/globals.css

@@ -516,6 +516,14 @@ html {
   transition: 0.1s ease !important;
 }
 
+.dark .MuiTableContainer-root {
+  border-radius: 8px !important;
+}
+
+.dark .MuiTableContainer-root {
+  background: transparent !important;
+}
+
 .dark .MuiSvgIcon-root {
   color: #a1a1a1 !important;
 }

components/layoutPanel/sidebar/index.js

@@ -10,11 +10,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
       className={`
         transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] hover-sidebar
         ${active ? " right-0" : "right-[-85%]"}
-        ${
+        ${open ? "min-w-[243px] md:w-[243px]" : "min-w-[92px] md:w-[92px]"}
-          open
-            ? "min-w-[243px] md:w-[243px]"
-            : "min-w-[92px] md:w-[92px] hover:md:min-w-[90px] hover:md:w-[90px]"
-        }
     `}
     >
       <aside

components/panel/addDoctor/listMenu/specialDays/List.js

@@ -16,42 +16,38 @@ function List() {
   ]);
 
   const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
 
   return (
-    <div className="w-full flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
+    <div className="w-full table-profile-page flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
-      <p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
+      <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-bold">
+        لیست روزهای خاص
+      </p>
       <TableContainer
         className="!w-full md:!w-fit"
         sx={{
           "&.MuiTableContainer-root": {
             boxShadow: "none !important",
             border: "none !important",
-            borderBottom: "1px solid #DBDBDB !important",
-          },
-          "& .MuiTableRow-root th, .MuiTableRow-root td": {
-            borderBottom: "none !important",
           },
         }}
       >
         <Table>
           <TableHead className="!py-2">
-            <TableRow className="!bg-[#EFEFEF] !py-2">
+            <TableRow className="!bg-[#EFEFEF] !py-2 dark:!bg-[#343645]">
               <TableCell
-                className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
+                className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
                 align="left"
               >
                 روز های هفته
               </TableCell>
               <TableCell
-                className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
+                className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
                 align="left"
               >
                 تایم صبح
               </TableCell>
               <TableCell
-                className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
+                className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
                 align="left"
               >
                 تایم عصر
@@ -65,20 +61,20 @@ function List() {
                 sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
               >
                 <TableCell
-                  className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
+                  className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
                   component="th"
                   scope="row"
                 >
                   {row.name}
                 </TableCell>
                 <TableCell
-                  className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
+                  className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
                   align="left"
                 >
                   {row.morning_time}
                 </TableCell>
                 <TableCell
-                  className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
+                  className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
                   align="left"
                 >
                   {row.evening_time}

components/panel/addDoctor/listMenu/workingDays/List.js

@@ -39,10 +39,6 @@ function List() {
             boxShadow: "none !important",
             border: "none !important",
           },
-          "& .MuiTableRow-root th, .MuiTableRow-root td": {
-            // borderBottom: "none !important",
-            // border: "1px solid #343645 !important",
-          },
         }}
       >
         <Table>