add: profile pages dark theme

This commit is contained in:
Mahyar Khanbolooki
2025-08-12 21:24:45 +03:30
parent 886cb4cf82
commit aa9414193e
4 changed files with 21 additions and 19 deletions
@@ -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()}
>
انصراف
+10 -10
View File
@@ -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>
@@ -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>
+1 -1
View File
@@ -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"