fileInputRef.current?.click()}
- className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-700 p-6 cursor-pointer hover:border-primary/50 transition-colors"
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ')
+ fileInputRef.current?.click();
+ }}
+ className={cn(
+ 'group flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed p-5 transition-all',
+ file
+ ? 'border-primary/35 bg-primary/[0.04]'
+ : 'hover:border-primary/40 border-slate-700/80 bg-slate-950/40 hover:bg-slate-950/70'
+ )}
>
{file ? (
<>
-
-
{file.name}
-
- {parsedRows.length} row{parsedRows.length !== 1 ? 's' : ''} detected
+
+
+
+
+ {truncateFilename(file.name)}
+
+ {parsedRows.length} row{parsedRows.length !== 1 ? 's' : ''}{' '}
+ ready
+
>
) : (
<>
-
+
+
+
- Click to upload CSV file
+ Click to choose a CSV file
-
- CSV with "phone" column required
+
+ .csv up to your browser limit
>
)}
@@ -272,63 +482,136 @@ export function ImportModal({ open, onOpenChange, onImported }: ImportModalProps
onChange={handleFileChange}
className="hidden"
/>
+