fix responsive design

app/component/TimePickerField.js

@@ -69,7 +69,7 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, 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-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_16px)] flex items-center right-[4px] py-[8px] px-[8px] 
                 w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
                 ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
         >

app/component/UploadFile.js

@@ -4,21 +4,42 @@ import { useRef } from "react";
 import { Button } from "@mui/material";
 import ProfileP from "@/components/icons/ProfileP";
 import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
+import { uploadImage } from "@/helper";
+import Image from "next/image";
 
-function UploadFile() {
+function UploadFile({ image, setImage }) {
   const fileRef = useRef();
 
   const openInput = () => fileRef.current.click();
+  const handleChange = async (e) => {
+    const result = await uploadImage(event);
+    setImage(result);
+  };
 
   return (
     <>
-      <input className="contents" ref={fileRef} type="file" />
+      <input
-      <div
+        className="contents"
-        className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
+        ref={fileRef}
-        onClick={openInput}
+        type="file"
-      >
+        onChange={handleChange}
-        <ProfileP />
+      />
-      </div>
+      {image && image.blob ? (
+        <Image
+          width={24}
+          height={24}
+          src={image.blob}
+          alt="img-uploaded"
+          className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
+        />
+      ) : (
+        <div
+          className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
+          onClick={openInput}
+        >
+          <ProfileP />
+        </div>
+      )}
       <Button
         variant="text"
         onClick={openInput}

app/component/date/dateTime/Hours.js

@@ -9,7 +9,7 @@ function Hours({ doctor, hour, setHour, value, nameHours }) {
             onClick={() => setHour(idx)}
             disabled={!item.active}
             className={`
-                        !w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
+                        !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                         ${idx === hour ? "!bg-[#F79463] " : ""}
                     `}
           >

app/component/element/AutoCompleteSelect.js

@@ -8,8 +8,8 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
       disablePortal
       options={list}
       className="!w-full !rounded-lg"
-      onChange={(event) =>{
+      onChange={(event) => {
-        updateData && updateData(event.target.innerText, "value", name)
+        updateData && updateData(event.target.innerText, "value", name);
       }}
       sx={{
         ...styleTextSelectRight,

app/component/element/Field.js

@@ -18,7 +18,7 @@ function Field({ title, type, isPlaceHolder }) {
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
-
+        "& .MuiFormLabel-root": { top: "-7px !important" },
         "& .MuiInputBase-input": { padding: "12.5px 14px" },
         "& .MuiInputBase-root": { borderRadius: "6px !important" },
         "& .MuiOutlinedInput-notchedOutline": {

app/globals.css

@@ -235,32 +235,8 @@ html {
   font-weight: 700;
 }
 
-@media (min-width: 768px) {
-  .MuiModal-root .MuiBox-root {
-    max-height: calc(100vh - 48px) !important;
-    overflow: auto !important;
-  }
-}
 .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
-  font-size: 10px !important ;
+  font-size: 12px !important ;
-}
-
-@media (min-width: 640px) {
-  .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
-    font-size: 12px !important ;
-  }
-}
-
-@media (min-width: 768px) {
-  .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
-    font-size: 14px !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
-    font-size: 16px !important;
-  }
 }
 
 @keyframes openx {
@@ -395,6 +371,15 @@ html {
     padding-left: 80px;
     padding-right: 80px;
   }
+
+  .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
+    font-size: 14px !important;
+  }
+
+  .MuiModal-root .MuiBox-root {
+    max-height: calc(100vh - 48px) !important;
+    overflow: auto !important;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -402,6 +387,10 @@ html {
     padding-left: 108px;
     padding-right: 108px;
   }
+
+  .MuiFormControl-root .MuiInputBase-root .MuiInputBase-input {
+    font-size: 16px !important;
+  }
 }
 
 /* Date Picker Style */
@@ -458,11 +447,10 @@ html {
 }
 
 .panel-jalaali * {
-  transition-duration: 0.2s !important;
+  transition: 0.1s ease !important;
 }
 
 .panel-date-holder-item span {
-  /* font-family: Iran Sans !important; */
   font-size: 18px !important;
   font-weight: 500 !important;
 }

components/clinic/components/contact/index.js

@@ -50,10 +50,11 @@ function Contact({ data, loading }) {
             handleClose={handleClose}
           >
             <Button
-              className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
+              className="!flex md:!hidden !text-[#FAFAFA] !gap-[8px] !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24px_0px_rgba(69,_69,_69,_0.54)]"
               onClick={handleOpen}
             >
               <RoutingWhiteC />
+              مسیریابی
             </Button>
           </ModalOpenLocation>
         </CustomLoading>

components/layout/sidebar/ModalLogout.js

@@ -7,32 +7,32 @@ function ModalLogout({ open, handleClose }) {
     <Modal open={open} onClose={handleClose}>
       <Box
         sx={styleDefault}
-        className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+        className="!w-fit dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B] !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
       >
         <div className="flex items-center justify-between w-full">
-          <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
+          <p className="text-[#3B3B3B] text-[14px] dark:text-[#D7D8ED] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
             خروج
           </p>
           <Button onClick={handleClose} className="!p-1" variant="text">
             <CloseModalD />
           </Button>
         </div>
-        <span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
+        <span className="block h-px w-full dark:bg-[#343645] bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
-        <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
+        <p className="text-[#525252] text-[12px] dark:text-[#A1A1A1] md:text-[14px] lg:text-[16px] font-normal">
           آیا مطمئن هستید که می‌خواهید از حساب کاربری خود خارج شوید؟
         </p>
         <div className="flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
           <Button
             variant="outlined"
             onClick={handleClose}
-            className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
+            className="!py-[4px] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
           >
             انصراف
           </Button>
           <Button
             variant="contained"
             onClick={handleClose}
-            className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
+            className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
           >
             خروج
           </Button>

components/layoutPanel/sidebar/index.js

@@ -3,8 +3,14 @@ import HeadMd from "./HeadMd";
 import HeadSm from "./HeadSm";
 import { Button } from "@mui/material";
 import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
+import ModalLogout from "@/components/layout/sidebar/ModalLogout";
+import { useState } from "react";
 
 function Sidebar({ active, setActive, open, setOpen }) {
+  const [modal, setModal] = useState(false);
+  const handleOpen = () => setModal(true);
+  const handleClose = () => setModal(false);
+
   return (
     <div
       className={`
@@ -43,11 +49,13 @@ function Sidebar({ active, setActive, open, setOpen }) {
           >
             <Button
               variant="text"
+              onClick={handleOpen}
               className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
             >
               <LogoutOrangeP />
               خروج از حساب
             </Button>
+            <ModalLogout open={modal} handleClose={handleClose} />
           </div>
         </div>
       </aside>

components/panel/addDoctor/listMenu/generalInformation/Head.js

@@ -1,9 +1,15 @@
 import UploadFile from "@/app/component/UploadFile";
+import { useState } from "react";
 
 function Head() {
+  const [image, setImage] = useState({
+    file: "",
+    blob: "",
+  });
+
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <UploadFile />
+      <UploadFile image={image} setImage={setImage} />
     </div>
   );
 }

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

@@ -92,14 +92,15 @@ function Form({ setValue, parent, data, setData }) {
       </div>
       <div className="mt-[40px] w-full flex justify-end">
         <Button
-          className={`!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
+          className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
-            ${!checkAllValues(data) && "opacity-60"}`}
           onClick={() => setValue((prev) => prev + 1)}
           disabled={!checkAllValues(data)}
           variant="contained"
         >
           ثبت اطلاعات
-          <ArrowLeftPA />
+          <div className={!checkAllValues(data) ? "opacity-40" : "opacity-100"}>
+            <ArrowLeftPA />
+          </div>
         </Button>
       </div>
     </div>

components/panel/addDoctor/listMenu/officeInformation/index.js

@@ -16,7 +16,9 @@ function OfficeInformation({ setValue, parent, data, setData }) {
           variant="contained"
         >
           ثبت اطلاعات
-          <ArrowLeftPA />
+          <div className={!checkAllValues(data) ? "opacity-40" : "opacity-100"}>
+            <ArrowLeftPA />
+          </div>
         </Button>
       </div>
     </div>

components/panel/addDoctor/listMenu/workingDays/modal/Form.js

@@ -77,14 +77,14 @@ function Form({
         <Button
           variant="outlined"
           onClick={handleClose}
-          className="!text-[16px] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none !px-[46px]"
+          className="!text-[16px] !max-w-[calc(50%_-_8px)] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none !px-[46px]"
         >
           انصراف
         </Button>
         <Button
           variant="contained"
           onClick={handleClose}
-          className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
+          className="!text-[16px] !max-w-[calc(50%_-_8px)] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
         >
           ذخیره
         </Button>

components/panel/turns/head/SearchDoctor.js

@@ -40,7 +40,7 @@ function SearchDoctor() {
       </ButtonGroup>
       <Button
         variant="outlined"
-        className="!border-[#5559CE] dark:!bg-[#C7CEF4] !flex !text-[14px] md:!text-[16px] !items-center !gap-[4px] md:!gap-[5px] lg:!gap-[6px] !rounded-[4px] !py-[8px] md:!py-[9px] !px-[12px] sm:!px-[14px] md:!px-[16px] lg:!px-[18px]"
+        className="!border-[#5559CE] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] !flex !text-[14px] md:!text-[16px] !items-center !gap-[4px] md:!gap-[5px] lg:!gap-[6px] !rounded-[4px] !py-[8px] md:!py-[9px] !px-[12px] sm:!px-[14px] md:!px-[16px] lg:!px-[18px]"
       >
         <ExportP />
         خروجی گرفتن

components/panel/userAccount/account/Head.js

@@ -1,11 +1,17 @@
 "use client";
 
 import UploadFile from "@/app/component/UploadFile";
+import { useState } from "react";
 
 function Head() {
+  const [image, setImage] = useState({
+    file: "",
+    blob: "",
+  });
+
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <UploadFile />
+      <UploadFile image={image} setImage={setImage} />
     </div>
   );
 }

components/panel/userAccount/bank/cards/Item.js

@@ -6,12 +6,12 @@ import { Button } from "@mui/material";
 
 function Item({ data, loading }) {
   return (
-    <li className="rounded-[8px] bg-[#FFF] p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
+    <li className="rounded-[8px] bg-[#FFF] p-[12px] dark:shadow-transparent dark:bg-[#222433] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
       <div className="w-full flex items-center justify-between">
         <div className="flex items-center justify-start gap-[4px]">
           <TextLoading width={50} height={18} loading={loading}>
             <div className="flex items-center justify-start gap-[16px]">
-              <p className="text-[16px] min-w-[60px] font-medium text-[#616161]">
+              <p className="text-[16px] min-w-[60px] font-medium text-[#616161] dark:text-[#A1A1A1]">
                 {data.status ? "فعال" : "غیر فعال"}
               </p>
               <SwitchTable value={data.status} />
@@ -30,34 +30,38 @@ function Item({ data, loading }) {
       <ul className="flex flex-col mt-[16px]">
         <li className="flex items-center justify-between gap-[12px]">
           <TextLoading loading={loading} width={60} height={18}>
-            <p className="text-[#7E7E7E] text-[14px] font-normal">
+            <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
               شماره کارت:
             </p>
           </TextLoading>
           <TextLoading loading={loading} width={90} height={18}>
-            <p className="text-[#616161] text-[12px] font-medium">
+            <p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
               {data.card_number}
             </p>
           </TextLoading>
         </li>
-        <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
+        <span className="block h-px w-[calc(100%-20px)] dark:bg-[#343645] mx-auto bg-[#EFEFEF] my-[8px]"></span>
         <li className="flex items-center justify-between gap-[12px]">
           <TextLoading loading={loading} width={60} height={18}>
-            <p className="text-[#7E7E7E] text-[14px] font-normal">شماره شبا:</p>
+            <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
+              شماره شبا:
+            </p>
           </TextLoading>
           <TextLoading loading={loading} width={90} height={18}>
-            <p className="text-[#616161] text-[12px] font-medium">
+            <p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
               {data.shaba_number}
             </p>
           </TextLoading>
         </li>
-        <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
+        <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px] dark:bg-[#343645]"></span>
         <li className="flex items-center justify-between gap-[12px]">
           <TextLoading loading={loading} width={60} height={18}>
-            <p className="text-[#7E7E7E] text-[14px] font-normal">بانک:</p>
+            <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
+              بانک:
+            </p>
           </TextLoading>
           <TextLoading loading={loading} width={90} height={18}>
-            <p className="text-[#616161] text-[12px] font-medium">
+            <p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
               {data.bank}
             </p>
           </TextLoading>

helper/index.js

@@ -46,3 +46,35 @@ export const checkTimes = (arr) => {
     return hasMorningTime && hasEveningTime;
   });
 };
+
+export const uploadImage = async (event) => {
+  let obj = {
+    file: "",
+    blob: "",
+  };
+
+  const file = event.target.files[0];
+  if (file) {
+    obj.file = file;
+    const readFileAsDataURL = (file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = () => resolve(reader.result);
+
+        reader.onerror = (error) => reject(error);
+
+        reader.readAsDataURL(file);
+      });
+    };
+    try {
+      obj.blob = await readFileAsDataURL(file);
+      return obj;
+    } catch (error) {
+      console.error("Error reading file: ", error);
+      throw error;
+    }
+  } else {
+    throw new Error("No file selected");
+  }
+};