add: profile pages dark theme
This commit is contained in:
Mahyar Khanbolooki
@@ -119,16 +119,18 @@ function ProfileIndex({ }: Props) {
|
|||||||
<ShadButton
|
<ShadButton
|
||||||
variant="outline"
|
variant="outline"
|
||||||
id="date"
|
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"
|
||||||
>
|
>
|
||||||
|
<div className='text-foreground'>
|
||||||
{dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
|
{dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
|
||||||
<Calendar2 className='stroke-disabled2' size={24} />
|
</div>
|
||||||
<span className='absolute text-xs top-0 -translate-y-2 right-2 bg-white px-2'>تاریخ تولد</span>
|
<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>
|
</ShadButton>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-auto overflow-hidden p-0 z-20 box-shadow-normal rounded-lg" align="center">
|
<PopoverContent className="w-auto overflow-hidden p-0 z-20 box-shadow-normal rounded-lg" align="center">
|
||||||
<Calendar
|
<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"
|
mode="single"
|
||||||
defaultMonth={dateOfBirth}
|
defaultMonth={dateOfBirth}
|
||||||
selected={dateOfBirth}
|
selected={dateOfBirth}
|
||||||
@@ -151,7 +153,7 @@ function ProfileIndex({ }: Props) {
|
|||||||
id={PORFILE_EDIT_PAGE_ELEMENT.INPUT_GENDER}
|
id={PORFILE_EDIT_PAGE_ELEMENT.INPUT_GENDER}
|
||||||
selectedId={selectedGender}
|
selectedId={selectedGender}
|
||||||
onSelectionChange={changeGender} />
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -159,7 +161,7 @@ function ProfileIndex({ }: Props) {
|
|||||||
<div className='w-full text-center mt-16 grid grid-cols-2 gap-4'>
|
<div className='w-full text-center mt-16 grid grid-cols-2 gap-4'>
|
||||||
<Button>ذخیره</Button>
|
<Button>ذخیره</Button>
|
||||||
<Button
|
<Button
|
||||||
className='bg-neutral-200! text-disabled-text!'
|
className='bg-neutral-200! dark:bg-neutral-600! text-disabled-text!'
|
||||||
onClick={() => router.back()}
|
onClick={() => router.back()}
|
||||||
>
|
>
|
||||||
انصراف
|
انصراف
|
||||||
|
|||||||
@@ -51,8 +51,8 @@ function ProfileIndex({ }: Props) {
|
|||||||
/>
|
/>
|
||||||
<div className='block'>
|
<div className='block'>
|
||||||
<div className='font-medium text-base '>علیرضا عابدزاده</div>
|
<div className='font-medium text-base '>علیرضا عابدزاده</div>
|
||||||
<div className='text-xs text-primary mt-3 inline-flex items-center gap-2'>
|
<div className='text-xs text-primary dark:text-neutral-200 mt-3 inline-flex items-center gap-2'>
|
||||||
<Verify size={16} className='stroke-primary mb-0.5' />
|
<Verify size={16} className='stroke-primary dark:stroke-foreground mb-0.5' />
|
||||||
<span>
|
<span>
|
||||||
شناسه کاربری:
|
شناسه کاربری:
|
||||||
</span>
|
</span>
|
||||||
@@ -63,23 +63,23 @@ function ProfileIndex({ }: Props) {
|
|||||||
|
|
||||||
<div className="grid gap-6 mt-6">
|
<div className="grid gap-6 mt-6">
|
||||||
<div className='inline-flex items-center gap-2.5'>
|
<div className='inline-flex items-center gap-2.5'>
|
||||||
<CallCalling size={16} className='stroke-disabled2 mb-0.5' />
|
<CallCalling size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
|
||||||
<span className='text-sm2 text-disabled2'>شماره همراه:</span>
|
<span className='text-sm2 text-disabled2 dark:text-gray-300'>شماره همراه:</span>
|
||||||
<span className='text-sm2'>09010901738</span>
|
<span className='text-sm2'>09010901738</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='inline-flex items-center gap-2.5'>
|
<div className='inline-flex items-center gap-2.5'>
|
||||||
<Sms size={16} className='stroke-disabled2 mb-0.5' />
|
<Sms size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
|
||||||
<span className='text-sm2 text-disabled2'>ایمیل:</span>
|
<span className='text-sm2 text-disabled2 dark:text-gray-300'>ایمیل:</span>
|
||||||
<span className='text-sm2'>alirezaabed@gmail.com</span>
|
<span className='text-sm2'>alirezaabed@gmail.com</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='inline-flex items-center gap-2.5'>
|
<div className='inline-flex items-center gap-2.5'>
|
||||||
<Calendar2 size={16} className='stroke-disabled2 mb-0.5' />
|
<Calendar2 size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
|
||||||
<span className='text-sm2 text-disabled2'>تاریخ تولد:</span>
|
<span className='text-sm2 text-disabled2 dark:text-gray-300'>تاریخ تولد:</span>
|
||||||
<span className='text-sm2'>1375/5/14</span>
|
<span className='text-sm2'>1375/5/14</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='inline-flex items-center gap-2.5'>
|
<div className='inline-flex items-center gap-2.5'>
|
||||||
<Profile size={16} className='stroke-disabled2 mb-0.5' />
|
<Profile size={16} className='stroke-disabled2 dark:stroke-gray-300 mb-0.5' />
|
||||||
<span className='text-sm2 text-disabled2'>جنسیت:</span>
|
<span className='text-sm2 text-disabled2 dark:text-gray-300'>جنسیت:</span>
|
||||||
<span className='text-sm2'>آقا</span>
|
<span className='text-sm2'>آقا</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ function UserWalletIndex({ }: Props) {
|
|||||||
<WalletMinus className='size-5 stroke-foreground mb-0.5' />
|
<WalletMinus className='size-5 stroke-foreground mb-0.5' />
|
||||||
موجودی کیف پول
|
موجودی کیف پول
|
||||||
</div>
|
</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 تومان')}
|
{ef('250.000 تومان')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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",
|
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
|
||||||
defaultClassNames.dropdown_root
|
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(
|
caption_label: cn(
|
||||||
"select-none font-medium",
|
"select-none font-medium",
|
||||||
captionLayout === "label"
|
captionLayout === "label"
|
||||||
|
|||||||
Reference in New Issue
Block a user