Skip to content

Commit 10d2be0

Browse files
rishyym0927rishyym0927
committed
UI FIX
1 parent ef73f1a commit 10d2be0

4 files changed

Lines changed: 357 additions & 204 deletions

File tree

‎StoreHUB-auth/docker-compose.yml‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,3 @@ services:
2323
timeout: 5s
2424
retries: 3
2525

26-
prometheus:
27-
image: prom/prometheus:latest
28-
volumes:
29-
- ./prometheus.yml:/etc/prometheus/prometheus.yml
30-
ports:
31-
- "9090:9090"
32-
33-
grafana:
34-
image: grafana/grafana:latest
35-
ports:
36-
- "3001:3000"
37-
environment:
38-
- GF_SECURITY_ADMIN_PASSWORD=admin
39-
volumes:
40-
- grafana-storage:/var/lib/grafana
41-
42-
volumes:
43-
grafana-storage:

‎StoreHUB-fronted/src/index.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
/* Custom dark theme */
6+
@layer base {
7+
body {
8+
@apply bg-gray-900 text-gray-100;
9+
}
10+
}
11+
512
/* Hide scrollbar for Webkit browsers */
613
::-webkit-scrollbar {
714
width: 0; /* Set width to 0 */
@@ -15,4 +22,34 @@
1522
::-webkit-scrollbar-track {
1623
display: none; /* Hide scrollbar track */
1724
}
25+
26+
/* Custom glassmorphism effect */
27+
.glass-card {
28+
background: rgba(17, 24, 39, 0.8);
29+
backdrop-filter: blur(16px);
30+
border: 1px solid rgba(255, 255, 255, 0.1);
31+
}
32+
33+
/* Custom gradient background */
34+
.gradient-bg {
35+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
36+
background-size: 400% 400%;
37+
animation: gradientShift 15s ease infinite;
38+
}
39+
40+
@keyframes gradientShift {
41+
0% { background-position: 0% 50%; }
42+
50% { background-position: 100% 50%; }
43+
100% { background-position: 0% 50%; }
44+
}
45+
46+
/* Custom input focus effect */
47+
.input-focus {
48+
@apply transition-all duration-300 ease-in-out;
49+
}
50+
51+
.input-focus:focus {
52+
transform: translateY(-2px);
53+
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
54+
}
1855

‎StoreHUB-fronted/src/pages/Login.jsx‎

Lines changed: 114 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -78,92 +78,124 @@ const LoginPage = () => {
7878
};
7979

8080
return (
81-
<div className="min-h-screen flex items-center justify-center bg-white">
82-
<div className="w-full max-w-md p-8">
83-
<div className="text-center mb-8">
84-
<h1 className="text-3xl font-bold text-black">Login</h1>
85-
<p className="text-black/60 mt-2">Welcome back! Please enter your details.</p>
86-
</div>
87-
88-
{error && (
89-
<div className="bg-red-500 text-white p-3 mb-4 rounded-lg">
90-
{error}
91-
</div>
92-
)}
93-
94-
<form onSubmit={handleSubmit} className="space-y-4">
95-
<div className="relative">
96-
<input
97-
type="email"
98-
name="email"
99-
placeholder="Email"
100-
value={formData.email}
101-
onChange={handleInputChange}
102-
className={`w-full p-3 pl-10 border ${
103-
formErrors.email ? 'border-red-500' : 'border-black/20'
104-
} rounded-lg focus:outline-none focus:border-black`}
105-
required
106-
/>
107-
<User
108-
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-black/50"
109-
size={20}
110-
/>
111-
{formErrors.email && (
112-
<p className="text-red-500 text-sm mt-1">{formErrors.email}</p>
113-
)}
114-
</div>
115-
116-
<div className="relative">
117-
<input
118-
type="password"
119-
name="password"
120-
placeholder="Password"
121-
value={formData.password}
122-
onChange={handleInputChange}
123-
className={`w-full p-3 pl-10 border ${
124-
formErrors.password ? 'border-red-500' : 'border-black/20'
125-
} rounded-lg focus:outline-none focus:border-black`}
126-
required
127-
/>
128-
<Lock
129-
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-black/50"
130-
size={20}
131-
/>
132-
{formErrors.password && (
133-
<p className="text-red-500 text-sm mt-1">{formErrors.password}</p>
134-
)}
135-
</div>
81+
<div className="min-h-screen gradient-bg flex items-center justify-center p-4">
82+
{/* Animated background elements */}
83+
<div className="absolute inset-0 overflow-hidden">
84+
<div className="absolute -top-40 -right-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
85+
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
86+
</div>
13687

137-
<div className="flex justify-end">
138-
<Link
139-
to="/forgot"
140-
className="text-black/60 hover:text-black transition-colors text-sm"
141-
>
142-
Forgot Password?
143-
</Link>
88+
<div className="w-full max-w-md relative z-10">
89+
{/* Glass card container */}
90+
<div className="glass-card rounded-2xl p-8 shadow-2xl">
91+
<div className="text-center mb-8">
92+
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl mb-4">
93+
<User className="text-white" size={24} />
94+
</div>
95+
<h1 className="text-3xl font-bold text-white mb-2">Welcome Back</h1>
96+
<p className="text-gray-400">Sign in to your account to continue</p>
14497
</div>
14598

146-
<button
147-
type="submit"
148-
className="w-full bg-black text-white p-3 rounded-lg hover:opacity-90 transition-opacity"
149-
disabled={isLoading}
150-
>
151-
{isLoading ? 'Logging in...' : 'Login'}
152-
</button>
153-
154-
<div className="text-center mt-4">
155-
<p className="text-black/60 text-sm">
156-
Don't have an account?{' '}
157-
<button
158-
type="button"
159-
onClick={() => navigate('/register')}
160-
className="text-black font-semibold hover:underline"
99+
{error && (
100+
<div className="bg-red-500/20 border border-red-500/30 text-red-400 p-4 mb-6 rounded-xl backdrop-blur-sm">
101+
<div className="flex items-center">
102+
<div className="w-2 h-2 bg-red-500 rounded-full mr-3"></div>
103+
{error}
104+
</div>
105+
</div>
106+
)}
107+
108+
<form onSubmit={handleSubmit} className="space-y-6">
109+
<div className="relative group">
110+
<input
111+
type="email"
112+
name="email"
113+
placeholder="Email address"
114+
value={formData.email}
115+
onChange={handleInputChange}
116+
className={`w-full p-4 pl-12 bg-gray-800/50 border ${
117+
formErrors.email ? 'border-red-500/50' : 'border-gray-700/50'
118+
} rounded-xl focus:outline-none focus:border-blue-500/50 focus:bg-gray-800/70 input-focus text-white placeholder-gray-400 transition-all duration-300`}
119+
required
120+
/>
121+
<User
122+
className={`absolute left-4 top-1/2 transform -translate-y-1/2 transition-colors duration-300 ${
123+
formErrors.email ? 'text-red-400' : 'text-gray-400 group-focus-within:text-blue-400'
124+
}`}
125+
size={20}
126+
/>
127+
{formErrors.email && (
128+
<p className="text-red-400 text-sm mt-2 flex items-center">
129+
<span className="w-1 h-1 bg-red-400 rounded-full mr-2"></span>
130+
{formErrors.email}
131+
</p>
132+
)}
133+
</div>
134+
135+
<div className="relative group">
136+
<input
137+
type="password"
138+
name="password"
139+
placeholder="Password"
140+
value={formData.password}
141+
onChange={handleInputChange}
142+
className={`w-full p-4 pl-12 bg-gray-800/50 border ${
143+
formErrors.password ? 'border-red-500/50' : 'border-gray-700/50'
144+
} rounded-xl focus:outline-none focus:border-blue-500/50 focus:bg-gray-800/70 input-focus text-white placeholder-gray-400 transition-all duration-300`}
145+
required
146+
/>
147+
<Lock
148+
className={`absolute left-4 top-1/2 transform -translate-y-1/2 transition-colors duration-300 ${
149+
formErrors.password ? 'text-red-400' : 'text-gray-400 group-focus-within:text-blue-400'
150+
}`}
151+
size={20}
152+
/>
153+
{formErrors.password && (
154+
<p className="text-red-400 text-sm mt-2 flex items-center">
155+
<span className="w-1 h-1 bg-red-400 rounded-full mr-2"></span>
156+
{formErrors.password}
157+
</p>
158+
)}
159+
</div>
160+
161+
<div className="flex justify-end">
162+
<Link
163+
to="/forgot"
164+
className="text-gray-400 hover:text-blue-400 transition-colors text-sm font-medium"
161165
>
162-
Sign Up
163-
</button>
164-
</p>
165-
</div>
166-
</form>
166+
Forgot Password?
167+
</Link>
168+
</div>
169+
170+
<button
171+
type="submit"
172+
className="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:from-blue-600 hover:to-purple-700 transition-all duration-300 font-semibold shadow-lg hover:shadow-blue-500/25 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
173+
disabled={isLoading}
174+
>
175+
{isLoading ? (
176+
<span className="flex items-center justify-center">
177+
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></div>
178+
Signing in...
179+
</span>
180+
) : (
181+
'Sign In'
182+
)}
183+
</button>
184+
185+
<div className="text-center mt-6">
186+
<p className="text-gray-400 text-sm">
187+
Don't have an account?{' '}
188+
<button
189+
type="button"
190+
onClick={() => navigate('/register')}
191+
className="text-blue-400 font-semibold hover:text-blue-300 transition-colors"
192+
>
193+
Create Account
194+
</button>
195+
</p>
196+
</div>
197+
</form>
198+
</div>
167199
</div>
168200
</div>
169201
);

0 commit comments

Comments
 (0)