dark mode page turns

components/panel/turns/head/SearchDoctor.js

@@ -8,8 +8,8 @@ function SearchDoctor() {
     <div className="flex flex-col sm:flex-row items-start sm:items-center gap-y-[20px] justify-between mt-[20px] md:mt-[22px] lg:mt-[24px] ">
       <ButtonGroup
         variant="contained"
-        className="!bg-[#FFF] lg:!w-[55%] !rounded-[4px] !overflow-hidden 
-                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
+        className="lg:!w-[55%] !rounded-[4px] !overflow-hidden 
+                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF] dark:!border-[#343645]"
       >
         <TextField
           variant="standard"
@@ -21,14 +21,14 @@ function SearchDoctor() {
             "& .MuiInputBase-root": { height: "100%" },
             "& .MuiInput-root": { borderBottom: "none" },
             "& .MuiInputBase-input": {
-              background: "transparent",
+              // background: "red !important",
               color: "#7E7E7E",
               padding: "0",
             },
           }}
           placeholder="جستجو براساس نام پزشک..."
           dir="rtl"
-          className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+          className={`!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
         />
         <Button
           className="