danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: order rate page dark theme

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 20:49:08 +03:30
parent de7a782562
commit 92608480ac
4 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/button/ToggleButton.tsx
+3 -3
View File
@@ -33,10 +33,10 @@ export type ToggleButtonClassName = {
export const ToggleButtonClassNames: ToggleButtonClassName = {
wrapper:
'relative transition-all border border-solid duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip',
wrapperDeactive: 'bg-white border-neutral-200',
wrapperDeactive: 'bg-container border-neutral-200 dark:border-neutral-500',
wrapperActive: 'border-[#439C46]',
wrapperDisabled: 'bg-disabled text-disabled-text',
wrapperEnabled: 'bg-container text-white hover:bg-gray-100 active:brightness-110',
wrapperEnabled: 'bg-container text-white hover:bg-gray-100 dark:hover:bg-neutral-700 active:brightness-110',
wrapperPending: 'bg-transparent text-transparent cursor-auto',
content: 'text-xs transition-all duration-150',
contentDeactive: 'text-foreground',
@@ -98,7 +98,7 @@ function ToggleButton({
>
{pending && (
<motion.div
className="absolute left-0 top-0 h-full w-full bg-neutral-200"
className="absolute left-0 top-0 h-full w-full bg-neutral-200 "
initial={{ y: '100%' }}
animate={{ y: 0 }}
>
src/components/ui/slider.tsx
+2 -2
View File
@@ -45,7 +45,7 @@ function Slider({
<SliderPrimitive.Range
data-slot="slider-range"
className={cn(
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
"bg-primary dark:bg-neutral-200 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
)}
/>
</SliderPrimitive.Track>
@@ -53,7 +53,7 @@ function Slider({
<SliderPrimitive.Thumb
data-slot="slider-thumb"
key={index}
className="border-primary bg-background ring-ring/50 block size-3 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
className="border-primary bg-background dark:bg-foreground ring-ring/50 block size-3 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Root>
src/components/utils/RateSelectionBar.tsx
+6 -6
View File
@@ -11,11 +11,11 @@ type Props = {
}
const defaultContent: Array<{ value: string, icon: React.ReactElement }> = [
{ value: '5', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
{ value: '4', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
{ value: '3', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
{ value: '2', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
{ value: '1', icon: <Star className='fill-black me-1 mb-1' size={24} /> },
{ value: '5', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
{ value: '4', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
{ value: '3', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
{ value: '2', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
{ value: '1', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
]
function RateSelectionBar({ name, content = defaultContent, className = '' }: Props) {
@@ -32,7 +32,7 @@ function RateSelectionBar({ name, content = defaultContent, className = '' }: Pr
{content?.map((value, index) => {
return (
<span key={index} className='flex items-center gap-1'>
<Star1 className='fill-black mb-1' size={12} />
<Star1 className='fill-black dark:fill-neutral-200 me-0.5 mb-1' size={12} />
<span className='text-xs font-medium'>{value.value}</span>
</span>
)