realigned input fields

This commit is contained in:
chark1es 2025-03-12 14:59:34 -07:00
parent fae48f3b17
commit f28a076cfb

View file

@ -380,32 +380,33 @@ const EventRequestManagementTable = ({
{/* Filters and controls */} {/* Filters and controls */}
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 p-4 bg-base-300/50 rounded-lg border border-base-100/10 mb-6"> <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 p-4 bg-base-300/50 rounded-lg border border-base-100/10 mb-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full lg:w-auto"> <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full lg:w-auto">
<div className="form-control w-full sm:w-auto"> <div className="relative flex items-center w-full sm:w-auto">
<div className="input-group"> <input
<input type="text"
type="text" placeholder="Search events..."
placeholder="Search events..." className="input bg-[#1e2029] border-[#2a2d3a] focus:border-primary w-full sm:w-64 pr-10 rounded-lg"
className="input input-bordered focus:border-primary w-full sm:w-64" value={searchTerm}
value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)}
onChange={(e) => setSearchTerm(e.target.value)} />
/> <button className="absolute right-0 top-0 btn btn-square bg-primary text-white hover:bg-primary/90 border-none rounded-l-none h-full">
<button className="btn btn-square bg-primary/10 border-primary/20 text-primary hover:bg-primary/20"> <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>
</svg> </button>
</button> </div>
</div> <div className="relative w-full sm:w-auto">
<select
className="select bg-[#1e2029] border-[#2a2d3a] focus:border-primary w-full appearance-none pr-10 rounded-lg"
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
>
<option value="all">All Statuses</option>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
<option value="declined">Declined</option>
</select>
</div> </div>
<select
className="select select-bordered focus:border-primary w-full sm:w-auto"
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
>
<option value="all">All Statuses</option>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
<option value="declined">Declined</option>
</select>
</div> </div>
<div className="flex items-center gap-3 w-full lg:w-auto justify-between sm:justify-end"> <div className="flex items-center gap-3 w-full lg:w-auto justify-between sm:justify-end">
<span className="text-sm text-gray-400"> <span className="text-sm text-gray-400">