design theme dark in general information page

app/globals.css

@@ -512,6 +512,18 @@ html {
   border-color: transparent !important;
 }
 
+.radio-mui * {
+  transition: 0.1s ease !important;
+}
+
+.dark .MuiSvgIcon-root {
+  color: #a1a1a1 !important;
+}
+
+.dark .Mui-checked .MuiSvgIcon-root {
+  fill: #5559ce !important;
+}
+
 @media (max-width: 1024px) {
   .day-label-bar-inner-rtl,
   .panel-jalaali,
@@ -629,3 +641,13 @@ html {
   background: #1f1d2b !important;
   box-shadow: 0px 0px 14.2px 0px rgba(74, 73, 73, 0.19) !important;
 }
+
+.dark .MuiTabs-scroller,
+.dark .MuiTabs-flexContainer {
+  border-bottom-color: #343645 !important;
+}
+
+.dark .MuiTabs-root .MuiButtonBase-root {
+  font-weight: 400 !important;
+  color: #a1a1a1 !important;
+}

components/panel/addDoctor/index.js

@@ -46,7 +46,7 @@ function AddDoctorPage() {
         <ArrowRightPH />
         <p className="text-[#525252] text-[14px] font-bold">{listTab[value]}</p>
       </Button>
-      <div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
+      <div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] md:dark:bg-[#222433] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-none pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
         <ListMenu
           open={open}
           value={value}

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

@@ -4,7 +4,7 @@ function RadioGender() {
   return (
     <RadioGroup
       dir="ltr"
-      className="!flex !flex-row !gap-[36px] !items-center !justify-start"
+      className="!flex radio-mui !flex-row !gap-[36px] !items-center !justify-start"
       defaultValue="female"
       sx={{
         "& .muirtl-j204z7-MuiFormControlLabel-root": {
@@ -12,8 +12,18 @@ function RadioGender() {
         },
       }}
     >
-      <FormControlLabel value="male" control={<Radio />} label="مرد" />
+      <FormControlLabel
-      <FormControlLabel value="female" control={<Radio />} label="زن" />
+        label="مرد"
+        value="male"
+        control={<Radio />}
+        className="!text-[#A1A1A1]"
+      />
+      <FormControlLabel
+        label="زن"
+        value="female"
+        control={<Radio />}
+        className="!text-[#A1A1A1]"
+      />
     </RadioGroup>
   );
 }