add: profile pages dark theme
This commit is contained in:
Mahyar Khanbolooki
@@ -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()}
|
||||
>
|
||||
انصراف
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user