matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update components with CSS animations

Browse Source
This commit is contained in:
matthieu
2025-10-23 16:19:15 +02:00
parent 91c237824a
commit a76f8176f6
1 changed files with 146 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/LoginForm.tsx
View File

@@ -80,13 +80,13 @@ import { useState, useEffect } from 'react';
</div> </div>
{/* Login Form */} {/* Login Form */}
<div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md"> <div className="relative z-10 bg-gray-900/80 p-8 rounded-lg shadow-xl backdrop-blur-sm w-full max-w-md glass-effect animate-scale-in">
<h2 className="text-3xl font-bold text-orange-500 mb-6 text-center"> <h2 className="text-3xl font-bold text-orange-500 mb-6 text-center animate-bounce-in">
Deckerr Deckerr
</h2> </h2>
{error && ( {error && (
<div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500"> <div className="mb-4 p-3 bg-red-500/10 border border-red-500 rounded text-red-500 animate-fade-in">
{error} {error}
</div> </div>
)} )}
@@ -102,7 +102,7 @@ import { useState, useEffect } from 'react';
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white" className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
placeholder="Enter your email" placeholder="Enter your email"
required required
/> />
@@ -118,7 +118,7 @@ import { useState, useEffect } from 'react';
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white" className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white transition-smooth"
placeholder="Enter your password" placeholder="Enter your password"
required required
/> />
@@ -126,7 +126,7 @@ import { useState, useEffect } from 'react';
</div> </div>
<button <button
type="submit" type="submit"
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200" className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg btn-ripple glow-on-hover transition-smooth"
> >
<LogIn size={20} /> <LogIn size={20} />
{isSignUp ? 'Sign Up' : 'Sign In'} {isSignUp ? 'Sign Up' : 'Sign In'}
@@ -136,7 +136,7 @@ import { useState, useEffect } from 'react';
<div className="mt-4 text-center"> <div className="mt-4 text-center">
<button <button
onClick={() => setIsSignUp(!isSignUp)} onClick={() => setIsSignUp(!isSignUp)}
className="text-blue-400 hover:text-blue-300" className="text-blue-400 hover:text-blue-300 transition-smooth"
> >
{isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'} {isSignUp ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}
</button> </button>