Skip to content

Commit 480ba80

Browse files
author
Deepak Pandey
committed
fix: Improve font visibility and resolve console errors
- Make all small text darker and more readable (preview, requirements, footer) - Increase font sizes from text-xs to text-sm for better visibility - Add font-medium and font-semibold for better contrast - Fix generate_codeunia_id database function error by providing codeunia_id in profileService - Improve error handling with user-friendly toast messages - Enhance visual feedback with larger icons and better spacing - Fix console errors related to missing database functions This resolves the font visibility issues and database errors shown in the console
1 parent 1a7aa46 commit 480ba80

2 files changed

Lines changed: 61 additions & 55 deletions

File tree

‎app/complete-profile/page.tsx‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ export default function CompleteProfile() {
7171
}
7272
} catch (profileError) {
7373
console.error('Error checking profile:', profileError);
74+
// Show a more user-friendly error message
75+
toast.error('Unable to load profile data. Please refresh the page and try again.');
7476
// Continue with the form - profileService will handle creation if needed
7577
}
7678

@@ -351,15 +353,15 @@ export default function CompleteProfile() {
351353
</div>
352354
</div>
353355

354-
{/* Username Preview */}
355-
{username && (
356-
<div className="mt-2 flex items-center space-x-2">
357-
<span className="text-xs text-gray-500">Preview:</span>
358-
<span className="text-xs font-mono bg-gray-100 px-2 py-1 rounded-md">
359-
@{username.toLowerCase()}
360-
</span>
361-
</div>
362-
)}
356+
{/* Username Preview */}
357+
{username && (
358+
<div className="mt-2 flex items-center space-x-2">
359+
<span className="text-sm font-medium text-gray-700">Preview:</span>
360+
<span className="text-sm font-mono bg-gray-200 text-gray-800 px-2 py-1 rounded-md border">
361+
@{username.toLowerCase()}
362+
</span>
363+
</div>
364+
)}
363365

364366
{/* Username Status Messages */}
365367
{isCheckingUsername && (
@@ -369,45 +371,45 @@ export default function CompleteProfile() {
369371
</div>
370372
)}
371373

372-
{!isCheckingUsername && usernameAvailable === true && (
373-
<div className="flex items-center space-x-2 mt-2">
374-
<CheckCircle className="h-3 w-3 text-green-500" />
375-
<p className="text-xs text-green-600">Username is available!</p>
376-
</div>
377-
)}
374+
{!isCheckingUsername && usernameAvailable === true && (
375+
<div className="flex items-center space-x-2 mt-2">
376+
<CheckCircle className="h-4 w-4 text-green-500" />
377+
<p className="text-sm font-medium text-green-700">Username is available!</p>
378+
</div>
379+
)}
378380

379-
{!isCheckingUsername && usernameAvailable === false && !usernameError && (
380-
<div className="flex items-center space-x-2 mt-2">
381-
<XCircle className="h-3 w-3 text-red-500" />
382-
<p className="text-xs text-red-600">Username is already taken</p>
383-
</div>
384-
)}
381+
{!isCheckingUsername && usernameAvailable === false && !usernameError && (
382+
<div className="flex items-center space-x-2 mt-2">
383+
<XCircle className="h-4 w-4 text-red-500" />
384+
<p className="text-sm font-medium text-red-700">Username is already taken</p>
385+
</div>
386+
)}
385387

386-
{usernameError && (
387-
<div className="flex items-center space-x-2 mt-2">
388-
<AlertCircle className="h-3 w-3 text-red-500" />
389-
<p className="text-xs text-red-600">{usernameError}</p>
390-
</div>
391-
)}
388+
{usernameError && (
389+
<div className="flex items-center space-x-2 mt-2">
390+
<AlertCircle className="h-4 w-4 text-red-500" />
391+
<p className="text-sm font-medium text-red-700">{usernameError}</p>
392+
</div>
393+
)}
392394

393-
{/* Username Requirements */}
394-
<div className="mt-3 p-3 bg-gray-50/50 rounded-lg border border-gray-100">
395-
<p className="text-xs font-medium text-gray-700 mb-2">Username Requirements:</p>
396-
<ul className="text-xs text-gray-600 space-y-1">
397-
<li className="flex items-center space-x-2">
398-
<div className={`w-1.5 h-1.5 rounded-full ${username.length >= 3 && username.length <= 30 ? 'bg-green-500' : 'bg-gray-300'}`}></div>
399-
<span>3-30 characters long</span>
400-
</li>
401-
<li className="flex items-center space-x-2">
402-
<div className={`w-1.5 h-1.5 rounded-full ${/^[a-zA-Z0-9_-]+$/.test(username) || !username ? 'bg-green-500' : 'bg-gray-300'}`}></div>
403-
<span>Letters, numbers, hyphens, and underscores only</span>
404-
</li>
405-
<li className="flex items-center space-x-2">
406-
<div className={`w-1.5 h-1.5 rounded-full ${usernameAvailable === true ? 'bg-green-500' : usernameAvailable === false ? 'bg-red-500' : 'bg-gray-300'}`}></div>
407-
<span>Must be unique across all users</span>
408-
</li>
409-
</ul>
410-
</div>
395+
{/* Username Requirements */}
396+
<div className="mt-3 p-4 bg-gray-100/80 rounded-lg border border-gray-200">
397+
<p className="text-sm font-semibold text-gray-800 mb-3">Username Requirements:</p>
398+
<ul className="text-sm text-gray-700 space-y-2">
399+
<li className="flex items-center space-x-3">
400+
<div className={`w-2 h-2 rounded-full ${username.length >= 3 && username.length <= 30 ? 'bg-green-500' : 'bg-gray-400'}`}></div>
401+
<span className="font-medium">3-30 characters long</span>
402+
</li>
403+
<li className="flex items-center space-x-3">
404+
<div className={`w-2 h-2 rounded-full ${/^[a-zA-Z0-9_-]+$/.test(username) || !username ? 'bg-green-500' : 'bg-gray-400'}`}></div>
405+
<span className="font-medium">Letters, numbers, hyphens, and underscores only</span>
406+
</li>
407+
<li className="flex items-center space-x-3">
408+
<div className={`w-2 h-2 rounded-full ${usernameAvailable === true ? 'bg-green-500' : usernameAvailable === false ? 'bg-red-500' : 'bg-gray-400'}`}></div>
409+
<span className="font-medium">Must be unique across all users</span>
410+
</li>
411+
</ul>
412+
</div>
411413
</div>
412414
</div>
413415

@@ -435,15 +437,15 @@ export default function CompleteProfile() {
435437
</button>
436438
</form>
437439

438-
{/* Footer */}
439-
<div className="mt-8 pt-6 border-t border-gray-100">
440-
<p className="text-xs text-gray-500 text-center leading-relaxed">
441-
By continuing, you agree to CodeUnia&apos;s{' '}
442-
<Link href="/terms" className="text-blue-600 hover:text-blue-700 hover:underline transition-colors">Terms of Service</Link>
443-
{' '}and{' '}
444-
<Link href="/privacy" className="text-blue-600 hover:text-blue-700 hover:underline transition-colors">Privacy Policy</Link>
445-
</p>
446-
</div>
440+
{/* Footer */}
441+
<div className="mt-8 pt-6 border-t border-gray-200">
442+
<p className="text-sm text-gray-700 text-center leading-relaxed">
443+
By continuing, you agree to CodeUnia&apos;s{' '}
444+
<Link href="/terms" className="text-blue-600 hover:text-blue-700 hover:underline transition-colors font-medium">Terms of Service</Link>
445+
{' '}and{' '}
446+
<Link href="/privacy" className="text-blue-600 hover:text-blue-700 hover:underline transition-colors font-medium">Privacy Policy</Link>
447+
</p>
448+
</div>
447449
</div>
448450
</div>
449451
);

‎lib/services/profile.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,17 @@ export class ProfileService {
3131
async createProfile(userId: string): Promise<Profile> {
3232
const { data: user } = await this.getSupabaseClient().auth.getUser()
3333

34+
// Generate a simple codeunia_id if needed
35+
const codeuniaId = `CU-${userId.slice(-8).toUpperCase()}-${Date.now().toString(36).toUpperCase()}`
36+
3437
const profileData = {
3538
id: userId,
3639
first_name: user.user?.user_metadata?.first_name || '',
3740
last_name: user.user?.user_metadata?.last_name || '',
3841
is_public: true,
3942
email_notifications: true,
40-
profile_completion_percentage: 0
43+
profile_completion_percentage: 0,
44+
codeunia_id: codeuniaId
4145
}
4246

4347
const supabase = this.getSupabaseClient();

0 commit comments

Comments
 (0)