From b578960c73f3d555ded0871ae33e862db14a5d48 Mon Sep 17 00:00:00 2001 From: Hrishikesh Uchake Date: Sun, 25 Jan 2026 10:15:07 -0600 Subject: [PATCH] Enhance UI with premium glassmorphism, update branding to Briefcase/Gemini Powered, and fix login stability --- frontend/src/App.tsx | 2 +- frontend/src/components/Dashboard.tsx | 143 +++++++++++------- frontend/src/components/InterviewPrepPlan.tsx | 4 +- frontend/src/components/MockInterview.tsx | 80 ++++++---- frontend/src/components/Navbar.tsx | 108 +++++++------ frontend/src/components/ResumeForm.tsx | 126 +++++++++------ frontend/src/index.css | 25 +++ 7 files changed, 307 insertions(+), 181 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ef18416..428dc86 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -57,7 +57,7 @@ function Home() {
- Gemini 2.0 Powered + Gemini Powered
diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx index 659eb7e..a42be4a 100644 --- a/frontend/src/components/Dashboard.tsx +++ b/frontend/src/components/Dashboard.tsx @@ -1,10 +1,10 @@ -import { useState, useEffect, useOptimistic, Activity } from 'react'; +import { useState, useEffect, useOptimistic } from 'react'; import { useAuth } from '../context/AuthContext'; import { FileText, Briefcase, Calendar, Download, Loader2, AlertCircle, Trash2, History, Eye, X, Plus, Search, TrendingUp, Clock, ChevronRight, - Github + Github, Sparkles } from 'lucide-react'; import axios from 'axios'; import { motion, AnimatePresence } from 'framer-motion'; @@ -151,21 +151,31 @@ export default function Dashboard() {
{/* Welcome Section */}
-
-

- Workspace. -

+ +
+

+ Workspace. +

+

- Welcome back, {user?.username} + Welcome back, {user?.username}

-
- + - - Create New Resume - + + + Create New Resume + +
{error && ( @@ -181,49 +191,68 @@ export default function Dashboard() { {/* Stats Dashboard */}
-
+
-
+
Resumes
-

{resumes.length}

- +

{resumes.length}

+
-
+ -
+
-
+
Applications
-

{applications.length}

-
LIVE
+

{applications.length}

+
LIVE
-
+ -
+
-

Career Insights

-

You've generated {resumes.length} tailored resumes this month. Keep up the momentum!

+

+ Career Insights + +

+

You've generated {resumes.length} optimized resumes. Your profile matching score is increasing!

- -
+ +
+
{/* Control Bar */} -
-
+
+
-
- +
+ setSearchQuery(e.target.value)} - className="w-full pl-11 pr-4 py-2.5 bg-muted border-none rounded-2xl text-sm font-medium focus:ring-2 focus:ring-primary/20 transition-smooth" + className="w-full pl-12 pr-6 py-3.5 bg-card border-none rounded-2xl text-sm font-bold shadow-sm focus:ring-4 focus:ring-primary/10 transition-smooth placeholder:text-muted-foreground/40" /> + {searchQuery && ( + + )}
- {/* Content Area with React 19.2 */} + {/* Content Area */}
- {/* Resumes Tab */} - - + + {activeTab === 'resumes' ? ( + {filteredResumes.length > 0 ? ( filteredResumes.map(resume => ( )} - - - {/* Applications Tab */} - + ) : ( {applications.length > 0 ? ( @@ -398,7 +436,8 @@ export default function Dashboard() {
)} - + )} +
{/* Modern Preview Modal */} diff --git a/frontend/src/components/InterviewPrepPlan.tsx b/frontend/src/components/InterviewPrepPlan.tsx index 1c4cc43..14892b5 100644 --- a/frontend/src/components/InterviewPrepPlan.tsx +++ b/frontend/src/components/InterviewPrepPlan.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { motion } from 'framer-motion'; -import { Trophy, Check, Copy, Lightbulb, CheckCircle2, Brain, MessageSquare, Rocket } from 'lucide-react'; +import { Trophy, Check, Copy, Lightbulb, CheckCircle2, Brain, MessageSquare, Briefcase } from 'lucide-react'; import QuestionCard from './QuestionCard'; interface InterviewPrepData { @@ -150,7 +150,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n Context: ${q?.context}` } + icon={} questions={situationalQs} /> )} diff --git a/frontend/src/components/MockInterview.tsx b/frontend/src/components/MockInterview.tsx index c1988fc..96c6489 100644 --- a/frontend/src/components/MockInterview.tsx +++ b/frontend/src/components/MockInterview.tsx @@ -125,47 +125,61 @@ export default function MockInterview() {
{/* Interview Controls */} -
-
- +
+
+
+
-
-
+ - {status === 'connected' ? ( - - ) : ( - - )} -
+
+ {status === 'connected' ? ( + + ) : ( + + )} +
+
-

Connection Status

-

- {status === 'connected' ? 'Live Interviewing...' : status === 'connecting' ? 'Establishing Line...' : 'Ready to Start'} + + AI Voice Interface + +

+ {status === 'connected' ? 'Session Active' : status === 'connecting' ? 'Handshaking...' : 'Standby'}

- {status !== 'connected' ? ( - - ) : ( - - )} +
+ {status !== 'connected' ? ( + + ) : ( + + )} +
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index b423a7d..56bdf34 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,6 +1,6 @@ import { Link, useLocation } from 'react-router-dom'; import { useAuth } from '../context/AuthContext'; -import { Rocket, LogOut, LayoutDashboard, Menu, X, Mic } from 'lucide-react'; +import { Briefcase, LogOut, LayoutDashboard, Menu, X, Mic } from 'lucide-react'; import { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; @@ -24,7 +24,7 @@ export default function Navbar() { whileHover={{ rotate: 12, scale: 1.1 }} className="bg-primary p-2 rounded-xl shadow-lg shadow-primary/20" > - + LLMployable. @@ -33,54 +33,59 @@ export default function Navbar() {
{/* Desktop Navigation */} -
+
{isAuthenticated && ( -
+
{navLinks.map((link) => ( - + {link.name} ))}
)} -
+
{isAuthenticated ? ( -
-
- Member - {user?.username} +
+
+
+ Verified + {user?.username} +
+
+ {user?.username?.[0]?.toUpperCase()} +
) : ( -
+
Login - Sign Up Free + Get Started Free
)} @@ -99,53 +104,68 @@ export default function Navbar() {
- {/* Mobile menu */} + {/* Mobile Menu */} {isMobileMenuOpen && ( -
+
{isAuthenticated ? ( <> - setIsMobileMenuOpen(false)} - className="block px-3 py-4 text-base font-bold text-foreground border-b border-white/5" - > - Dashboard - -
- {user?.username} - +
+
+ {user?.username?.[0]?.toUpperCase()} +
+
+

Active Member

+

{user?.username}

+
+ {navLinks.map((link) => ( + setIsMobileMenuOpen(false)} + className={`flex items-center gap-4 px-6 py-4 rounded-2xl text-base font-black transition-smooth ${ + location.pathname === link.path + ? 'bg-primary text-white shadow-xl shadow-primary/20' + : 'text-muted-foreground hover:bg-muted/50' + }`} + > + + {link.name} + + ))} + ) : ( -
+
setIsMobileMenuOpen(false)} - className="flex items-center justify-center px-4 py-3 rounded-xl font-bold bg-muted text-foreground" + className="flex items-center justify-center py-4 rounded-2xl font-black text-muted-foreground hover:bg-muted/50 transition-smooth" > Login setIsMobileMenuOpen(false)} - className="flex items-center justify-center px-4 py-3 rounded-xl font-bold bg-primary text-white" + className="flex items-center justify-center bg-primary py-4 rounded-2xl font-black text-white shadow-xl shadow-primary/20 transition-smooth" > - Sign Up + Get Started Free
)} diff --git a/frontend/src/components/ResumeForm.tsx b/frontend/src/components/ResumeForm.tsx index 4fc5c3d..8edaf2e 100644 --- a/frontend/src/components/ResumeForm.tsx +++ b/frontend/src/components/ResumeForm.tsx @@ -1,6 +1,6 @@ import { useState, useActionState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { Github, Linkedin, Briefcase, Download, Loader2, Rocket, AlertCircle, CheckCircle2, Info, ArrowRight, ShieldCheck, Mic, Sparkles } from 'lucide-react'; +import { Github, Linkedin, Briefcase, Download, Loader2, AlertCircle, CheckCircle2, Info, ArrowRight, ShieldCheck, Mic, Sparkles } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; import axios from 'axios'; import { useAuth } from '../context/AuthContext'; @@ -146,87 +146,115 @@ export default function ResumeForm() { >
-
-
- +
+
+
-

Generator Configuration

-

Fill in your details to start the magic

+

Generator.

+

+ Configure your AI agent for optimal results + +

{user?.id && } -
-
-