Skip to content

Commit c5d43de

Browse files
PRODHOSHPRODHOSH
committed
Make Auth and Quiz pages fully mobile responsive with proper spacing and font sizes
1 parent a36dd01 commit c5d43de

File tree

2 files changed

+83
-83
lines changed

2 files changed

+83
-83
lines changed

‎src/pages/Auth.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -119,37 +119,37 @@ const Auth = () => {
119119
};
120120

121121
return (
122-
<div className="min-h-screen bg-black text-white relative overflow-hidden">
122+
<div className="min-h-screen bg-black text-white relative overflow-hidden flex flex-col">
123123
<div className="starfield" />
124124

125-
<div className="relative z-10 container mx-auto px-4 py-8 max-w-md">
126-
<Link to="/" className="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300 mb-8 transition-colors">
127-
<ArrowLeft size={20} />
125+
<div className="relative z-10 flex-1 container mx-auto px-3 sm:px-4 py-6 sm:py-8 max-w-md w-full">
126+
<Link to="/" className="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300 mb-6 sm:mb-8 transition-colors text-sm sm:text-base">
127+
<ArrowLeft size={18} />
128128
Back to Home
129129
</Link>
130130

131-
<div className="text-center mb-8">
132-
<div className="inline-block mb-4 px-4 py-1.5 bg-blue-500/20 border border-blue-500/30 rounded-full">
133-
<span className="text-blue-400 text-sm font-medium">🔐 Authentication</span>
131+
<div className="text-center mb-6 sm:mb-8">
132+
<div className="inline-block mb-4 px-3 sm:px-4 py-1 sm:py-1.5 bg-blue-500/20 border border-blue-500/30 rounded-full">
133+
<span className="text-blue-400 text-xs sm:text-sm font-medium">🔐 Authentication</span>
134134
</div>
135-
<h1 className="text-4xl md:text-5xl font-bold mb-3 gradient-text">
135+
<h1 className="text-2xl sm:text-4xl md:text-5xl font-bold mb-2 sm:mb-3 gradient-text">
136136
{mode === 'signin' ? 'Welcome Back' : 'Create Account'}
137137
</h1>
138-
<p className="text-gray-300">
138+
<p className="text-gray-300 text-sm sm:text-base">
139139
{mode === 'signin'
140140
? 'Sign in to take the quantum quiz'
141141
: 'Join the quantum learning community'}
142142
</p>
143143
</div>
144144

145-
<Card className="bg-gradient-to-br from-gray-900/50 to-gray-800/50 border-gray-700/50 p-8">
145+
<Card className="bg-gradient-to-br from-gray-900/50 to-gray-800/50 border-gray-700/50 p-4 sm:p-6 md:p-8">
146146
{/* Google Sign In */}
147147
<Button
148148
onClick={handleGoogleSignIn}
149149
disabled={loading}
150-
className="w-full bg-white hover:bg-gray-100 text-black font-medium py-6 mb-6"
150+
className="w-full bg-white hover:bg-gray-100 text-black font-medium py-4 sm:py-5 md:py-6 mb-4 sm:mb-6 text-sm sm:text-base"
151151
>
152-
<svg className="w-5 h-5 mr-3" viewBox="0 0 24 24">
152+
<svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 sm:mr-3" viewBox="0 0 24 24">
153153
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
154154
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
155155
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
@@ -158,60 +158,60 @@ const Auth = () => {
158158
Continue with Google
159159
</Button>
160160

161-
<div className="relative mb-6">
161+
<div className="relative mb-4 sm:mb-6">
162162
<div className="absolute inset-0 flex items-center">
163163
<div className="w-full border-t border-gray-700"></div>
164164
</div>
165-
<div className="relative flex justify-center text-sm">
165+
<div className="relative flex justify-center text-xs sm:text-sm">
166166
<span className="px-2 bg-gray-800 text-gray-400">Or continue with email</span>
167167
</div>
168168
</div>
169169

170170
{/* Email/Password Form */}
171-
<form onSubmit={handleEmailAuth} className="space-y-4">
171+
<form onSubmit={handleEmailAuth} className="space-y-3 sm:space-y-4">
172172
{mode === 'signup' && (
173173
<div>
174-
<label className="block text-sm font-medium mb-2 text-gray-300">
175-
<User size={16} className="inline mr-2" />
174+
<label className="block text-xs sm:text-sm font-medium mb-1.5 sm:mb-2 text-gray-300">
175+
<User size={14} className="inline mr-1.5 sm:mr-2" />
176176
Username
177177
</label>
178178
<Input
179179
type="text"
180180
placeholder="Enter your username"
181181
value={formData.username}
182182
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
183-
className="bg-black/30 border-gray-700 text-white"
183+
className="bg-black/30 border-gray-700 text-white text-sm"
184184
required={mode === 'signup'}
185185
/>
186186
</div>
187187
)}
188188

189189
<div>
190-
<label className="block text-sm font-medium mb-2 text-gray-300">
191-
<Mail size={16} className="inline mr-2" />
190+
<label className="block text-xs sm:text-sm font-medium mb-1.5 sm:mb-2 text-gray-300">
191+
<Mail size={14} className="inline mr-1.5 sm:mr-2" />
192192
Email
193193
</label>
194194
<Input
195195
type="email"
196196
placeholder="[email protected]"
197197
value={formData.email}
198198
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
199-
className="bg-black/30 border-gray-700 text-white"
199+
className="bg-black/30 border-gray-700 text-white text-sm"
200200
required
201201
/>
202202
</div>
203203

204204
<div>
205-
<label className="block text-sm font-medium mb-2 text-gray-300">
206-
<Lock size={16} className="inline mr-2" />
205+
<label className="block text-xs sm:text-sm font-medium mb-1.5 sm:mb-2 text-gray-300">
206+
<Lock size={14} className="inline mr-1.5 sm:mr-2" />
207207
Password
208208
</label>
209209
<Input
210210
type="password"
211211
placeholder="Enter your password"
212212
value={formData.password}
213213
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
214-
className="bg-black/30 border-gray-700 text-white"
214+
className="bg-black/30 border-gray-700 text-white text-sm"
215215
required
216216
minLength={6}
217217
/>
@@ -226,20 +226,20 @@ const Auth = () => {
226226
<Button
227227
type="submit"
228228
disabled={loading}
229-
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 py-6"
229+
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 py-4 sm:py-5 md:py-6 text-sm sm:text-base"
230230
>
231231
{loading ? 'Please wait...' : mode === 'signin' ? 'Sign In' : 'Create Account'}
232232
</Button>
233233
</form>
234234

235235
{/* Toggle Mode */}
236-
<div className="mt-6 text-center">
236+
<div className="mt-4 sm:mt-6 text-center">
237237
<button
238238
onClick={() => {
239239
setMode(mode === 'signin' ? 'signup' : 'signin');
240240
setFormData({ email: '', password: '', username: '' });
241241
}}
242-
className="text-sm text-blue-400 hover:text-blue-300 transition-colors"
242+
className="text-xs sm:text-sm text-blue-400 hover:text-blue-300 transition-colors"
243243
>
244244
{mode === 'signin' ? (
245245
<>Don't have an account? <span className="font-bold">Sign Up</span></>
@@ -251,23 +251,23 @@ const Auth = () => {
251251
</Card>
252252

253253
{/* Info Card */}
254-
<Card className="mt-6 bg-blue-900/20 border-blue-500/30 p-6">
255-
<h3 className="text-lg font-bold mb-3 text-blue-400">Why Sign In?</h3>
256-
<ul className="space-y-2 text-sm text-gray-300">
254+
<Card className="mt-4 sm:mt-6 bg-blue-900/20 border-blue-500/30 p-4 sm:p-6">
255+
<h3 className="text-base sm:text-lg font-bold mb-2 sm:mb-3 text-blue-400">Why Sign In?</h3>
256+
<ul className="space-y-1.5 sm:space-y-2 text-xs sm:text-sm text-gray-300">
257257
<li className="flex items-start gap-2">
258-
<span className="text-green-400 mt-1">✓</span>
258+
<span className="text-green-400 mt-0.5 flex-shrink-0">✓</span>
259259
<span>Save your quiz scores and track progress</span>
260260
</li>
261261
<li className="flex items-start gap-2">
262-
<span className="text-green-400 mt-1">✓</span>
262+
<span className="text-green-400 mt-0.5 flex-shrink-0">✓</span>
263263
<span>Compete on the global leaderboard</span>
264264
</li>
265265
<li className="flex items-start gap-2">
266-
<span className="text-green-400 mt-1">✓</span>
266+
<span className="text-green-400 mt-0.5 flex-shrink-0">✓</span>
267267
<span>View your quiz history and improvement</span>
268268
</li>
269269
<li className="flex items-start gap-2">
270-
<span className="text-green-400 mt-1">✓</span>
270+
<span className="text-green-400 mt-0.5 flex-shrink-0">✓</span>
271271
<span>Secure and privacy-focused authentication</span>
272272
</li>
273273
</ul>

0 commit comments

Comments
 (0)