fix: some dark theme styles
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import MinusIcon from '@/components/icons/MinusIcon'
|
import MinusIcon from '@/components/icons/MinusIcon'
|
||||||
import PlusIcon from '@/components/icons/PlusIcon'
|
import PlusIcon from '@/components/icons/PlusIcon'
|
||||||
|
import { ef } from '@/lib/helpers/utfNumbers'
|
||||||
import { useReceiptStore } from '@/zustand/receiptStore'
|
import { useReceiptStore } from '@/zustand/receiptStore'
|
||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
|
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
|
||||||
@@ -39,24 +40,24 @@ function FoodPage({ }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-white w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
|
<div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
|
||||||
<div className="w-full inline-flex justify-between items-center">
|
<div className="w-full inline-flex justify-between items-center">
|
||||||
<h5 className="text-base font-bold">
|
<h5 className="text-base font-bold">
|
||||||
کباب چوبی مخصوص
|
کباب چوبی مخصوص
|
||||||
</h5>
|
</h5>
|
||||||
<button className='p-2 bg-[#EAECF0] rounded-lg'>
|
<button className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'>
|
||||||
<Heart size={24} className='fill-black' />
|
<Heart variant='Bold' size={24} className='fill-black dark:fill-foreground' />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 text-xs">
|
<div className="mt-4 text-xs">
|
||||||
<div className='flex items-center gap-1'>
|
<div className='flex items-center gap-1'>
|
||||||
<Clock size={14} className='stroke-disabled-text' />
|
<Clock size={14} className='stroke-disabled-text' />
|
||||||
<span className='text-disabled-text'>زمان پخت و آماده سازی: 25 دقیقه</span>
|
<span className='text-disabled-text'>زمان پخت و آماده سازی: {ef('25')} دقیقه</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center gap-2 mt-2'>
|
<div className='flex items-center gap-2 mt-2'>
|
||||||
<Cup size={14} className='stroke-disabled-text' />
|
<Cup size={14} className='stroke-disabled-text' />
|
||||||
<span className='text-disabled-text'>1500 امتیاز برای هر بار خرید</span>
|
<span className='text-disabled-text'>{ef('1500')} امتیاز برای هر بار خرید</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center gap-2 mt-2'>
|
<div className='flex items-center gap-2 mt-2'>
|
||||||
<TruckTick size={14} className='stroke-disabled-text' />
|
<TruckTick size={14} className='stroke-disabled-text' />
|
||||||
@@ -81,13 +82,13 @@ function FoodPage({ }: Props) {
|
|||||||
className="inline-flex w-full justify-center items-center gap-2"
|
className="inline-flex w-full justify-center items-center gap-2"
|
||||||
>
|
>
|
||||||
<PlusIcon />
|
<PlusIcon />
|
||||||
<span className="text-sm2 pt-0.5 font-medium">افزودن</span>
|
<span className="text-sm2 pt-0.5 font-normal">افزودن</span>
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
onClick={() => increment(0)}
|
onClick={() => increment(0)}
|
||||||
className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
|
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
|
||||||
>
|
>
|
||||||
<PlusIcon />
|
<PlusIcon />
|
||||||
</button>
|
</button>
|
||||||
@@ -102,7 +103,7 @@ function FoodPage({ }: Props) {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
<button
|
<button
|
||||||
onClick={() => decrement(0)}
|
onClick={() => decrement(0)}
|
||||||
className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
|
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
|
||||||
>
|
>
|
||||||
<MinusIcon />
|
<MinusIcon />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -119,7 +119,7 @@ function ProfileIndex({ }: Props) {
|
|||||||
<ShadButton
|
<ShadButton
|
||||||
variant="outline"
|
variant="outline"
|
||||||
id="date"
|
id="date"
|
||||||
className="w-full bg-container dark:text-border justify-between font-normal relative h-11 rounded-normal hover:bg-white"
|
className="w-full bg-container text-border dark:text-border justify-between font-normal relative h-11 rounded-normal hover:bg-white"
|
||||||
>
|
>
|
||||||
<div className='text-foreground'>
|
<div className='text-foreground'>
|
||||||
{dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
|
{dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ function Button({ children, className, disabled, pending, ...rest }: Props) {
|
|||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
className,
|
className,
|
||||||
disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-background dark:text-foreground hover:bg-primary/60 active:brightness-110',
|
disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white dark:text-foreground hover:bg-primary/90 active:brightness-110',
|
||||||
pending && 'bg-transparent! text-transparent! cursor-auto!',
|
pending && 'bg-transparent! text-transparent! cursor-auto!',
|
||||||
'relative transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip'
|
'relative transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip'
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -86,7 +86,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
|
|||||||
<section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
|
<section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
|
||||||
<div className=''>
|
<div className=''>
|
||||||
<header className="px-5 pt-6 mt-3 md:px-6 xl:px-12">
|
<header className="px-5 pt-6 mt-3 md:px-6 xl:px-12">
|
||||||
<h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px] dark:text-neutral-400">منو</h6>
|
<h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px] dark:text-disabled-text">منو</h6>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav aria-label={tMenu('NavAriaLabel')}>
|
<nav aria-label={tMenu('NavAriaLabel')}>
|
||||||
@@ -111,7 +111,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
|
|||||||
<Icon
|
<Icon
|
||||||
variant={isActive ? 'Bold' : 'Linear'}
|
variant={isActive ? 'Bold' : 'Linear'}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-neutral-400 text-neutral-400'
|
isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-icon-deactive text-icon-deactive'
|
||||||
)}
|
)}
|
||||||
size={20} width={20} height={20} />
|
size={20} width={20} height={20} />
|
||||||
}
|
}
|
||||||
@@ -146,7 +146,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
|
|||||||
<Icon
|
<Icon
|
||||||
variant={isActive ? 'Bold' : 'Linear'}
|
variant={isActive ? 'Bold' : 'Linear'}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-neutral-400 text-neutral-400'
|
isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-icon-deactive text-icon-deactive'
|
||||||
)}
|
)}
|
||||||
size={20} width={20} height={20} />
|
size={20} width={20} height={20} />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user