fix dropdown menu styling

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"
+              placeholder="Select a user..."
-            >
+              options={availableUsers.map(u => ({ value: u._id, label: `${u.username} (${u.email})` }))}
-              <option value="">Select a user...</option>
+              className="flex-1"
-              {availableUsers.map(u => (
+            />
-                <option key={u._id} value={u._id}>
-                  {u.username} ({u.email})
-                </option>
-              ))}
-            </select>
             <Button
               icon={UserPlus}
               onClick={handleAdd}

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 {