lepton/Admin_dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix bar glow not rendering in Tailwind v4

Browse Source 
Use arbitrary property syntax [box-shadow:...] instead of shadow-[...]
which only sets the CSS variable without activating the composite declaration.
This commit is contained in:
Shivam Patel
2026-02-09 03:42:04 -05:00
parent 702d61bdef
commit d1fd790533
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/widgets/UptimeCard.tsx
View File

@@ -37,10 +37,10 @@ interface BarData {
// --- Constants --- // --- Constants ---
const BAR_STYLES: Record<BarStatus, { base: string; compact: string }> = { const BAR_STYLES: Record<BarStatus, { base: string; compact: string }> = {
up: { base: 'bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.4)]', compact: 'bg-emerald-500 shadow-[0_0_4px_rgba(16,185,129,0.25)]' }, up: { base: 'bg-emerald-500 [box-shadow:0_0_6px_rgba(16,185,129,0.4)]', compact: 'bg-emerald-500 [box-shadow:0_0_4px_rgba(16,185,129,0.25)]' },
degraded: { base: 'bg-amber-500 shadow-[0_0_6px_rgba(245,158,11,0.4)]', compact: 'bg-amber-500 shadow-[0_0_4px_rgba(245,158,11,0.25)]' }, degraded: { base: 'bg-amber-500 [box-shadow:0_0_6px_rgba(245,158,11,0.4)]', compact: 'bg-amber-500 [box-shadow:0_0_4px_rgba(245,158,11,0.25)]' },
down: { base: 'bg-red-500 shadow-[0_0_6px_rgba(239,68,68,0.4)]', compact: 'bg-red-500 shadow-[0_0_4px_rgba(239,68,68,0.25)]' }, down: { base: 'bg-red-500 [box-shadow:0_0_6px_rgba(239,68,68,0.4)]', compact: 'bg-red-500 [box-shadow:0_0_4px_rgba(239,68,68,0.25)]' },
unknown: { base: 'bg-neutral-700', compact: 'bg-neutral-700' }, unknown: { base: 'bg-neutral-700', compact: 'bg-neutral-700' },
}; };
const RANGE_OPTIONS: { value: TimeRange; label: string }[] = [ const RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
@@ -336,7 +336,7 @@ function DetailModal({
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-5"> <div className="flex items-center justify-between mb-5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={`w-2.5 h-2.5 rounded-full shrink-0 ${service.status === 'up' ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]'}`} /> <div className={`w-2.5 h-2.5 rounded-full shrink-0 ${service.status === 'up' ? 'bg-emerald-500 [box-shadow:0_0_8px_rgba(16,185,129,0.5)]' : 'bg-red-500 [box-shadow:0_0_8px_rgba(239,68,68,0.5)]'}`} />
<h2 className="text-lg font-semibold text-white">{service.name}</h2> <h2 className="text-lg font-semibold text-white">{service.name}</h2>
<button <button
onClick={() => { onClick={() => {