9bb74595c2
Adds a dismissible, one-time dashboard banner announcing the upcoming SQLite→embedded-Postgres storage backend change. - New self-contained StorageMigrationNoticeBanner component with title/body copy and a dismiss control that persists via localStorage key fusion:storage-migration-notice-dismissed - Wire the banner into DashboardBanners alongside the CLI binary install banner for project-scoped views - Add en locale strings (storageMigrationNotice.title/body/dismissLabel) in app.json - Add component test coverage for render/dismiss/persistence behavior - Document the notice in docs/dashboard-guide.md - Add a minor changeset for @runfusion/fusion Files changed: .changeset/fn-7852-storage-migration-notice.md | 7 ++ docs/dashboard-guide.md | 2 + .../components/StorageMigrationNoticeBanner.css | 73 +++++++++++++++++++ .../components/StorageMigrationNoticeBanner.tsx | 65 +++++++++++++++++ .../StorageMigrationNoticeBanner.test.tsx | 82 ++++++++++++++++++++++ .../app/components/dashboard/DashboardBanners.tsx | 11 ++- packages/i18n/locales/en/app.json | 5 ++ 7 files changed, 242 insertions(+), 3 deletions(-) Fusion-Task-Id: FN-7852 Fusion-Task-Lineage: e3235cce-9ca3-4830-8733-a2ec46c53246 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
74 lines
1.8 KiB
CSS
74 lines
1.8 KiB
CSS
/* === StorageMigrationNoticeBanner === */
|
|
.storage-migration-notice-banner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
margin: var(--space-sm) var(--space-md) 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: linear-gradient(
|
|
90deg,
|
|
color-mix(in srgb, var(--todo) 12%, transparent),
|
|
color-mix(in srgb, var(--todo) 4%, transparent)
|
|
);
|
|
border: var(--btn-border-width) solid color-mix(in srgb, var(--todo) 35%, transparent);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
}
|
|
|
|
.storage-migration-notice-banner__body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
min-width: 0;
|
|
}
|
|
|
|
.storage-migration-notice-banner__title {
|
|
font-weight: 600;
|
|
font-size: var(--font-size-base);
|
|
color: var(--text);
|
|
}
|
|
|
|
.storage-migration-notice-banner__text {
|
|
margin: 0;
|
|
font-size: var(--font-size-base);
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.storage-migration-notice-banner__dismiss {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-xs);
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
line-height: 0;
|
|
transition: color var(--transition-fast), background var(--transition-fast);
|
|
}
|
|
|
|
.storage-migration-notice-banner__dismiss:hover {
|
|
background: color-mix(in srgb, var(--text) 6%, transparent);
|
|
color: var(--text);
|
|
}
|
|
|
|
.storage-migration-notice-banner__dismiss:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.storage-migration-notice-banner {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.storage-migration-notice-banner__dismiss {
|
|
align-self: flex-start;
|
|
}
|
|
}
|