change style popover datepicker

app/component/ButtonDate.js

@@ -22,11 +22,9 @@ function ButtonDate({ anchorEl, setAnchorEl, open, id, updateDate, children }) {
         }}
         sx={{
           "& .MuiPaper-root": {
-            padding: { xs: "12px 12px 0", sm: "24px 24px 0" },
-            background: "#FFF",
-            borderRadius: "8px",
-            border: "1px solid #EFEFEF",
-            boxShadow: "0px 1px 24.8px 0px rgba(204, 204, 204, 0.18)",
+            background: "transparent !important",
+            border: "none !important",
+            // boxShadow: "none !important",
           },
         }}
       >

app/component/DatePickerContent.js

@@ -3,6 +3,7 @@ import { DatePicker } from "jalaali-react-date-picker";
 function DatePickerContent({ type, updateDate, handleClose }) {
   return (
     <DatePicker
+      className="!pt-[12px] !px-[12px] sm:!pt-[24px] sm:!px-[24px] !border !border-solid !border-[#EFEFEF] !bg-[#FFF] !rounded-[8px] !overflow-hidden"
       dayLabelRender={(e) => (
         <div className="day-label-bar-inner-rtl">
           <div className="day-label-item !text-[10px] font-semibold">شنبه</div>

app/component/EditField.js

@@ -58,9 +58,9 @@ function EditField({
       <Button
         className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
                     ${multiline ? "!top-[24px]" : "!top-1/2"}`}
-        onClick={() => {
-          // changeData(!data.isEdit, "isEdit", name);
-        }}
+        // onClick={() => {
+        // changeData(!data.isEdit, "isEdit", name);
+        // }}
       >
         {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
       </Button>

app/globals.css

@@ -587,7 +587,7 @@ html {
   .panel-jalaali,
   .panel-header-rtl,
   .days-body {
-    background: #fafafa !important;
+    background: #fff !important;
   }
 }
 

components/panel/addDoctor/listMenu/generalInformation/form/index.js

@@ -40,7 +40,7 @@ function Form({ setValue, parent, data, setData }) {
 
   return (
     <>
-      <div className="mt-[24px] scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
+      <div className="mt-[24px] sm-modal scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
         <ContentText text="نام و نام خانوادگی">
           <EditField
             isTransparent={true}