transition dark/light mode date-picker

app/globals.css

@@ -638,6 +638,7 @@ html {
 .dark .day-label-bar-inner-rtl,
 .dark .days-body {
   background: #222433 !important;
+  transition: 0.5s ease-in !important;
 }
 
 .dark .icon-chevron-right::before,
@@ -646,7 +647,11 @@ html {
 }
 
 .dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span {
-  color: #a1a1a1 !important;
+  color: #A1A1A1 !important;
+}
+
+.dark .panel-jalaali .days-body .day.hovered.today:not(.weekend-day) span {
+  color: #d7d8ed !important;
 }
 
 .dark .MuiPaper-root {
@@ -761,3 +766,11 @@ html {
 .dark .field-date-picker svg path {
   fill: #a1a1a1;
 }
+
+.jalali-dashboard .panel-elevation,
+.jalali-dashboard .panel-header-rtl,
+.jalali-dashboard .day-label-bar-inner-rtl,
+.jalali-dashboard .days-body {
+  background: transparent !important;
+  transition: 0.5s ease-in !important;
+}

components/doctors/search/index.js

@@ -53,7 +53,7 @@ function SearchBar({ data, setData }) {
         className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
       />
       <Button
-        className="!flex !m-1 !rounded-[4px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
+        className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
                 !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
       >
         <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">

components/layoutPanel/userDetail/Date.js

@@ -7,7 +7,7 @@ function Date() {
   const todayJalaali = moment().format("jYYYY/jMM/jDD");
 
   return (
-    <div className="flex justify-center sm-datepicker active-today">
+    <div className="flex justify-center sm-datepicker active-today jalali-dashboard">
       <DatePicker
         nextIcon={<></>}
         prevIcon={<></>}