dark mode page add-doctor & user account

components/panel/addDoctor/Step.js

@@ -18,7 +18,7 @@ function Step({ value }) {
               className={`flex items-center bg-[#F6F6F6] justify-center p-[18px] 
                 w-[32px] h-[32px] sm:w-[46px] sm:h-[46px] md:w-[60px] md:h-[60px] lg:w-[75px] lg:h-[75px] rounded-full
                 relative overflow-hidden before:delay-500 before:transition-all before:duration-500 
-                before:absolute before:w-full before:h-full before:bg-[#5559CE]
+                before:absolute before:w-full before:h-full before:bg-[#5559CE] dark:bg-[#D7D8ED]
           ${value >= idx ? "before:right-0" : "before:-right-full"}`}
             >
               <div className="z-10 delay-500">{item.icon}</div>
@@ -28,7 +28,7 @@ function Step({ value }) {
            ${
              value >= idx
                ? "font-bold text-[#5559CE]"
-               : "font-normal text-[#616161]"
+               : "font-normal text-[#616161] dark:text-[#a1a1a1]"
            }`}
             >
               {item.name}
@@ -36,7 +36,8 @@ function Step({ value }) {
           </div>
           {list.length > idx + 1 && (
             <span
-              className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px]
+              className={`block rounded-[16px] transition-all duration-500 h-[2px] 
+                bg-[#EFEFEF] dark:bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px]
                 relative overflow-hidden before:transition-all before:duration-500 
                 before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear
 

components/panel/addDoctor/index.js

@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
 import Step from "./Step";
 
 function AddDoctorPage() {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(2);
   const [data, setData] = useState({
     general: {
       name: { value: "احسان احمدی", isEdit: false },

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

@@ -92,7 +92,8 @@ 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"

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

@@ -9,7 +9,8 @@ function OfficeInformation({ setValue, parent, data, setData }) {
       <Form parent={parent} setData={setData} data={data.office} />
       <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"}`}
           disabled={!checkAllValues(data)}
           onClick={() => setValue((prev) => prev + 1)}
           variant="contained"

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

@@ -3,7 +3,7 @@ import { styleDefault } from "@/mui";
 import { Box, Button, Modal } from "@mui/material";
 import Radios from "./Radios";
 import Form from "./Form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ContentModal({
   open,
@@ -27,8 +27,13 @@ function ContentModal({
     setValue(valueRadio);
   };
 
+  const closeModal = () => {
+    handleClose();
+    setValue(0);
+  };
+
   return (
-    <Modal open={open} onClose={handleClose}>
+    <Modal open={open} onClose={closeModal}>
       <Box
         sx={styleDefault}
         className="!w-full !rounded-none md:!rounded-[8px] dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B] 
@@ -38,15 +43,15 @@ function ContentModal({
           <p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
             اضافه کردن روز کاری
           </p>
-          <Button variant="text" className="!p-1" onClick={handleClose}>
+          <Button variant="text" className="!p-1" onClick={closeModal}>
             <CloseModalD />
           </Button>
         </div>
         <div className="mx-0 md:mx-[52px]">
           <Radios value={value} handleChange={handleChange} />
           <Form
-            handleClose={handleClose}
-            isVacation={isVacation}
+            handleClose={closeModal}
+            isVacation={value}
             dataChange={dataChange}
             setData={setData}
             parent={parent}