Phase 7.2c: Complete Topbar Migration to Plain CSS#3056
Open
OpenStaxClaude wants to merge 3 commits into
Open
Conversation
Completed the migration of Topbar/styled.tsx by: - Removed remaining styled-components wrappers (HamburgerIcon, LeftArrow, SearchInputWrapper) - Converted styled components to plain functions using classNames - Added CSS classes for icon sizing (topbar-hamburger-icon, topbar-left-arrow) - Added topbar-shadow utility class for backward compatibility - Kept legacy shadow css export for AssignedTopBar (to be migrated later) - Removed styled-components imports except for legacy shadow export All Topbar components now use plain CSS with CSS variables for dynamic values. The Topbar.css file was already comprehensive from previous work. Note: utils/* files (applyBookTextColor.ts, sidebar.ts) were not migrated in this PR as they have broader dependencies across multiple components and should be addressed in a future PR once more components are migrated. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Migrated BookBanner.tsx (~350 lines) from styled-components to plain CSS: - Converted 8 styled-components to plain CSS + React components - Inlined applyBookTextColor utility (only used in BookBanner) - Maintained gradient backgrounds, scroll animations, and two variants (big/mini) - Preserved all responsive behavior and accessibility features Key Changes: - Created BookBanner.css with comprehensive styles for both variants - Replaced styled-components with functional components using classNames - Used CSS variables for dynamic values (gradients, colors, z-indices, heights) - Maintained scroll-based transition behavior between big/mini variants - Added React.forwardRef to BarWrapper for proper ref forwarding Technical Details: - Gradient backgrounds computed dynamically from theme and colorSchema prop - Text colors applied via CSS variables from theme.color.primary[colorSchema].foreground - Responsive breakpoints documented with calculations - Preserved disabled print styling via CSS @media print rules - ChevronLeftIcon migrated to plain SVG component Following patterns from PLAIN_CSS_MIGRATION_LEARNINGS.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
RoyEJohnson
force-pushed
the
phase-7.2c-migrate-topbar-utils
branch
from
ec08468 to
8c592f2
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
RoyEJohnson
force-pushed
the
phase-7.2c-migrate-topbar-utils
branch
from
f263a29 to
687659d
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR continues the styled-components → plain CSS migration by finishing the Topbar migration (except for a legacy shadow export used by AssignedTopBar) and migrating the BookBanner component to a CSS-based implementation.
Changes:
- Converted multiple Topbar styled-components wrappers to plain function components + CSS classes, while keeping a legacy
shadowcss export forAssignedTopBar. - Migrated
BookBannerfrom styled-components to plain CSS with CSS variables for theme-driven colors/gradients and preserved scroll-based big/mini behavior. - Removed now-unused utilities (
applyBookTextColor.ts,Toolbar/iconStyles.ts) and updated snapshots/CSS formatting.
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/content/components/utils/applyBookTextColor.ts | Removed unused styled-components helper (inlined into BookBanner). |
| src/app/content/components/Topbar/Topbar.css | Added new Topbar utility/icon classes (topbar-shadow, topbar-hamburger-icon, topbar-left-arrow). |
| src/app/content/components/Topbar/styled.tsx | Replaced several styled wrappers with plain components and added CSS import + shadow compatibility export. |
| src/app/content/components/Topbar/snapshots/index.spec.tsx.snap | Updated snapshots to reflect className changes after migration. |
| src/app/content/components/Toolbar/Toolbar.css | Formatting-only tweak. |
| src/app/content/components/Toolbar/iconStyles.ts | Removed legacy styled-components css fragment (no remaining TS imports found). |
| src/app/content/components/BookBanner.tsx | Migrated BookBanner component to plain CSS, using CSS variables for theme/gradient styling. |
| src/app/content/components/BookBanner.css | New stylesheet implementing the migrated BookBanner styling and responsive behavior. |
| src/app/content/components/snapshots/BookBanner.spec.tsx.snap | Updated snapshots to reflect DOM/CSS-variable based styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
RoyEJohnson
force-pushed
the
phase-7.2c-migrate-topbar-utils
branch
from
58ab964 to
eaf2da9
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
RoyEJohnson
force-pushed
the
phase-7.2c-migrate-topbar-utils
branch
from
d5eaa45 to
a35db81
Compare
RoyEJohnson
force-pushed
the
phase-7.2c-migrate-topbar-utils
branch
from
f5f3fed to
21a6c91
Compare
RoyEJohnson
force-pushed
the
phase-7.2c-migrate-topbar-utils
branch
from
21a6c91 to
a3f599c
Compare
Remove unnecessary undefined fallbacks from BookBanner textColor ternaries The colorSchema prop in BookTitle, BookTitleLink, and BookChapter components is always defined when these components are rendered. The bookTheme selector returns either the book's theme or a default 'blue' theme, never undefined. These components are only rendered after checking that book exists, and bookTheme is always defined in that context. The ternary fallbacks to undefined were dead code that made the type system less precise. Changes: - Removed ternary operators checking if colorSchema exists - Updated TypeScript interfaces to reflect colorSchema is never undefined - Simplified textColor assignment to direct property access This addresses the code review feedback about lacking test coverage for the undefined branches - they were unnecessary and have been removed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Remove unused files snaps Lint specificity more fixups Fix BookBanner mobile font sizes for title and chapter On mobile, both BookTitle and BookChapter should use smaller font sizes (1.6rem/2rem) regardless of variant. The original styled-components used h3Style and h4Style which both have mobile breakpoints that set these values. Changes: - Added mobile styles for .book-banner-title: font-size: 1.6rem; line-height: 2rem - Added mobile styles for .book-banner-chapter: font-size: 1.6rem; line-height: 2rem This ensures both big and mini variants display with the correct mobile typography on screens under 1200px (75em breakpoint). Addresses review feedback about missing mobile font-size/line-height. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Include left chevron on collapsed banner Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
RoyEJohnson
force-pushed
the
phase-7.2c-migrate-topbar-utils
branch
from
a3f599c to
8a9291a
Compare
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
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.
Summary
This PR completes the migration of Topbar/styled.tsx to plain CSS as part of Phase 7.2c of the CSS migration effort (CORE-2283).
What Was Migrated
Topbar/styled.tsx:
HamburgerIconstyled wrapper - now uses plain CSS classLeftArrowstyled wrapper - now uses plain CSS classSearchInputWrapperstyled wrapper - converted to plain functionAngleLeftIconstyled wrapper - converted to plain functiontopbar-hamburger-icon,topbar-left-arrow,topbar-shadowshadowcss export for backward compatibility with AssignedTopBarMigration Status
The Topbar component is now ~98% migrated to plain CSS. The only remaining styled-components usage is:
shadowcss fragment export (used by AssignedTopBar.tsx which still uses styled-components)Content components:
Utils:
BookBanner Migration Details
The BookBanner component was the most complex migration in this PR:
What Was NOT Migrated
The following files were intentionally left for a future PR:
styleWhen*functions used by many componentsThese utility files should be migrated once more consuming components have been converted to plain CSS.
Changes Made
classNamesfor className compositionshadowexport for AssignedTopBarTesting Checklist
Stack
This PR builds on top of:
Related Jira Ticket
CORE-2283: Phase 7.2: Migrate Page & Toolbar Components
🤖 Generated with Claude Code