dark mode page panel/dashboard

This commit is contained in:
Ehsan
2024-09-28 13:35:12 +03:30
parent 8438b71538
commit 9992bdfa62
11 changed files with 118 additions and 31 deletions
+3 -3
View File
@@ -42,13 +42,13 @@ function Cards({ data, loading }) {
{item.icon}
</div>
<div className="flex items-center justify-between">
<p className="text-[#525252] text-[14px] font-normal">
<p className="text-[#525252] text-[14px] font-normal dark:text-[#D7D8ED]">
{item.text}
</p>
<TextLoading width={70} height={20} loading={loading}>
<p className="text-[#3B3B3B] text-[24px] font-medium">
<p className="text-[#3B3B3B] text-[24px] font-medium dark:text-[#A1A1A1]">
{item.value}
<span className="text-[#616161] mr-[6px] text-[12px] font-normal">
<span className="text-[#616161] mr-[6px] text-[12px] font-normal dark:text-[#A1A1A1]">
{item.label}
</span>
</p>
@@ -15,7 +15,7 @@ function Head() {
return (
<div className="flex items-center justify-start gap-[12px] p-[16px]">
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
میزان درآمد
</p>
<Select
@@ -28,12 +28,12 @@ function Head() {
},
"&:hover": {
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7 !important",
border: "1px solid #D7D7D7",
},
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#D7D7D7 !important",
border: "1px solid #D7D7D7 !important",
border: "1px solid #D7D7D7",
},
}}
>
@@ -3,7 +3,7 @@ import Head from "./Head";
function AmountOfIncome({ data, loading }) {
return (
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF] dark:bg-[#222433] dark:!border-transparent">
<Head />
<div dir="ltr">
<Chart data={data} loading={loading} />
+7 -7
View File
@@ -16,9 +16,9 @@ function Table({ data, loading }) {
centerTable={centerTable}
>
{data.list_of_doctors_appointments.map((row, idx) => (
<TableRow key={idx} className="!border-0 !border-b !border-[#DBDBDB]">
<TableRow key={idx} className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent">
<TableCell
className="!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap"
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
align="center"
>
<TextLoading width={15} height={18} loading={loading}>
@@ -26,7 +26,7 @@ function Table({ data, loading }) {
</TextLoading>
</TableCell>
<TableCell
className="!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap"
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
component="th"
scope="row"
>
@@ -40,7 +40,7 @@ function Table({ data, loading }) {
</div>
</TableCell>
<TableCell
className="!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
className="!text-start dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={30} height={18} loading={loading}>
@@ -48,7 +48,7 @@ function Table({ data, loading }) {
</TextLoading>
</TableCell>
<TableCell
className="!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
className="!text-start dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={50} height={18} loading={loading}>
@@ -56,7 +56,7 @@ function Table({ data, loading }) {
</TextLoading>
</TableCell>
<TableCell
className="!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
className="!text-center dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={50} height={18} loading={loading}>
@@ -64,7 +64,7 @@ function Table({ data, loading }) {
</TextLoading>
</TableCell>
<TableCell
className="!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
className="!text-right dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={50} height={18} loading={loading}>
+3 -3
View File
@@ -5,14 +5,14 @@ import ColTable from "../../ColTable";
function List({ data, loading }) {
return (
<div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF]">
<div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF] dark:bg-[#222433] dark:border-transparent">
<div className="flex items-center justify-between p-[16px]">
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
لیست نوبت های پزشکان
</p>
<Button
variant="text"
className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1 dark:!text-[#A1A1A1]"
>
مشاهده همه
<ArrowLeftP />