From aa9414193e01fc56d325fb51d3cf417820396ea0 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Tue, 12 Aug 2025 21:24:45 +0330
Subject: [PATCH] add: profile pages dark theme

---
 .../[name]/(Profile)/profile/edit/page.tsx    | 16 ++++++++-------
 src/app/[name]/(Profile)/profile/page.tsx     | 20 +++++++++----------
 .../[name]/(Profile)/profile/wallet/page.tsx  |  2 +-
 src/components/ui/calendar.tsx                |  2 +-
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/app/[name]/(Profile)/profile/edit/page.tsx b/src/app/[name]/(Profile)/profile/edit/page.tsx
index a16d666..03c220a 100644
--- a/src/app/[name]/(Profile)/profile/edit/page.tsx
+++ b/src/app/[name]/(Profile)/profile/edit/page.tsx
@@ -119,16 +119,18 @@ function ProfileIndex({ }: Props) {
                                 <ShadButton
                                     variant="outline"
                                     id="date"
-                                    className="w-full bg-white justify-between font-normal relative h-11 rounded-normal hover:bg-white"
+                                    className="w-full bg-container dark:text-border justify-between font-normal relative h-11 rounded-normal hover:bg-white"
                                 >
-                                    {dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
-                                    <Calendar2 className='stroke-disabled2' size={24} />
-                                    <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-white px-2'>تاریخ تولد</span>
+                                    <div className='text-foreground'>
+                                        {dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
+                                    </div>
+                                    <Calendar2 className='stroke-disabled2 dark:stroke-foreground' size={24} />
+                                    <span className='absolute text-foreground text-xs top-0 -translate-y-2 right-2 bg-container px-2'>تاریخ تولد</span>
                                 </ShadButton>
                             </PopoverTrigger>
                             <PopoverContent className="w-auto overflow-hidden p-0 z-20 box-shadow-normal rounded-lg" align="center">
                                 <Calendar
-                                    className='bg-white z-20 min-w-64 rounded-lg'
+                                    className='bg-white dark:bg-background z-20 min-w-64 rounded-lg'
                                     mode="single"
                                     defaultMonth={dateOfBirth}
                                     selected={dateOfBirth}
@@ -151,7 +153,7 @@ function ProfileIndex({ }: Props) {
                                 id={PORFILE_EDIT_PAGE_ELEMENT.INPUT_GENDER}
                                 selectedId={selectedGender}
                                 onSelectionChange={changeGender} />
-                            <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-white px-2'>جنسیت</span>
+                            <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-container px-2'>جنسیت</span>
                         </div>
                     </div>
                 </div>
@@ -159,7 +161,7 @@ function ProfileIndex({ }: Props) {
                 <div className='w-full text-center mt-16 grid grid-cols-2 gap-4'>
                     <Button>ذخیره</Button>
                     <Button
-                        className='bg-neutral-200! text-disabled-text!'
+                        className='bg-neutral-200! dark:bg-neutral-600! text-disabled-text!'
                         onClick={() => router.back()}
                     >
                         انصراف
diff --git a/src/app/[name]/(Profile)/profile/page.tsx b/src/app/[name]/(Profile)/profile/page.tsx
index c08c63d..64378d3 100644
--- a/src/app/[name]/(Profile)/profile/page.tsx
+++ b/src/app/[name]/(Profile)/profile/page.tsx
@@ -51,8 +51,8 @@ function ProfileIndex({ }: Props) {
                         />
                         <div className='block'>
                             <div className='font-medium text-base '>علیرضا عابدزاده</div>
-                            <div className='text-xs text-primary mt-3 inline-flex items-center gap-2'>
-                                <Verify size={16} className='stroke-primary mb-0.5' />
+                            <div className='text-xs text-primary dark:text-neutral-200 mt-3 inline-flex items-center gap-2'>
+                                <Verify size={16} className='stroke-primary dark:stroke-foreground mb-0.5' />
                                 <span>
                                     شناسه کاربری:
                                 </span>
@@ -63,23 +63,23 @@ function ProfileIndex({ }: Props) {
 
                     <div className="grid gap-6 mt-6">
                         <div className='inline-flex items-center gap-2.5'>
-                            <CallCalling size={16} className='stroke-disabled2 mb-0.5' />
-                            <span className='text-sm2 text-disabled2'>شماره همراه:</span>
+                            <CallCalling size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
+                            <span className='text-sm2 text-disabled2 dark:text-gray-300'>شماره همراه:</span>
                             <span className='text-sm2'>09010901738</span>
                         </div>
                         <div className='inline-flex items-center gap-2.5'>
-                            <Sms size={16} className='stroke-disabled2 mb-0.5' />
-                            <span className='text-sm2 text-disabled2'>ایمیل:</span>
+                            <Sms size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
+                            <span className='text-sm2 text-disabled2 dark:text-gray-300'>ایمیل:</span>
                             <span className='text-sm2'>alirezaabed@gmail.com</span>
                         </div>
                         <div className='inline-flex items-center gap-2.5'>
-                            <Calendar2 size={16} className='stroke-disabled2 mb-0.5' />
-                            <span className='text-sm2 text-disabled2'>تاریخ تولد:</span>
+                            <Calendar2 size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
+                            <span className='text-sm2 text-disabled2 dark:text-gray-300'>تاریخ تولد:</span>
                             <span className='text-sm2'>1375/5/14</span>
                         </div>
                         <div className='inline-flex items-center gap-2.5'>
-                            <Profile size={16} className='stroke-disabled2 mb-0.5' />
-                            <span className='text-sm2 text-disabled2'>جنسیت:</span>
+                            <Profile size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
+                            <span className='text-sm2 text-disabled2 dark:text-gray-300'>جنسیت:</span>
                             <span className='text-sm2'>آقا</span>
                         </div>
                     </div>
diff --git a/src/app/[name]/(Profile)/profile/wallet/page.tsx b/src/app/[name]/(Profile)/profile/wallet/page.tsx
index 1e004ac..9629716 100644
--- a/src/app/[name]/(Profile)/profile/wallet/page.tsx
+++ b/src/app/[name]/(Profile)/profile/wallet/page.tsx
@@ -43,7 +43,7 @@ function UserWalletIndex({ }: Props) {
                                 <WalletMinus className='size-5 stroke-foreground mb-0.5' />
                                 موجودی کیف پول
                             </div>
-                            <div className='text-sm text-primary mt-3 inline-flex items-center gap-2'>
+                            <div className='text-sm text-primary mt-3 inline-flex dark:text-neutral-200 items-center gap-2'>
                                 {ef('250.000 تومان')}
                             </div>
                         </div>
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index a6d9bac..86d89b7 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -91,7 +91,7 @@ export default function Calendar({
                     "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
                     defaultClassNames.dropdown_root
                 ),
-                dropdown: cn("absolute inset-0 opacity-0 ", defaultClassNames.dropdown),
+                dropdown: cn("absolute inset-0 opacity-0 dark:bg-container", defaultClassNames.dropdown),
                 caption_label: cn(
                     "select-none font-medium",
                     captionLayout === "label"