design dark mode page working day and special day

This commit is contained in:
Ehsan
2024-09-29 19:16:11 +03:30
parent 88be69fd9d
commit 3d97bf705e
4 changed files with 20 additions and 24 deletions
+8
View File
@@ -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;
}
+1 -5
View File
@@ -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] hover:md:min-w-[90px] hover:md:w-[90px]"
}
${open ? "min-w-[243px] md:w-[243px]" : "min-w-[92px] md:w-[92px]"}
`}
>
<aside
@@ -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]">
<p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
<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] 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}
@@ -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>