Replace field-specific search with global search input

- Remove dropdown selector and search button
- Use standalone woSearchInput class to avoid inherited border issues
- Single text input searches across all fields as you type
This commit is contained in:
Adam Moussa 2026-04-16 19:10:54 -04:00
parent fe62f5fb0a
commit 0d473b97db
2 changed files with 18 additions and 11 deletions

View file

@ -78,19 +78,12 @@ export default function WorkOrdersList() {
<div className="searchControls"> <div className="searchControls">
<div className="searchLeft"> <div className="searchLeft">
<div className="searchInputGroup"> <div className="searchInputGroup">
<select className="searchDropdown" defaultValue="Title">
<option>Title</option>
<option>WO #</option>
<option>Location</option>
<option>Status</option>
</select>
<input <input
className="searchInput" className="woSearchInput"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
placeholder="Enter search criteria here..." placeholder="Search work orders..."
/> />
<button className="searchButton">Search!</button>
</div> </div>
<div className="viewToggle"> <div className="viewToggle">
<button <button

View file

@ -124,8 +124,6 @@
height: 38px; height: 38px;
padding: 6px 12px; padding: 6px 12px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-left: none;
border-right: 1px solid #ccc;
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
outline: none; outline: none;
@ -136,6 +134,22 @@
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
} }
.woSearchInput {
height: 38px;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
outline: none;
width: 100%;
box-sizing: border-box;
}
.woSearchInput:focus {
border-color: #66afe9;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.searchButton { .searchButton {
height: 38px; height: 38px;
padding: 6px 20px; padding: 6px 20px;