From 72241570858c329b9d680a135cf6695c1c0de8c6 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 19 Dec 2025 18:01:07 -0800
Subject: [PATCH] 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

---
 frontend/src/components/aura/VisitorCheckIn.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/aura/VisitorCheckIn.tsx b/frontend/src/components/aura/VisitorCheckIn.tsx
index bbbb099..dd1aa05 100644
--- a/frontend/src/components/aura/VisitorCheckIn.tsx
+++ b/frontend/src/components/aura/VisitorCheckIn.tsx
@@ -13,7 +13,8 @@ import {
     Shield,
     Trash2,
     Loader2,
-    AlertTriangle
+    AlertTriangle,
+    ChevronDown
 } from "lucide-react";
 import { visitorsApi } from "@/lib/visitorsApi";
 
@@ -349,8 +350,11 @@ const VisitorCheckIn = ({ onBack, onSuccess }: VisitorCheckInProps) => {
                 {/* Visitor Type Selector */}
                 <div className={commonStyles.inputWrapper}>
                     <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
-                        className={`${commonStyles.input} peer appearance-none`}
+                        className={`${commonStyles.input} pt-6 pb-2 peer appearance-none`}
                         value={formData.type}
                         onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
                         disabled={loading}
@@ -361,7 +365,7 @@ const VisitorCheckIn = ({ onBack, onSuccess }: VisitorCheckInProps) => {
                         <option value="VENDOR">Vendor</option>
                         <option value="DELIVERY">Delivery</option>
                     </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
                     </label>
                 </div>