design dark mode page user-account

app/component/EditField.js

@@ -21,7 +21,7 @@ function EditField({
         disabled={!data?.isEdit}
         placeholder={placeholder || ""}
         type="text"
-        className={`!w-full res-field-account ${
+        className={`!w-full res-field-account dark:!bg-transparent ${
           isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
         }`}
         onChange={(e) => {

app/component/element/AutoCompleteSelect.js

@@ -1,5 +1,5 @@
 import BottomSelect from "@/components/icons/BottomSelect";
-import { Autocomplete, TextField } from "@mui/material";
+import { Autocomplete, Button, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
 function AutoCompleteSelect({ list, isError, updateData, name, label }) {
@@ -38,6 +38,18 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
           border: isError ? "1px solid red !important" : "",
         },
       }}
+      renderOption={(props, option) => {
+        return (
+          <Button
+            {...props}
+            fullWidth
+            className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+            style={{}}
+          >
+            {option.label}
+          </Button>
+        );
+      }}
       renderInput={(params) => (
         <TextField
           fullWidth

app/globals.css

@@ -610,3 +610,22 @@ html {
   stroke: #a1a1a1 !important;
   fill: #a1a1a1 !important;
 }
+
+.dark .MuiOutlinedInput-notchedOutline {
+  border-color: #343645 !important;
+}
+
+.dark .Mui-disabled,
+.dark .MuiInputBase-input {
+  transition: 0.3s all;
+  -webkit-text-fill-color: #a1a1a1 !important;
+}
+
+.dark .Mui-disabled {
+  -webkit-text-fill-color: rgba(161, 161, 161, 0.6) !important;
+}
+
+.dark .MuiPaper-root {
+  background: #1f1d2b !important;
+  box-shadow: 0px 0px 14.2px 0px rgba(74, 73, 73, 0.19) !important;
+}

components/icons/ArrowBottomHD.js

@@ -9,6 +9,7 @@ function ArrowBottomHD() {
     >
       <path
         d="M12 16.8001C11.3 16.8001 10.6 16.5301 10.07 16.0001L3.55002 9.48014C3.26002 9.19014 3.26002 8.71014 3.55002 8.42014C3.84002 8.13014 4.32002 8.13014 4.61002 8.42014L11.13 14.9401C11.61 15.4201 12.39 15.4201 12.87 14.9401L19.39 8.42014C19.68 8.13014 20.16 8.13014 20.45 8.42014C20.74 8.71014 20.74 9.19014 20.45 9.48014L13.93 16.0001C13.4 16.5301 12.7 16.8001 12 16.8001Z"
+        className="dark:fill-[#A1A1A1]"
         fill="#3B3B3B"
       />
     </svg>

components/icons/ArrowLeftPU.js

@@ -10,6 +10,7 @@ function ArrowLeftPU() {
       <path
         d="M15 20.4201L8.48003 13.9001C7.71003 13.1301 7.71003 11.8701 8.48003 11.1001L15 4.58008"
         stroke="#525252"
+        className="dark:stroke-[#A1A1A1]"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"

components/layoutPanel/header/MenuProfile.js

@@ -38,10 +38,10 @@ function MenuProfile({ data }) {
           width={48}
         />
         <div className="flex flex-col items-start justify-between gap-[3px]">
-          <p className="text-[#3B3B3B] text-[14px] font-semibold">
+          <p className="text-[#3B3B3B] dark:text-[#FAFAFA] text-[14px] font-semibold dark:text-[]">
             {data.name}
           </p>
-          <p className="text-[#7E7E7E] text-[12px] font-normal">
+          <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal">
             {data.expertise}
           </p>
         </div>

components/panel/ContentText.js

@@ -1,7 +1,9 @@
 function ContentText({ children, text }) {
   return (
     <div className="flex flex-col items-start justify-start gap-[12px] md:gap-[14px] lg:gap-[16px] content-text-panel">
-      <p className="text-[#525252] text-[14px] font-medium">{text}</p>
+      <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">
+        {text}
+      </p>
       {children}
     </div>
   );

components/panel/userAccount/Head.js

@@ -10,7 +10,7 @@ function Head() {
       </div>
       <Button
         variant="text"
-        className="!flex !p-1 !text-[#525252] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
+        className="!flex !p-1 !text-[#525252] dark:!text-[#A1A1A1] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
       >
         انتخاب تصویر
         <ArrowLeftPU />

components/panel/userAccount/index.js

@@ -5,10 +5,10 @@ function UserAccountPage({ data }) {
   return (
     <div
       className="
-            opacity-page rounded-[8px] bg-transparent md:bg-[#FFF] 
-            shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[16px] lg:py-[32px]
-            px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px]
-        "
+        opacity-page rounded-[8px] bg-transparent md:bg-[#FFF] 
+        shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[16px] lg:py-[32px]
+        px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px] dark:shadow-[0px_4px_25px_10px_#1F1D2B] dark:bg-[#222433]
+      "
     >
       <Head />
       <Form />