dark mode +
This commit is contained in:
@@ -83,11 +83,11 @@ const CartSummary = ({ isPremium }: CartSummaryProps) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-border p-4 w-full'>
|
||||
<div className='fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-container border-t border-border p-4 w-full'>
|
||||
<div className='flex justify-between items-center gap-4'>
|
||||
<div className='flex flex-col'>
|
||||
<div className='text-xs text-gray-400'>{t('PayableAmountLabel')}</div>
|
||||
<div className='text-sm mt-2 font-semibold'>{formatPrice(totalPrice)} تومان</div>
|
||||
<div className='text-xs text-gray-400 dark:text-disabled-text'>{t('PayableAmountLabel')}</div>
|
||||
<div className='text-sm mt-2 font-semibold dark:text-foreground'>{formatPrice(totalPrice)} تومان</div>
|
||||
</div>
|
||||
|
||||
{isPremium && (
|
||||
|
||||
@@ -107,7 +107,7 @@ const CartIndex = () => {
|
||||
<div className='mb-4 bg-container rounded-container p-4 border border-border shadow-sm'>
|
||||
<div className='flex items-start gap-3 mb-4'>
|
||||
<div className='shrink-0 mt-0.5'>
|
||||
<NotificationBellIcon width={24} height={24} className="text-primary" />
|
||||
<NotificationBellIcon width={24} height={24} className="currentColor" />
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<p className='text-sm font-medium text-foreground mb-1'>
|
||||
|
||||
@@ -13,16 +13,16 @@ const GamePage: FC = () => {
|
||||
<div>
|
||||
<div className='grid grid-cols-3 items-center py-4'>
|
||||
<div className='w-6'></div>
|
||||
<h1 className='text-sm2 place-self-center font-medium'>بازی و سرگرمی</h1>
|
||||
<h1 className='text-sm2 place-self-center font-medium dark:text-foreground'>بازی و سرگرمی</h1>
|
||||
<ArrowLeft
|
||||
className='cursor-pointer place-self-end'
|
||||
className='cursor-pointer place-self-end dark:text-foreground'
|
||||
size='24'
|
||||
color='currentColor'
|
||||
onClick={() => router.back()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-11 relative bg-primary text-white h-[120px] rounded-[10px] p-4'>
|
||||
<div className='mt-11 relative bg-primary text-white dark:bg-primary dark:text-primary-foreground h-[120px] rounded-[10px] p-4'>
|
||||
<div className='max-w-[99px]'>
|
||||
<div className='font-bold'>My Games</div>
|
||||
<div className='mt-1'>
|
||||
@@ -46,7 +46,7 @@ const GamePage: FC = () => {
|
||||
<div className='mt-8 flex flex-col gap-4'>
|
||||
<div
|
||||
style={{ direction: 'ltr' }}
|
||||
className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
|
||||
className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
|
||||
onClick={() => {
|
||||
const currentPath = window.location.pathname
|
||||
const basePath = currentPath.split('/game')[0]
|
||||
@@ -62,21 +62,21 @@ const GamePage: FC = () => {
|
||||
className='size-[80px] object-cover'
|
||||
/>
|
||||
|
||||
<div className='text-sm font-bold max-w-[92px]'>
|
||||
<div className='text-sm font-bold max-w-[92px] dark:text-foreground'>
|
||||
2048
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||||
<div className='text-xs'>اجرا کنید</div>
|
||||
<Play size='20' color='currentColor' />
|
||||
<div className='h-8 bg-[#F2F2F2] dark:bg-disabled rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||||
<div className='text-xs dark:text-foreground'>اجرا کنید</div>
|
||||
<Play size='20' color='currentColor' className='dark:text-foreground' />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{ direction: 'ltr' }}
|
||||
className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
|
||||
className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
|
||||
onClick={() => {
|
||||
const currentPath = window.location.pathname
|
||||
const basePath = currentPath.split('/game')[0]
|
||||
@@ -92,21 +92,21 @@ const GamePage: FC = () => {
|
||||
className='size-[80px] object-cover'
|
||||
/>
|
||||
|
||||
<div className='text-sm font-bold max-w-[92px]'>
|
||||
<div className='text-sm font-bold max-w-[92px] dark:text-foreground'>
|
||||
Tower Builder
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||||
<div className='text-xs'>اجرا کنید</div>
|
||||
<Play size='20' color='currentColor' />
|
||||
<div className='h-8 bg-[#F2F2F2] dark:bg-disabled rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||||
<div className='text-xs dark:text-foreground'>اجرا کنید</div>
|
||||
<Play size='20' color='currentColor' className='dark:text-foreground' />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{ direction: 'ltr' }}
|
||||
className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
|
||||
className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
|
||||
onClick={() => {
|
||||
const currentPath = window.location.pathname
|
||||
const basePath = currentPath.split('/game')[0]
|
||||
@@ -122,14 +122,14 @@ const GamePage: FC = () => {
|
||||
className='size-[80px] object-cover'
|
||||
/>
|
||||
|
||||
<div className='text-sm font-bold max-w-[92px]'>
|
||||
<div className='text-sm font-bold max-w-[92px] dark:text-foreground'>
|
||||
The Cube
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||||
<div className='text-xs'>اجرا کنید</div>
|
||||
<Play size='20' color='currentColor' />
|
||||
<div className='h-8 bg-[#F2F2F2] dark:bg-disabled rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||||
<div className='text-xs dark:text-foreground'>اجرا کنید</div>
|
||||
<Play size='20' color='currentColor' className='dark:text-foreground' />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -190,7 +190,7 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
|
||||
<div className='text-xs text-gray-400 dark:text-gray-500'>{t("PayableAmountLabel")}</div>
|
||||
<div className='text-sm mt-2 font-semibold'>{formatPrice(total)} تومان</div>
|
||||
</div>
|
||||
<Button pending={isCreateOrderPending || isSaveAllMethodPending} onClick={handleSubmit} className='px-10 w-fit'>
|
||||
<Button pending={isCreateOrderPending || isSaveAllMethodPending} onClick={handleSubmit} className='px-10 w-fit dark:bg-white dark:text-black! dark:hover:bg-gray-100'>
|
||||
{t("ButtonSubmit")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -165,7 +165,7 @@ function OrderTrackingPage() {
|
||||
|
||||
<div className='flex justify-between items-center py-4 border-t border-border'>
|
||||
<span className='text-sm font-medium'>مجموع سفارش</span>
|
||||
<span className='text-sm font-bold text-primary'>
|
||||
<span className='text-sm font-bold '>
|
||||
{orderDetail.data.total.toLocaleString('fa-IR')} تومان
|
||||
</span>
|
||||
</div>
|
||||
@@ -182,6 +182,7 @@ function OrderTrackingPage() {
|
||||
<div className='p-4 border-t border-border bg-container'>
|
||||
<div className='max-w-2xl mx-auto grid grid-cols-2 gap-4'>
|
||||
<Button
|
||||
className='dark:bg-white dark:text-black! dark:hover:bg-gray-100'
|
||||
onClick={() => router.push(`/${name}`)}
|
||||
type='button'>
|
||||
بازگشت به منو
|
||||
|
||||
@@ -31,31 +31,31 @@ function TransactionsIndex() {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className='pt-6'>
|
||||
<h1 className='font-medium'>باشگاه مشتریان</h1>
|
||||
<section className='pt-6 pb-10'>
|
||||
<h1 className='font-medium dark:text-foreground'>باشگاه مشتریان</h1>
|
||||
|
||||
<section
|
||||
aria-label="درباره باشگاه مشتریان"
|
||||
className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
|
||||
className='mt-3 bg-container dark:bg-container rounded-normal grid grid-cols-4 items-center border border-transparent dark:border-border/50'
|
||||
>
|
||||
<div className='col-span-3 py-5 pe-7 ps-5 relative h-36.5'>
|
||||
<div className='w-full h-full absolute top-0 left-0 overflow-clip'>
|
||||
<div className='w-full h-full absolute top-0 left-0 overflow-clip text-muted-foreground/30 dark:text-foreground/20'>
|
||||
<svg width="301" height="146" viewBox="0 0 301 146" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.15">
|
||||
<path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="#AFAFAF" />
|
||||
<path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="#AFAFAF" />
|
||||
<path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="#AFAFAF" />
|
||||
<path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="#AFAFAF" />
|
||||
<path d="M262.479 152.795C202.8 122.128 120.111 132.267 77.763 175.315C35.4154 218.362 49.3247 278.14 109.004 308.807C168.683 339.474 251.373 329.335 293.721 286.287C336.069 243.24 322.159 183.462 262.479 152.795Z" stroke="currentColor" />
|
||||
<path d="M298.808 115.866C239.129 85.1988 156.44 95.3379 114.092 138.385C71.7445 181.433 85.6538 241.21 145.333 271.877C205.012 302.544 287.702 292.405 330.05 249.358C372.398 206.31 358.488 146.533 298.808 115.866Z" stroke="currentColor" />
|
||||
<path d="M347.543 66.3263C287.863 35.6595 205.174 45.7986 162.826 88.8461C120.479 131.894 134.388 191.671 194.067 222.338C253.747 253.005 336.437 242.866 378.784 199.819C421.132 156.771 407.222 96.9933 347.543 66.3263Z" stroke="currentColor" />
|
||||
<path d="M416.657 -3.92933C356.977 -34.5961 274.288 -24.457 231.941 18.5905C189.593 61.638 203.502 121.415 263.182 152.082C322.861 182.749 405.551 172.61 447.899 129.563C490.246 86.5153 476.336 26.7377 416.657 -3.92933Z" stroke="currentColor" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className='flex flex-col justify-between h-full'>
|
||||
<div className='flex flex-col justify-between h-full relative z-10'>
|
||||
<div>
|
||||
<h2 className='font-bold text-base'>در باشگاه مشتریان</h2>
|
||||
<p className='text-xs mt-[7px]'>با امتیازی که داری سفارش بده!</p>
|
||||
<h2 className='font-bold text-base dark:text-foreground'>در باشگاه مشتریان</h2>
|
||||
<p className='text-xs mt-[7px] dark:text-disabled-text'>با امتیازی که داری سفارش بده!</p>
|
||||
</div>
|
||||
|
||||
<p className='text-xs font-medium'>مجموع امتیازات شما: {ef(userWallet?.data?.points?.toString() ?? '0')}</p>
|
||||
<p className='text-xs font-medium dark:text-foreground'>مجموع امتیازات شما: {ef(userWallet?.data?.points?.toString() ?? '0')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,46 +77,46 @@ function TransactionsIndex() {
|
||||
</section>
|
||||
|
||||
{/* بخش نمایش اعتبار کاربر */}
|
||||
<section className='mt-6 bg-container rounded-normal p-5'>
|
||||
<section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
|
||||
<div className='flex items-center gap-2 mb-4'>
|
||||
<MoneyRecive color='currentColor' size={24} className='text-primary' variant='Bold' />
|
||||
<h2 className='font-bold text-base'>اعتبار شما</h2>
|
||||
<MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
|
||||
<h2 className='font-bold text-base dark:text-foreground'>اعتبار شما</h2>
|
||||
</div>
|
||||
<div className='bg-linear-to-l from-primary/10 to-primary/5 rounded-md p-4'>
|
||||
<div className='bg-linear-to-l from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 rounded-md p-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<span className='text-sm text-muted-foreground'>موجودی کیف پول:</span>
|
||||
<span className='font-bold text-lg text-primary'>{ef(userWalletAmount.toLocaleString())} تومان</span>
|
||||
<span className='text-sm text-muted-foreground dark:text-disabled-text'>موجودی کیف پول:</span>
|
||||
<span className='font-bold text-lg text-primary dark:text-foreground'>{ef(userWalletAmount.toLocaleString())} تومان</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* بخش تبدیل امتیاز به اعتبار */}
|
||||
<section className='mt-6 bg-container rounded-normal p-5'>
|
||||
<section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
|
||||
<div className='flex items-center gap-2 mb-4'>
|
||||
<MoneyRecive color='currentColor' size={24} className='text-primary' variant='Bold' />
|
||||
<h2 className='font-bold text-base'>تبدیل امتیاز به اعتبار</h2>
|
||||
<MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
|
||||
<h2 className='font-bold text-base dark:text-foreground'>تبدیل امتیاز به اعتبار</h2>
|
||||
</div>
|
||||
|
||||
<p className='text-sm text-muted-foreground mb-4'>
|
||||
<p className='text-sm text-muted-foreground dark:text-disabled-text mb-4'>
|
||||
هر {ef(aboutData?.data?.score?.purchaseScore?.toString() ?? '0')} امتیاز معادل {ef(aboutData?.data?.score?.purchaseAmount?.toString() ?? '0')} تومان اعتبار است
|
||||
</p>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<div className='bg-accent/50 rounded-md p-4 space-y-2'>
|
||||
<div className='bg-accent/50 dark:bg-disabled/30 rounded-md p-4 space-y-2 border border-border/50 dark:border-border'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<span className='text-sm text-muted-foreground'>امتیاز شما:</span>
|
||||
<span className='font-bold text-lg'>{ef(userPoints.toString())}</span>
|
||||
<span className='text-sm text-muted-foreground dark:text-disabled-text'>امتیاز شما:</span>
|
||||
<span className='font-bold text-lg dark:text-foreground'>{ef(userPoints.toString())}</span>
|
||||
</div>
|
||||
<div className='flex justify-between items-center'>
|
||||
<span className='text-sm text-muted-foreground'>دریافت میکنید:</span>
|
||||
<span className='font-bold text-lg text-primary'>{ef(calculatedAmount.toString())} تومان</span>
|
||||
<span className='text-sm text-muted-foreground dark:text-disabled-text'>دریافت میکنید:</span>
|
||||
<span className='font-bold text-lg text-primary dark:text-foreground'>{ef(calculatedAmount.toString())} تومان</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleConvert}
|
||||
disabled={userPoints <= 0 || isConverting}
|
||||
className='w-full'
|
||||
className='w-full text-xs dark:bg-white dark:text-gray-900 dark:hover:bg-white/90'
|
||||
>
|
||||
{isConverting ? 'در حال تبدیل...' : 'تبدیل تمام امتیازات'}
|
||||
</Button>
|
||||
|
||||
@@ -100,7 +100,7 @@ function TransactionsIndex() {
|
||||
<h3 className='font-bold text-sm2'>مبلغ تخفیف: {formatDiscount(coupon)}</h3>
|
||||
<p className='text-xs mt-[7px]'>{coupon.description || 'قابل استفاده برای همهی منوها و محصولات'}</p>
|
||||
<Button
|
||||
className='w-fit text-white font-bold px-10 py-1.5 mt-4 text-xs rounded-lg '
|
||||
className='w-fit text-white font-bold px-10 py-1.5 mt-4 text-xs rounded-lg dark:bg-white dark:text-black dark:hover:bg-gray-100'
|
||||
aria-label="کپی کد تخفیف"
|
||||
onClick={() => handleCopyCode(coupon.code)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user