feat(dashboard): V2 redesign with unified brand identity & premium UX#179
Merged
DevanshuNEU merged 8 commits intoJan 8, 2026
Merged
Conversation
- RepoList: bento grid layout with featured card (sorted by function count) - RepoList: mouse-following glow effect on hover - RepoList: animated progress bars showing % of total - RepoList: distinct styling for pending vs indexed repos - DashboardStats: animated number counters on load - DashboardStats: gradient glows and premium card styling - RepoOverview: bento stats grid with icons and gradients - AddRepoForm: framer-motion modal animations - DashboardHome: page transitions with AnimatePresence Design inspired by Linear, Vercel, and 2026 dashboard trends.
- Removed ALL gradient colors from stats and repo cards - Single accent: blue-500 (#2563EB) everywhere - Clean, minimal design with proper contrast - Featured card has solid blue accent line - Consistent hover states with blue glow - No more rainbow effect
- Removed bento/featured card logic - All repos same size in 3-column grid - Sorted: indexed first, then by function count - Cleaner code, 143 lines vs 250 - Scales better for 10+ repos
- StyleInsights: green/purple stats → blue-500 - StyleInsights: green percentage badges → blue variant - DependencyGraph: mixed white/green/blue stats → all blue-500 - ImpactAnalyzer: yellow/green stats → blue-500 - Preserved semantic colors for risk indicators (red/yellow/green) Brand rule: ALL stat numbers use blue-500, semantic colors only for risk
- Removed childish emoji icons from dashboard tabs - Added proper Lucide React icons: - Overview: LayoutDashboard - Search: Search - Dependencies: GitFork - Code Style: Code2 - Impact: Zap - Icons now match brand blue when active - Consistent 16px sizing (w-4 h-4) Professional icon system like Linear/Vercel
AddRepoForm.tsx: - 📦 → Package icon (modal header) - 🚀 → Plus icon (submit button) - ✕ → X icon (close button) SearchPanel.tsx: - ⚡ → Zap icon (cached badge) - 🔍 → Search icon (empty state) DependencyGraph.tsx: - 💡 → Lightbulb icon (hint text) Zero emojis remaining in main UI components. Professional icon system complete.
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Dashboard V2 Redesign
A complete overhaul of the dashboard UI, establishing a consistent brand identity and bringing the interface up to modern standards inspired by Linear, Vercel, and Raycast.
What's Changed
Brand Identity System
We didn't have a cohesive color system before—stats were white, blue, green, purple depending on the component. Now everything follows a single rule: Electric Blue (#2563EB) is our brand color.
text-blue-500Repository Grid
Moved from a complex bento layout to a clean, equal-height card grid:
Professional Icon System
Replaced all emoji icons with Lucide React - the same icon library used by Linear, Vercel, and shadcn/ui.
Stats Dashboard
Screenshots
The PR brings visual consistency across all tabs - Overview, Search, Dependencies, Code Style, and Impact now all speak the same design language.
Technical Notes
Commits
3ae2a30feat(dashboard): v2 redesign with bento grid, animations, premium UXfc52660fix(dashboard): unified blue-violet brand colors28cf75bfix(dashboard): single brand color - electric blue only027f0adfeat(dashboard): equal grid layout - clean and scalablef6e69c5fix(brand): unified blue color system across all dashboard tabse5c6860fix(ui): replace tab emojis with Lucide iconsefa716afix(ui): replace ALL remaining emojis with Lucide iconsThis sets up a solid foundation for the dashboard. Future iterations can add loading skeletons, enhanced empty states, and more tab transitions , but the core brand system is now locked in.