denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve styling issues in admin dashboard and login

Browse Source 
Fix login page background color to cream/stone (hide blobs). Remove hover scaling from dashboard stats cards. darkening Admin Panel and Portfolio text.
This commit is contained in:
denshooter
2026-01-10 02:30:15 +01:00
parent 59eb32b45a
commit 7d84d35f09
2 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/manage/page.tsx
View File

@@ -267,9 +267,7 @@ const AdminPage = () => {
// Login form // Login form
if (authState.showLogin || !authState.isAuthenticated) { if (authState.showLogin || !authState.isAuthenticated) {
return ( return (
<div className="min-h-screen flex items-center justify-center relative overflow-hidden"> <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#fdfcf8] z-0">
{/* Animated Background */}
<div className="animated-bg"></div>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}

36
components/ModernAdminDashboard.tsx
View File

@@ -194,15 +194,15 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Link <Link
href="/" href="/"
className="flex items-center space-x-2 text-stone-600 hover:text-stone-900 transition-colors" className="flex items-center space-x-2 text-stone-900 hover:text-black transition-colors"
> >
<Home size={20} className="text-stone-500" /> <Home size={20} className="text-stone-600" />
<span className="font-medium text-stone-800">Portfolio</span> <span className="font-medium text-stone-900">Portfolio</span>
</Link> </Link>
<div className="h-6 w-px bg-stone-200" /> <div className="h-6 w-px bg-stone-300" />
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Shield size={20} className="text-stone-500" /> <Shield size={20} className="text-stone-600" />
<span className="text-stone-800 font-semibold">Admin Panel</span> <span className="text-stone-900 font-semibold">Admin Panel</span>
</div> </div>
</div> </div>
@@ -320,7 +320,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
{/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */} {/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */}
<div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6"> <div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6">
<div <div
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200" className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
onClick={() => setActiveTab('projects')} onClick={() => setActiveTab('projects')}
> >
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@@ -328,13 +328,13 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<p className="text-stone-500 text-xs md:text-sm font-medium">Projects</p> <p className="text-stone-500 text-xs md:text-sm font-medium">Projects</p>
<Database size={20} className="text-stone-400" /> <Database size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.totalProjects}</p> <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalProjects}</p>
<p className="text-green-600 text-xs font-medium">{stats.publishedProjects} published</p> <p className="text-green-600 text-xs font-medium">{stats.publishedProjects} published</p>
</div> </div>
</div> </div>
<div <div
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200" className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
onClick={() => setActiveTab('analytics')} onClick={() => setActiveTab('analytics')}
> >
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@@ -342,13 +342,13 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<p className="text-stone-500 text-xs md:text-sm font-medium">Page Views</p> <p className="text-stone-500 text-xs md:text-sm font-medium">Page Views</p>
<Activity size={20} className="text-stone-400" /> <Activity size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.totalViews.toLocaleString()}</p> <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalViews.toLocaleString()}</p>
<p className="text-blue-600 text-xs font-medium">{stats.totalUsers} users</p> <p className="text-blue-600 text-xs font-medium">{stats.totalUsers} users</p>
</div> </div>
</div> </div>
<div <div
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200" className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
onClick={() => setActiveTab('emails')} onClick={() => setActiveTab('emails')}
> >
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@@ -356,13 +356,13 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<p className="text-stone-500 text-xs md:text-sm font-medium">Messages</p> <p className="text-stone-500 text-xs md:text-sm font-medium">Messages</p>
<Mail size={20} className="text-stone-400" /> <Mail size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-800">{emails.length}</p> <p className="text-xl md:text-2xl font-bold text-stone-900">{emails.length}</p>
<p className="text-red-500 text-xs font-medium">{stats.unreadEmails} unread</p> <p className="text-red-500 text-xs font-medium">{stats.unreadEmails} unread</p>
</div> </div>
</div> </div>
<div <div
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200" className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
onClick={() => setActiveTab('analytics')} onClick={() => setActiveTab('analytics')}
> >
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@@ -370,13 +370,13 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<p className="text-stone-500 text-xs md:text-sm font-medium">Performance</p> <p className="text-stone-500 text-xs md:text-sm font-medium">Performance</p>
<TrendingUp size={20} className="text-stone-400" /> <TrendingUp size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.avgPerformance}</p> <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.avgPerformance}</p>
<p className="text-orange-500 text-xs font-medium">Lighthouse Score</p> <p className="text-orange-500 text-xs font-medium">Lighthouse Score</p>
</div> </div>
</div> </div>
<div <div
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200" className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
onClick={() => setActiveTab('analytics')} onClick={() => setActiveTab('analytics')}
> >
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@@ -384,13 +384,13 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<p className="text-stone-500 text-xs md:text-sm font-medium">Bounce Rate</p> <p className="text-stone-500 text-xs md:text-sm font-medium">Bounce Rate</p>
<Users size={20} className="text-stone-400" /> <Users size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.bounceRate}%</p> <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.bounceRate}%</p>
<p className="text-red-500 text-xs font-medium">Exit rate</p> <p className="text-red-500 text-xs font-medium">Exit rate</p>
</div> </div>
</div> </div>
<div <div
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200" className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
onClick={() => setActiveTab('settings')} onClick={() => setActiveTab('settings')}
> >
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@@ -398,7 +398,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
<p className="text-stone-500 text-xs md:text-sm font-medium">System</p> <p className="text-stone-500 text-xs md:text-sm font-medium">System</p>
<Shield size={20} className="text-stone-400" /> <Shield size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-800">Online</p> <p className="text-xl md:text-2xl font-bold text-stone-900">Online</p>
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<p className="text-green-600 text-xs font-medium">Operational</p> <p className="text-green-600 text-xs font-medium">Operational</p>