Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine validation error UI in HeroSection and improve FilterModal section header layout

Browse Source
This commit is contained in:
pradeepkumar
2026-04-18 08:14:46 +05:30
parent 39a8d846b4
commit 945f0dafaa
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/home/HeroSection.tsx
View File

@@ -241,15 +241,15 @@ export function HeroSection({ content }: { content?: HeroContent }) {
{/* Validation Error Message */}
{validationError && (
<div className="absolute left-0 right-0 mt-2 text-center z-10 px-4">
<div className="text-white font-serif text-sm bg-red-500/90 rounded-[7px] py-2 px-4 inline-flex items-center gap-3 max-w-full">
<div className="mt-3 flex justify-center px-2">
<div className="text-white font-serif text-xs md:text-sm bg-red-500/90 rounded-[7px] py-1.5 px-3 inline-flex items-center gap-2 max-w-fit shadow-md">
<span className="text-left">{validationError}</span>
<button
onClick={handleClearError}
className="hover:bg-white/20 rounded-full p-0.5 transition-colors"
className="flex-shrink-0 hover:bg-white/20 rounded-full p-0.5 transition-colors"
title="Dismiss"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>

6
src/components/profiles/FilterModal.tsx
View File

@@ -68,10 +68,10 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
<div className="mb-6">
<button
onClick={() => toggleSection(field.slug)}
className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
className="w-full flex items-center justify-between gap-2 font-fractul text-[20px] text-[#00293d] mb-4 text-left"
>
{field.name}
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections[field.slug] ? 'rotate-180' : ''}`}>
<span className="flex-1 min-w-0">{field.name}</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`flex-shrink-0 transition-transform ${expandedSections[field.slug] ? 'rotate-180' : ''}`}>
<path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>