Phase 2.6: Content Page Components Migration

[OpenStaxClaude]

Summary

Migrated three critical content page layout components from styled-components to CSS Modules as part of Phase 2.6 of the Plain CSS Migration initiative.

Related Jira: CORE-1700

Components Migrated

1. PageContent (src/app/content/components/Page/PageContent.tsx)

• Main content area with highlight styles, search highlighting, and MathJax integration
• Dynamic highlight styles generated from highlightStyles array in constants
• Created PageContent.css for static styles
• Created PageContent.legacy.ts for backward-compatible contentTextStyle export
• Reduced from 235 lines to 124 lines (47% reduction)

2. Topbar (src/app/content/components/Topbar/)

• Horizontal toolbar with search and text resizer controls
• Complex responsive behavior (desktop/mobile/mobile-medium layouts)
• Dynamic book theme colors for search button
• Text resizer with theme-dependent gradient
• Created Topbar.css with all responsive media queries

3. Toolbar (src/app/content/components/Toolbar/)

• Vertical navigation sidebar with study tools buttons
• Mobile menu with show/hide animations
• Created Toolbar.css with keyframe animations
• Created Toolbar.legacy.ts for backward-compatible exports (PlainButton, barPadding, toolbarDefaultButton, etc.)

Technical Implementation

CSS Variables for Dynamic Theming

Dynamic values (book theme colors, padding, gradients) are bound as CSS variables from JavaScript:

style={{
  '--search-button-bg': colorSchema ? theme.color.primary[colorSchema].base : 'transparent',
  '--toolbar-z-index': theme.zIndex.toolbar,
  ...style,
} as React.CSSProperties}

Icon Components

Kept icon components wrapped with styled() using empty template literals for component selector compatibility, following pattern from Phase 1.4:

• PageContent: None needed
• Topbar: AngleLeftIcon, HamburgerIcon, TimesCircleIcon
• Toolbar: ChevronLeftIcon, PrintIconComponent

Backward Compatibility

Created .legacy.ts files to maintain exports used by other components:

• PageContent.legacy.ts: Exports contentTextStyle (used by Attribution.tsx)
• Toolbar.legacy.ts: Exports PlainButton, barPadding, toolbarDefaultButton, etc. (used by Topbar, TableOfContents, SidebarControl, PrintButton)

Responsive Design

All media queries moved to top level in CSS (required for plain CSS):

• Desktop: > 1200px (75em)
• Mobile: 800px - 1200px (50em - 75em)
• Mobile Medium: < 800px (50em)

Migration Patterns Followed

✅ Hybrid approach (theme in JavaScript, styles in CSS)
✅ CSS variables bound from theme at component level
✅ Top-level media queries (not nested)
✅ Separate .legacy.ts files for backward compatibility
✅ classNames library for conditional class composition
✅ React.forwardRef for components receiving refs
✅ Transient prop filtering (props starting with $)
✅ Icon components wrapped with styled() for compatibility

Testing Requirements

Responsive Testing

Test at all three breakpoints:

1. Desktop (> 1200px): Verify toolbar visible on left, topbar shows full search bar and text resizer
2. Mobile (800px - 1200px): Verify toolbar transitions smoothly, topbar remains functional
3. Mobile Medium (< 800px): Verify hamburger menu appears, toolbar becomes modal overlay

Topbar Functionality

• Search input: Type query, verify styling, submit search, clear search
• Search button color: Verify button color matches book theme (test with different books)
• Text resizer: Click dropdown, drag slider, verify text size changes
• Mobile toggle: Click hamburger menu, verify toolbar slides in
• Keyboard navigation: Press Alt+S to cycle focus between search regions

Toolbar Functionality

• All buttons: Click each button (TOC, Search, Practice Questions, Study Guides, Highlights, Print)
• Active states: Verify buttons show active styling when their panel is open
• Mobile menu: Open menu, verify close button works, test tab trapping

PageContent / Highlights

• Create highlights: Select text, create highlight in different colors
• Highlight display: Verify all highlight colors render correctly
• Block highlights: Verify block-level highlights (figures, equations) have proper padding
• Search highlights: Perform search, verify yellow highlight on results, orange on current result
• MathJax highlights: Verify math equations can be highlighted and display correctly

Z-Index and Layering

• Open text resizer dropdown and verify it appears above other content
• Open toolbar dropdown menus (e.g., Study Guides) and verify they appear correctly
• Open modal overlays and verify they appear above all other content
• Scroll page and verify topbar/toolbar remain sticky in correct positions

Visual Regression

• Compare screenshots before/after at all breakpoints
• Test with multiple book themes (blue, orange, green, etc.)
• Verify no layout shifts or unexpected spacing changes

Files Changed

• 13 files changed
• 1635 insertions, 814 deletions
• 3 new CSS files created
• 2 new legacy files created

Next Steps

• Manual testing at all breakpoints
• Verify with different book themes
• Screenshot testing for visual regression
• Unit test verification (if CI allows)

🤖 Generated with Claude Code

Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com

[RoyEJohnson]

The last two values changed here, but I have not been able to find anything that is visually different in my testing.

[RoyEJohnson]

Can you rebase to origin/main and resolve the conflicts?

[RoyEJohnson]

@copilot resolve the merge conflicts in this pull request