Skip to content

Commit c00251a

Browse files
Rohanrathod7Rohanrathod7
committed
chore: resolve conflict in SignUp.tsx by accepting aesthetic updates
1 parent ce2499f commit c00251a

1 file changed

Lines changed: 54 additions & 30 deletions

File tree

‎LocalMind-Frontend/src/features/Auth/SignUp.tsx‎

Lines changed: 54 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,11 @@ export default function SignUp() {
109109
}
110110

111111
return (
112-
<div className="min-h-screen bg-[#292828] flex flex-col items-center justify-center p-3 sm:p-4 md:p-6">
112+
<div className="min-h-screen bg-[#292828] flex flex-col items-center justify-center p-3 sm:p-4 md:p-6 pt-16 sm:pt-16 md:pt-20">
113113
<style>{glowStyles}</style>
114114

115115
{/* Card Container */}
116-
<div className="w-full max-w-7xl bg-[#181818] rounded-3xl shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
116+
<div className="w-full max-w-7xl bg-[#181818] rounded-3xl shadow-2xl overflow-hidden grid grid-cols-1 lg:grid-cols-2">
117117
{/* Left Section - Form */}
118118
<div className="bg-[#181818] p-6 sm:p-8 md:p-12 lg:p-16 xl:p-20 flex flex-col justify-center">
119119
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-2">
@@ -132,8 +132,8 @@ export default function SignUp() {
132132

133133
<form onSubmit={handleSubmit} className="space-y-4">
134134
{/* Row 1: Full Name & Role */}
135-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
136-
<div className="flex flex-col gap-1.5">
135+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
136+
<div className="flex flex-col gap-1.5 relative">
137137
<label className="text-gray-200 text-xs sm:text-sm font-semibold">Full Name</label>
138138
<input
139139
name="firstName"
@@ -142,15 +142,17 @@ export default function SignUp() {
142142
value={formData.firstName}
143143
onChange={handleChange}
144144
disabled={loading}
145-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
145+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
146146
errors.firstName ? 'border-red-500' : ''
147147
}`}
148148
/>
149149
{errors.firstName && (
150-
<span className="text-xs text-red-400">{errors.firstName}</span>
150+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">
151+
{errors.firstName}
152+
</span>
151153
)}
152154
</div>
153-
<div className="flex flex-col gap-1.5">
155+
<div className="flex flex-col gap-1.5 relative">
154156
<label className="text-gray-200 text-xs sm:text-sm font-semibold">Role</label>
155157
<input
156158
name="role"
@@ -159,17 +161,21 @@ export default function SignUp() {
159161
value={formData.role}
160162
onChange={handleChange}
161163
disabled={loading}
162-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
164+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
163165
errors.role ? 'border-red-500' : ''
164166
}`}
165167
/>
166-
{errors.role && <span className="text-xs text-red-400">{errors.role}</span>}
168+
{errors.role && (
169+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">
170+
{errors.role}
171+
</span>
172+
)}
167173
</div>
168174
</div>
169175

170176
{/* Row 2: Email & Birth Place */}
171-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
172-
<div className="flex flex-col gap-1.5">
177+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
178+
<div className="flex flex-col gap-1.5 relative">
173179
<label className="text-gray-200 text-xs sm:text-sm font-semibold">Email</label>
174180
<input
175181
name="email"
@@ -178,13 +184,17 @@ export default function SignUp() {
178184
value={formData.email}
179185
onChange={handleChange}
180186
disabled={loading}
181-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
187+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
182188
errors.email ? 'border-red-500' : ''
183189
}`}
184190
/>
185-
{errors.email && <span className="text-xs text-red-400">{errors.email}</span>}
191+
{errors.email && (
192+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">
193+
{errors.email}
194+
</span>
195+
)}
186196
</div>
187-
<div className="flex flex-col gap-1.5">
197+
<div className="flex flex-col gap-1.5 relative">
188198
<label className="text-gray-200 text-xs sm:text-sm font-semibold">
189199
Birth Place
190200
</label>
@@ -195,19 +205,21 @@ export default function SignUp() {
195205
value={formData.birthPlace}
196206
onChange={handleChange}
197207
disabled={loading}
198-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
208+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
199209
errors.birthPlace ? 'border-red-500' : ''
200210
}`}
201211
/>
202212
{errors.birthPlace && (
203-
<span className="text-xs text-red-400">{errors.birthPlace}</span>
213+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">
214+
{errors.birthPlace}
215+
</span>
204216
)}
205217
</div>
206218
</div>
207219

208220
{/* Row 3: Location & Password */}
209-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
210-
<div className="flex flex-col gap-1.5">
221+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
222+
<div className="flex flex-col gap-1.5 relative">
211223
<label className="text-gray-200 text-xs sm:text-sm font-semibold">Location</label>
212224
<input
213225
name="location"
@@ -216,13 +228,17 @@ export default function SignUp() {
216228
value={formData.location}
217229
onChange={handleChange}
218230
disabled={loading}
219-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
231+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
220232
errors.location ? 'border-red-500' : ''
221233
}`}
222234
/>
223-
{errors.location && <span className="text-xs text-red-400">{errors.location}</span>}
235+
{errors.location && (
236+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">
237+
{errors.location}
238+
</span>
239+
)}
224240
</div>
225-
<div className="flex flex-col gap-1.5">
241+
<div className="flex flex-col gap-1.5 relative">
226242
<label className="text-gray-200 text-xs sm:text-sm font-semibold">Password</label>
227243
<div className="relative">
228244
<input
@@ -232,7 +248,7 @@ export default function SignUp() {
232248
value={formData.password}
233249
onChange={handleChange}
234250
disabled={loading}
235-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
251+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
236252
errors.password ? 'border-red-500' : ''
237253
}`}
238254
/>
@@ -279,12 +295,16 @@ export default function SignUp() {
279295
)}
280296
</button>
281297
</div>
282-
{errors.password && <span className="text-xs text-red-400">{errors.password}</span>}
298+
{errors.password && (
299+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">
300+
{errors.password}
301+
</span>
302+
)}
283303
</div>
284304
</div>
285305

286306
{/* Row 4: Portfolio URL */}
287-
<div className="flex flex-col gap-1.5">
307+
<div className="flex flex-col gap-1.5 relative">
288308
<label className="text-gray-200 text-xs sm:text-sm font-semibold">
289309
Portfolio Url
290310
</label>
@@ -295,17 +315,19 @@ export default function SignUp() {
295315
value={formData.portfolioUrl}
296316
onChange={handleChange}
297317
disabled={loading}
298-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
318+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition ${
299319
errors.portfolioUrl ? 'border-red-500' : ''
300320
}`}
301321
/>
302322
{errors.portfolioUrl && (
303-
<span className="text-xs text-red-400">{errors.portfolioUrl}</span>
323+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">
324+
{errors.portfolioUrl}
325+
</span>
304326
)}
305327
</div>
306328

307329
{/* Row 5: Bio */}
308-
<div className="flex flex-col gap-1.5">
330+
<div className="flex flex-col gap-1.5 relative">
309331
<label htmlFor="bio" className="text-gray-200 text-xs sm:text-sm font-semibold">
310332
Bio
311333
</label>
@@ -317,11 +339,13 @@ export default function SignUp() {
317339
value={formData.bio}
318340
onChange={handleChange}
319341
disabled={loading}
320-
className={`w-full px-4 py-2.5 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition resize-none ${
342+
className={`w-full px-4 py-3 bg-[#2a2a2a] border border-gray-600 rounded-lg text-sm sm:text-base text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition resize-none ${
321343
errors.bio ? 'border-red-500' : ''
322344
}`}
323345
/>
324-
{errors.bio && <span className="text-xs text-red-400">{errors.bio}</span>}
346+
{errors.bio && (
347+
<span className="text-xs text-red-400 absolute -bottom-5 left-0">{errors.bio}</span>
348+
)}
325349
</div>
326350

327351
{/* Submit Button */}
@@ -363,7 +387,7 @@ export default function SignUp() {
363387
</div>
364388

365389
{/* Right Side - Robot Image */}
366-
<div className="bg-gradient-to-br from-gray-700 to-gray-900 hidden md:flex items-center justify-center overflow-hidden">
390+
<div className="bg-gradient-to-br from-gray-700 to-gray-900 hidden lg:flex items-center justify-center overflow-hidden">
367391
<img
368392
src={robotImage}
369393
alt="AI Robot"

0 commit comments

Comments
 (0)