Skip to content

Commit 2bbe4a7

Browse files
Boshenclaude
andcommitted
Enhance visual design with modern UI improvements
- Add glass morphism effects with backdrop blur to sidebar, appbar, and cards - Implement animated gradients on logos, avatars, and interactive elements - Add gradient backgrounds with decorative blur elements to layout - Enhance hover states with scale transforms and shadow transitions - Add gradient text effects to titles and headings - Implement active navigation indicator with gradient accent bar - Add pulse animation to notification badge - Improve visual depth with semi-transparent borders and layering - Add new CSS animations: gradient-shift, float, and pulse-glow 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 26debe1 commit 2bbe4a7

File tree

6 files changed

+91
-29
lines changed

6 files changed

+91
-29
lines changed

apps/dashboard/src/components/Layout.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@ import { Sidebar } from "./layout/Sidebar";
44

55
function Layout() {
66
return (
7-
<div className="min-h-screen bg-slate-50 dark:bg-slate-950">
7+
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 relative overflow-hidden">
8+
{/* Background decorative elements */}
9+
<div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/5 dark:bg-blue-500/10 rounded-full blur-3xl"></div>
10+
<div className="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/5 dark:bg-purple-500/10 rounded-full blur-3xl"></div>
11+
812
<Sidebar />
913

1014
{/* Main Content Area */}
11-
<div className="lg:pl-64 transition-all duration-300">
15+
<div className="lg:pl-64 transition-all duration-300 relative z-10">
1216
<div className="flex flex-col h-screen">
1317
<AppBar />
1418

apps/dashboard/src/components/layout/AppBar.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ interface AppBarProps {
88

99
export function AppBar({ title, subtitle }: AppBarProps) {
1010
return (
11-
<header className="h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 px-6">
11+
<header className="h-16 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-200/50 dark:border-slate-700/50 px-6 shadow-sm">
1212
<div className="h-full flex items-center justify-between">
1313
{/* Left side - Page title */}
1414
<div>
15-
{title && <h2 className="text-xl font-semibold text-slate-900 dark:text-white">{title}</h2>}
16-
{subtitle && <p className="text-sm text-slate-500 dark:text-slate-300">{subtitle}</p>}
15+
{title && <h2 className="text-xl font-semibold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">{title}</h2>}
16+
{subtitle && <p className="text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>}
1717
</div>
1818

1919
{/* Right side - Actions */}
@@ -28,7 +28,7 @@ export function AppBar({ title, subtitle }: AppBarProps) {
2828
<input
2929
type="text"
3030
placeholder="Search..."
31-
className="pl-10 pr-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
31+
className="pl-10 pr-4 py-2 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200/50 dark:border-slate-700/50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all hover:bg-slate-100 dark:hover:bg-slate-800"
3232
/>
3333
</div>
3434
</div>
@@ -37,22 +37,22 @@ export function AppBar({ title, subtitle }: AppBarProps) {
3737
<Button
3838
variant="ghost"
3939
size="sm"
40-
className="relative"
40+
className="relative hover:scale-110 transition-transform"
4141
icon={
4242
<>
4343
<Bell size={18} />
44-
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
44+
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full animate-pulse shadow-lg shadow-red-500/50" />
4545
</>
4646
}
4747
/>
4848

4949
{/* User Menu */}
50-
<div className="flex items-center gap-3 pl-3 border-l border-slate-200 dark:border-slate-700">
50+
<div className="flex items-center gap-3 pl-3 border-l border-slate-200/50 dark:border-slate-700/50">
5151
<div className="hidden sm:block text-right">
5252
<p className="text-sm font-medium text-slate-900 dark:text-white">Admin User</p>
53-
<p className="text-xs text-slate-500 dark:text-slate-300">[email protected]</p>
53+
<p className="text-xs text-slate-500 dark:text-slate-400">[email protected]</p>
5454
</div>
55-
<button className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
55+
<button className="w-10 h-10 bg-gradient-to-br from-blue-500 via-purple-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all hover:scale-110 animate-gradient">
5656
<User size={18} className="text-white" />
5757
</button>
5858
</div>

apps/dashboard/src/components/layout/Sidebar.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -71,28 +71,28 @@ export function Sidebar() {
7171
{/* Sidebar */}
7272
<aside
7373
className={`
74-
fixed top-0 left-0 h-full bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-700
74+
fixed top-0 left-0 h-full bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-r border-slate-200/50 dark:border-slate-700/50 shadow-xl
7575
transition-all duration-300 z-40
7676
${collapsed ? "w-20" : "w-64"}
7777
${mobileOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
7878
`}
7979
>
8080
{/* Logo Header */}
81-
<div className="h-16 flex items-center justify-between px-4 border-b border-slate-200 dark:border-slate-700">
81+
<div className="h-16 flex items-center justify-between px-4 border-b border-slate-200/50 dark:border-slate-700/50 bg-gradient-to-r from-slate-50/50 to-transparent dark:from-slate-800/50">
8282
<div className="flex items-center gap-3">
83-
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
83+
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 via-purple-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg animate-gradient">
8484
<BarChart3 size={24} className="text-white" />
8585
</div>
8686
{!collapsed && (
8787
<div>
88-
<h1 className="font-bold text-slate-900 dark:text-white">Vibe</h1>
89-
<p className="text-xs text-slate-500 dark:text-slate-300">Dashboard</p>
88+
<h1 className="font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">Vibe</h1>
89+
<p className="text-xs text-slate-500 dark:text-slate-400">Dashboard</p>
9090
</div>
9191
)}
9292
</div>
9393
<button
9494
onClick={() => setCollapsed(!collapsed)}
95-
className="hidden lg:flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
95+
className="hidden lg:flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-all hover:scale-110"
9696
>
9797
<ChevronLeft
9898
size={18}
@@ -110,16 +110,19 @@ export function Sidebar() {
110110
to={item.path}
111111
onClick={() => setMobileOpen(false)}
112112
className={`
113-
flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200
113+
flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 relative overflow-hidden group
114114
${
115115
isActive(item.path)
116-
? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium"
117-
: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
116+
? "bg-gradient-to-r from-blue-500/10 to-purple-500/10 dark:from-blue-500/20 dark:to-purple-500/20 text-blue-600 dark:text-blue-400 font-medium shadow-sm"
117+
: "text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 hover:scale-105"
118118
}
119119
${collapsed ? "justify-center" : ""}
120120
`}
121121
title={collapsed ? item.label : undefined}
122122
>
123+
{isActive(item.path) && (
124+
<span className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-purple-600 rounded-r-full"></span>
125+
)}
123126
<span className="flex-shrink-0">{item.icon}</span>
124127
{!collapsed && (
125128
<>

apps/dashboard/src/index.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,23 @@
1717
/* Chart tooltip variables */
1818
--tooltip-bg: white;
1919
--tooltip-border: #e2e8f0;
20+
21+
/* Glass morphism variables */
22+
--glass-bg: rgba(255, 255, 255, 0.7);
23+
--glass-border: rgba(255, 255, 255, 0.18);
24+
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
2025
}
2126

2227
/* Dark mode variables */
2328
html.dark {
2429
--tooltip-bg: #1e293b;
2530
--tooltip-border: #475569;
2631
--tooltip-text: #f1f5f9;
32+
33+
/* Dark mode glass morphism */
34+
--glass-bg: rgba(30, 41, 59, 0.7);
35+
--glass-border: rgba(255, 255, 255, 0.1);
36+
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
2737
}
2838

2939
/* Light mode tooltip text */
@@ -135,3 +145,46 @@ html.dark ::-webkit-scrollbar-thumb:hover {
135145
transform: translateY(0);
136146
}
137147
}
148+
149+
/* Gradient animations */
150+
@keyframes gradient-shift {
151+
0%, 100% {
152+
background-position: 0% 50%;
153+
}
154+
50% {
155+
background-position: 100% 50%;
156+
}
157+
}
158+
159+
.animate-gradient {
160+
background-size: 200% 200%;
161+
animation: gradient-shift 3s ease infinite;
162+
}
163+
164+
/* Floating animation */
165+
@keyframes float {
166+
0%, 100% {
167+
transform: translateY(0px);
168+
}
169+
50% {
170+
transform: translateY(-10px);
171+
}
172+
}
173+
174+
.animate-float {
175+
animation: float 3s ease-in-out infinite;
176+
}
177+
178+
/* Pulse glow effect */
179+
@keyframes pulse-glow {
180+
0%, 100% {
181+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
182+
}
183+
50% {
184+
box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
185+
}
186+
}
187+
188+
.animate-pulse-glow {
189+
animation: pulse-glow 2s ease-in-out infinite;
190+
}

apps/dashboard/src/pages/HomePage.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,11 @@ function HomePage() {
6464

6565
return (
6666
<PageContainer>
67-
<div className="text-center mb-12">
67+
<div className="text-center mb-16">
6868
<div className="flex justify-center mb-6">
69-
<div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl">
70-
<BarChart3 size={40} className="text-white" />
69+
<div className="w-24 h-24 bg-gradient-to-br from-blue-500 via-purple-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl animate-gradient relative overflow-hidden group">
70+
<div className="absolute inset-0 bg-gradient-to-br from-blue-400/20 to-purple-400/20 blur-xl group-hover:blur-2xl transition-all"></div>
71+
<BarChart3 size={48} className="text-white relative z-10" />
7172
</div>
7273
</div>
7374
<PageHeader
@@ -81,10 +82,11 @@ function HomePage() {
8182
const colors = getColorClasses(feature.color);
8283
return (
8384
<Link key={feature.link} to={feature.link}>
84-
<Card className={`h-full transition-all hover:shadow-lg ${colors.hover} cursor-pointer group`}>
85-
<div className="p-6">
85+
<Card className={`h-full transition-all hover:shadow-2xl hover:scale-[1.02] ${colors.hover} cursor-pointer group relative overflow-hidden`}>
86+
<div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-slate-100/50 dark:to-slate-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
87+
<div className="p-6 relative z-10">
8688
<div className="flex items-start gap-4">
87-
<div className={`p-3 rounded-lg ${colors.bg}`}>
89+
<div className={`p-3 rounded-xl ${colors.bg} shadow-sm group-hover:shadow-md transition-all group-hover:scale-110`}>
8890
<div className={colors.icon}>{feature.icon}</div>
8991
</div>
9092
<div className="flex-1">

packages/ui/src/Card.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ interface CardProps {
1212
export function Card({ children, className = "", title, subtitle, headerAction, noPadding = false }: CardProps) {
1313
return (
1414
<div
15-
className={`bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 ${className}`}
15+
className={`bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm ${className}`}
1616
>
1717
{(title || subtitle || headerAction) && (
18-
<div className="px-6 py-4 border-b border-slate-200 dark:border-slate-700">
18+
<div className="px-6 py-4 border-b border-slate-200/50 dark:border-slate-700/50 bg-gradient-to-r from-slate-50/50 to-transparent dark:from-slate-800/50">
1919
<div className="flex items-center justify-between">
2020
<div>
21-
{title && <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h3>}
21+
{title && <h3 className="text-lg font-semibold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">{title}</h3>}
2222
{subtitle && <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>}
2323
</div>
2424
{headerAction && <div className="ml-4">{headerAction}</div>}

0 commit comments

Comments
 (0)