hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode page panel/dashboard

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/component/CustomTable.js
+5 -9
View File
@@ -10,7 +10,7 @@ import {
function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
return (
<TableContainer
className="!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
className="!shadow-none dark:!border-[#35343D] table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
sx={{
"&.MuiTableContainer-root": {
borderRadius: zeroRadius && "0 !important",
@@ -19,18 +19,14 @@ function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
>
<Table className="!rounded-0 !shadow-none !overflow-hidden">
<TableHead>
<TableRow className="!bg-[#EFEFEF]">
<TableRow className="!bg-[#EFEFEF] dark:!bg-[#343645]">
{tableHead.map((item, idx) => (
<TableCell
key={idx}
className={`
!text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
${
centerTable.includes(idx)
? "!text-center"
: "!text-start"
}
`}
!text-[#616161] dark:!border-none dark:!text-[#D7D8ED] !text-[14px] !font-normal !py-[10px] !px-[18px]
${centerTable.includes(idx) ? "!text-center" : "!text-start"}
`}
>
{item}
</TableCell>
app/globals.css
+82
View File
@@ -486,6 +486,10 @@ html {
background: #ff975d !important;
}
.panel-jalaali .highlight {
background: #5559ce !important;
}
.panel-jalaali .panel-footer-wrapper,
.panel-jalaali .panel-footer-rtl {
display: none !important;
@@ -517,4 +521,82 @@ html {
}
}
/* Dark Style */
.dark tbody .MuiTableCell-root {
background: #222433;
border-color: #343645 !important;
}
.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline:hover,
.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline {
border-color: #35343d !important;
}
.dark .MuiList-root {
background: #1f1d2b !important;
color: #a1a1a1 !important;
}
/* End Of Dark Style */
/* Dark Date Picker */
.dark .panel-elevation,
.dark .panel-header-rtl,
.dark .day-label-bar-inner-rtl,
.dark .days-body {
background: #222433 !important;
}
.dark .icon-chevron-right::before,
.dark .icon-chevron-left::before {
background: url(../public/assets/icons/arrow-right-light.svg) !important;
}
.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span {
color: #a1a1a1 !important;
}
.dark .MuiPaper-root {
box-shadow: 0px 4px 25px 10px #1f1d2b !important;
background: #222433 !important;
border: none !important;
}
.dark .panel-header-item-text,
.dark .panel-header-year-picker span {
color: #a1a1a1 !important;
}
.dark .panel-date-holder-item span:hover {
color: #c7cef4 !important;
}
.dark .panel-jalaali .hovered:not(.disabled):hover {
background: transparent !important;
}
.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span:hover {
color: #c7cef4 !important;
}
.dark .panel-jalaali .year-item,
.dark .panel-jalaali .month-item {
color: #a1a1a1;
}
.dark .panel-jalaali .year-item:hover,
.dark .panel-jalaali .month-item:hover {
background: rgba(199, 206, 244, 0.1) !important;
}
.dark .panel-jalaali .year-item-selected,
.dark .panel-jalaali .month-item-selected {
background: #5559ce !important;
color: #fafafa;
}
/* End Of Dark Date Picker */
/* End Date Picker Style */
components/icons/ArrowLeftP.js
+2
View File
@@ -9,6 +9,7 @@ function ArrowLeftP() {
>
<path
d="M9.57 5.92969L3.5 11.9997L9.57 18.0697"
className="dark:stroke-[#A1A1A1]"
stroke="#616161"
strokeWidth="1.5"
strokeMiterlimit="10"
@@ -17,6 +18,7 @@ function ArrowLeftP() {
/>
<path
d="M20.4999 12H3.66992"
className="dark:stroke-[#A1A1A1]"
stroke="#616161"
strokeWidth="1.5"
strokeMiterlimit="10"
components/icons/CalendarTickGreenP.js
+1 -1
View File
@@ -22,7 +22,7 @@ function CalendarTickGreenP() {
<path
d="M20 9.83984H4C3.45 9.83984 3 10.2898 3 10.8398V16.9998C3 19.9998 4.5 21.9998 8 21.9998H12.93C13.62 21.9998 14.1 21.3298 13.88 20.6798C13.68 20.0998 13.51 19.4598 13.51 18.9998C13.51 15.9698 15.98 13.4998 19.01 13.4998C19.3 13.4998 19.59 13.5198 19.87 13.5698C20.47 13.6598 21.01 13.1898 21.01 12.5898V10.8498C21 10.2898 20.55 9.83984 20 9.83984ZM9.21 18.2098C9.02 18.3898 8.76 18.4998 8.5 18.4998C8.24 18.4998 7.98 18.3898 7.79 18.2098C7.61 18.0198 7.5 17.7598 7.5 17.4998C7.5 17.2398 7.61 16.9798 7.79 16.7898C7.89 16.6998 7.99 16.6298 8.12 16.5798C8.49 16.4198 8.93 16.5098 9.21 16.7898C9.39 16.9798 9.5 17.2398 9.5 17.4998C9.5 17.7598 9.39 18.0198 9.21 18.2098ZM9.21 14.7098C9.16 14.7498 9.11 14.7898 9.06 14.8298C9 14.8698 8.94 14.8998 8.88 14.9198C8.82 14.9498 8.76 14.9698 8.7 14.9798C8.63 14.9898 8.56 14.9998 8.5 14.9998C8.24 14.9998 7.98 14.8898 7.79 14.7098C7.61 14.5198 7.5 14.2598 7.5 13.9998C7.5 13.7398 7.61 13.4798 7.79 13.2898C8.02 13.0598 8.37 12.9498 8.7 13.0198C8.76 13.0298 8.82 13.0498 8.88 13.0798C8.94 13.0998 9 13.1298 9.06 13.1698C9.11 13.2098 9.16 13.2498 9.21 13.2898C9.39 13.4798 9.5 13.7398 9.5 13.9998C9.5 14.2598 9.39 14.5198 9.21 14.7098ZM12.71 14.7098C12.52 14.8898 12.26 14.9998 12 14.9998C11.74 14.9998 11.48 14.8898 11.29 14.7098C11.11 14.5198 11 14.2598 11 13.9998C11 13.7398 11.11 13.4798 11.29 13.2898C11.67 12.9198 12.34 12.9198 12.71 13.2898C12.89 13.4798 13 13.7398 13 13.9998C13 14.2598 12.89 14.5198 12.71 14.7098Z"
fill="#14CC26"
className="dark:fill-[#FFFFFF] dark:stroke-[#FFFFFF]"
className="dark:fill-[#FFFFFF]"
/>
</svg>
);
components/layoutPanel/userDetail/Activities.js
+4 -4
View File
@@ -4,7 +4,7 @@ import WarnP from "@/components/icons/WarnP";
function Activities({ data, loading }) {
return (
<div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
<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>
<ul className="flex flex-col justify-start w-full mt-[24px]">
@@ -16,19 +16,19 @@ function Activities({ data, loading }) {
<WarnP />
</div>
<TextLoading width={110} height={18} loading={loading}>
<p className="text-[#616161] text-[16px] font-medium">
<p className="text-[#616161] dark:text-[#A1A1A1] text-[16px] font-medium">
{item.text}
</p>
</TextLoading>
</div>
<TextLoading width={55} height={18} loading={loading}>
<p className="text-[#7E7E7E] text-[12px] font-normal">
<p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal">
{item.time}
</p>
</TextLoading>
</div>
{data.todays_activities.length > idx + 1 && (
<span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
<span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] dark:bg-[#343645] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
)}
</li>
))}
components/panel/dashboard/Cards.js
+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>
components/panel/dashboard/amountOfIncome/Head.js
+3 -3
View File
@@ -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",
},
}}
>
components/panel/dashboard/amountOfIncome/index.js
+1 -1
View File
@@ -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} />
components/panel/dashboard/list/Table.js
+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}>
components/panel/dashboard/list/index.js
+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 />
public/assets/icons/arrow-right-light.svg
+7
View File
@@ -0,0 +1,7 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="vuesax/outline/arrow-right">
<g id="arrow-right">
<path id="Vector" d="M8.90961 21.17C8.71961 21.17 8.52961 21.1 8.37961 20.95C8.08961 20.66 8.08961 20.18 8.37961 19.89L14.8996 13.37C15.3796 12.89 15.3796 12.11 14.8996 11.63L8.37961 5.10999C8.08961 4.81999 8.08961 4.33999 8.37961 4.04999C8.66961 3.75999 9.14961 3.75999 9.43961 4.04999L15.9596 10.57C16.4696 11.08 16.7596 11.77 16.7596 12.5C16.7596 13.23 16.4796 13.92 15.9596 14.43L9.43961 20.95C9.28961 21.09 9.09961 21.17 8.90961 21.17Z" fill="#A1A1A1"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 629 B