From ba8edd26b09f44ce46d9b4a55652937e2a1bb078 Mon Sep 17 00:00:00 2001 From: Nick Beckley Date: Wed, 2 Sep 2026 20:15:12 +0000 Subject: [PATCH] Fix projects dark theme panels --- PlotLine.Tests/Program.cs | 8 +++++ PlotLine/wwwroot/css/onboarding.css | 16 ++++++++-- PlotLine/wwwroot/css/plotline-theme.css | 39 ++++++++++++++++++++----- 3 files changed, 54 insertions(+), 9 deletions(-) diff --git a/PlotLine.Tests/Program.cs b/PlotLine.Tests/Program.cs index 4d35d89..77578f5 100644 --- a/PlotLine.Tests/Program.cs +++ b/PlotLine.Tests/Program.cs @@ -682,12 +682,20 @@ static void StoryIntelligenceActiveProgressOnlyAppearsInGlobalStrip() var projectsView = File.ReadAllText(Path.Combine(root, "Views/Projects/Index.cshtml")); var layout = File.ReadAllText(Path.Combine(root, "Views/Shared/_Layout.cshtml")); var controller = File.ReadAllText(Path.Combine(root, "Controllers/OnboardingController.cs")); + var onboardingCss = File.ReadAllText(Path.Combine(root, "wwwroot/css/onboarding.css")); + var themeCss = File.ReadAllText(Path.Combine(root, "wwwroot/css/plotline-theme.css")); Assert(!projectsView.Contains("Story Intelligence is reading", StringComparison.Ordinal), "Projects page should not duplicate the active Story Intelligence progress card."); Assert(!projectsView.Contains("StoryIntelligenceProgress", StringComparison.Ordinal), "Projects page should not provide a second View progress target while the global strip is active."); Assert(projectsView.Contains("HasPipelineBooks && !Model.StoryIntelligence.HasActiveImport", StringComparison.Ordinal), "Saved pipeline cards should be hidden while active progress is already shown globally."); Assert(layout.Contains("data-story-intelligence-global-strip", StringComparison.Ordinal), "Active Story Intelligence progress should remain available in the shared page header."); Assert(controller.Contains("return RedirectToAction(\"Details\", \"Books\", new { id = bookId });", StringComparison.Ordinal), "Starting permanent book analysis should return to the book page."); + Assert(onboardingCss.Contains("[data-theme=\"dark\"] .story-intelligence-dashboard-card", StringComparison.Ordinal), "Projects Story Intelligence panel should have a dark-theme surface rule."); + Assert(onboardingCss.Contains("background: var(--plotline-panel, var(--bs-body-bg));", StringComparison.Ordinal), "Projects Story Intelligence panel should use theme-aware panel surfaces."); + Assert(themeCss.Contains("[data-theme=\"dark\"]", StringComparison.Ordinal), "Theme CSS should define dark theme scope."); + Assert(themeCss.Contains("[data-theme=\"dark\"] .trial-dashboard-banner", StringComparison.Ordinal), "Projects trial banner should have a dark-theme surface rule."); + Assert(themeCss.Contains("color-mix(in srgb, var(--plotline-surface-elevated) 92%, var(--plotline-accent-soft))", StringComparison.Ordinal), "Trial banner should use theme-aware surfaces instead of hard-coded light slabs."); + Assert(!themeCss.Contains("linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(242, 226, 207, 0.56))", StringComparison.Ordinal), "Trial banner should not keep the old hard-coded cream background."); } static void StoryIntelligenceBookActionsDoNotOpenReviewCentreWhileRunning() diff --git a/PlotLine/wwwroot/css/onboarding.css b/PlotLine/wwwroot/css/onboarding.css index d8c006b..346ab6d 100644 --- a/PlotLine/wwwroot/css/onboarding.css +++ b/PlotLine/wwwroot/css/onboarding.css @@ -2022,9 +2022,10 @@ summary.story-review-chapter-heading { .onboarding-story-facts div, .onboarding-story-card, .story-intelligence-dashboard-card { - border: 1px solid rgba(31, 42, 68, .12); + border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 82%, var(--plotline-accent, #2f6f63)); border-radius: 8px; - background: rgba(255, 255, 255, .62); + background: var(--plotline-panel, var(--bs-body-bg)); + box-shadow: var(--plotline-shadow-subtle, 0 8px 20px rgba(31, 42, 68, .06)); } .onboarding-story-facts div { @@ -2192,7 +2193,9 @@ summary.story-review-chapter-heading { .story-intelligence-dashboard-card h2 { margin: 0 0 .35rem; + color: var(--plotline-ink, var(--bs-body-color)); font-size: 1.25rem; + font-weight: 800; } .story-intelligence-dashboard-card p { @@ -2213,11 +2216,20 @@ summary.story-review-chapter-heading { align-items: baseline; } +.story-intelligence-status-list__item strong { + color: var(--plotline-ink, var(--bs-body-color)); +} + .story-intelligence-status-list__item span { color: var(--bs-secondary-color); font-size: .9rem; } +[data-theme="dark"] .story-intelligence-dashboard-card { + background: var(--plotline-surface-elevated, #2a231e); + border-color: color-mix(in srgb, var(--plotline-border-soft, rgba(231, 214, 190, .16)) 82%, var(--plotline-accent, #d49a62)); +} + .story-intelligence-dashboard-progress { display: grid; grid-template-columns: auto auto; diff --git a/PlotLine/wwwroot/css/plotline-theme.css b/PlotLine/wwwroot/css/plotline-theme.css index 9ca7e16..a1e80a0 100644 --- a/PlotLine/wwwroot/css/plotline-theme.css +++ b/PlotLine/wwwroot/css/plotline-theme.css @@ -1514,17 +1514,17 @@ a:focus-visible { .trial-status-panel, .trial-dashboard-banner { - border-color: rgba(84, 68, 48, 0.16); + border-color: color-mix(in srgb, var(--plotline-border-soft) 84%, var(--plotline-accent)); background: - linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(242, 226, 207, 0.56)), + linear-gradient(135deg, color-mix(in srgb, var(--plotline-surface-elevated) 92%, var(--plotline-accent-soft)), color-mix(in srgb, var(--plotline-surface) 84%, var(--plotline-accent-soft))), var(--plotline-surface); box-shadow: var(--plotline-shadow-subtle); } .trial-status-panel--signup { - border-color: rgba(49, 95, 103, 0.22); + border-color: color-mix(in srgb, var(--plotline-border-soft) 78%, var(--plotline-secondary)); background: - linear-gradient(135deg, rgba(223, 236, 239, 0.72), rgba(255, 253, 248, 0.92)), + linear-gradient(135deg, color-mix(in srgb, var(--plotline-surface) 78%, var(--plotline-secondary-soft)), color-mix(in srgb, var(--plotline-surface-elevated) 90%, var(--plotline-secondary-soft))), var(--plotline-surface); } @@ -1543,15 +1543,40 @@ a:focus-visible { } .trial-status--fourteen-days { - border-color: rgba(184, 118, 43, 0.28); + border-color: color-mix(in srgb, var(--plotline-border-soft) 62%, var(--plotline-warning)); } .trial-status--seven-days, .trial-status--three-days, .trial-status--one-day { - border-color: rgba(184, 118, 43, 0.38); + border-color: color-mix(in srgb, var(--plotline-border-soft) 52%, var(--plotline-warning)); background: - linear-gradient(135deg, rgba(251, 236, 211, 0.84), rgba(255, 253, 248, 0.92)), + linear-gradient(135deg, color-mix(in srgb, var(--plotline-surface) 76%, var(--plotline-warning)), color-mix(in srgb, var(--plotline-surface-elevated) 90%, var(--plotline-warning))), + var(--plotline-surface); +} + +[data-theme="dark"] .trial-status-panel, +[data-theme="dark"] .trial-dashboard-banner { + color: var(--app-text); + border-color: color-mix(in srgb, var(--app-border) 84%, var(--plotline-accent)); + background: + linear-gradient(135deg, color-mix(in srgb, var(--plotline-surface-elevated) 88%, var(--plotline-accent-soft)), color-mix(in srgb, var(--plotline-surface) 90%, var(--plotline-bg))), + var(--plotline-surface); +} + +[data-theme="dark"] .trial-status-panel--signup { + border-color: color-mix(in srgb, var(--app-border) 76%, var(--plotline-secondary)); + background: + linear-gradient(135deg, color-mix(in srgb, var(--plotline-surface) 86%, var(--plotline-secondary-soft)), color-mix(in srgb, var(--plotline-surface-elevated) 92%, var(--plotline-bg))), + var(--plotline-surface); +} + +[data-theme="dark"] .trial-status--seven-days, +[data-theme="dark"] .trial-status--three-days, +[data-theme="dark"] .trial-status--one-day { + border-color: color-mix(in srgb, var(--app-border) 58%, var(--plotline-warning)); + background: + linear-gradient(135deg, color-mix(in srgb, var(--plotline-surface) 84%, var(--plotline-warning)), color-mix(in srgb, var(--plotline-surface-elevated) 92%, var(--plotline-bg))), var(--plotline-surface); }