Files
fusion/packages/dashboard/app/components/UpdateAvailableBanner.css
Fusion acbd6580b3 feat(FN-2663): add cached update-check setting, APIs, and banner
- Add global updateCheckEnabled setting to core schema/types and wire dashboard command to cache update checks in the CLI
- Implement dashboard server update-check cache module plus REST routes for status and refresh behavior
- Add dashboard client hook, legacy API helpers, and UpdateAvailableBanner UI to show cached CLI update notices
- Cover update-check server routes, hook behavior, banner rendering, and route registration with focused tests
- Document update-check configuration and API behavior in architecture and settings reference docs
2026-04-27 01:40:07 -07:00

74 lines
1.7 KiB
CSS

/* === UpdateAvailableBanner === */
.update-available-banner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--color-info) 35%, var(--border));
border-inline-start: var(--space-xs) solid var(--color-info);
background: color-mix(in srgb, var(--color-info) 10%, var(--surface));
color: var(--text);
}
.update-available-banner__text {
margin: 0;
color: var(--text);
}
.update-available-banner__text code {
font-family: var(--font-mono);
}
.update-available-banner__link {
color: var(--color-info);
text-decoration: underline;
text-underline-offset: var(--space-xs);
transition: color var(--transition-fast);
}
.update-available-banner__link:hover {
color: var(--text);
}
.update-available-banner__link:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
border-radius: var(--radius-sm);
}
.update-available-banner__dismiss {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background var(--transition-fast);
line-height: 0;
flex-shrink: 0;
}
.update-available-banner__dismiss:hover {
color: var(--text);
background: color-mix(in srgb, var(--color-info) 14%, transparent);
}
.update-available-banner__dismiss:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
@media (max-width: 768px) {
.update-available-banner {
flex-direction: column;
align-items: stretch;
}
.update-available-banner__dismiss {
align-self: flex-end;
}
}