From b076d756a3d920dead142e93b02fa7dd21abc7b1 Mon Sep 17 00:00:00 2001
From: rmoren97 <richardmoreno6697@gmail.com>
Date: Fri, 13 Feb 2026 15:42:48 -0800
Subject: [PATCH] fix dropdown menu styling

---
 src/app/(app)/servers/[id]/admins/page.tsx | 16 ++++++----------
 src/app/globals.css                        |  5 +++++
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/(app)/servers/[id]/admins/page.tsx b/src/app/(app)/servers/[id]/admins/page.tsx
index 36b4707..182bfd3 100644
--- a/src/app/(app)/servers/[id]/admins/page.tsx
+++ b/src/app/(app)/servers/[id]/admins/page.tsx
@@ -6,6 +6,7 @@ import { ArrowLeft, ShieldCheck, UserMinus, UserPlus } from 'lucide-react'
 import Link from 'next/link'
 import PageHeader from '@/components/PageHeader'
 import Button from '@/components/ui/Button'
+import Select from '@/components/ui/Select'
 import Spinner from '@/components/ui/Spinner'
 import { useToast } from '@/contexts/ToastContext'
 import { useAuth } from '@/contexts/AuthContext'
@@ -152,18 +153,13 @@ export default function ServerAdminsPage() {
             Add Admin
           </h3>
           <div className="flex gap-3">
-            <select
+            <Select
               value={selectedUserId}
               onChange={(e) => setSelectedUserId(e.target.value)}
-              className="flex-1 bg-white/[0.05] border border-white/[0.1] rounded-lg px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/30"
-            >
-              <option value="">Select a user...</option>
-              {availableUsers.map(u => (
-                <option key={u._id} value={u._id}>
-                  {u.username} ({u.email})
-                </option>
-              ))}
-            </select>
+              placeholder="Select a user..."
+              options={availableUsers.map(u => ({ value: u._id, label: `${u.username} (${u.email})` }))}
+              className="flex-1"
+            />
             <Button
               icon={UserPlus}
               onClick={handleAdd}
diff --git a/src/app/globals.css b/src/app/globals.css
index f0b9d09..4bcb6e7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -59,6 +59,11 @@ body {
   color: rgba(255, 255, 255, 0.3);
 }
 
+select option {
+  background-color: #0d0d1a;
+  color: #f3f4f6;
+}
+
 /* ─── Glass Shine (top border gradient) ───────────────────────── */
 
 .glass-shine {