design dark mode tab detail & turns & working days

app/globals.css

@@ -524,6 +524,22 @@ html {
   fill: #5559ce !important;
 }
 
+.dark .table-profile-page .MuiTableContainer-root {
+  border-bottom: 1px solid #343645 !important;
+}
+
+.table-profile-page .MuiTableContainer-root {
+  border-bottom: 1px solid #dbdbdb !important;
+}
+
+.dark .table-profile-page .MuiTableContainer-root {
+  border-bottom: 1px solid #343645 !important;
+}
+
+.dark .table-profile-page .MuiTableRow-root th {
+  border: 1px solid #343645 !important;
+}
+
 @media (max-width: 1024px) {
   .day-label-bar-inner-rtl,
   .panel-jalaali,
@@ -545,6 +561,10 @@ html {
   border-color: #35343d !important;
 }
 
+.dark .Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #5559ce !important;
+}
+
 .dark .MuiList-root {
   background: #1f1d2b !important;
   color: #a1a1a1 !important;

components/layoutPanel/header/Search.js

@@ -19,34 +19,6 @@ function Search() {
           paddingTop: "9px !important",
           paddingBottom: "9px !important",
         },
-        "& .MuiFormLabel-root": {
-          top: "-4px !important",
-        },
-        "& .MuiInputBase-root": {
-          borderRadius: "8px",
-        },
-        "& .MuiOutlinedInput-input": {
-          paddingTop: "9px !important",
-          paddingBottom: "9px !important",
-        },
-        "& .MuiOutlinedInput-notchedOutline": {
-          border: "1px solid #EFEFEF !important",
-          transition: "0.3s all !important",
-        },
-        "& .MuiOutlinedInput-root": {
-          "&.MuiInputBase-root,.MuiFormLabel-root ": {
-            color: "#7E7E7E !important",
-            fontsize: "14px",
-            fontweight: "400",
-          },
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            border: "1px solid #EFEFEF !important",
-          },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            border: "1px solid #5559CE !important",
-            transition: "0.3s all !important",
-          },
-        },
       }}
     />
   );

components/panel/addDoctor/index.js

@@ -36,7 +36,7 @@ function AddDoctorPage() {
 
   return (
     <div className="opacity-page">
-      <p className="text-[#525252] text-[20px] font-bold hidden md:flex">
+      <p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
         پروفایل من
       </p>
       <Button

components/panel/addDoctor/listMenu/generalInformation/Head.js

@@ -10,7 +10,7 @@ function Head() {
       </div>
       <Button
         variant="text"
-        className="!flex !p-1 !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
+        className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
       >
         انتخاب تصویر
         <ArrowLeftPU />

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

@@ -31,37 +31,37 @@ function List() {
   });
 
   return (
-    <div className="w-full flex justify-center">
+    <div className="w-full flex justify-center table-profile-page">
       <TableContainer
         className="!mt-[40px] md:!mt-[36px] lg:!mt-[32px] !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",
+            // borderBottom: "none !important",
+            // border: "1px solid #343645 !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] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
                 align="left"
               >
                 روز های هفته
               </TableCell>
               <TableCell
-                className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
+                className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
                 align="left"
               >
                 تایم صبح
               </TableCell>
               <TableCell
-                className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
+                className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
                 align="left"
               >
                 تایم عصر
@@ -75,7 +75,7 @@ function List() {
                 sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
               >
                 <TableCell
-                  className="!border-[1px] !border-[#DBDBDB]"
+                  className="!border-[1px] !border-[#DBDBDB] dark:!text-[#A1A1A1]"
                   component="th"
                   scope="row"
                 >

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

@@ -3,7 +3,7 @@ import List from "./List";
 function WorkingDays() {
   return (
     <div className="opacity-page">
-      <p className="text-[#525252] text-[14px] md:text-[16px] text-center md:text-start font-bold">
+      <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] md:text-[16px] text-center md:text-start font-bold">
         لیست روزهای کاری
       </p>
       <List />