Skip to content

UI Refinement: Improve button contrast, adjust branding dot colors, a… #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HrishikeshUchake merged 1 commit into from
Jan 25, 2026
Merged

UI Refinement: Improve button contrast, adjust branding dot colors, a… #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ function Home() {
</motion.div>

<h1 className="text-6xl md:text-8xl font-black tracking-tighter text-foreground mb-6 leading-[0.9]">
Optimize<span className="text-primary">.</span><br />
Apply<span className="text-primary">.</span><br />
Succeed<span className="text-primary">.</span>
Optimize<span className="text-accent-dot">.</span><br />
Apply<span className="text-accent-dot">.</span><br />
Succeed<span className="text-accent-dot">.</span>
</h1>

<p className="max-w-2xl mx-auto text-xl text-muted-foreground font-medium mb-10 leading-relaxed">
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/components/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export default function Dashboard() {
>
<div className="flex items-center gap-3 mb-2">
<h1 className="text-4xl font-black tracking-tight">
Workspace<span className="text-primary">.</span>
Workspace<span className="text-accent-dot">.</span>
</h1>
</div>
<p className="text-muted-foreground text-lg flex items-center gap-2">
Expand All @@ -170,7 +170,7 @@ export default function Dashboard() {
>
<Link
to="/"
className="group inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white px-8 py-4 rounded-2xl font-black shadow-xl shadow-primary/20 transition-smooth hover:-translate-y-1 active:translate-y-0"
className="group inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-primary-foreground px-8 py-4 rounded-2xl font-black shadow-xl shadow-primary/20 transition-smooth hover:-translate-y-1 active:translate-y-0"
>
<Plus className="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" />
Create New Resume
Expand Down Expand Up @@ -317,7 +317,7 @@ export default function Dashboard() {
<div className="flex justify-between items-start mb-6">
<button
onClick={() => setViewingJobDetails(resume)}
className="p-3.5 bg-muted rounded-2xl text-primary group-hover:bg-primary group-hover:text-white transition-smooth shadow-inner cursor-pointer hover:scale-105"
className="p-3.5 bg-muted rounded-2xl text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-smooth shadow-inner cursor-pointer hover:scale-105"
title="View Job Details"
>
<FileText className="w-6 h-6" />
Expand All @@ -339,7 +339,7 @@ export default function Dashboard() {
<div className="grid grid-cols-2 gap-3">
<button
onClick={() => handlePreview(resume.id)}
className="bg-primary hover:bg-primary-dark text-white py-3 rounded-2xl text-sm font-black transition-smooth flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
className="bg-primary hover:bg-primary-dark text-primary-foreground py-3 rounded-2xl text-sm font-black transition-smooth flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
>
{previewResumeId === resume.id && !previewUrl ? (
<Loader2 className="w-4 h-4 animate-spin" />
Expand All @@ -351,7 +351,7 @@ export default function Dashboard() {
<div className="flex gap-2">
<button
onClick={() => handleDownload(resume.id, resume.job_title)}
className="flex-1 bg-muted hover:bg-slate-200 text-foreground py-3 rounded-2xl transition-smooth flex items-center justify-center border border-transparent hover:border-white/20"
className="flex-1 bg-muted hover:bg-muted/80 text-foreground py-3 rounded-2xl transition-smooth flex items-center justify-center border border-transparent hover:border-white/20"
title="Download PDF"
>
<Download className="w-4 h-4" />
Expand Down Expand Up @@ -459,13 +459,13 @@ export default function Dashboard() {
</div>
<button
onClick={closePreview}
className="p-2.5 bg-muted hover:bg-slate-200 text-foreground rounded-xl transition-smooth"
className="p-2.5 bg-muted hover:bg-muted/80 text-foreground rounded-xl transition-smooth"
>
<X className="w-5 h-5" />
</button>
</div>

<div className="flex-1 w-full bg-slate-100/50 p-4 sm:p-8 overflow-auto flex justify-center">
<div className="flex-1 w-full bg-muted/50/50 p-4 sm:p-8 overflow-auto flex justify-center">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
Expand All @@ -487,14 +487,14 @@ export default function Dashboard() {
link.setAttribute('download', 'tailored_resume.pdf');
link.click();
}}
className="w-full sm:w-auto flex items-center justify-center gap-3 bg-primary hover:bg-primary-dark text-white px-10 py-3.5 rounded-2xl font-black shadow-xl shadow-primary/25 transition-smooth"
className="w-full sm:w-auto flex items-center justify-center gap-3 bg-primary hover:bg-primary-dark text-primary-foreground px-10 py-3.5 rounded-2xl font-black shadow-xl shadow-primary/25 transition-smooth"
>
<Download className="w-5 h-5" />
Download PDF Document
</button>
<button
onClick={closePreview}
className="w-full sm:w-auto px-10 py-3.5 bg-muted hover:bg-slate-200 text-foreground rounded-2xl font-bold transition-smooth"
className="w-full sm:w-auto px-10 py-3.5 bg-muted hover:bg-muted/80 text-foreground rounded-2xl font-bold transition-smooth"
>
Dismiss
</button>
Expand Down Expand Up @@ -526,7 +526,7 @@ export default function Dashboard() {
</div>
<button
onClick={() => setViewingJobDetails(null)}
className="p-2.5 bg-muted hover:bg-slate-200 text-foreground rounded-xl transition-smooth"
className="p-2.5 bg-muted hover:bg-muted/80 text-foreground rounded-xl transition-smooth"
>
<X className="w-5 h-5" />
</button>
Expand All @@ -547,7 +547,7 @@ export default function Dashboard() {
<div className="p-6 bg-card border-t border-muted flex justify-end">
<button
onClick={() => setViewingJobDetails(null)}
className="px-8 py-3 bg-primary hover:bg-primary-dark text-white rounded-2xl font-bold transition-smooth shadow-lg shadow-primary/20"
className="px-8 py-3 bg-primary hover:bg-primary-dark text-primary-foreground rounded-2xl font-bold transition-smooth shadow-lg shadow-primary/20"
>
Close Details
</button>
Expand Down
58 changes: 29 additions & 29 deletions frontend/src/components/InterviewPrepPlan.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n Context: ${q?.context}`
transition={{ delay: 0.3 }}
className="mt-8 space-y-6"
>
<div className="bg-white rounded-[2rem] border border-slate-100 shadow-xl overflow-hidden">
<div className="bg-slate-900 p-6 text-white flex items-center justify-between">
<div className="bg-card rounded-[2rem] border border-border shadow-xl overflow-hidden">
<div className="bg-primary p-6 text-white flex items-center justify-between">
<div className="flex items-center gap-3">
<Trophy className="w-6 h-6 text-indigo-400" />
<Trophy className="w-6 h-6 text-success" />
<h3 className="text-xl font-black tracking-tight text-white mb-0">Interview Game Plan</h3>
</div>
<button
Expand All @@ -66,7 +66,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n Context: ${q?.context}`
className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl transition-all text-sm font-bold border border-white/10"
>
{copied ? (
<><Check className="w-4 h-4 text-emerald-400" /> Copied!</>
<><Check className="w-4 h-4 text-success" /> Copied!</>
) : (
<><Copy className="w-4 h-4" /> Copy Plan</>
)}
Expand All @@ -75,19 +75,19 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n Context: ${q?.context}`

<div className="p-8 space-y-10">
<div className="relative group">
<div className="absolute -inset-4 bg-indigo-50/50 rounded-[2rem] -z-10 group-hover:bg-indigo-50 transition-colors" />
<h4 className="text-indigo-900 font-bold mb-3 flex items-center gap-2 text-lg">
<Lightbulb className="w-6 h-6 text-indigo-600" /> Winning Strategy
<div className="absolute -inset-4 bg-muted/50 rounded-[2rem] -z-10 group-hover:bg-muted transition-colors" />
<h4 className="text-primary font-bold mb-3 flex items-center gap-2 text-lg">
<Lightbulb className="w-6 h-6 text-primary" /> Winning Strategy
</h4>
<p className="text-indigo-800 text-sm leading-relaxed font-semibold italic">
<p className="text-primary/80 text-sm leading-relaxed font-semibold italic">
"{winningStrategy}"
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4">
<h4 className="text-slate-900 font-black text-sm uppercase tracking-widest flex items-center gap-2">
<CheckCircle2 className="w-4 h-4 text-indigo-600" /> Actionable Tips
<h4 className="text-foreground font-black text-sm uppercase tracking-widest flex items-center gap-2">
<CheckCircle2 className="w-4 h-4 text-primary" /> Actionable Tips
</h4>
<div className="space-y-3">
{tips.length > 0 ? tips.map((tip, i) => (
Expand All @@ -96,43 +96,43 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n Context: ${q?.context}`
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: i * 0.1 }}
className="flex gap-3 p-4 rounded-2xl bg-slate-50 border border-slate-100 items-start hover:border-indigo-100 transition-colors"
className="flex gap-3 p-4 rounded-2xl bg-muted/30 border border-border items-start hover:border-primary/20 transition-colors"
>
<div className="mt-1 w-1.5 h-1.5 rounded-full bg-indigo-600 shrink-0" />
<p className="text-sm text-slate-700 font-medium leading-relaxed">{tip}</p>
<div className="mt-1 w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
<p className="text-sm text-foreground/70 font-medium leading-relaxed">{tip}</p>
</motion.div>
)) : <p className="text-xs text-slate-400 italic">No specific tips generated.</p>}
)) : <p className="text-xs text-muted-foreground italic">No specific tips generated.</p>}
</div>
</div>

<div className="bg-slate-900 rounded-3xl p-6 text-white flex flex-col justify-center relative overflow-hidden">
<div className="bg-primary rounded-3xl p-6 text-white flex flex-col justify-center relative overflow-hidden">
<div className="absolute top-0 right-0 p-8 opacity-10">
<Brain className="w-24 h-24" />
</div>
<p className="text-indigo-400 font-bold text-xs uppercase tracking-tighter mb-4">Preparation Scope</p>
<p className="text-success font-bold text-xs uppercase tracking-tighter mb-4">Preparation Scope</p>
<div className="space-y-4 relative z-10">
<div className="flex items-center justify-between">
<span className="text-slate-400 text-xs font-medium">Technical Depth</span>
<span className="text-white font-bold text-xs uppercase bg-indigo-600 px-2 py-0.5 rounded">High</span>
<span className="text-white/60 text-xs font-medium">Technical Depth</span>
<span className="text-white font-bold text-xs uppercase bg-white/10 px-2 py-0.5 rounded">High</span>
</div>
<div className="flex items-center justify-between">
<span className="text-slate-400 text-xs font-medium">Behavioral Focus</span>
<span className="text-white font-bold text-xs uppercase bg-indigo-600 px-2 py-0.5 rounded">Strategic</span>
<span className="text-white/60 text-xs font-medium">Behavioral Focus</span>
<span className="text-white font-bold text-xs uppercase bg-white/10 px-2 py-0.5 rounded">Strategic</span>
</div>
<div className="flex items-center justify-between">
<span className="text-slate-400 text-xs font-medium">Complexity</span>
<span className="text-white font-bold text-xs uppercase bg-indigo-600 px-2 py-0.5 rounded">Level 4</span>
<span className="text-white/60 text-xs font-medium">Complexity</span>
<span className="text-white font-bold text-xs uppercase bg-white/10 px-2 py-0.5 rounded">Level 4</span>
</div>
</div>
</div>
</div>

<div className="space-y-8 pt-4 border-t border-slate-100">
<div className="space-y-8 pt-4 border-t border-border">
{techQs.length > 0 && (
<PrepSection
title="Technical Excellence"
subtitle="Skills & Implementations"
icon={<Brain className="w-5 h-5 text-indigo-600" />}
icon={<Brain className="w-5 h-5 text-primary" />}
questions={techQs}
/>
)}
Expand All @@ -141,7 +141,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n Context: ${q?.context}`
<PrepSection
title="Behavioral Alignment"
subtitle="Culture & Soft Skills"
icon={<MessageSquare className="w-5 h-5 text-indigo-600" />}
icon={<MessageSquare className="w-5 h-5 text-primary" />}
questions={behavioralQs}
/>
)}
Expand All @@ -150,7 +150,7 @@ ${behavioralQs.map((q, i) => `${i+1}. ${q?.question}\n Context: ${q?.context}`
<PrepSection
title="Situational Awareness"
subtitle="Scenario Based Challenges"
icon={<Briefcase className="w-5 h-5 text-indigo-600" />}
icon={<Briefcase className="w-5 h-5 text-primary" />}
questions={situationalQs}
/>
)}
Expand All @@ -165,12 +165,12 @@ function PrepSection({ title, subtitle, icon, questions }: { title: string; subt
return (
<div className="space-y-4">
<div className="flex items-center gap-3 mb-2">
<div className="p-2.5 rounded-xl bg-indigo-50 border border-indigo-100">
<div className="p-2.5 rounded-xl bg-muted border border-border">
{icon}
</div>
<div>
<h4 className="text-slate-900 font-black text-base leading-none mb-1 tracking-tight">{title}</h4>
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">{subtitle}</p>
<h4 className="text-foreground font-black text-base leading-none mb-1 tracking-tight">{title}</h4>
<p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">{subtitle}</p>
</div>
</div>
<div className="grid grid-cols-1 gap-3">
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/LoadingProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { motion } from 'framer-motion';
export default function LoadingProgress({ label, progress }: { label: string; progress: number }) {
return (
<div className="space-y-1.5 text-left">
<div className="flex justify-between text-[10px] font-bold text-slate-400 uppercase tracking-tighter">
<div className="flex justify-between text-[10px] font-bold text-muted-foreground uppercase tracking-tighter">
<span>{label}</span>
<span>{progress}%</span>
</div>
<div className="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200/50">
<div className="h-1.5 w-full bg-muted rounded-full overflow-hidden border border-border">
<motion.div
className="h-full bg-indigo-600"
className="h-full bg-primary"
initial={{ width: 0 }}
animate={{ width: `${progress}%` }}
transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ export default function Navbar() {
<Link to="/" className="flex items-center gap-2 group">
<motion.div
whileHover={{ rotate: 12, scale: 1.1 }}
className="bg-primary p-2 rounded-xl shadow-lg shadow-primary/20"
className="bg-black p-2 rounded-xl shadow-lg shadow-black/20"
>
<Briefcase className="w-5 h-5 text-white" />
</motion.div>
<span className="text-2xl font-black tracking-tight text-foreground">
LLMployable<span className="text-primary">.</span>
LLMployable<span className="text-accent-dot">.</span>
</span>
</Link>
</div>
Expand Down Expand Up @@ -61,7 +61,7 @@ export default function Navbar() {
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">Verified</span>
<span className="text-sm font-black text-foreground group-hover:text-primary transition-colors">{user?.username}</span>
</div>
<div className="w-10 h-10 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center text-white font-black shadow-lg shadow-primary/20 ring-2 ring-white/10">
<div className="w-10 h-10 bg-black rounded-xl flex items-center justify-center text-white font-black shadow-lg shadow-black/20 ring-2 ring-white/10">
{user?.username?.[0]?.toUpperCase()}
</div>
</div>
Expand All @@ -83,7 +83,7 @@ export default function Navbar() {
</Link>
<Link
to="/register"
className="bg-foreground hover:bg-primary text-white px-7 py-3 rounded-2xl text-sm font-black shadow-xl shadow-primary/10 transition-smooth hover:-translate-y-1"
className="bg-foreground hover:bg-primary text-background px-7 py-3 rounded-2xl text-sm font-black shadow-xl shadow-primary/10 transition-smooth hover:-translate-y-1"
>
Get Started Free
</Link>
Expand Down Expand Up @@ -117,7 +117,7 @@ export default function Navbar() {
{isAuthenticated ? (
<>
<div className="flex items-center gap-4 px-4 py-6 bg-muted/50 rounded-[2rem] mb-6 shadow-inner ring-1 ring-white/5">
<div className="w-12 h-12 bg-gradient-to-br from-primary to-primary-dark rounded-2xl flex items-center justify-center text-white font-black shadow-lg shadow-primary/20">
<div className="w-12 h-12 bg-black rounded-2xl flex items-center justify-center text-white font-black shadow-lg shadow-black/20">
{user?.username?.[0]?.toUpperCase()}
</div>
<div>
Expand Down
Loading