guh

webui/src/components/AdminPanel.jsx

@@ -57,49 +57,43 @@ export default function AdminPanel() {
   if (!isAdmin) return null;
 
   return (
-    <section className="rounded-2xl border border-amber-600/40 bg-amber-500/5 p-4 text-sm text-amber-100">
-      <header className="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <h2 className="text-lg font-semibold text-white">Admin Controls</h2>
-        <div className="flex items-center gap-2">
-          <label className="text-xs uppercase tracking-[0.3em] text-amber-300">Server mode</label>
-          <select
-            value={currentMode}
-            onChange={handleModeChange}
-            className="rounded-md border border-amber-600/40 bg-slate-950/60 px-2 py-1 text-sm text-white"
-          >
-            {MODES.map((mode) => (
-              <option key={mode.key} value={mode.key}>
-                {mode.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      </header>
+    <section className="rounded-sm bg-[#1b1b1b] p-1 text-xs text-slate-200">
+      <div className="flex items-center justify-between gap-1">
+        <span>Admin controls</span>
+        <select
+          value={currentMode}
+          onChange={handleModeChange}
+          className="rounded-sm bg-black/40 px-1 py-0.5 text-[0.7rem] text-slate-200"
+        >
+          {MODES.map((mode) => (
+            <option key={mode.key} value={mode.key}>
+              {mode.label}
+            </option>
+          ))}
+        </select>
+      </div>
 
-      <div className="space-y-3">
+      <div className="mt-1 space-y-1">
         {roster.map((rover) => (
-          <div
-            key={rover.id}
-            className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-amber-600/30 bg-slate-950/30 px-3 py-2"
-          >
+          <div key={rover.id} className="flex flex-wrap items-center justify-between gap-1 rounded-sm bg-black/30 px-1 py-1">
             <div>
-              <p className="text-white">{rover.name}</p>
-              <p className="text-xs text-amber-200">Locked: {lockMap[rover.id] ? 'yes' : 'no'}</p>
+              <p className="text-slate-100">{rover.name}</p>
+              <p className="text-[0.6rem] text-slate-500">{lockMap[rover.id] ? 'locked' : 'unlocked'}</p>
             </div>
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-1 text-[0.6rem]">
               <button
                 type="button"
                 onClick={() => handleLockToggle(rover.id, !lockMap[rover.id])}
-                className="rounded-md border border-amber-500 px-3 py-1 text-xs font-semibold text-amber-100"
+                className="rounded-sm bg-black/50 px-1 py-0.5 text-slate-100"
               >
                 {lockMap[rover.id] ? 'Unlock' : 'Lock'}
               </button>
               <button
                 type="button"
                 onClick={() => handleForceControl(rover.id)}
-                className="rounded-md border border-amber-500 px-3 py-1 text-xs font-semibold text-amber-100"
+                className="rounded-sm bg-black/50 px-1 py-0.5 text-slate-100"
               >
-                Force Control
+                Force
               </button>
             </div>
           </div>