Ken Johnson
be5d229e4e
Modernize UI with rounded corners and contemporary design
Apply modern design system principles to replace dated 2013-era styling:
Buttons:
- Rounded corners (0.75rem border-radius)
- Gradient backgrounds with depth
- Smooth hover animations (translateY + shadow)
- Soft box shadows (0 1px 3px → 0 4px 12px on hover)
Cards & Widgets:
- Increased border-radius (1rem)
- Softer shadows (0 2px 8px rgba)
- Hover effects with elevated shadows
- Clean header separation without borders
Forms:
- Rounded inputs (0.75rem)
- Thicker borders (2px) for clarity
- Focus rings with brand color
- Better padding for touch targets
Header:
- Backdrop blur effect (frosted glass)
- Semi-transparent background (rgba 0.95)
- Removed hard borders for cleaner look
- Larger, softer shadows
Tables & Dropdowns:
- Rounded tables with overflow hidden
- Subtle row hover effects
- Modern dropdown styling with shadows
- Smooth transitions on all interactions
This addresses the feedback that buttons were "blocky/chunky and still
resemble websites from 2013" by implementing 2024 design trends.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>