vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

frontend: add WarnBanner Preact component, compose ApiErrorPanel from it

Browse source 
mara, on review: "i want each component to import its own css file
itself[;] if you need a bunch of extra css externally, its not a proper
component ... you may need to migrate other components that you would
want to use first".

WarnBanner is the Preact-component successor to the shadow-DOM
<hive-warn> custom element (same three-tier info/warning/error visual
language, colours copied faithfully from hive-warn.css). ApiErrorPanel
now composes it instead of owning a copy of the border/colour/pulse
rules itself — its own CSS is back down to just the layout that's
actually specific to it (heading, copy button, detail text).

Re-verified with a fresh mock-server screenshot: same rendered output as
before, now via composition instead of a duplicated banner shape.
This commit is contained in:
iris 2026-08-17 21:25:51 +02:00 • committed by mara
commit ca84079a21
5 changed files with 94 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/packages/shared/src/warn-banner/WarnBanner.css Normal file
View file

@ -0,0 +1,36 @@
/* WarnBanner.css — three levels, not an open-ended severity+modifier
combination (same rule `hive-warn.css` states, copied faithfully since
this is that component's visual language, just reached through a
class instead of a `:host([level])` attribute selector). Colours reuse
theme.css's own documented semantics: --cyan = "info accents", --amber
= "warnings", --red = "errors, fail state". */
.warn-banner {
display: block;
border: 1px solid var(--amber);
border-radius: 4px;
padding: 0.5em 0.8em;
margin-bottom: 0.6em;
color: var(--amber);
background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.warn-banner-info {
border-color: var(--cyan);
color: var(--cyan);
background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.warn-banner-error {
border-color: var(--red);
color: var(--red);
background: color-mix(in srgb, var(--red) 8%, transparent);
/* Only `error` pulses — an active incident, not a standing caveat. */
text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
animation: warn-banner-pulse 2.4s ease-in-out infinite;
}
@keyframes warn-banner-pulse {
0%, 100% { box-shadow: 0 0 12px -4px color-mix(in srgb, currentColor 55%, transparent); }
50% { box-shadow: 0 0 22px -2px color-mix(in srgb, currentColor 95%, transparent); }
}
.warn-banner strong {
color: inherit;
}