Skip to content

refactor(web/footer): redesign with Hero UI to match HeaderBar#8

Merged
dingyi merged 1 commit into
mainfrom
feature/footer-heroui-redesign
Apr 27, 2026
Merged

refactor(web/footer): redesign with Hero UI to match HeaderBar#8
dingyi merged 1 commit into
mainfrom
feature/footer-heroui-redesign

Conversation

@dingyi

@dingyi dingyi commented Apr 27, 2026

Copy link
Copy Markdown
Owner

Summary

Rebuilds web/src/components/layout/Footer.jsx on top of Hero UI so it visually pairs with HeaderBar's Navbar.

  • Replace bare <a> tags with @heroui/react's Link (isExternal, size='sm'); strip bold weight and underline (both rest and hover state) from every footer link
  • Extract demo-site columns into a data-driven sections array + reusable FooterLinkSection / FooterMeta subcomponents to flatten the JSX
  • Mirror the <Navbar> chrome: border-t border-border + bg-background + same px-2 md:px-4 horizontal padding as Navbar.Header, with no max-w-* constraint, so the footer's left/right edges line up pixel-perfectly with the header across the viewport
  • Drop the decorative yellow blob — the flat hairline matches the rest of the heroui-pro layout
  • Preserve existing behaviors: custom HTML footer, demo-site 4-column link grid, copyright row; no i18n key changes (existing translations under web/src/i18n/locales/*.json continue to work)

Test plan

  • bunx eslint src/components/layout/Footer.jsx (clean)
  • bunx vite build (succeeds; only unrelated @heroui-pro Rollup /*#__PURE__*/ warnings)
  • Visual check on a non-console route with demo_site_enabled=true — confirms 4-column link grid renders and aligns with header edges
  • Visual check with custom footer_html configured in System Settings — confirms compact single-row layout
  • Light + dark theme spot-check (uses --app-border / --background tokens)

This PR was generated automatically by Cursor

Made with Cursor

- Replace bare <a> tags with @heroui/react Link (isExternal, sm size)
- Strip bold weight and underline (rest + hover) from all footer links
- Pull demo-site columns into a data-driven sections array + reusable
  FooterLinkSection / FooterMeta subcomponents to flatten the JSX
- Mirror HeaderBar's chrome: border-t border-border + bg-background
  + same px-2/md:px-4 horizontal padding as Navbar.Header so the
  footer's left/right edges line up with the header
- Drop the decorative yellow blob — the new flat hairline matches
  the rest of the heroui-pro layout
- Preserve existing behaviors: custom HTML footer, demo-site link
  grid, copyright row; no i18n key changes

Made-with: Cursor
@dingyi
dingyi merged commit 9b3855b into main Apr 27, 2026
1 check passed
@dingyi
dingyi deleted the feature/footer-heroui-redesign branch April 27, 2026 14:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant