guh

webui/src/components/DrivePanel.jsx

@@ -19,17 +19,17 @@ export default function DrivePanel() {
   const updated = frame?.receivedAt ? new Date(frame.receivedAt).toLocaleTimeString() : null;
 
   return (
-    <section className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-100">
-      <div className="flex items-center justify-between text-xs text-slate-300">
+    <section className="rounded-sm bg-[#242a32] p-2 text-base text-slate-100">
+      <div className="flex items-center justify-between text-sm text-slate-300">
         <span>Drive control</span>
         <span>{roverId ? `Rover ${roverId}` : 'unassigned'}</span>
       </div>
-      <div className="mt-1 space-y-1">
+      <div className="mt-2 space-y-2">
         <ActionCard
           title="Start Driving"
           description="Press to enable driving mode, then start moving. The headlamps should illuminate."
           statuses={[{ label: drivingMode ? 'Ready!' : 'Not Ready!', active: drivingMode }]}
-          gradient="from-emerald-600 to-emerald-400"
+          tone="emerald"
           onClick={runStartDockFull}
           disabled={!roverId}
           footnote={updated ? `Sensor ping ${updated}` : null}
@@ -41,13 +41,13 @@ export default function DrivePanel() {
             { label: docked ? 'Docked!' : 'Not Docked!', active: docked },
             { label: charging ? 'Charging!' : 'Not Charging!', active: charging },
           ]}
-          gradient="from-indigo-600 to-purple-500"
+          tone="indigo"
           onClick={seekDock}
           disabled={!roverId}
         />
         <SpeedRow left={speeds.left} right={speeds.right} />
         <div>
-          <p className="text-xs text-slate-400">Manual OI</p>
+          <p className="text-sm text-slate-300">Manual OI</p>
           <div className="mt-1 flex flex-wrap gap-1">
             {manualOiButtons.map((btn) => (
               <button
@@ -55,7 +55,7 @@ export default function DrivePanel() {
                 type="button"
                 onClick={() => sendOiCommand(btn.key)}
                 disabled={!roverId}
-                className="rounded-sm bg-black/40 px-1 py-0.5 text-[0.65rem] text-slate-200 disabled:opacity-30"
+                className="rounded-sm bg-black/40 px-2 py-0.5 text-sm text-slate-200 disabled:opacity-30"
               >
                 {btn.label}
               </button>
@@ -67,27 +67,28 @@ export default function DrivePanel() {
             type="button"
             onClick={stopMotors}
             disabled={!roverId}
-            className="flex-1 rounded-sm bg-red-600/60 px-1 py-1 text-xs text-white disabled:opacity-40"
+            className="flex-1 rounded-sm bg-red-600/70 px-2 py-1 text-sm text-white disabled:opacity-40"
           >
             Stop motors
           </button>
         </div>
       </div>
-      <p className="mt-1 text-[0.65rem] text-slate-500">Sensor streaming auto-starts after each OI change.</p>
+      <p className="mt-2 text-sm text-slate-400">Sensor streaming auto-starts after each OI change.</p>
     </section>
   );
 }
 
-function ActionCard({ title, description, statuses, gradient, onClick, disabled, footnote }) {
+function ActionCard({ title, description, statuses, tone, onClick, disabled, footnote }) {
+  const baseColor = tone === 'indigo' ? 'bg-indigo-600' : 'bg-emerald-600';
   return (
     <button
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className={`w-full rounded-lg bg-gradient-to-r ${gradient} px-2 py-2 text-left text-white disabled:opacity-40`}
+      className={`w-full rounded-lg ${baseColor} px-3 py-2 text-left text-white disabled:opacity-40`}
     >
       <p className="text-base font-semibold">{title}</p>
-      <p className="text-sm text-emerald-50/80">{description}</p>
+      <p className="text-sm text-white/90">{description}</p>
       <div className="mt-2 flex flex-wrap gap-1">
         {statuses.map((status) => (
           <span
@@ -107,13 +108,13 @@ function ActionCard({ title, description, statuses, gradient, onClick, disabled,
 
 function SpeedRow({ left, right }) {
   return (
-    <div className="grid grid-cols-2 gap-1 rounded-sm bg-black/40 p-1 text-[0.7rem]">
+    <div className="grid grid-cols-2 gap-1 rounded-sm bg-black/40 p-2 text-base">
       <div>
-        <p className="text-[0.6rem] text-slate-500">Left</p>
+        <p className="text-sm text-slate-300">Left</p>
         <p className="font-semibold text-slate-100">{left}</p>
       </div>
       <div>
-        <p className="text-[0.6rem] text-slate-500">Right</p>
+        <p className="text-sm text-slate-300">Right</p>
         <p className="font-semibold text-slate-100">{right}</p>
       </div>
     </div>
@@ -123,7 +124,7 @@ function SpeedRow({ left, right }) {
 function StatusPill({ label, active }) {
   return (
     <span
-      className={`rounded-sm px-1 py-0.5 text-[0.6rem] ${
+      className={`rounded-sm px-2 py-0.5 text-xs ${
         active ? 'bg-emerald-500/30 text-emerald-100' : 'bg-black/40 text-slate-500'
       }`}
     >