[KLC-2083] feat(ui): redesign with klever.org design system#9
Merged
Conversation
- Add official Klever logos (dark/white variants for theme switching)
- Implement glassmorphism styling matching klever.org aesthetic
- Pure black background, semi-transparent cards, backdrop blur
- Light mode glass panel overrides
- Redesign header with centered navigation (Assets, Bridge, About)
- Add hamburger menu for mobile navigation
- Create footer component with Klever ecosystem links
- Make sankey chart responsive with simplified mobile layout
- Update chain cards to use brand colors when selected
- Fix Tailwind v4 dark mode with @custom-variant configuration
- Remove unused confetti-celebration component
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
klv-bridge-assets | f35d2d4 | Commit Preview URL Branch Preview URL |
Jan 13 2026, 12:53 PM |
There was a problem hiding this comment.
Pull request overview
This PR redesigns the Bridge Assets transparency dashboard to match klever.org's visual design system. It introduces glassmorphism effects, official branding with logo assets, improved responsive layouts, and enhanced mobile navigation with a hamburger menu.
Changes:
- Replaced old styling with glassmorphism effects matching klever.org aesthetic (pure black backgrounds, semi-transparent cards, backdrop blur)
- Added header with centered navigation, mobile hamburger menu, and official Klever logos (dark/white variants)
- Created comprehensive footer component with ecosystem links and branding
- Implemented responsive mobile layouts for sankey chart with simplified list view
- Removed unused confetti-celebration component
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 23 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/confetti-celebration.tsx | Removed unused confetti celebration component |
| src/components/header.tsx | Redesigned with mobile menu, theme-aware logos, and responsive navigation |
| src/components/footer.tsx | New footer with ecosystem links and Klever branding |
| src/components/dashboard/tvl-hero.tsx | Updated to use new glass-panel styling |
| src/components/dashboard/chain-flow-sankey.tsx | Added mobile-responsive layout with simplified list view |
| src/app/page.tsx | Added footer and updated layout structure |
| src/app/globals.css | Updated with glassmorphism styles, dark mode config, and Klever design system |
| public/assets/klever-logo-white.png | New white logo asset for dark mode |
| public/assets/klever-logo-dark.png | New dark logo asset for light mode |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Beroni
previously approved these changes
Jan 13, 2026
Beroni
approved these changes
Jan 13, 2026
nickgs1337
reviewed
Jan 13, 2026
nickgs1337
approved these changes
Jan 13, 2026
nickgs1337
deleted the
KLC-2083-redesign-ui-with-klever-org-design-system-glass-effect-branding-and-responsive-layout
branch
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.
Description
Redesign the Bridge Assets transparency dashboard to match klever.org's visual design system, including glassmorphism effects, official branding, responsive layout, and improved mobile experience.
Type of Change
Related Issues
Fixes KLC-2083
Changes Made
Testing
pnpm devChecklist
pnpm lintand fixed any issuespnpm type-checkand fixed any errorspnpm buildsuccessfullyAdditional Notes