gsadmin/AutopilotMonitor
1
0
Fork 0
mirror of https://github.com/okieselbach/AutopilotMonitor.git synced 2026-10-25 05:00:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): dark-mode slate/hover-tint overrides + mobile wrap for script executions

Browse Source 
Dark mode: globals.css was missing the entire slate family (the
"Incomplete" status filter chip rendered white-on-white) and all light
hover tints outside gray/indigo/cyan (hover:bg-purple-50 in the tenant
suggestion dropdown flashed near-white under light text). Added slate
bg/text/border mappings mirroring gray, plus dark equivalents for every
hover:bg-*-50/100/200 class in use (blue, purple, red, amber, yellow,
green, orange, sky, teal, emerald, slate, gray-200/300).

Mobile: ScriptExecutions rows were single-line flex with flex-shrink-0
right clusters, so badges and status text overlapped/overflowed on
narrow screens. Header counters, cycle card headers and item rows now
flex-wrap with gap spacing instead of space-x.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Oliver Kieselbach
2026-07-24 23:46:03 +02:00
parent 8a794a1b52
commit 4c2c447a2e
2 changed files with 95 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Web/autopilot-monitor-web/app/globals.css
+89
View File
@@ -124,6 +124,12 @@ body {
.dark .hover\:bg-gray-100:hover {
background-color: #334155 !important;
}
.dark .hover\:bg-gray-200:hover {
background-color: #334155 !important;
}
.dark .hover\:bg-gray-300:hover {
background-color: #475569 !important;
}
.dark .hover\:bg-indigo-100:hover {
background-color: #312e81 !important;
}
@@ -133,6 +139,60 @@ body {
.dark .hover\:bg-cyan-50:hover {
background-color: #0c2a3d !important;
}
/* Light hover tints (50/100/200) flash near-white in dark mode without an
override — map each family onto its dark -50 tone (one step lighter for
the 100/200 variants so hovering a -50 base still gives feedback). */
.dark .hover\:bg-blue-50:hover {
background-color: #1e3a5f !important;
}
.dark .hover\:bg-blue-100:hover,
.dark .hover\:bg-blue-200:hover {
background-color: #26497a !important;
}
.dark .hover\:bg-purple-50:hover {
background-color: #2d1b4e !important;
}
.dark .hover\:bg-purple-100:hover,
.dark .hover\:bg-purple-200:hover {
background-color: #3b2565 !important;
}
.dark .hover\:bg-red-50:hover {
background-color: #3b1c1c !important;
}
.dark .hover\:bg-red-100:hover,
.dark .hover\:bg-red-200:hover {
background-color: #4a2424 !important;
}
.dark .hover\:bg-amber-50:hover,
.dark .hover\:bg-yellow-50:hover {
background-color: #3d2e0a !important;
}
.dark .hover\:bg-amber-100:hover,
.dark .hover\:bg-amber-200:hover,
.dark .hover\:bg-yellow-100:hover {
background-color: #4d3a0e !important;
}
.dark .hover\:bg-green-100:hover,
.dark .hover\:bg-green-200:hover {
background-color: #1a4436 !important;
}
.dark .hover\:bg-orange-100:hover,
.dark .hover\:bg-orange-200:hover {
background-color: #4d300d !important;
}
.dark .hover\:bg-sky-100:hover {
background-color: #10394f !important;
}
.dark .hover\:bg-teal-50:hover {
background-color: #0d2e2e !important;
}
.dark .hover\:bg-emerald-100:hover {
background-color: #124430 !important;
}
.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-100:hover {
background-color: #334155 !important;
}
/* -- Input fields -- */
.dark input,
@@ -233,6 +293,35 @@ body {
background-color: #3d2e0a !important;
}
/* -- Slate family (neutral chips like the "Incomplete" status filter) — mirrors gray -- */
.dark .bg-slate-50 {
background-color: #0f172a !important;
}
.dark .bg-slate-100 {
background-color: #1e293b !important;
}
.dark .text-slate-900 {
color: #f1f5f9 !important;
}
.dark .text-slate-700 {
color: #cbd5e1 !important;
}
.dark .text-slate-600 {
color: #94a3b8 !important;
}
.dark .text-slate-500 {
color: #64748b !important;
}
.dark .text-slate-400 {
color: #64748b !important;
}
.dark .border-slate-200 {
border-color: #334155 !important;
}
.dark .border-slate-300 {
border-color: #475569 !important;
}
/* -- Gradient backgrounds (card headers) -- */
.dark [class*="from-purple-50"],
.dark [class*="from-indigo-50"],
src/Web/autopilot-monitor-web/components/ScriptExecutions.tsx
+6 -6
View File
@@ -65,12 +65,12 @@ export default function ScriptExecutions({ events, showScriptOutput, latestBoots
onClick={() => setExpanded(!expanded)}
className="flex items-center justify-between w-full text-left"
>
<div className="flex items-center space-x-2">
<div className="flex flex-wrap items-center gap-2 min-w-0">
<svg className="w-5 h-5 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<h2 className="text-lg font-semibold text-gray-900">Script Executions</h2>
<div className="flex items-center space-x-2 text-xs">
<div className="flex flex-wrap items-center gap-2 text-xs">
{runningCount > 0 && (
<span className="px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 font-medium">
{runningCount} running
@@ -215,10 +215,10 @@ function ScriptCardView({ card, showScriptOutput, latestBootstrapVersion, displa
<div className={`rounded-lg ${containerClass}`}>
<button
onClick={() => setPhasesOpen(!phasesOpen)}
className="flex items-center justify-between w-full text-left p-3 hover:bg-black/[.02]"
className="flex flex-wrap items-center justify-between gap-y-1 w-full text-left p-3 hover:bg-black/[.02]"
aria-expanded={phasesOpen}
>
<div className="flex items-center space-x-2 min-w-0">
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
<CardIcon state={card.headerState} className={iconColor} />
<span className="text-sm font-medium text-gray-900 truncate">Remediation</span>
{cardDisplayName && (
@@ -369,8 +369,8 @@ function ScriptItemRow({ item, showScriptOutput, latestBootstrapVersion, nested,
return (
<div className={`rounded-lg p-3 ${containerClass}`}>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 min-w-0">
<div className="flex flex-wrap items-center justify-between gap-y-1">
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
{item.state === "Running" ? (
<svg className={`w-4 h-4 text-gray-500 flex-shrink-0 ${isStale ? "" : "animate-spin"}`} fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>