From 9992bdfa620b760e22c8d3f5eb69c5113099e4ff Mon Sep 17 00:00:00 2001 From: Ehsan Date: Sat, 28 Sep 2024 13:35:12 +0330 Subject: [PATCH] dark mode page panel/dashboard --- app/component/CustomTable.js | 14 ++-- app/globals.css | 82 +++++++++++++++++++ components/icons/ArrowLeftP.js | 2 + components/icons/CalendarTickGreenP.js | 2 +- .../layoutPanel/userDetail/Activities.js | 8 +- components/panel/dashboard/Cards.js | 6 +- .../panel/dashboard/amountOfIncome/Head.js | 6 +- .../panel/dashboard/amountOfIncome/index.js | 2 +- components/panel/dashboard/list/Table.js | 14 ++-- components/panel/dashboard/list/index.js | 6 +- public/assets/icons/arrow-right-light.svg | 7 ++ 11 files changed, 118 insertions(+), 31 deletions(-) create mode 100644 public/assets/icons/arrow-right-light.svg diff --git a/app/component/CustomTable.js b/app/component/CustomTable.js index 3cdf04c..ec608e5 100644 --- a/app/component/CustomTable.js +++ b/app/component/CustomTable.js @@ -10,7 +10,7 @@ import { function CustomTable({ tableHead, zeroRadius, centerTable, children }) { return ( - + {tableHead.map((item, idx) => ( {item} diff --git a/app/globals.css b/app/globals.css index b47bccc..3340e25 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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 */ diff --git a/components/icons/ArrowLeftP.js b/components/icons/ArrowLeftP.js index 7144692..9f33b10 100644 --- a/components/icons/ArrowLeftP.js +++ b/components/icons/ArrowLeftP.js @@ -9,6 +9,7 @@ function ArrowLeftP() { > ); diff --git a/components/layoutPanel/userDetail/Activities.js b/components/layoutPanel/userDetail/Activities.js index 32c04c3..1debbd0 100644 --- a/components/layoutPanel/userDetail/Activities.js +++ b/components/layoutPanel/userDetail/Activities.js @@ -4,7 +4,7 @@ import WarnP from "@/components/icons/WarnP"; function Activities({ data, loading }) { return (
-

+

فعالیت های امروز

    @@ -16,19 +16,19 @@ function Activities({ data, loading }) {
-

+

{item.text}

-

+

{item.time}

{data.todays_activities.length > idx + 1 && ( - + )} ))} diff --git a/components/panel/dashboard/Cards.js b/components/panel/dashboard/Cards.js index 2718fcd..bcc6e82 100644 --- a/components/panel/dashboard/Cards.js +++ b/components/panel/dashboard/Cards.js @@ -42,13 +42,13 @@ function Cards({ data, loading }) { {item.icon}
-

+

{item.text}

-

+

{item.value} - + {item.label}

diff --git a/components/panel/dashboard/amountOfIncome/Head.js b/components/panel/dashboard/amountOfIncome/Head.js index 19fa0c7..516e1ea 100644 --- a/components/panel/dashboard/amountOfIncome/Head.js +++ b/components/panel/dashboard/amountOfIncome/Head.js @@ -15,7 +15,7 @@ function Head() { return (
-

+

میزان درآمد