Make the UI #1
Make the UI #1
Conversation
Implemented a complete UI overhaul with modern gaming theme: - ✨ Premium neon color scheme (cyan, purple, pink accents) - 🎨 Glassmorphism effects with backdrop blur - 💫 Smooth animations and transitions - 🌟 Animated gradient borders and glow effects - 🎯 Enhanced sidebar with modern branding - 🎮 Neon-styled metric cards with hover effects - 🚀 Modern button styles with shimmer animations - 📊 Premium tab styling with gradient backgrounds - 🔥 Custom scrollbar with neon gradients - ⚡ Improved typography using Inter & Outfit fonts - 🎪 Enhanced player cards with gradient text - 🌈 Status cards with neon border glows - 💎 Timeline items with modern styling - 🎭 Empty states with floating animations - 🖼️ Responsive design improvements All components now feature: - Backdrop filters for glass effect - Neon glow shadows - Smooth cubic-bezier transitions - Gradient text effects - Modern spacing and layouts
Completely revamped all page layouts with modern design patterns: **New Layout Helper Functions:** - create_page_header() - Premium animated page headers with neon glow - create_section_header() - Modern section headers with gradients - create_section_divider() - Decorative dividers (gradient, dots, simple) - create_content_container() - Glassmorphic content containers - create_info_card() - Enhanced info cards with icon support **Page-by-Page Improvements:** 📊 Dashboard: - Premium animated page header with floating icon - Section headers for Overview, Recent Activity - Gradient dividers between sections - Enhanced spacing with gap="large" - Modern chart section organization 📊 Player Analysis: - Animated page header with subtitle - Player selection with modern section header - Improved tab organization - Better visual hierarchy 👥 Team Analysis: - Premium page header with icon - Section headers for each tab - Info cards explaining features - Enhanced team dynamics section 📈 Match History: - Modern page header - Filter section with clear hierarchy - Improved visual organization 🎮 Data Input: - Premium header explaining AI extraction - Section headers for upload areas - Better guidance for users 🔧 Advanced Analytics: - Modern page header - Section headers in each tab - Improved analytics presentation 📋 Leaderboards: - Premium header with competitive theme - Section header for rankings - Better visual hierarchy 🎉 Fun Features: - Animated page header - Section headers for each feature - Enhanced gamification elements **Visual Improvements:** - Consistent spacing throughout (3rem margins) - Gradient text effects on all headers - Floating icon animations - Glassmorphic info cards - Neon glow effects on decorative elements - Better use of white space - Improved readability and scannability All pages now follow a consistent, premium design language!
- Reformatted app.py with Black - Reformatted utils/ui_components.py with Black - Fixed all code style issues for CI/CD pipeline
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| {title} | ||
| </h2> | ||
| </div> | ||
| {f'<p style="color: #6b7791; font-size: 1rem; margin: 0.5rem 0 0 0; padding-left: {3.5 if icon else 0}rem;">{subtitle}</p>' if subtitle else ''} |
There was a problem hiding this comment.
Bug
The subtitle padding calculation uses {3.5 if icon else 0}rem which will output the literal string "3.5rem" when icon is truthy, but "0rem" when icon is falsy. However, when icon is an empty string (the default), it's falsy, so the padding will be "0rem". But when icon is provided as a non-empty string (like "📊"), the condition evaluates to True and outputs "3.5rem". The issue is that this creates inconsistent padding - when there's no icon, the subtitle should align with the title (0 padding), but the current logic is correct. However, the real bug is that the padding value should account for both the icon size (2rem) and the gap (1rem), which would be 3rem total, not 3.5rem. This creates a visual misalignment where the subtitle doesn't properly align under the title text when an icon is present.
Note
Overhauls the app’s UI with a neon/glassmorphism theme and refactors all pages to use new reusable UI components for headers, cards, dividers, and containers.
Inter/Outfitfonts; overhaul buttons, tabs, cards, sidebar, tables, spinners, inputs, and scrollbars.utils/ui_components.py):create_page_header,create_section_header,create_section_divider,create_content_container,create_info_card,create_metric_card,create_status_card,create_player_card,create_timeline_item,create_progress_bar,create_achievement_badge,create_tooltip, grids/helpers.app.py):🏠 Dashboard,📊 Player Analysis,👥 Team Analysis,📈 Match History,🎮 Data Input,🔧 Advanced Analytics,📋 Leaderboards,🎉 Fun Features.gap="large"), and enhanced labels/subtitles.Written by Cursor Bugbot for commit c66a187. This will update automatically on new commits. Configure here.