fix: update admin dashboard styles
Fix white text color on cream background in Project Management section. Remove hover scaling effect from login button.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user