From 8e165bb2a76778fb99a559436ee37d2c5510045e Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Sat, 28 Sep 2024 19:35:19 +0330
Subject: [PATCH] design dark mode list page panel

---
 components/layoutPanel/sidebar/Links.js  | 16 +++++++-------
 components/panel/ColTable.js             | 28 ++++++++++++++----------
 components/panel/dashboard/Cards.js      |  2 +-
 components/panel/dashboard/list/index.js |  4 ++--
 4 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/components/layoutPanel/sidebar/Links.js b/components/layoutPanel/sidebar/Links.js
index f70aca5..46c4a10 100644
--- a/components/layoutPanel/sidebar/Links.js
+++ b/components/layoutPanel/sidebar/Links.js
@@ -50,14 +50,14 @@ function Links({ open }) {
               </div>
               <p
                 className={`
-                                transition-all duration-500 text-sidebar
-                                ${open ? "opacity-100" : "md:opacity-0"}
-                                ${
-                                  item.src === pathname
-                                    ? "!text-[#FAFAFA] dark:!text-[#5559CE] !font-bold"
-                                    : "!text-[#525252] dark:!text-[#A1A1A1] !font-medium"
-                                }
-                            `}
+                  transition-all duration-500 text-sidebar
+                  ${open ? "opacity-100" : "md:opacity-0"}
+                  ${
+                    item.src === pathname
+                      ? "!text-[#FAFAFA] dark:!text-[#5559CE] !font-bold"
+                      : "!text-[#525252] dark:!text-[#A1A1A1] !font-medium"
+                  }
+                `}
               >
                 {item.name}
               </p>
diff --git a/components/panel/ColTable.js b/components/panel/ColTable.js
index f397473..23490d7 100644
--- a/components/panel/ColTable.js
+++ b/components/panel/ColTable.js
@@ -4,11 +4,11 @@ import Image from "next/image";
 
 function ColTable({ data, loading }) {
   return (
-    <ul className="flex md:hidden flex-col gap-[16px]">
+    <ul className="grid grid-cols-1 sm:grid-cols-2 md:hidden flex-col gap-[16px]">
       {data.map((item, idx) => (
         <li
           key={idx}
-          className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)]"
+          className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-transparent dark:bg-[#222433]"
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center justify-start gap-[8px] !text-nowrap">
@@ -16,42 +16,46 @@ function ColTable({ data, loading }) {
                 <Image src={item.image} alt="doctor" height={32} width={32} />
               </CircularLoading>
               <TextLoading width={40} height={18} loading={loading}>
-                {item.name}
+                <p className="text-[#616161] dark:text-[#D7D8ED]">
+                  {item.name}
+                </p>
               </TextLoading>
             </div>
             <TextLoading width={105} height={18} loading={loading}>
-              <p className="px-[8px] py-[4px] text-[#F17732] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
+              <p className="px-[8px] py-[4px] text-[#F17732] dark:bg-[#4E2E39] dark:text-[#FF5450] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
                 تعداد نوبت: {item.number_of_turns}
               </p>
             </TextLoading>
           </div>
           <div className="flex flex-col mt-[16px]">
             <div className="flex items-center justify-between">
-              <p className="text-[#7E7E7E] text-[14px] font-normal">تخصص:</p>
+              <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
+                تخصص:
+              </p>
               <TextLoading width={90} height={18} loading={loading}>
-                <p className="text-[#616161] text-[14px] font-medium">
+                <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
                   {item.expertise}
                 </p>
               </TextLoading>
             </div>
-            <span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
+            <span className="block h-px w-full bg-[#EFEFEF] dark:bg-[#343645] my-[12px]"></span>
             <div className="flex items-center justify-between">
-              <p className="text-[#7E7E7E] text-[14px] font-normal">
+              <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
                 تاریخ نوبت:
               </p>
               <TextLoading width={85} height={18} loading={loading}>
-                <p className="text-[#616161] text-[14px] font-medium">
+                <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
                   {item.date}
                 </p>
               </TextLoading>
             </div>
-            <span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
+            <span className="block h-px w-full bg-[#EFEFEF] dark:bg-[#343645] my-[12px]"></span>
             <div className="flex items-center justify-between">
-              <p className="text-[#7E7E7E] text-[14px] font-normal">
+              <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
                 ساعت نوبت:
               </p>
               <TextLoading width={60} height={18} loading={loading}>
-                <p className="text-[#616161] text-[14px] font-medium">
+                <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
                   {item.hour}
                 </p>
               </TextLoading>
diff --git a/components/panel/dashboard/Cards.js b/components/panel/dashboard/Cards.js
index bcc6e82..c7f9fbb 100644
--- a/components/panel/dashboard/Cards.js
+++ b/components/panel/dashboard/Cards.js
@@ -29,7 +29,7 @@ function Cards({ data, loading }) {
   ];
 
   return (
-    <ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-[16px]">
+    <ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-0 sm:mx-[16px]">
       {list.map((item, idx) => (
         <li
           className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[8px] border 
diff --git a/components/panel/dashboard/list/index.js b/components/panel/dashboard/list/index.js
index 8731a9b..cd6d44a 100644
--- a/components/panel/dashboard/list/index.js
+++ b/components/panel/dashboard/list/index.js
@@ -5,8 +5,8 @@ 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-[#222433] dark:border-transparent">
-      <div className="flex items-center justify-between p-[16px]">
+    <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">
         <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
           لیست نوبت های پزشکان
         </p>