Centralize the app's theme and reorder the Reduce/Verify panes - #223
Merged
Merged
Conversation
Reorders the default problem detail page layout so Reduce is last (problem, visualize, solve, verify, reduce) instead of third (problem, reduce, visualize, solve, verify). Reductions are an optional, exploratory side-feature -- you can solve/verify a problem directly without ever reducing it -- so it belongs at the end of the pipeline rather than visually gating the rest of it. Matches the section order the new Redux_Frontend project independently settled on (Overview, Visualizations, Solvers, Verifier, Reductions -- Reductions last). No persisted row-order state to migrate (rowOrder is a plain in-memory useState default, not read from localStorage), and the drag-handle ids/tour selectors are keyed by row id rather than position, so nothing else needed to change. Closes #191 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013HmzCMwvXP5jDBE3qgSmkj
/browse (and its FacetFilterGroup/ProblemCard components, used only there) had a bespoke dark purple/violet "glass" theme, out of step with the light orange/grey/white theme every other page (home, About Us, Help, Contribute) already shares. Swapped every hardcoded color to match those pages' exact values -- same primary (#3F3F46), secondary/accent (#F47C20), background.default (#F9FAFB), paper (#FFFFFF), text primary/secondary (#111827/#4B5563), and card style (white background, #E5E7EB border, orange hover) -- rather than inventing new ones. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BGUai41kxHnzFP3tiENWkK
Adds components/theme.js as the single source of truth for the orange/grey/white palette, page background gradient, and section/ inner card styles -- every page previously defined its own createTheme() with copy-pasted (and drifting: "#3F3F46" vs "#424242" for the "same" grey, "#F47C20" vs "#f47920" for the "same" orange) hex values. About Us, Help, Contribute, and Browse now import from it instead of redeclaring it locally. Also folds in the home page background fix: pages/index.js had no CssBaseline and no background styling at all (a leftover of its older Bootstrap-based layout), so it rendered on flat white while every other page had the shared radial-gradient/grey backdrop. Now wrapped in CssBaseline + the shared pageBackground, matching the rest of the app. Its local theme keeps two page-specific palette extensions (primary.lGray, white) that only this page's pageblocks actually use (No_Viz_SVG.js's bgcolor="primary.lGray", color="white" buttons across several pageblocks) -- extended from the shared palette rather than duplicating it wholesale. Centralizing this is also the prerequisite for a future light/dark mode toggle: one shared theme object instead of five independent ones is what makes flipping mode application-wide feasible. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BGUai41kxHnzFP3tiENWkK
Adds a small toggle in the top banner that switches the whole app between light and dark, persisted to localStorage. - components/theme.js: adds a dark palette alongside the existing light one, plus createAppTheme(mode), and turns pageBackground/ sectionCardSx/innerCardSx from flat constants into mode-aware functions. Also folds pages/index.js's page-specific palette extensions (primary.lGray, white) into both shared palettes, since theme creation is no longer per-page. - components/ThemeModeContext.js (new): the actual state -- mode, persisted to localStorage, read after mount (SSR has no localStorage, so the very first render is always light; a returning dark-mode user sees a brief flash before it switches, not worth a blocking SSR script for this). Renders MUI's own ThemeProvider + CssBaseline once, wrapping the whole app. - pages/_app.js: wraps <Component> in ThemeModeProvider -- this is what makes the toggle affect every page from one place, instead of each page owning its own independent theme like before. - Every page (index, aboutus, browse, help, contribute) and the Browse-only widgets (ProblemCard, FacetFilterGroup) drop their own ThemeProvider/CssBaseline/createTheme and read mode from useThemeMode() instead, threading it into the now-mode-aware style helpers. Also replaced the many hardcoded body-text hex colors (#374151, #6b7280, #9ca3af, ...) with the new textColors(mode) / surfaceColors(mode) tiers, since dark-on-dark text would otherwise be illegible against the new dark cards. - ResponsiveAppBar: the banner itself stays one fixed dark chrome color in both modes (matches #207's original "consistent everywhere" intent, just updated to the canonical #3F3F46 grey) rather than becoming mode-aware itself -- it's already a deliberately fixed brand element. Adds the toggle IconButton (sun/moon) at the top-right corner. Verified: npm run build succeeds with zero errors, all pages prerender; npm run dev serves all five pages at 200 with the shared palette resolving correctly in the default (light) SSR render. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BGUai41kxHnzFP3tiENWkK
Combines five follow-up fixes (originally #211, #213, #214, #215, #217) found while testing the dark/light toggle against the home page: - Home page's five accordion sections (Problem, Reduce, Visualize, Solve, Verify) stayed white with dark text in dark mode -- react-bootstrap's Card/Card.Header have their own hardcoded CSS with no idea our MUI theme exists. Backgrounds/text now come from the shared surfaceColors(mode)/textColors(mode) tokens. - The white border around each row wasn't actually the Card -- it was a separate global CSS rule on the outer Accordion wrapper (styles/globals.css: .accordion { border: 2px solid #ccc; }). Overridden to transparent in dark mode via inline style. - ISU logo's "Idaho State University"/"Computer Science" text and divider line are baked into the PNG as near-black pixels; in dark mode the logo now sits on a white background chip instead (home, about us, help, contribute -- browse has no logo footer). - Visualize row's Refresh/step-navigation/"Show reduction" controls bar had a hardcoded light background (#f9f9f9); now theme-aware, plus explicit text color on the switch labels. - Each row's drag-to-reorder icon had a hardcoded light chip (#f5f5f5 bg, #424242 icon) that stood out as a white circle in dark mode; now theme-aware across all 5 row components. - Verify row's "Enter a certificate" textarea (react-bootstrap FormControl) had the same hardcoded-white-background problem as the Cards above; fixed the same way. Light mode is unaffected by all of the above -- every change is gated on mode === "dark". Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BGUai41kxHnzFP3tiENWkK
…nto theme-and-layout-combined
…nto theme-and-layout-combined
This was referenced Sep 8, 2026
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Redux Build System — CI Report
Overall: ❌ 1 passed · 4 failed · 2 skipped · 1 blocked ❌ audit — 2 high · 1 moderate
❌ format-check — 60 format · 33 import order
❌ lint — 24 errors, 41 warnings
|
…tification The localStorage read must stay in an effect (not a useState lazy initializer) to avoid a hydration mismatch, since localStorage isn't available during SSR.
Andrija-Sevaljevic
approved these changes
Sep 10, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR is related to theme centralization and a layout fix on the main problem page.
Features:
Issue Handling:
Closes #226
Closes #227
Closes #228
Closes #229
Closes #191