{error}
{result.subtitle}
Service verrouillé @@ -51,7 +51,7 @@ export default function LockIndicator({ e.stopPropagation() onUnlock() }} - className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-red-600 rounded hover:bg-red-700" + className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-red-600 rounded-sm hover:bg-red-700" title="Déverrouiller" > diff --git a/web/src/components/LocksWidget.tsx b/web/src/components/LocksWidget.tsx index 8b113698..8f874da1 100644 --- a/web/src/components/LocksWidget.tsx +++ b/web/src/components/LocksWidget.tsx @@ -25,14 +25,14 @@ export default function LocksWidget() { if (loading) { return ( -
Multiple services are locked. Review and unlock when possible.
@@ -108,7 +108,7 @@ export default function LocksWidget() { {lock.environment} • {lock.who}
This is an open source project! @@ -42,7 +42,7 @@ export default function OpenSourceBanner() { diff --git a/web/src/components/ThemeToggle.tsx b/web/src/components/ThemeToggle.tsx index 2a95149f..61a7da6c 100644 --- a/web/src/components/ThemeToggle.tsx +++ b/web/src/components/ThemeToggle.tsx @@ -32,7 +32,7 @@ export default function ThemeToggle({ compact = false }: ThemeToggleProps) { onClick={() => setTheme(t)} className={`p-2 rounded-lg transition-colors ${ theme === t - ? 'bg-hud-surface-high text-hud-on-surface shadow-sm' + ? 'bg-hud-surface-high text-hud-on-surface shadow-xs' : 'text-hud-on-surface-var hover:text-hud-on-surface hover:bg-hud-surface-high' }`} title={title} diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx index 1b2658c0..4b9368f5 100644 --- a/web/src/components/Toast.tsx +++ b/web/src/components/Toast.tsx @@ -17,9 +17,9 @@ export default function Toast({ message, onClose, duration = 3000 }: ToastProps) }, [duration, onClose]) return ( - + - + {message} setNewDeliverable({ ...newDeliverable, versionUsed: selectedDeliverableInfo.latestVersion! })} - className="px-2 py-1 text-xs bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors" + className="px-2 py-1 text-xs bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-sm hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors" > Latest @@ -263,7 +263,7 @@ export default function UsedDeliverablesManager({ setNewDeliverable({ ...newDeliverable, versionUsed: selectedDeliverableInfo.referenceVersion! })} - className="px-2 py-1 text-xs bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors" + className="px-2 py-1 text-xs bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-sm hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors" > Recommended diff --git a/web/src/components/VulnerabilityManager.tsx b/web/src/components/VulnerabilityManager.tsx index aa894566..d8f05bab 100644 --- a/web/src/components/VulnerabilityManager.tsx +++ b/web/src/components/VulnerabilityManager.tsx @@ -273,12 +273,12 @@ export default function VulnerabilityManager({ placeholder="Source name (e.g., Trivy)" value={source.name} onChange={(e) => updateSource(index, { ...source, name: e.target.value })} - className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" + className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-sm focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" /> updateSource(index, { ...source, type: e.target.value })} - className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" + className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-sm focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" > SCA (Dependencies) SAST (Code) @@ -293,12 +293,12 @@ export default function VulnerabilityManager({ placeholder="Report URL (optional)" value={source.url || ''} onChange={(e) => updateSource(index, { ...source, url: e.target.value })} - className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" + className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-sm focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" /> removeSource(index)} - className="ml-2 p-1 text-gray-400 hover:text-red-500 rounded transition-colors" + className="ml-2 p-1 text-gray-400 hover:text-red-500 rounded-sm transition-colors" title="Remove source" > @@ -333,7 +333,7 @@ export default function VulnerabilityManager({ updatedSource.mediumCount + updatedSource.lowCount + updatedSource.infoCount updateSource(index, updatedSource) }} - className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" + className="block w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-sm focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100" /> ))} @@ -372,7 +372,7 @@ export default function VulnerabilityManager({ ].map(({ severity, count }) => ( {vulnerabilitySummary.sources.map((source, index) => ( - + + diff --git a/web/src/components/filters/FiltersSidebar.tsx b/web/src/components/filters/FiltersSidebar.tsx index 3b198412..6e26fedf 100644 --- a/web/src/components/filters/FiltersSidebar.tsx +++ b/web/src/components/filters/FiltersSidebar.tsx @@ -89,13 +89,13 @@ export default function FiltersSidebar({ > - {option.checked && } + {option.checked && } {option.label} @@ -141,13 +141,13 @@ export default function FiltersSidebar({ > - {option.checked && } + {option.checked && } {option.label} diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx index 687cd834..edfd200d 100644 --- a/web/src/components/ui/badge.tsx +++ b/web/src/components/ui/badge.tsx @@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( - "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-hud-primary/30 focus:ring-offset-1 border", + "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-hud-primary/30 focus:ring-offset-1 border", { variants: { variant: { diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx index e3f3c29d..c7b7caff 100644 --- a/web/src/components/ui/button.tsx +++ b/web/src/components/ui/button.tsx @@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hud-primary/30 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 active:translate-y-px", + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-semibold transition-all duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-hud-primary/30 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 active:translate-y-px", { variants: { variant: { diff --git a/web/src/components/ui/calendar.tsx b/web/src/components/ui/calendar.tsx index 4bcf2b31..b6a9a09e 100644 --- a/web/src/components/ui/calendar.tsx +++ b/web/src/components/ui/calendar.tsx @@ -36,7 +36,7 @@ function Calendar({ weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", week: "flex w-full mt-2", - day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", + day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:has-aria-[selected]:rounded-l-md last:has-aria-[selected]:rounded-r-md focus-within:relative focus-within:z-20", day_button: cn( buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100" diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx index 0358c74a..8a697684 100644 --- a/web/src/components/ui/checkbox.tsx +++ b/web/src/components/ui/checkbox.tsx @@ -14,7 +14,7 @@ const Checkbox = React.forwardRef( onCheckedChange?.(e.target.checked)} diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx index 9333d3b8..07a46b1f 100644 --- a/web/src/components/ui/input.tsx +++ b/web/src/components/ui/input.tsx @@ -13,7 +13,7 @@ const Input = React.forwardRef( "flex h-9 w-full rounded-md border border-hud-outline-var bg-hud-surface px-3 py-2 text-sm text-hud-on-surface", "placeholder:text-hud-on-surface-var/60", "transition-all duration-150", - "focus:outline-none focus:border-hud-primary focus:ring-3 focus:ring-hud-primary/12", + "focus:outline-hidden focus:border-hud-primary focus:ring-3 focus:ring-hud-primary/12", "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-hud-surface-low", className )} diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx index eca9185f..1247d7ee 100644 --- a/web/src/components/ui/separator.tsx +++ b/web/src/components/ui/separator.tsx @@ -14,7 +14,7 @@ const Separator = React.forwardRef( aria-orientation={orientation} className={cn( "shrink-0 bg-hud-outline-var/50", - orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", + orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className )} {...props} diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx index 070abf14..b91ffd8c 100644 --- a/web/src/components/ui/tabs.tsx +++ b/web/src/components/ui/tabs.tsx @@ -32,7 +32,7 @@ const TabsTrigger = React.forwardRef< "text-hud-on-surface-var border-b-2 border-transparent -mb-px", "transition-all duration-150 cursor-pointer", "hover:text-hud-on-surface hover:border-hud-outline", - "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hud-primary/30", + "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-hud-primary/30", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:text-hud-primary data-[state=active]:border-hud-primary data-[state=active]:font-semibold", className @@ -49,7 +49,7 @@ const TabsContent = React.forwardRef< { - let resolvedTheme: 'light' | 'dark' = 'light' - - if (theme === 'system') { - resolvedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' - } else { - resolvedTheme = theme - } + const resolvedTheme: 'light' | 'dark' = + theme === 'system' + ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + : theme setEffectiveTheme(resolvedTheme) root.classList.remove('light', 'dark') diff --git a/web/src/index.css b/web/src/index.css index 5ff26123..9db0975f 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -1,6 +1,213 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; +@import '@fortawesome/fontawesome-svg-core/styles.css' layer(base); + +@custom-variant dark (&:is(.dark *)); + +@theme { + /* Tailwind 3 line heights. v4 expresses them as unitless ratios, which a + smaller child (text-[10px] inside text-xs) then inherits and shrinks by. */ + --text-xs--line-height: 1rem; + --text-sm--line-height: 1.25rem; + --text-base--line-height: 1.5rem; + --text-lg--line-height: 1.75rem; + --text-xl--line-height: 1.75rem; + --text-2xl--line-height: 2rem; + --text-3xl--line-height: 2.25rem; + --text-4xl--line-height: 2.5rem; + + --color-hud-bg: rgb(var(--hud-bg)); + --color-hud-surface: rgb(var(--hud-surface)); + --color-hud-surface-low: rgb(var(--hud-surface-low)); + --color-hud-surface-high: rgb(var(--hud-surface-high)); + --color-hud-surface-highest: rgb(var(--hud-surface-highest)); + --color-hud-primary: rgb(var(--hud-primary)); + --color-hud-primary-dim: rgb(var(--hud-primary-dim)); + --color-hud-secondary: rgb(var(--hud-secondary)); + --color-hud-tertiary: rgb(var(--hud-tertiary)); + --color-hud-on-surface: rgb(var(--hud-on-surface)); + --color-hud-on-surface-var: rgb(var(--hud-on-surface-var)); + --color-hud-outline: rgb(var(--hud-outline)); + --color-hud-outline-var: rgb(var(--hud-outline-var)); + --color-hud-success: rgb(var(--hud-success)); + --color-hud-error: rgb(var(--hud-error)); + --color-hud-warning: rgb(var(--hud-warning)); + + --font-grotesk: 'Plus Jakarta Sans', sans-serif; + --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace; + --font-sans: 'Plus Jakarta Sans', sans-serif; + + --text-fs-100: 0.75rem; + --text-fs-100--line-height: 1rem; + --text-fs-200: 0.875rem; + --text-fs-200--line-height: 1.25rem; + --text-fs-300: 1rem; + --text-fs-300--line-height: 1.5rem; + --text-fs-400: 1.25rem; + --text-fs-400--line-height: 1.75rem; + --text-fs-500: 1.5rem; + --text-fs-500--line-height: 2rem; + --text-fs-600: 2rem; + --text-fs-600--line-height: 2.5rem; + --text-fs-700: 2.25rem; + --text-fs-700--line-height: 2.75rem; + --text-fs-800: 3rem; + --text-fs-800--line-height: 3.5rem; + + --radius-ig-sm: 4px; + --radius-ig: 6px; + --radius-ig-md: 8px; + --radius-ig-lg: 12px; + + --shadow-ig-card: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04); + --shadow-ig-card-hover: + 0 4px 12px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.06); + --shadow-ig-dropdown: + 0 8px 24px rgb(0 0 0 / 0.12), 0 2px 8px rgb(0 0 0 / 0.08); + --shadow-ig-focus: 0 0 0 3px rgb(var(--hud-primary) / 0.15); + + --animate-glow-pulse: glow-pulse 2s ease-in-out infinite; + + @keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.3; + } + } + @keyframes glow-pulse { + 0%, + 100% { + box-shadow: 0 0 4px 1px currentColor; + } + 50% { + box-shadow: 0 0 10px 3px currentColor; + } + } +} + +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } + + /* Tailwind 3 placeholder color; v4 defaults to 50% of the text color. */ + input::placeholder, + textarea::placeholder { + color: var(--color-gray-400); + } +} + +@utility btn-primary { + @apply inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-semibold transition-all duration-150; + background-color: rgb(var(--hud-primary)); + color: white; + box-shadow: 0 1px 2px rgb(var(--hud-primary) / 0.25); + &:hover { + background-color: rgb(var(--hud-primary-dim)); + box-shadow: 0 2px 6px rgb(var(--hud-primary) / 0.35); + } + &:active { + transform: translateY(0.5px); + } +} + +@utility btn-secondary { + @apply inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-semibold transition-all duration-150 border; + background-color: rgb(var(--hud-surface)); + color: rgb(var(--hud-on-surface)); + border-color: rgb(var(--hud-outline-var)); + &:hover { + background-color: rgb(var(--hud-surface-high)); + border-color: rgb(var(--hud-outline)); + } +} + +@utility card { + @apply rounded-lg p-6 border; + background-color: rgb(var(--hud-surface)); + border-color: rgb(var(--hud-outline-var) / 0.6); + box-shadow: + 0 1px 3px rgb(0 0 0 / 0.04), + 0 1px 2px rgb(0 0 0 / 0.06); +} + +@utility input { + @apply w-full px-3 py-2 rounded-md text-sm focus:outline-hidden transition-all duration-150 border; + height: 36px; + background-color: rgb(var(--hud-surface)); + border-color: rgb(var(--hud-outline-var)); + color: rgb(var(--hud-on-surface)); + &:focus { + border-color: rgb(var(--hud-primary)); + box-shadow: 0 0 0 3px rgb(var(--hud-primary) / 0.12); + } + &::placeholder { + color: rgb(var(--hud-on-surface-var)); + } +} + +@utility select { + @apply w-full px-3 py-2 rounded-md text-sm focus:outline-hidden transition-all duration-150 border; + height: 36px; + background-color: rgb(var(--hud-surface)); + border-color: rgb(var(--hud-outline-var)); + color: rgb(var(--hud-on-surface)); + &:focus { + border-color: rgb(var(--hud-primary)); + box-shadow: 0 0 0 3px rgb(var(--hud-primary) / 0.12); + } +} + +@utility animate-slide-in { + animation: slide-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); +} + +@utility animate-fade-up { + animation: fade-up 0.2s cubic-bezier(0.16, 1, 0.3, 1); +} + +@utility no-scrollbar { + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; +} + +@utility icon-gradient { + /* Intergalactic-palette icon colors */ + color: #1b3575; +} + +@utility icon-gradient-blue { + color: #1b3575; +} + +@utility icon-gradient-purple { + color: #4a7fdb; +} + +@utility icon-gradient-yellow { + color: #e8580a; +} + +@utility icon-gradient-red { + color: #c0330a; +} @layer base { /* ── Intergalactic Design System Tokens ── */ @@ -97,178 +304,134 @@ } } -@layer components { - .btn-primary { - @apply inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-semibold transition-all duration-150; - background-color: rgb(var(--hud-primary)); - color: white; - box-shadow: 0 1px 2px rgb(var(--hud-primary) / 0.25); - } - .btn-primary:hover { - background-color: rgb(var(--hud-primary-dim)); - box-shadow: 0 2px 6px rgb(var(--hud-primary) / 0.35); - } - .btn-primary:active { - transform: translateY(0.5px); - } - - .btn-secondary { - @apply inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-semibold transition-all duration-150 border; - background-color: rgb(var(--hud-surface)); - color: rgb(var(--hud-on-surface)); - border-color: rgb(var(--hud-outline-var)); - } - .btn-secondary:hover { - background-color: rgb(var(--hud-surface-high)); - border-color: rgb(var(--hud-outline)); - } - - .card { - @apply rounded-lg p-6 border; - background-color: rgb(var(--hud-surface)); - border-color: rgb(var(--hud-outline-var) / 0.6); - box-shadow: 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06); - } - - .input { - @apply w-full px-3 py-2 rounded-md text-sm focus:outline-none transition-all duration-150 border; - height: 36px; - background-color: rgb(var(--hud-surface)); - border-color: rgb(var(--hud-outline-var)); - color: rgb(var(--hud-on-surface)); - } - .input:focus { - border-color: rgb(var(--hud-primary)); - box-shadow: 0 0 0 3px rgb(var(--hud-primary) / 0.12); - } - .input::placeholder { - color: rgb(var(--hud-on-surface-var)); - } - - .select { - @apply w-full px-3 py-2 rounded-md text-sm focus:outline-none transition-all duration-150 border; - height: 36px; - background-color: rgb(var(--hud-surface)); - border-color: rgb(var(--hud-outline-var)); - color: rgb(var(--hud-on-surface)); - } - .select:focus { - border-color: rgb(var(--hud-primary)); - box-shadow: 0 0 0 3px rgb(var(--hud-primary) / 0.12); - } -} - @layer utilities { @keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } - .animate-slide-in { - animation: slide-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); - } @keyframes fade-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } - .animate-fade-up { - animation: fade-up 0.2s cubic-bezier(0.16, 1, 0.3, 1); - } - - .no-scrollbar::-webkit-scrollbar { display: none; } - .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } - - /* Intergalactic-palette icon colors */ - .icon-gradient { - color: #1b3575; - } - .icon-gradient-blue { - color: #1b3575; - } - .icon-gradient-purple { - color: #4a7fdb; - } - .icon-gradient-yellow { - color: #e8580a; - } - .icon-gradient-red { - color: #c0330a; - } - - /* Dark mode icon color overrides */ - .dark .icon-gradient { - color: #4a7fdb; - } - .dark .icon-gradient-blue { - color: #4a7fdb; - } - .dark .icon-gradient-purple { - color: #99afe8; - } - .dark .icon-gradient-yellow { - color: #f59e0b; - } - .dark .icon-gradient-red { - color: #e8580a; - } - - /* Dark mode compatibility layer for legacy gray Tailwind classes */ - .dark .text-gray-900, - .dark .text-gray-800, - .dark .text-gray-700 { - color: rgb(var(--hud-on-surface)) !important; - } - .dark .text-gray-600, - .dark .text-gray-500, - .dark .text-gray-400, - .dark .text-gray-300 { - color: rgb(var(--hud-on-surface-var)) !important; - } - - .dark .bg-white, - .dark .bg-gray-50 { - background-color: rgb(var(--hud-surface)) !important; - } - .dark .bg-gray-100 { - background-color: rgb(var(--hud-surface-low)) !important; - } - .dark .bg-gray-200 { - background-color: rgb(var(--hud-surface-high)) !important; - } - .dark .bg-gray-700 { - background-color: rgb(var(--hud-surface-high)) !important; - } - .dark .bg-gray-800 { - background-color: rgb(var(--hud-surface)) !important; - } - .dark .bg-gray-900 { - background-color: rgb(var(--hud-bg)) !important; - } +} - .dark .border-gray-200, - .dark .border-gray-300, - .dark .border-gray-400 { - border-color: rgb(var(--hud-outline-var) / 0.65) !important; - } - .dark .border-gray-500, - .dark .border-gray-600, - .dark .border-gray-700 { - border-color: rgb(var(--hud-outline) / 0.7) !important; - } +/* Dark mode overrides. They target existing utility classes, so they stay + plain CSS outside the utilities layer rather than becoming utilities. */ +/* Dark mode icon color overrides */ +.dark .icon-gradient { + color: #4a7fdb; +} +.dark .icon-gradient-blue { + color: #4a7fdb; +} +.dark .icon-gradient-purple { + color: #99afe8; +} +.dark .icon-gradient-yellow { + color: #f59e0b; +} +.dark .icon-gradient-red { + color: #e8580a; +} - .dark .hover\:bg-gray-50:hover, - .dark .hover\:bg-gray-100:hover { - background-color: rgb(var(--hud-surface-high)) !important; - } - .dark .hover\:bg-gray-700:hover, - .dark .hover\:bg-gray-800:hover { - background-color: rgb(var(--hud-surface-highest)) !important; - } - .dark .hover\:text-gray-700:hover, - .dark .hover\:text-gray-600:hover { - color: rgb(var(--hud-on-surface)) !important; - } - .dark .hover\:text-gray-400:hover { - color: rgb(var(--hud-on-surface-var)) !important; - } +/* Dark mode compatibility layer for legacy gray Tailwind classes */ +/* Tailwind 3 also applied these overrides to the variants of the targeted + classes (dark:, hover:, dark:hover:); Tailwind 4 does not, so every + variant the templates use is listed explicitly. */ +.dark .text-gray-900, +.dark .text-gray-800, +.dark .text-gray-700 { + color: rgb(var(--hud-on-surface)) !important; +} +.dark .text-gray-600, +.dark .text-gray-500, +.dark .text-gray-400, +.dark .text-gray-300 { + color: rgb(var(--hud-on-surface-var)) !important; +} +.dark .bg-white, +.dark .bg-gray-50 { + background-color: rgb(var(--hud-surface)) !important; +} +.dark .bg-gray-100 { + background-color: rgb(var(--hud-surface-low)) !important; +} +.dark .bg-gray-200, +.dark .bg-gray-700 { + background-color: rgb(var(--hud-surface-high)) !important; +} +.dark .bg-gray-800 { + background-color: rgb(var(--hud-surface)) !important; +} +.dark .bg-gray-900 { + background-color: rgb(var(--hud-bg)) !important; +} +.dark .border-gray-200, +.dark .border-gray-300, +.dark .border-gray-400 { + border-color: rgb(var(--hud-outline-var) / .65) !important; +} +.dark .border-gray-500, +.dark .border-gray-600, +.dark .border-gray-700 { + border-color: rgb(var(--hud-outline) / .7) !important; +} +.dark .hover\:bg-gray-50:hover, +.dark .hover\:bg-gray-100:hover { + background-color: rgb(var(--hud-surface-high)) !important; +} +.dark .hover\:bg-gray-700:hover, +.dark .hover\:bg-gray-800:hover { + background-color: rgb(var(--hud-surface-highest)) !important; +} +.dark .hover\:text-gray-700:hover, +.dark .hover\:text-gray-600:hover { + color: rgb(var(--hud-on-surface)) !important; +} +.dark .hover\:text-gray-400:hover { + color: rgb(var(--hud-on-surface-var)) !important; +} +.dark .hover\:text-gray-900:hover { + color: rgb(var(--hud-on-surface)) !important; +} +.dark .hover\:text-gray-600:hover { + color: rgb(var(--hud-on-surface-var)) !important; +} +.dark .hover\:bg-gray-50:hover { + background-color: rgb(var(--hud-surface)) !important; +} +.dark .hover\:bg-gray-100:hover { + background-color: rgb(var(--hud-surface-low)) !important; +} +.dark .hover\:bg-gray-200:hover { + background-color: rgb(var(--hud-surface-high)) !important; +} +.dark .dark\:text-gray-600, +.dark .dark\:text-gray-500, +.dark .dark\:text-gray-400, +.dark .dark\:text-gray-300 { + color: rgb(var(--hud-on-surface-var)) !important; +} +.dark .dark\:bg-gray-700 { + background-color: rgb(var(--hud-surface-high)) !important; +} +.dark .dark\:bg-gray-800 { + background-color: rgb(var(--hud-surface)) !important; +} +.dark .dark\:bg-gray-900 { + background-color: rgb(var(--hud-bg)) !important; +} +.dark .dark\:border-gray-600, +.dark .dark\:border-gray-700 { + border-color: rgb(var(--hud-outline) / .7) !important; +} +.dark .dark\:hover\:text-gray-300:hover { + color: rgb(var(--hud-on-surface-var)) !important; +} +.dark .dark\:hover\:bg-gray-700:hover { + background-color: rgb(var(--hud-surface-high)) !important; +} +.dark .dark\:hover\:bg-gray-800:hover { + background-color: rgb(var(--hud-surface)) !important; } diff --git a/web/src/main.tsx b/web/src/main.tsx index 3b23bbe5..a48e44c4 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -21,10 +21,15 @@ if (config.clarityProjectId) { } // FontAwesome configuration -import { library } from '@fortawesome/fontawesome-svg-core' +import { config as faConfig, library } from '@fortawesome/fontawesome-svg-core' import { faJira, faSlack, faGithub, faDiscord, faTelegram, faMicrosoft } from '@fortawesome/free-brands-svg-icons' import { faCodeBranch, faRobot, faWrench, faRocket, faFire } from '@fortawesome/free-solid-svg-icons' +// The FontAwesome stylesheet is imported into Tailwind's base layer from +// index.css: injected unlayered at runtime, it would beat every Tailwind 4 +// utility (h-8, w-8...) because unlayered CSS wins over cascade layers. +faConfig.autoAddCss = false + // Add icons to the library library.add( faJira, faSlack, faGithub, faDiscord, faTelegram, faMicrosoft, diff --git a/web/src/pages/AllDriftsList.tsx b/web/src/pages/AllDriftsList.tsx index da1a50d5..52fab65d 100644 --- a/web/src/pages/AllDriftsList.tsx +++ b/web/src/pages/AllDriftsList.tsx @@ -439,7 +439,7 @@ export default function AllDriftsList() { {/* Table */} {filteredDrifts.length === 0 ? ( - + {hasActiveFilters ? 'No drifts match your filters' : 'No drifts found'} @@ -464,7 +464,7 @@ export default function AllDriftsList() { )} ) : ( - + @@ -499,7 +499,7 @@ export default function AllDriftsList() { > - + {drift.attributes.service} @@ -536,7 +536,7 @@ export default function AllDriftsList() { - + {getTimeSince(drift.metadata?.createdAt)} diff --git a/web/src/pages/CatalogDependencies.tsx b/web/src/pages/CatalogDependencies.tsx index 7953a85f..80461d81 100644 --- a/web/src/pages/CatalogDependencies.tsx +++ b/web/src/pages/CatalogDependencies.tsx @@ -680,7 +680,7 @@ export default function CatalogDependencies() { placeholder="Search services..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} - className="w-full pl-10 pr-10 py-2 rounded-lg text-sm focus:outline-none transition-all" + className="w-full pl-10 pr-10 py-2 rounded-lg text-sm focus:outline-hidden transition-all" style={{ background: T.surfaceHigh, border: `1px solid ${a('outline-var', 0.3)}`, @@ -793,12 +793,12 @@ export default function CatalogDependencies() { { label: 'Low SLA', level: SLALevel.LOW }, ].map(({ label, level }) => ( - + {label} ))} - + Dependency @@ -922,7 +922,7 @@ export default function CatalogDependencies() { > - + {catalog.name} {catalog.description && ( @@ -965,7 +965,7 @@ export default function CatalogDependencies() { {catalog.dependenciesIn.slice(0, 3).map((dep, idx) => ( {dep} @@ -988,7 +988,7 @@ export default function CatalogDependencies() { {catalog.dependenciesOut.slice(0, 3).map((dep, idx) => ( {dep} diff --git a/web/src/pages/CatalogDetail.tsx b/web/src/pages/CatalogDetail.tsx index 7023061e..63da7740 100644 --- a/web/src/pages/CatalogDetail.tsx +++ b/web/src/pages/CatalogDetail.tsx @@ -899,7 +899,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai if (!service) { return ( - + {catalogsLoading ? ( @@ -920,7 +920,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai <> {/* Backdrop */} - + {/* Side Panel */} Deployments {deploymentsData?.events && deploymentsData.events.length > 0 && ( - + {deploymentsData.events.length} )} @@ -1155,7 +1155,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai Upstream - {service.dependenciesIn?.length || 0} + {service.dependenciesIn?.length || 0} {service.dependenciesIn && service.dependenciesIn.length > 0 ? ( @@ -1182,7 +1182,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai Downstream - {service.dependenciesOut?.length || 0} + {service.dependenciesOut?.length || 0} {service.dependenciesOut && service.dependenciesOut.length > 0 ? ( @@ -1294,31 +1294,31 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai - + Upstream (we depend on) - + Downstream (depends on us) - + Critical SLA - + High SLA - + Medium SLA - + Low SLA - + Infrastructure @@ -1373,7 +1373,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1400,7 +1400,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1427,7 +1427,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1454,7 +1454,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1481,7 +1481,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1508,7 +1508,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1536,7 +1536,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1564,7 +1564,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai backgroundColor: `${resource.color}15`, }} > - {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 flex-shrink-0')} + {renderResourceIcon(resource, selectedProvider, 'w-5 h-5 shrink-0')} {resource.label} ))} @@ -1591,7 +1591,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai }} > - {resourceConfig ? renderResourceIcon(resourceConfig, resource.provider || 'AWS', 'w-5 h-5 flex-shrink-0') : } + {resourceConfig ? renderResourceIcon(resourceConfig, resource.provider || 'AWS', 'w-5 h-5 shrink-0') : } {resource.name} @@ -1604,14 +1604,14 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai openEditResourceModal(resource)} - className="p-1 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded transition-colors" + className="p-1 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-sm transition-colors" title="Edit resource" > deletePendingResource(resource.id)} - className="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded transition-colors" + className="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded-sm transition-colors" title="Delete resource" > @@ -1832,13 +1832,13 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai {/* Add Resource Modal */} {showAddResourceModal && newResourceType && ( - + {/* Header */} - + {(() => { const resourceConfig = getResourcesForProvider(selectedProvider).find(r => r.type === newResourceType) const IconComponent = resourceConfig?.icon || Database @@ -1911,13 +1911,13 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai {/* Edit Resource Modal */} {showEditResourceModal && editingResource && ( - + {/* Header */} - + {(() => { const resourceConfig = getResourcesForProvider(editingResource.provider || 'AWS').find(r => r.type === editingResource.type) const IconComponent = resourceConfig?.icon || Database @@ -2020,13 +2020,13 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai {/* Delete Confirmation Modal */} {showDeleteModal && ( - + {/* Header */} - + @@ -2054,7 +2054,7 @@ export default function CatalogDetail({ serviceNameProp, onClose }: CatalogDetai - + This will permanently delete: diff --git a/web/src/pages/CatalogTable.tsx b/web/src/pages/CatalogTable.tsx index d991e1ff..36142342 100644 --- a/web/src/pages/CatalogTable.tsx +++ b/web/src/pages/CatalogTable.tsx @@ -297,7 +297,7 @@ export default function CatalogTable() { {uniqueTypes.map((type: string) => ( ( ( ( setOwnerSearchQuery(e.target.value)} - className="w-full pl-7 pr-7 py-1.5 text-xs rounded-lg outline-none" + className="w-full pl-7 pr-7 py-1.5 text-xs rounded-lg outline-hidden" style={{ background: a('outline-var', 0.07), border: `1px solid ${a('outline-var', 0.2)}`, @@ -458,7 +458,7 @@ export default function CatalogTable() { filteredOwners.map((owner: string) => ( setSearchQuery(e.target.value)} - className="w-full pl-10 pr-10 py-2.5 rounded-lg outline-none text-sm" + className="w-full pl-10 pr-10 py-2.5 rounded-lg outline-hidden text-sm" style={{ background: a('outline-var', 0.06), border: `1px solid ${a('outline-var', 0.2)}`, diff --git a/web/src/pages/CreateCatalog.tsx b/web/src/pages/CreateCatalog.tsx index 296678bf..39c334b5 100644 --- a/web/src/pages/CreateCatalog.tsx +++ b/web/src/pages/CreateCatalog.tsx @@ -197,7 +197,7 @@ export default function CreateCatalog({ asPanel = false, onClose, onSuccess }: C success: 'rgb(var(--hud-success))', } - const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-none" + const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-hidden" const inputStyle = { background: 'rgb(var(--hud-surface-low))', color: hud.onSurface } const labelCls = "block text-[10px] uppercase tracking-widest font-bold mb-2" diff --git a/web/src/pages/CreateDrift.tsx b/web/src/pages/CreateDrift.tsx index dfbf62ca..bdfe7b88 100644 --- a/web/src/pages/CreateDrift.tsx +++ b/web/src/pages/CreateDrift.tsx @@ -86,7 +86,7 @@ export default function CreateDrift({ asPanel = false, onClose, onSuccess }: Cre success: 'rgb(var(--hud-success))', } - const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-none" + const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-hidden" const inputStyle = { background: 'rgb(var(--hud-surface-low))', color: hud.onSurface } const labelCls = "block text-[10px] uppercase tracking-widest font-bold mb-2" @@ -288,7 +288,7 @@ export default function CreateDrift({ asPanel = false, onClose, onSuccess }: Cre {createMutation.isError && ( - + Error creating drift. Please try again. )} diff --git a/web/src/pages/CreateEvent.tsx b/web/src/pages/CreateEvent.tsx index ae80cfff..b2068ab8 100644 --- a/web/src/pages/CreateEvent.tsx +++ b/web/src/pages/CreateEvent.tsx @@ -174,7 +174,7 @@ export default function CreateEvent({ asPanel = false, onClose, onSuccess }: Cre success: 'rgb(var(--hud-success))', } - const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-none" + const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-hidden" const inputStyle = { background: 'rgb(var(--hud-surface-low))', color: hud.onSurface } const labelCls = "block text-[10px] uppercase tracking-widest font-bold mb-2" @@ -566,7 +566,7 @@ export default function CreateEvent({ asPanel = false, onClose, onSuccess }: Cre {createMutation.isError && ( - + {getErrorMessage()} {getErrorMessage().includes('🔒') && ( diff --git a/web/src/pages/CreateLock.tsx b/web/src/pages/CreateLock.tsx index 94a9442a..415287f5 100644 --- a/web/src/pages/CreateLock.tsx +++ b/web/src/pages/CreateLock.tsx @@ -121,7 +121,7 @@ export default function CreateLock({ asPanel = false, onClose, onSuccess }: Crea onSurfaceVar: 'rgb(var(--hud-on-surface-var))', } - const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-none" + const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-hidden" const inputStyle = { background: 'rgb(var(--hud-surface-low))', color: hud.onSurface } const labelCls = "block text-[10px] uppercase tracking-widest font-bold mb-2" @@ -285,7 +285,7 @@ export default function CreateLock({ asPanel = false, onClose, onSuccess }: Crea {error && ( - + {error} )} diff --git a/web/src/pages/CreateRpaOperation.tsx b/web/src/pages/CreateRpaOperation.tsx index 69ee8ea4..32f922b2 100644 --- a/web/src/pages/CreateRpaOperation.tsx +++ b/web/src/pages/CreateRpaOperation.tsx @@ -114,7 +114,7 @@ export default function CreateRpaOperation({ asPanel = false, onClose, onSuccess success: 'rgb(var(--hud-success))', } - const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-none" + const inputCls = "w-full border-0 border-b-2 border-transparent px-4 py-3 rounded-t-lg transition-all text-sm focus:outline-hidden" const inputStyle = { background: 'rgb(var(--hud-surface-low))', color: hud.onSurface } const labelCls = "block text-[10px] uppercase tracking-widest font-bold mb-2" @@ -283,7 +283,7 @@ export default function CreateRpaOperation({ asPanel = false, onClose, onSuccess {createMutation.isError && ( - + Error creating RPA operation. Please try again. )} diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx index 5aea53d6..b4f1a1e7 100644 --- a/web/src/pages/Dashboard.tsx +++ b/web/src/pages/Dashboard.tsx @@ -528,7 +528,7 @@ export default function Dashboard() { key={`${row.event.metadata?.id}-${laneIndex}`} title={row.event.title} onClick={() => setSelectedEvent(row.event)} - className="absolute rounded px-1.5 text-[9px] font-semibold hover:brightness-95 transition-all flex items-center gap-1 overflow-hidden" + className="absolute rounded-sm px-1.5 text-[9px] font-semibold hover:brightness-95 transition-all flex items-center gap-1 overflow-hidden" style={{ top: `${4 + laneIndex * 24}px`, height: '20px', @@ -666,7 +666,7 @@ export default function Dashboard() { {item.desc} - {item.badge} + {item.badge} diff --git a/web/src/pages/Documentation.tsx b/web/src/pages/Documentation.tsx index 1b38b7cc..1d58972e 100644 --- a/web/src/pages/Documentation.tsx +++ b/web/src/pages/Documentation.tsx @@ -411,7 +411,7 @@ export default function Documentation() { return ( {/* Sidebar */} - + diff --git a/web/src/pages/DriftsList.tsx b/web/src/pages/DriftsList.tsx index 31b64414..82fd122d 100644 --- a/web/src/pages/DriftsList.tsx +++ b/web/src/pages/DriftsList.tsx @@ -35,7 +35,7 @@ const a = (key: keyof typeof V, opacity: number) => `rgb(var(${V[key]}) / ${opac function HudModal({ title, onClose, children }: { title: ReactNode; onClose: () => void; children: ReactNode }) { return ( - + {title} @@ -272,7 +272,7 @@ export default function DriftsList() { > {mode === 'active' && } {mode === 'active' ? 'Active' : 'All Drifts'} - + {mode === 'active' ? activeDrifts.length : allDrifts.length} @@ -288,7 +288,7 @@ export default function DriftsList() { placeholder="Search drifts…" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} - className="w-full pl-9 pr-3 py-2 rounded-lg text-xs focus:outline-none" + className="w-full pl-9 pr-3 py-2 rounded-lg text-xs focus:outline-hidden" style={{ background: a('outlineVar', 0.07), color: T.onSurface, @@ -319,7 +319,7 @@ export default function DriftsList() { setStatusFilter(prev => prev === s ? 'all' : s)} - className="px-2 py-0.5 rounded text-[11px] font-medium transition-all shrink-0" + className="px-2 py-0.5 rounded-sm text-[11px] font-medium transition-all shrink-0" style={{ background: statusFilter === s ? a('primary', 0.15) : 'transparent', color: statusFilter === s ? T.primary : T.onSurfaceVar, @@ -343,7 +343,7 @@ export default function DriftsList() { setEnvironmentFilter(prev => prev === e ? 'all' : e)} - className="px-2 py-0.5 rounded text-[11px] font-medium transition-all shrink-0" + className="px-2 py-0.5 rounded-sm text-[11px] font-medium transition-all shrink-0" style={{ background: environmentFilter === e ? `${color}20` : 'transparent', color: environmentFilter === e ? color : T.onSurfaceVar, @@ -359,7 +359,7 @@ export default function DriftsList() { setServiceFilter(e.target.value)} - className="px-2 py-0.5 rounded text-[11px] font-medium focus:outline-none shrink-0" + className="px-2 py-0.5 rounded-sm text-[11px] font-medium focus:outline-hidden shrink-0" style={{ background: serviceFilter !== 'all' ? a('tertiary', 0.15) : 'transparent', color: serviceFilter !== 'all' ? T.tertiary : T.onSurfaceVar, @@ -460,7 +460,7 @@ export default function DriftsList() { {/* Age */} - + {getTimeSince(drift.metadata?.createdAt)} @@ -538,7 +538,7 @@ export default function DriftsList() { onKeyDown={e => e.key === 'Enter' && handleMarkDoneConfirm()} placeholder="e.g., john.doe" autoFocus - className="w-full px-3 py-2 rounded-lg text-xs focus:outline-none" + className="w-full px-3 py-2 rounded-lg text-xs focus:outline-hidden" style={{ background: a('outlineVar', 0.08), color: T.onSurface, @@ -590,7 +590,7 @@ export default function DriftsList() { onKeyDown={e => e.key === 'Enter' && handleCreateTicketConfirm()} placeholder={`${import.meta.env.VITE_JIRA_DOMAIN || 'https://company.atlassian.net'}/browse/DRIFT-123`} autoFocus - className="w-full px-3 py-2 rounded-lg text-xs font-mono focus:outline-none" + className="w-full px-3 py-2 rounded-lg text-xs font-mono focus:outline-hidden" style={{ background: a('outlineVar', 0.08), color: T.onSurface, diff --git a/web/src/pages/EventsCalendar.tsx b/web/src/pages/EventsCalendar.tsx index b4b4de76..a0ed5f93 100644 --- a/web/src/pages/EventsCalendar.tsx +++ b/web/src/pages/EventsCalendar.tsx @@ -454,7 +454,7 @@ export default function EventsCalendar() { {/* Calendar Grid */} - + @@ -509,7 +509,7 @@ export default function EventsCalendar() { className="text-[10px] font-medium px-1.5 py-1 rounded-md truncate leading-tight flex items-center gap-1.5 border" style={{ background: envPalette.bg, color: envPalette.text, borderColor: envPalette.border }} > - + {getEventTypeIcon(event.attributes.type, 'w-2.5 h-2.5')} {getImpactLabel(event.attributes.impact) && ( @@ -534,7 +534,7 @@ export default function EventsCalendar() { {/* Event Details Panel */} - + {selectedDate ? format(selectedDate, 'MMMM yyyy', { locale: enUS }) : format(currentDate, 'MMMM yyyy', { locale: enUS })} @@ -543,28 +543,28 @@ export default function EventsCalendar() { {selectedDate ? format(selectedDate, 'dd') : '--'} {selectedDate && isToday(selectedDate) && ( - Today + Today )} {selectedDate ? format(selectedDate, 'EEEE, dd MMMM', { locale: enUS }) : 'Select a day'} - + {selectedDayEvents.length} event{selectedDayEvents.length > 1 ? 's' : ''} {selectedDayLiveCount > 0 && ( - + {selectedDayLiveCount} live )} {selectedDayScheduledCount > 0 && ( - + {selectedDayScheduledCount} scheduled )} {selectedDayDoneCount > 0 && ( - + {selectedDayDoneCount} done )} @@ -607,7 +607,7 @@ export default function EventsCalendar() { {event.attributes.service && ( - + {event.attributes.service} )} @@ -628,7 +628,7 @@ export default function EventsCalendar() { {(() => { const env = getEnvironmentPalette(event.attributes.environment) - return + return {String(getEnvironmentLabel(event.attributes.environment) || 'N/A').toUpperCase()} })()} diff --git a/web/src/pages/EventsOverlaps.tsx b/web/src/pages/EventsOverlaps.tsx index 322a72ff..f3864fbc 100644 --- a/web/src/pages/EventsOverlaps.tsx +++ b/web/src/pages/EventsOverlaps.tsx @@ -277,7 +277,7 @@ export default function EventsOverlaps() { handlePeriodChange(Number(e.target.value))} - className="h-9 px-3 rounded-md text-xs font-semibold focus:outline-none" + className="h-9 px-3 rounded-md text-xs font-semibold focus:outline-hidden" style={{ background: '#F8FAFD', color: T.onSurface, border: '1px solid #E1E7F2' }} > 1 day @@ -300,7 +300,7 @@ export default function EventsOverlaps() { type="date" value={customStartDate} onChange={(e) => setCustomStartDate(e.target.value)} - className="h-9 px-3 rounded-md text-xs focus:outline-none" + className="h-9 px-3 rounded-md text-xs focus:outline-hidden" style={{ background: '#F8FAFD', color: T.onSurface, border: '1px solid #E1E7F2' }} /> @@ -310,7 +310,7 @@ export default function EventsOverlaps() { type="date" value={customEndDate} onChange={(e) => setCustomEndDate(e.target.value)} - className="h-9 px-3 rounded-md text-xs focus:outline-none" + className="h-9 px-3 rounded-md text-xs focus:outline-hidden" style={{ background: '#F8FAFD', color: T.onSurface, border: '1px solid #E1E7F2' }} /> diff --git a/web/src/pages/EventsStreamline.tsx b/web/src/pages/EventsStreamline.tsx index 3f3675b7..b23da267 100644 --- a/web/src/pages/EventsStreamline.tsx +++ b/web/src/pages/EventsStreamline.tsx @@ -419,7 +419,7 @@ export default function EventsStreamline() { /> {/* Time Controls Bar */} - {/* Left: Time Range Picker */} @@ -460,13 +460,13 @@ export default function EventsStreamline() { From setCustomStartDate(e.target.value)} - className="w-full px-3 py-1.5 rounded-lg text-xs border-0 outline-none" + className="w-full px-3 py-1.5 rounded-lg text-xs border-0 outline-hidden" style={{ background: a('outline-var', 0.08), color: T.onSurface }} /> To setCustomEndDate(e.target.value)} - className="w-full px-3 py-1.5 rounded-lg text-xs border-0 outline-none" + className="w-full px-3 py-1.5 rounded-lg text-xs border-0 outline-hidden" style={{ background: a('outline-var', 0.08), color: T.onSurface }} /> { handleCustomDateApply(); setShowTimeRangePicker(false) }} @@ -686,9 +686,9 @@ export default function EventsStreamline() { {/* Group name column */} {groupBy === 'service' ? ( - + ) : ( - + )} @@ -696,7 +696,7 @@ export default function EventsStreamline() { {displayName} {hasOverlaps && ( - + )} @@ -776,9 +776,9 @@ export default function EventsStreamline() { {event.title} {event.attributes.impact && ( - + )} - {approved && } + {approved && } {spanCount > 2 && viewMode === 'week' && ( {format(startDate, 'HH:mm')} diff --git a/web/src/pages/Insights.tsx b/web/src/pages/Insights.tsx index 380f0769..63341a90 100644 --- a/web/src/pages/Insights.tsx +++ b/web/src/pages/Insights.tsx @@ -249,7 +249,7 @@ export default function Insights() { - + handlePeriodChange(Number(e.target.value))} - className="px-3 py-2 rounded-lg text-sm focus:outline-none border-0 w-36" + className="px-3 py-2 rounded-lg text-sm focus:outline-hidden border-0 w-36" style={{ background: T.surfaceLow, color: T.onSurface }}> 7 days 14 days @@ -301,13 +301,13 @@ export default function Insights() { Start: setCustomStartDate(e.target.value)} - className="px-3 py-1.5 rounded-lg text-sm focus:outline-none border-0" + className="px-3 py-1.5 rounded-lg text-sm focus:outline-hidden border-0" style={{ background: T.surfaceLow, color: T.onSurface }} /> End: setCustomEndDate(e.target.value)} - className="px-3 py-1.5 rounded-lg text-sm focus:outline-none border-0" + className="px-3 py-1.5 rounded-lg text-sm focus:outline-hidden border-0" style={{ background: T.surfaceLow, color: T.onSurface }} /> { setIsCustomPeriod(false); setSelectedDays(30) }} @@ -396,13 +396,13 @@ export default function Insights() { {project.project} {project.deployments > 0 && ( - {project.deployments}d + {project.deployments}d )} {project.incidents > 0 && ( - {project.incidents}i + {project.incidents}i )} {project.operations > 0 && ( - {project.operations}o + {project.operations}o )} @@ -438,7 +438,7 @@ export default function Insights() { {pieData.map(({ name, value, color }) => ( - + {name} {value} @@ -461,7 +461,7 @@ export default function Insights() { {/* Event Details Modal */} {eventModal.isOpen && ( - + diff --git a/web/src/pages/Links.tsx b/web/src/pages/Links.tsx index 3b33279a..88d1ed47 100644 --- a/web/src/pages/Links.tsx +++ b/web/src/pages/Links.tsx @@ -174,7 +174,7 @@ export default function Links() { placeholder="Filter… (Ctrl+K)" value={search} onChange={e => setSearch(e.target.value)} - className="w-52 text-sm pl-3 pr-3 py-1.5 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" + className="w-52 text-sm pl-3 pr-3 py-1.5 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-indigo-500" /> {homerUrl && ( refetch()} disabled={homerLoading} className="gap-2"> @@ -193,7 +193,7 @@ export default function Links() { {homerError && ( - + Could not load Homer dashboard links. Showing local links only. @@ -206,7 +206,7 @@ export default function Links() { {Array.from({ length: 4 }).map((_, col) => ( - + {Array.from({ length: 5 }).map((_, row) => ( ))} @@ -318,7 +318,7 @@ function LinkRow({ item, stored, onEdit, onDelete }: LinkRowProps) { href={item.url} target="_blank" rel="noopener noreferrer" - className="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden" + className="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden" style={!item.logo && !faviconUrl ? { backgroundColor: iconColor } : {}} tabIndex={-1} > @@ -360,7 +360,7 @@ function LinkRow({ item, stored, onEdit, onDelete }: LinkRowProps) { {/* Right side: Homer badge OR edit/delete actions OR external link icon */} - + {item._fromHomer && ( onEdit(stored)} - className="p-1 rounded text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" + className="p-1 rounded-sm text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" title="Edit" > onDelete(stored.id!)} - className="p-1 rounded text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" + className="p-1 rounded-sm text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" title="Delete" > diff --git a/web/src/pages/Locks.tsx b/web/src/pages/Locks.tsx index 4ad7a3a9..3bd79510 100644 --- a/web/src/pages/Locks.tsx +++ b/web/src/pages/Locks.tsx @@ -142,7 +142,7 @@ export default function Locks() { {error && ( - + {error} )} @@ -199,7 +199,7 @@ export default function Locks() { }}> - + {lock.service} @@ -214,7 +214,7 @@ export default function Locks() { {formatDate((lock as any).createdAt || lock.created_at)} - {getTimeSince((lock as any).createdAt || lock.created_at)} @@ -249,7 +249,7 @@ export default function Locks() { {/* Unlock Modal */} {showUnlockPrompt && selectedLock && ( - setShowUnlockPrompt(false)} /> + setShowUnlockPrompt(false)} /> @@ -270,7 +270,7 @@ export default function Locks() { onKeyDown={(e) => { if (e.key === 'Enter') handleUnlockConfirm() }} placeholder="e.g., john.doe" autoFocus - className="w-full border-0 border-b-2 px-4 py-3 rounded-t-lg text-sm focus:outline-none transition-all" + className="w-full border-0 border-b-2 px-4 py-3 rounded-t-lg text-sm focus:outline-hidden transition-all" style={{ background: T.surfaceLow, color: T.onSurface, diff --git a/web/src/pages/RpaUsage.tsx b/web/src/pages/RpaUsage.tsx index 8e5bd15d..9e603a90 100644 --- a/web/src/pages/RpaUsage.tsx +++ b/web/src/pages/RpaUsage.tsx @@ -315,7 +315,7 @@ export default function RpaUsage() { placeholder="Search…" value={search} onChange={e => { setSearch(e.target.value); setPage(0) }} - className="pl-9 pr-3 py-2 rounded-lg text-xs focus:outline-none w-48" + className="pl-9 pr-3 py-2 rounded-lg text-xs focus:outline-hidden w-48" style={{ background: a('outlineVar', 0.07), color: T.onSurface, border: `1px solid ${a('outlineVar', 0.15)}` }} /> @@ -340,7 +340,7 @@ export default function RpaUsage() { {uniqueStatuses.map(s => ( { setStatusFilter(prev => prev === s ? 'all' : s); setPage(0) }} - className="px-2 py-0.5 rounded text-[11px] font-medium transition-all shrink-0" + className="px-2 py-0.5 rounded-sm text-[11px] font-medium transition-all shrink-0" style={{ background: statusFilter === s ? a('primary', 0.15) : 'transparent', color: statusFilter === s ? T.primary : T.onSurfaceVar, @@ -456,7 +456,7 @@ export default function RpaUsage() { setPage(p => Math.max(0, p - 1))} disabled={page === 0} - className="w-8 h-8 rounded flex items-center justify-center transition-all disabled:opacity-30" + className="w-8 h-8 rounded-sm flex items-center justify-center transition-all disabled:opacity-30" style={{ background: a('outlineVar', 0.1), color: T.onSurfaceVar }} > @@ -468,7 +468,7 @@ export default function RpaUsage() { setPage(pageNum)} - className="w-8 h-8 rounded text-xs font-bold transition-all" + className="w-8 h-8 rounded-sm text-xs font-bold transition-all" style={pageNum === page ? { background: T.primary, color: '#1a0050' } : { background: a('outlineVar', 0.1), color: T.onSurfaceVar } @@ -482,7 +482,7 @@ export default function RpaUsage() { setPage(p => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1} - className="w-8 h-8 rounded flex items-center justify-center transition-all disabled:opacity-30" + className="w-8 h-8 rounded-sm flex items-center justify-center transition-all disabled:opacity-30" style={{ background: a('outlineVar', 0.1), color: T.onSurfaceVar }} > diff --git a/web/src/pages/ThemeTest.tsx b/web/src/pages/ThemeTest.tsx index ad443f2f..b4226314 100644 --- a/web/src/pages/ThemeTest.tsx +++ b/web/src/pages/ThemeTest.tsx @@ -59,10 +59,10 @@ export default function ThemeTest() { Backgrounds - + Surface low - + Surface high diff --git a/web/src/pages/VersionCompliance.tsx b/web/src/pages/VersionCompliance.tsx index d744e067..2fc10589 100644 --- a/web/src/pages/VersionCompliance.tsx +++ b/web/src/pages/VersionCompliance.tsx @@ -138,7 +138,7 @@ export default function VersionCompliance() { setSearchQuery(e.target.value)} - className="w-full pl-10 pr-4 py-2.5 rounded-lg text-sm focus:outline-none border-0 transition-all" + className="w-full pl-10 pr-4 py-2.5 rounded-lg text-sm focus:outline-hidden border-0 transition-all" style={{ background: T.surfaceLow, color: T.onSurface }} /> {searchQuery && ( setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 hover:opacity-70"> @@ -206,7 +206,7 @@ export default function VersionCompliance() { }}> - + {project.projectName} diff --git a/web/tailwind.config.js b/web/tailwind.config.js deleted file mode 100644 index a5970000..00000000 --- a/web/tailwind.config.js +++ /dev/null @@ -1,76 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -export default { - content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - ], - darkMode: 'class', - theme: { - extend: { - colors: { - hud: { - bg: 'rgb(var(--hud-bg) / )', - surface: 'rgb(var(--hud-surface) / )', - 'surface-low': 'rgb(var(--hud-surface-low) / )', - 'surface-high': 'rgb(var(--hud-surface-high) / )', - 'surface-highest': 'rgb(var(--hud-surface-highest) / )', - primary: 'rgb(var(--hud-primary) / )', - 'primary-dim': 'rgb(var(--hud-primary-dim) / )', - secondary: 'rgb(var(--hud-secondary) / )', - tertiary: 'rgb(var(--hud-tertiary) / )', - 'on-surface': 'rgb(var(--hud-on-surface) / )', - 'on-surface-var': 'rgb(var(--hud-on-surface-var) / )', - outline: 'rgb(var(--hud-outline) / )', - 'outline-var': 'rgb(var(--hud-outline-var) / )', - success: 'rgb(var(--hud-success) / )', - error: 'rgb(var(--hud-error) / )', - warning: 'rgb(var(--hud-warning) / )', - }, - }, - fontFamily: { - /* Keep the utility name; updated to Plus Jakarta Sans */ - grotesk: ['"Plus Jakarta Sans"', 'sans-serif'], - mono: ['"IBM Plex Mono"', '"JetBrains Mono"', 'monospace'], - sans: ['"Plus Jakarta Sans"', 'sans-serif'], - }, - fontSize: { - /* Intergalactic 8-step type scale */ - 'fs-100': ['0.75rem', { lineHeight: '1rem' }], /* 12px */ - 'fs-200': ['0.875rem', { lineHeight: '1.25rem' }], /* 14px */ - 'fs-300': ['1rem', { lineHeight: '1.5rem' }], /* 16px */ - 'fs-400': ['1.25rem', { lineHeight: '1.75rem' }], /* 20px */ - 'fs-500': ['1.5rem', { lineHeight: '2rem' }], /* 24px */ - 'fs-600': ['2rem', { lineHeight: '2.5rem' }], /* 32px */ - 'fs-700': ['2.25rem', { lineHeight: '2.75rem' }], /* 36px */ - 'fs-800': ['3rem', { lineHeight: '3.5rem' }], /* 48px */ - }, - borderRadius: { - /* Intergalactic standard radii */ - 'ig-sm': '4px', - 'ig': '6px', - 'ig-md': '8px', - 'ig-lg': '12px', - }, - boxShadow: { - 'ig-card': '0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04)', - 'ig-card-hover': '0 4px 12px rgb(0 0 0 / 0.10), 0 1px 3px rgb(0 0 0 / 0.06)', - 'ig-dropdown': '0 8px 24px rgb(0 0 0 / 0.12), 0 2px 8px rgb(0 0 0 / 0.08)', - 'ig-focus': '0 0 0 3px rgb(var(--hud-primary) / 0.15)', - }, - keyframes: { - pulse: { - '0%, 100%': { opacity: '1' }, - '50%': { opacity: '0.3' }, - }, - 'glow-pulse': { - '0%, 100%': { boxShadow: '0 0 4px 1px currentColor' }, - '50%': { boxShadow: '0 0 10px 3px currentColor' }, - }, - }, - animation: { - 'glow-pulse': 'glow-pulse 2s ease-in-out infinite', - }, - }, - }, - plugins: [], -}
This will permanently delete:
Error creating drift. Please try again.
{getErrorMessage()}
Error creating RPA operation. Please try again.
{selectedDate ? format(selectedDate, 'EEEE, dd MMMM', { locale: enUS }) : 'Select a day'}
{project.project}
Could not load Homer dashboard links. Showing local links only.
Surface low
Surface high