fix(ui): Fix styling for Visitor Type dropdown
- Added ChevronDown icon for better UX - Adjusted padding to prevent text overlapping with floating label - Fixed floating label position for non-empty select element - Restored missing AlertTriangle import
This commit is contained in:
parent
df9432ac1a
commit
7224157085
1 changed files with 7 additions and 3 deletions
|
|
@ -13,7 +13,8 @@ import {
|
||||||
Shield,
|
Shield,
|
||||||
Trash2,
|
Trash2,
|
||||||
Loader2,
|
Loader2,
|
||||||
AlertTriangle
|
AlertTriangle,
|
||||||
|
ChevronDown
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { visitorsApi } from "@/lib/visitorsApi";
|
import { visitorsApi } from "@/lib/visitorsApi";
|
||||||
|
|
||||||
|
|
@ -349,8 +350,11 @@ const VisitorCheckIn = ({ onBack, onSuccess }: VisitorCheckInProps) => {
|
||||||
{/* Visitor Type Selector */}
|
{/* Visitor Type Selector */}
|
||||||
<div className={commonStyles.inputWrapper}>
|
<div className={commonStyles.inputWrapper}>
|
||||||
<Shield className={commonStyles.inputIcon} />
|
<Shield className={commonStyles.inputIcon} />
|
||||||
|
<div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
||||||
|
<ChevronDown size={16} />
|
||||||
|
</div>
|
||||||
<select
|
<select
|
||||||
className={`${commonStyles.input} peer appearance-none`}
|
className={`${commonStyles.input} pt-6 pb-2 peer appearance-none`}
|
||||||
value={formData.type}
|
value={formData.type}
|
||||||
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
|
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
|
|
@ -361,7 +365,7 @@ const VisitorCheckIn = ({ onBack, onSuccess }: VisitorCheckInProps) => {
|
||||||
<option value="VENDOR">Vendor</option>
|
<option value="VENDOR">Vendor</option>
|
||||||
<option value="DELIVERY">Delivery</option>
|
<option value="DELIVERY">Delivery</option>
|
||||||
</select>
|
</select>
|
||||||
<label className={commonStyles.label}>
|
<label className="absolute left-12 top-1.5 text-xs text-slate-500 font-medium transition-all duration-200">
|
||||||
Visit Type
|
Visit Type
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue