From 33f0a99a45356cfb1b26d4631df44d81e468b916 Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Sat, 28 Sep 2024 20:05:59 +0330
Subject: [PATCH] design dark mode page user-account

---
 app/component/EditField.js                   |  2 +-
 app/component/element/AutoCompleteSelect.js  | 14 +++++++++++++-
 app/globals.css                              | 19 +++++++++++++++++++
 components/icons/ArrowBottomHD.js            |  1 +
 components/icons/ArrowLeftPU.js              |  1 +
 components/layoutPanel/header/MenuProfile.js |  4 ++--
 components/panel/ContentText.js              |  4 +++-
 components/panel/userAccount/Head.js         |  2 +-
 components/panel/userAccount/index.js        |  8 ++++----
 9 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/app/component/EditField.js b/app/component/EditField.js
index 212bc6f..83c34d2 100644
--- a/app/component/EditField.js
+++ b/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) => {
diff --git a/app/component/element/AutoCompleteSelect.js b/app/component/element/AutoCompleteSelect.js
index 6a357fe..5dba6e0 100644
--- a/app/component/element/AutoCompleteSelect.js
+++ b/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
diff --git a/app/globals.css b/app/globals.css
index cf10320..627161c 100644
--- a/app/globals.css
+++ b/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;
+}
diff --git a/components/icons/ArrowBottomHD.js b/components/icons/ArrowBottomHD.js
index a99780e..63b8b54 100644
--- a/components/icons/ArrowBottomHD.js
+++ b/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>
diff --git a/components/icons/ArrowLeftPU.js b/components/icons/ArrowLeftPU.js
index 348d567..2a0b9d5 100644
--- a/components/icons/ArrowLeftPU.js
+++ b/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"
diff --git a/components/layoutPanel/header/MenuProfile.js b/components/layoutPanel/header/MenuProfile.js
index 0671c20..b09e277 100644
--- a/components/layoutPanel/header/MenuProfile.js
+++ b/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>
diff --git a/components/panel/ContentText.js b/components/panel/ContentText.js
index 5d91a48..42e3c02 100644
--- a/components/panel/ContentText.js
+++ b/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>
   );
diff --git a/components/panel/userAccount/Head.js b/components/panel/userAccount/Head.js
index 06b3a4e..3c82023 100644
--- a/components/panel/userAccount/Head.js
+++ b/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 />
diff --git a/components/panel/userAccount/index.js b/components/panel/userAccount/index.js
index 4d7aee4..5d56d8e 100644
--- a/components/panel/userAccount/index.js
+++ b/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 />