refactor(DocumentsFilters): update input styling and button positioning for improved UI consistency

This commit is contained in:
Anish Sarkar 2026-04-24 22:56:04 +05:30
parent 08740cad32
commit 39f56a86d6

View file

@ -226,13 +226,13 @@ export function DocumentsFilters({
{/* Search Input */} {/* Search Input */}
<div className="relative flex-1 min-w-0"> <div className="relative flex-1 min-w-0">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground"> <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<Search size={14} aria-hidden="true" /> <Search size={14} aria-hidden="true" />
</div> </div>
<Input <Input
id={`${id}-input`} id={`${id}-input`}
ref={inputRef} ref={inputRef}
className="peer h-9 w-full pl-9 pr-9 text-sm bg-sidebar border-border/60 select-none focus:select-text" className="h-9 w-full pl-9 pr-8 text-sm select-none focus:select-text"
value={searchValue} value={searchValue}
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
placeholder="Search docs" placeholder="Search docs"
@ -242,7 +242,7 @@ export function DocumentsFilters({
{Boolean(searchValue) && ( {Boolean(searchValue) && (
<button <button
type="button" type="button"
className="absolute inset-y-0 right-0 flex h-full w-9 items-center justify-center rounded-r-md text-muted-foreground hover:text-foreground transition-colors" className="absolute right-1 top-1/2 -translate-y-1/2 inline-flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
aria-label="Clear filter" aria-label="Clear filter"
onClick={() => { onClick={() => {
onSearch(""); onSearch("");
@ -260,7 +260,7 @@ export function DocumentsFilters({
onClick={handleUpload} onClick={handleUpload}
variant="outline" variant="outline"
size="sm" size="sm"
className="h-9 shrink-0 gap-1.5 bg-white text-gray-700 border-white hover:bg-gray-50 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100" className="h-9 shrink-0 gap-1.5 border-0 shadow-none bg-white text-gray-700 hover:bg-gray-50 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100"
> >
<Upload size={14} /> <Upload size={14} />
<span>Upload</span> <span>Upload</span>