From 2979078edd95fa7de749848e2422c1160064b07d Mon Sep 17 00:00:00 2001
From: Rene <r3n3mm@gmail.com>
Date: Wed, 1 Jul 2026 15:32:31 +0200
Subject: [PATCH] Fix customer/owner dropdown readability in New Project dialog

Replace native <select> elements with shadcn Select component
so dropdown options use the theme's styled popover colors
---
 src/app/(dashboard)/projects/page.tsx | 40 +++++++++++++--------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app/(dashboard)/projects/page.tsx b/src/app/(dashboard)/projects/page.tsx
index c119fb4..d0b4fc1 100644
--- a/src/app/(dashboard)/projects/page.tsx
+++ b/src/app/(dashboard)/projects/page.tsx
@@ -220,29 +220,29 @@ function NewProjectDialog({ statuses, onCreated }: { statuses: ProjectStatus[];
           </div>
           <div>
             <label className="text-sm font-medium">Customer *</label>
-            <select
-              value={customerId}
-              onChange={(e) => setCustomerId(e.target.value)}
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
-            >
-              <option value="">Select customer...</option>
-              {customers.map((c: any) => (
-                <option key={c.id} value={c.id}>{c.company_name || `${c.first_name} ${c.last_name}`}</option>
-              ))}
-            </select>
+            <Select value={customerId} onValueChange={setCustomerId}>
+              <SelectTrigger className="h-9 w-full">
+                <SelectValue placeholder="Select customer..." />
+              </SelectTrigger>
+              <SelectContent>
+                {customers.map((c: any) => (
+                  <SelectItem key={c.id} value={c.id}>{c.company_name || `${c.first_name} ${c.last_name}`}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div>
             <label className="text-sm font-medium">Project Owner</label>
-            <select
-              value={ownerId}
-              onChange={(e) => setOwnerId(e.target.value)}
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
-            >
-              <option value="">Select owner...</option>
-              {users.map((u: any) => (
-                <option key={u.id} value={u.id}>{u.first_name} {u.last_name}</option>
-              ))}
-            </select>
+            <Select value={ownerId} onValueChange={setOwnerId}>
+              <SelectTrigger className="h-9 w-full">
+                <SelectValue placeholder="Select owner..." />
+              </SelectTrigger>
+              <SelectContent>
+                {users.map((u: any) => (
+                  <SelectItem key={u.id} value={u.id}>{u.first_name} {u.last_name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div>