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