alezmad/whyrating-engine-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Change search fields to horizontal layout

Browse Source 
- Place Business Name, Location, and Validate button in same row
- Reduce padding and font sizes for compact inline layout
- Show abbreviated text on mobile (responsive)
- Use checkmark indicator for auto-detected location

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-01-24 16:37:08 +00:00
parent 82b2c51e4e
commit d4c3018429
1 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/components/ScraperTest.tsx
View File

@@ -495,17 +495,17 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
</div> </div>
</div> </div>
{/* Search Interface - Split Fields */} {/* Search Interface - Horizontal Layout */}
<> <>
<div className="mb-4 space-y-3"> <div className="mb-4 flex gap-2 items-end">
{/* Business Name Field */} {/* Business Name Field */}
<div> <div className="flex-1">
<label className="block text-sm font-semibold text-gray-700 mb-1"> <label className="block text-xs font-semibold text-gray-600 mb-1">
Business Name <span className="text-red-500">*</span> Business Name <span className="text-red-500">*</span>
</label> </label>
<div className="relative"> <div className="relative">
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg> </svg>
</div> </div>
@@ -520,25 +520,23 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
handleSearch(); handleSearch();
} }
}} }}
placeholder="e.g., Starbucks, McDonald's, Hilton Hotel..." placeholder="Starbucks, McDonald's..."
className="w-full pl-12 pr-4 py-3 text-gray-900 bg-white border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all" className="w-full pl-9 pr-3 py-2.5 text-gray-900 bg-white border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all text-sm"
/> />
</div> </div>
</div> </div>
{/* Location Field */} {/* Location Field */}
<div> <div className="flex-1">
<label className="block text-sm font-semibold text-gray-700 mb-1"> <label className="block text-xs font-semibold text-gray-600 mb-1">
Location Location
{detectedLocation && ( {detectedLocation && (
<span className="ml-2 text-xs font-normal text-green-600"> <span className="ml-1 text-xs font-normal text-green-600">✓</span>
(auto-detected from your IP)
</span>
)} )}
</label> </label>
<div className="relative"> <div className="relative">
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"> <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg> </svg>
@@ -553,8 +551,8 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
handleSearch(); handleSearch();
} }
}} }}
placeholder={detectedLocation ? `${detectedLocation.city}, ${detectedLocation.country}` : "City, Country (e.g., New York, USA)"} placeholder={detectedLocation ? `${detectedLocation.city}, ${detectedLocation.country}` : "City, Country"}
className="w-full pl-12 pr-4 py-3 text-gray-900 bg-white border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition-all" className="w-full pl-9 pr-3 py-2.5 text-gray-900 bg-white border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all text-sm"
/> />
</div> </div>
</div> </div>
@@ -563,7 +561,7 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
<button <button
onClick={handleSearch} onClick={handleSearch}
disabled={!businessNameQuery.trim() || isCheckingReviews} disabled={!businessNameQuery.trim() || isCheckingReviews}
className={`w-full px-6 py-3 font-semibold rounded-xl transition-all flex items-center justify-center gap-2 ${ className={`px-5 py-2.5 font-semibold rounded-lg transition-all flex items-center gap-2 whitespace-nowrap ${
hasReviews === true && buildSearchQuery() === searchedQuery hasReviews === true && buildSearchQuery() === searchedQuery
? 'bg-green-600 text-white hover:bg-green-700' ? 'bg-green-600 text-white hover:bg-green-700'
: hasReviews === false && buildSearchQuery() === searchedQuery : hasReviews === false && buildSearchQuery() === searchedQuery
@@ -574,28 +572,29 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
{isCheckingReviews ? ( {isCheckingReviews ? (
<> <>
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
Validating... <span className="hidden sm:inline">Validating...</span>
</> </>
) : hasReviews === true && buildSearchQuery() === searchedQuery ? ( ) : hasReviews === true && buildSearchQuery() === searchedQuery ? (
<> <>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg> </svg>
{availableReviewCount?.toLocaleString()} reviews found <span className="hidden sm:inline">{availableReviewCount?.toLocaleString()} reviews</span>
<span className="sm:hidden">{availableReviewCount?.toLocaleString()}</span>
</> </>
) : hasReviews === false && buildSearchQuery() === searchedQuery ? ( ) : hasReviews === false && buildSearchQuery() === searchedQuery ? (
<> <>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg> </svg>
No reviews found <span className="hidden sm:inline">Not found</span>
</> </>
) : ( ) : (
<> <>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 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>
Validate Business <span className="hidden sm:inline">Validate</span>
</> </>
)} )}
</button> </button>