Header footer refactor - #6568
Conversation
Convert header components to Emotion CSS-in-JS (header_bar, header_logo, menu_desktop, menu_desktop_rich_menu, menu_mobile, menu_mobile_rich_menu, menu_rich_link_group, menu_rich_section_group) using css and useTheme. Add header sizing and icons tokens, rename spacing.huge->xxxl and introduce DC_GRAY_LIGHTER in theme, plus elevation header shadow entries and updated Theme types. Small layout adjustment: DataSourceDetails gap updated to spacing.xxxl. Keeps existing behavior and analytics hooks while making header responsive and theme-driven.
Introduce a new theme.typography.menu scale (xs..xl) and update Theme types. Replace usages of theme.typography.text.* with the new theme.typography.menu.* in several header/menu components, tweak spacing (gaps and margins) for mobile and rich menu layouts, remove a stray test string from a heading, and switch a wrapper div to a fragment. These changes centralize menu-specific typography and refine menu spacing for consistent visual hierarchy.
Replace various theme.typography.text.* usages with theme.typography.menu.* across header bar components to standardize menu typography (header_logo, menu_desktop, menu_desktop_rich_menu, menu_mobile, menu_mobile_rich_menu, menu_rich_link_group, menu_rich_section_group). Adjust theme.menu scale by swapping XS/SM size values so menu.xs is smaller and menu.sm holds the larger size.
Refactor footer to use Emotion theming and responsive styles (footer.tsx, footer_app.tsx). Add ThemeProvider and theme import, centralize footer links, and update layout/typography for accessibility and responsiveness. Reorder and update header menu items/labels in server/config/base/header.json (swap Map Explorer/Data Download, Tutorials/API, Data Sources/FAQ). Tweak header bar components' styles: safer max-height handling, spacing/gap adjustments, and consistent menu typography (menu_desktop*, menu_mobile_rich_menu*, menu_rich_*). Update theme menu sizes/line-heights in theme.ts to match new styles.
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request migrates the application's header and footer components to use Emotion for CSS-in-JS styling, ensuring better maintainability and consistency with the project's design system. It also introduces new theme tokens for typography and layout, fixes a critical rendering issue in the footer, and updates the navigation configuration. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the header and footer components to use Emotion CSS-in-JS styling and theme values, removing reliance on external CSS classes. It also updates the theme definitions with new header, icon, typography, and elevation variants, and reorders several header navigation items. The review feedback highlights missing semicolons in CSS-in-JS styles within menu_rich_link_group.tsx and an invalid CSS width value when the mobile drawer is open in menu_mobile.tsx.
Set explicit widths for the mobile menu when open (480px default, 320px under 580px, 280px under 400px) and keep transition/elevation. Also add missing semicolons after gap in MenuRichLinkGroup to satisfy CSS formatting/linting and avoid potential style parsing issues.
Introduce an 'xl' header size in theme and Theme types, and update HeaderBar to use theme.header.xl when hideHeaderSearchBar is true so header height and grid rows adapt across breakpoints. Also remove an unused ICONS constant from theme.ts.
1 participant
This PR refactors the Header, its menus and responsive states, and the footer, to use Emotion (CSS-in-JS,) and the Theme, It should look and work, exactly the same as before, minus some pixel-specific sizes and spacings due to normalization.
Changes