From cecd572861cb379fc493729d0d25b49aea2a28ea Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Mon, 30 Sep 2024 14:15:26 +0330
Subject: [PATCH] enable dark mode just in panel page

---
 app/Providers.js                             |  8 ++++++-
 app/panel/(layout)/layout.js                 | 22 ++++++++++----------
 components/dashboard/userAccount/Head.js     |  2 +-
 components/layoutPanel/header/icons/Theme.js |  2 +-
 components/panel/dashboard/list/index.js     |  2 +-
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/Providers.js b/app/Providers.js
index 61c2c84..da9955f 100644
--- a/app/Providers.js
+++ b/app/Providers.js
@@ -3,8 +3,14 @@
 import { ThemeProvider } from "next-themes";
 
 export function Providers({ children }) {
+  const isDark = window.location.pathname.includes("/panel");
+
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider
+      attribute={isDark ? "class" : "data-"}
+      defaultTheme="system"
+      enableSystem
+    >
       {children}
     </ThemeProvider>
   );
diff --git a/app/panel/(layout)/layout.js b/app/panel/(layout)/layout.js
index d519c29..c4362db 100644
--- a/app/panel/(layout)/layout.js
+++ b/app/panel/(layout)/layout.js
@@ -31,17 +31,17 @@ function LayoutPanel({ children }) {
       <BgGray isActive={active} setIsActive={setActive} />
       <main
         className={`
-                w-full transition-all duration-500 dark:bg-[#1F1D2B]
-                ${
-                  pathname.includes("dashboard")
-                    ? open
-                      ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
-                      : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
-                    : open
-                    ? "md:w-[calc(100%-243px)]"
-                    : "md:w-[calc(100%-96px)]"
-                }
-            `}
+          w-full transition-all duration-500 dark:bg-[#1F1D2B]
+          ${
+            pathname.includes("dashboard")
+              ? open
+                ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
+                : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
+              : open
+              ? "md:w-[calc(100%-243px)]"
+              : "md:w-[calc(100%-96px)]"
+          }
+        `}
       >
         <Header
           data={Information}
diff --git a/components/dashboard/userAccount/Head.js b/components/dashboard/userAccount/Head.js
index 2aa246a..78dd7ac 100644
--- a/components/dashboard/userAccount/Head.js
+++ b/components/dashboard/userAccount/Head.js
@@ -8,7 +8,7 @@ function Head({ user }) {
     <div className="hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]">
       <div className="bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center">
         <div className="flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]">
-          <p className="text-[3B3B3B] text-[16px] font-bold">
+          <p className="text-[#3B3B3B] text-[16px] font-bold">
             {user.name}{" "}
             <span className="text-[#3B3B3B] text-[16px] font-normal">
               عزیز!
diff --git a/components/layoutPanel/header/icons/Theme.js b/components/layoutPanel/header/icons/Theme.js
index aa600c4..d436b09 100644
--- a/components/layoutPanel/header/icons/Theme.js
+++ b/components/layoutPanel/header/icons/Theme.js
@@ -5,7 +5,7 @@ import { useState } from "react";
 
 function Theme() {
   const [mounted, setMounted] = useState(false);
-  const { theme, setTheme, resolvedTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
 
   useState(() => setMounted(true), []);
 
diff --git a/components/panel/dashboard/list/index.js b/components/panel/dashboard/list/index.js
index cd6d44a..0b0aa34 100644
--- a/components/panel/dashboard/list/index.js
+++ b/components/panel/dashboard/list/index.js
@@ -6,7 +6,7 @@ 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] dark:bg-transparent md:dark:bg-[#222433] dark:border-transparent">
-      <div className="hidden items-center justify-between p-[16px] md:dark:flex">
+      <div className="items-center justify-between p-[16px] flex">
         <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
           لیست نوبت های پزشکان
         </p>