responsive elements & design dark mode page turns

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
-            className="w-full flex justify-end cursor-pointer"
-            onClick={handleClose}
-          >
-            <CloseModalD />
+          <div className="flex items-center justify-between w-full">
+            <p className="text-[16px] text-[#525252] font-bold">
+              امتیاز شما به دکتر مهران امینی
+            </p>
+            <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",
-                height: "12px",
+                width: "16px",
+                height: "16px",
               },
             }}
           />