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

fix: update admin dashboard styles

Browse Source 
Fix white text color on cream background in Project Management section. Remove hover scaling effect from login button.
This commit is contained in:
denshooter
2026-01-10 02:23:14 +01:00
parent 632302fb54
commit 59eb32b45a
2 changed files with 146 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/manage/page.tsx
View File

@@ -231,10 +231,10 @@ const AdminPage = () => {
// Loading state
if (authState.isLoading) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
<div className="text-center">
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-500" />
<p className="text-white">Loading...</p>
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-stone-600" />
<p className="text-stone-500">Loading...</p>
</div>
</div>
);
@@ -243,17 +243,19 @@ const AdminPage = () => {
// Lockout state
if (authState.isLocked) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
<div className="text-center">
<Lock className="w-16 h-16 mx-auto mb-4 text-red-500" />
<h2 className="text-2xl font-bold text-white mb-2">Account Locked</h2>
<p className="text-white/60">Too many failed attempts. Please try again in 15 minutes.</p>
<div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mx-auto mb-6">
<Lock className="w-8 h-8 text-red-500" />
</div>
<h2 className="text-2xl font-bold text-stone-900 mb-2">Account Locked</h2>
<p className="text-stone-500">Too many failed attempts. Please try again in 15 minutes.</p>
<button
onClick={() => {
localStorage.removeItem('admin_lockout');
window.location.reload();
}}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
className="mt-4 px-6 py-2 bg-stone-900 text-stone-50 rounded-xl hover:bg-stone-800 transition-colors"
>
Try Again
</button>
@@ -265,22 +267,25 @@ const AdminPage = () => {
// Login form
if (authState.showLogin || !authState.isAuthenticated) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
{/* Animated Background */}
<div className="animated-bg"></div>
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
className="w-full max-w-md p-8"
className="w-full max-w-md p-6"
>
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
<div className="bg-white/80 backdrop-blur-xl rounded-3xl p-8 border border-stone-200 shadow-2xl relative z-10">
<div className="text-center mb-8">
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
<Lock className="w-8 h-8 text-white" />
<div className="w-16 h-16 bg-gradient-to-br from-stone-100 to-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-stone-100">
<Lock className="w-6 h-6 text-stone-600" />
</div>
<h1 className="text-2xl font-bold text-white mb-2">Admin Access</h1>
<p className="text-white/60">Enter your password to continue</p>
<h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1>
<p className="text-stone-500">Enter your password to continue</p>
</div>
<form onSubmit={handleLogin} className="space-y-6">
<form onSubmit={handleLogin} className="space-y-5">
<div>
<div className="relative">
<input
@@ -288,37 +293,41 @@ const AdminPage = () => {
value={authState.password}
onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
placeholder="Enter password"
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
className="w-full px-4 py-3.5 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all shadow-sm"
disabled={authState.isLoading}
/>
<button
type="button"
onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 hover:text-white"
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-stone-400 hover:text-stone-600 p-1"
>
{authState.showPassword ? '👁️' : '👁️‍🗨️'}
</button>
</div>
{authState.error && (
<p className="mt-2 text-red-400 text-sm">{authState.error}</p>
<motion.p
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
className="mt-2 text-red-500 text-sm font-medium flex items-center"
>
<span className="w-1.5 h-1.5 bg-red-500 rounded-full mr-2" />
{authState.error}
</motion.p>
)}
</div>
<button
type="submit"
disabled={authState.isLoading || !authState.password}
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 px-6 rounded-xl font-semibold text-lg hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg"
className="w-full bg-stone-900 text-stone-50 py-3.5 px-6 rounded-xl font-semibold text-lg hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center justify-center"
>
{authState.isLoading ? (
<div className="flex items-center justify-center space-x-3">
<div className="flex items-center justify-center space-x-2">
<Loader2 className="w-5 h-5 animate-spin" />
<span>Authenticating...</span>
</div>
) : (
<div className="flex items-center justify-center space-x-2">
<Lock size={18} />
<span>Secure Login</span>
</div>
<span>Sign In</span>
)}
</button>
</form>