santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): add pointer cursors to repair evidence and multi-select controls

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-23 23:51:54 +05:30
parent 6e16d4f2c8
commit 5439a5ff45
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(modules)/ticket/[ticketId]/components/actions/RepairEvidenceForm.tsx
View File

@@ -41,7 +41,7 @@ function MediaDropzone({
disabled={disabled} disabled={disabled}
onClick={() => inputRef.current?.click()} onClick={() => inputRef.current?.click()}
className={cn( className={cn(
'flex w-full items-center gap-3 rounded-lg border border-dashed px-4 py-3 text-left transition-colors', 'flex w-full items-center cursor-pointer gap-3 rounded-lg border border-dashed px-4 py-3 text-left transition-colors',
'hover:border-primary/50 hover:bg-muted/30', 'hover:border-primary/50 hover:bg-muted/30',
disabled && 'pointer-events-none opacity-60', disabled && 'pointer-events-none opacity-60',
file && 'border-primary/40 bg-muted/20', file && 'border-primary/40 bg-muted/20',
@@ -92,7 +92,7 @@ function ImageSlot({
}: ImageSlotProps) { }: ImageSlotProps) {
if (file && previewUrl) { if (file && previewUrl) {
return ( return (
<div className="group relative aspect-square overflow-hidden rounded-lg border bg-muted/30"> <div className="group relative aspect-square overflow-hidden rounded-lg border bg-muted/30">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={previewUrl} src={previewUrl}
@@ -103,7 +103,7 @@ function ImageSlot({
type="button" type="button"
disabled={disabled} disabled={disabled}
onClick={onRemove} onClick={onRemove}
className="absolute top-1 right-1 flex size-5 items-center justify-center rounded-full bg-background/90 text-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 disabled:pointer-events-none" className="absolute top-1 right-1 flex size-5 cursor-pointer items-center justify-center rounded-full bg-background/90 text-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-50"
aria-label={`Remove ${file.name}`} aria-label={`Remove ${file.name}`}
> >
<X className="size-3" /> <X className="size-3" />
@@ -118,9 +118,9 @@ function ImageSlot({
disabled={disabled} disabled={disabled}
onClick={onAdd} onClick={onAdd}
className={cn( className={cn(
'flex aspect-square items-center justify-center rounded-lg border border-dashed bg-muted/20 text-muted-foreground transition-colors', 'flex aspect-square cursor-pointer items-center justify-center rounded-lg border border-dashed bg-muted/20 text-muted-foreground transition-colors',
'hover:border-primary/50 hover:bg-muted/40 hover:text-primary', 'hover:border-primary/50 hover:bg-muted/40 hover:text-primary',
disabled && 'pointer-events-none opacity-60', disabled && 'cursor-not-allowed opacity-60',
)} )}
aria-label="Add image" aria-label="Add image"
> >

11
src/components/form/MultiSelectPopover.tsx
View File

@@ -88,7 +88,12 @@ export function MultiSelectPopover({
return ( return (
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button type="button" variant="outline" size="sm" className="shadow-none"> <Button
type="button"
variant="outline"
size="sm"
className="shadow-none"
>
{icon} {icon}
{label} {label}
<Badge variant="secondary">{values.length}</Badge> <Badge variant="secondary">{values.length}</Badge>
@@ -101,7 +106,7 @@ export function MultiSelectPopover({
type="button" type="button"
onClick={toggleAll} onClick={toggleAll}
aria-label={`Toggle all ${label}`} aria-label={`Toggle all ${label}`}
className="shrink-0 rounded-md p-0.5 hover:bg-muted" className="shrink-0 cursor-pointer rounded-md p-0.5 hover:bg-muted"
> >
<span className={checkboxClass(areAllSelected)}> <span className={checkboxClass(areAllSelected)}>
{areAllSelected ? <Check className="size-3" /> : null} {areAllSelected ? <Check className="size-3" /> : null}
@@ -130,7 +135,7 @@ export function MultiSelectPopover({
disabled={option.disabled} disabled={option.disabled}
onClick={() => toggleValue(option.value)} onClick={() => toggleValue(option.value)}
className={cn( className={cn(
'flex min-w-0 flex-1 items-center gap-2 text-left', 'flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left',
option.disabled && 'cursor-not-allowed opacity-60', option.disabled && 'cursor-not-allowed opacity-60',
)} )}
> >