responsive elements & design dark mode page turns

app/component/TimePickerField.js

@@ -14,7 +14,7 @@ function TimePickerField({
   const [value, setValue] = useState("00:00");
 
   return (
-    <div className="w-full relative">
+    <div className="w-full relative field-date-picker">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           ampm={false}

app/component/TimePickerInput.js

@@ -5,7 +5,7 @@ import { handleTwoLength } from "@/helper";
 
 function TimePickerInput({ changeData, handleDisableHours, name, data }) {
   return (
-    <div className="w-full relative">
+    <div className="w-full relative field-date-picker">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           ampm={false}
@@ -47,7 +47,7 @@ function TimePickerInput({ changeData, handleDisableHours, name, data }) {
           }}
         />
         <p
-          className="absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+          className="absolute dark:bg-[#1F1D2B] md:dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
             w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
         >
           {data[name]}

app/globals.css

@@ -235,6 +235,13 @@ html {
   font-weight: 700;
 }
 
+@media (min-width: 768px) {
+  .MuiModal-root .MuiBox-root {
+    max-height: calc(100vh - 48px) !important;
+    overflow: auto !important;
+  }
+}
+
 @keyframes openx {
   0% {
     width: 0;
@@ -668,6 +675,12 @@ html {
   width: 300px !important;
 }
 
+@media (max-width: 768px) {
+  .panel-jalaali {
+    width: 300px !important;
+  }
+}
+
 .day-label-bar,
 .panel-header-inner,
 .days-body {
@@ -723,3 +736,7 @@ html {
   font-weight: 400 !important;
   color: #a1a1a1 !important;
 }
+
+.dark .field-date-picker svg path {
+  fill: #a1a1a1;
+}

app/theme/theme.js

@@ -24,7 +24,7 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           "& .MuiBox-root": {
-            maxHeight: "calc(100vh - 48px)",
+            // maxHeight: { lg: "calc(100vh - 48px)" },
             overflow: "auto",
           },
         },

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -27,21 +27,23 @@ function ModalAnswer({ doctor }) {
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}
-          className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px] !rounded-none md:!rounded-lg"
+          className="!w-full md:!min-w-[485px] !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[22px] !pb-[30px] !rounded-none md:!rounded-lg"
         >
-          <div
+          <div className="flex items-center justify-between w-full">
-            className="w-full flex justify-end cursor-pointer"
+            <p className="text-[16px] text-[#525252] font-bold">
-            onClick={handleClose}
+              امتیاز شما به دکتر مهران امینی
-          >
+            </p>
-            <CloseModalD />
+            <div className="cursor-pointer" onClick={handleClose}>
+              <CloseModalD />
+            </div>
           </div>
-          <p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
           <Rating
             className="!my-[24px]"
+            dir="ltr"
             sx={{
               "& .MuiSvgIcon-root": {
-                width: "12px",
+                width: "16px",
-                height: "12px",
+                height: "16px",
               },
             }}
           />

components/panel/addDoctor/listMenu/specialDays/Form.js

@@ -39,7 +39,6 @@ function Form() {
       return hourSelected + 1 > hours;
     }
   };
-  // console.log(data);
 
   return (
     <div className="flex flex-col w-full-content">

components/panel/userAccount/index.js

@@ -7,7 +7,7 @@ function UserAccountPage({ data }) {
       className="
         opacity-page rounded-[8px] bg-transparent md:bg-[#FFF] 
         shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[16px] lg:py-[32px]
-        px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px] dark:shadow-[0px_4px_25px_10px_#1F1D2B] dark:bg-[#222433]
+        px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px] dark:shadow-[0px_4px_25px_10px_#1F1D2B] dark:bg-transparent md:dark:bg-[#222433]
       "
     >
       <Head />