Skip to content

Apply dashboard blue palette to onboarding flow #6

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

Draft
Copilot wants to merge 1 commit into
base: tom-shlom
Choose a base branch
from
Draft

Apply dashboard blue palette to onboarding flow #6

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
16 changes: 8 additions & 8 deletions frontend/app/OnBoarding/Company/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function CompanySelection() {
}, [canContinue]);

return (
<div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
<div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
<div className="scanlines" />

<div className="max-w-5xl mx-auto w-full flex flex-col justify-between flex-1">
Expand All @@ -68,15 +68,15 @@ export default function CompanySelection() {
text="Where do you want to work?"
speed={30}
delay={400}
className="text-5xl text-[#2d5050] mt-7 block"
className="text-5xl text-[#334155] mt-7 block"
/>
</div>
<div className="min-h-[7rem]">
<TypewriterText
text="Select your target companies. We'll use this to customize your personalized learning path and interview preparation roadmap."
speed={10}
delay={900}
className="text-2xl text-[#4e8888] mb-5 max-w-2xl block"
className="text-2xl text-[#78ADCF] mb-5 max-w-2xl block"
/>
</div>
</div>
Expand All @@ -100,19 +100,19 @@ export default function CompanySelection() {
<PixelCard key={company.id} onClick={() => toggleCompany(company.id)} selected={isSelected}>
<div
className={`h-full flex flex-col items-center justify-center gap-2 p-3 transition-all duration-100
${isSelected ? "bg-[#3a6666] translate-y-[4px]" : "bg-transparent translate-y-0"}
${isSelected ? "bg-[#0080cc] translate-y-[4px]" : "bg-transparent translate-y-0"}
`}
>
<div
className={`flex items-center justify-center text-3xl font-jersey transition-colors duration-100
${isSelected ? "text-white" : "text-[#4e8888]"}
${isSelected ? "text-white" : "text-[#78ADCF]"}
`}
>
{company.logo}
</div>
<span
className={`text-2xl text-center font-jersey transition-colors duration-100
${isSelected ? "text-white" : "text-[#2d5050]"}
${isSelected ? "text-white" : "text-[#334155]"}
`}
>
{company.name}
Expand All @@ -132,8 +132,8 @@ export default function CompanySelection() {
return (
<div
key={id}
className="flex items-center gap-1.5 bg-[#3a6666] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#2d5050] transition-colors"
style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#4e8888', borderLeftColor: '#4e8888', borderRightColor: '#1e3838', borderBottomColor: '#1e3838' }}
className="flex items-center gap-1.5 bg-[#04A0FF] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#0080cc] transition-colors"
style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#8ED4FF', borderLeftColor: '#8ED4FF', borderRightColor: '#0060aa', borderBottomColor: '#0060aa' }}
onClick={() => toggleCompany(id)}
>
{company.name}
Expand Down
34 changes: 17 additions & 17 deletions frontend/app/OnBoarding/Generate/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ function MapAnimation({ active, done }: { active: boolean; done: boolean }) {
return (
<line key={i}
x1={na.x} y1={na.y} x2={nb.x} y2={nb.y}
stroke={done ? '#4a9696' : '#7ab3b3'}
stroke={done ? '#04A0FF' : '#8ED4FF'}
strokeWidth={4}
strokeDasharray={`${len} ${len}`}
strokeDashoffset={0}
Expand All @@ -74,9 +74,9 @@ function MapAnimation({ active, done }: { active: boolean; done: boolean }) {
{MAP_NODES.map((n, i) => {
if (i >= visibleNodes) return null;
const isLast = i === MAP_NODES.length - 1;
const fill = done && isLast ? '#3d7a7a' : done ? '#eaf4f4' : i === 0 ? '#3d7a7a' : '#ffffff';
const stroke = done && isLast ? '#2e6666' : '#7ab3b3';
const textColor = (done && isLast) || i === 0 ? '#ffffff' : '#4a7c7c';
const fill = done && isLast ? '#0080cc' : done ? '#E1FAFF' : i === 0 ? '#0080cc' : '#ffffff';
const stroke = done && isLast ? '#0060aa' : '#8ED4FF';
const textColor = (done && isLast) || i === 0 ? '#ffffff' : '#334155';
return (
<g key={i} style={{ transformOrigin: `${n.x}px ${n.y}px`, animation: `nodeIn 0.35s cubic-bezier(.34,1.56,.64,1) forwards`, animationDelay: '0ms' }}>
<rect
Expand All @@ -93,14 +93,14 @@ function MapAnimation({ active, done }: { active: boolean; done: boolean }) {
</text>
{done && !active && (
<circle cx={n.x + NW/2 - 6} cy={n.y - NH/2 + 6} r={5}
fill={isLast ? '#f7d22e' : '#4a9696'}
fill={isLast ? '#F9EC72' : '#04A0FF'}
style={isLast ? { animation: 'nodePulse 1.2s ease-in-out infinite' } : undefined} />
)}
</g>
);
})}
</svg>
<div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 9, color: done ? '#3d7a7a' : '#7ab3b3', letterSpacing: 1 }}>
<div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 9, color: done ? '#04A0FF' : '#78ADCF', letterSpacing: 1 }}>
{done ? '▶ MAP READY' : `BUILDING MAP${'.'.repeat((visibleNodes % 3) + 1)}`}
</div>
</div>
Expand Down Expand Up @@ -158,21 +158,21 @@ export default function GenerateRoadmap() {
};

return (
<div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
<div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
<div className="scanlines" />

<div className="max-w-5xl mx-auto w-full flex flex-col flex-1">
<div className="mb-4">
<PixelProgress value={100} showLabel={true} step={5} totalSteps={5} />
<div className="min-h-[5rem]">
<TypewriterText text="Almost there" speed={20} delay={400} className="text-5xl text-[#2d5050] leading-relaxed block" />
<TypewriterText text="Almost there" speed={20} delay={400} className="text-5xl text-[#334155] leading-relaxed block" />
</div>
<div className="min-h-[5rem]">
<TypewriterText
text="We'll build a personalized career roadmap tailored to your selected role and background."
speed={10}
delay={800}
className="text-2xl text-[#4e8888] leading-relaxed max-w-2xl block mb-4"
className="text-2xl text-[#78ADCF] leading-relaxed max-w-2xl block mb-4"
/>
</div>
</div>
Expand All @@ -183,22 +183,22 @@ export default function GenerateRoadmap() {
pixel-border h-full flex flex-col items-center justify-center gap-4 p-6 transition-all duration-100
${
done
? "border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#4e8888] border-b-[#4e8888] bg-[#e8f4f4]"
? "border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#334155] border-b-[#334155] bg-[#BEF8FF]"
: generating
? "border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-white"
: "border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-white"
? "border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-white"
: "border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-white"
}
`}
>
{(generating || done) ? (
<MapAnimation active={generating} done={done} />
) : (
<>
<div className="w-14 h-14 flex items-center justify-center pixel-border text-3xl select-none border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-[#f0f8f8]">
<span className="text-[#4e8888]">✦</span>
<div className="w-14 h-14 flex items-center justify-center pixel-border text-3xl select-none border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-[#E1FAFF]">
<span className="text-[#78ADCF]">✦</span>
</div>
<span className="text-xl text-[#2d5050] font-jersey text-center">Ready to generate?</span>
<span className="text-md text-[#4e8888] font-jersey text-center">
<span className="text-xl text-[#334155] font-jersey text-center">Ready to generate?</span>
<span className="text-md text-[#78ADCF] font-jersey text-center">
Based on your profile, we will map out everything you need to land your dream role.
</span>
<PixelButton variant="primary" onClick={handleGenerate} disabled={generating} size="md">
Expand All @@ -209,7 +209,7 @@ export default function GenerateRoadmap() {
{generating && (
<div className="w-full max-w-xs">
<PixelProgress value={((stepIdx + 1) / PROGRESS_STEPS.length) * 100} showLabel={false} />
<p className="text-xs text-[#4e8888] font-jersey text-center mt-2">{PROGRESS_STEPS[stepIdx]}</p>
<p className="text-xs text-[#78ADCF] font-jersey text-center mt-2">{PROGRESS_STEPS[stepIdx]}</p>
</div>
)}
</div>
Expand Down
24 changes: 12 additions & 12 deletions frontend/app/OnBoarding/Major/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export default function SpecialtyPage() {
}, [selected]);

return (
<div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
<div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
<div className="scanlines" />

<div className="max-w-5xl mx-auto w-full flex flex-col justify-between flex-1">
Expand All @@ -128,15 +128,15 @@ export default function SpecialtyPage() {
text="What is your specialty?"
speed={20}
delay={400}
className="text-5xl text-[#2d5050] block mt-7"
className="text-5xl text-[#334155] block mt-7"
/>
</div>
<div className="min-h-[7rem]">
<TypewriterText
text="Pick your primary focus area. You can search for a specific role or choose from the categories below."
speed={10}
delay={800}
className="text-2xl text-[#4e8888] max-w-2xl block mb-5"
className="text-2xl text-[#78ADCF] max-w-2xl block mb-5"
/>
</div>
</div>
Expand All @@ -153,16 +153,16 @@ export default function SpecialtyPage() {
icon={<Search className="w-4 h-4" />}
/>
{showDropdown && suggestions.length > 0 && (
<div className="absolute top-full left-0 right-0 mt-1 bg-white border-4 border-[#7ab3b3] z-20 shadow-lg">
<div className="absolute top-full left-0 right-0 mt-1 bg-white border-4 border-[#8ED4FF] z-20 shadow-lg">
{suggestions.map((s) => (
<div
key={s.id}
onClick={() => handleSelectSuggestion(s.id, s.label)}
className="flex items-center gap-3 px-4 py-2 hover:bg-[#e8f4f4] cursor-pointer border-b border-[#d4e8e8] last:border-0"
className="flex items-center gap-3 px-4 py-2 hover:bg-[#E1FAFF] cursor-pointer border-b border-[#DEF2FF] last:border-0"
>
<span className="text-[#4e8888]">{s.icon}</span>
<span className="text-sm text-[#2d5050] font-jersey">{s.label}</span>
{selected === s.id && <span className="ml-auto text-[#4e8888] text-xs font-jersey">✓</span>}
<span className="text-[#78ADCF]">{s.icon}</span>
<span className="text-sm text-[#334155] font-jersey">{s.label}</span>
{selected === s.id && <span className="ml-auto text-[#78ADCF] text-xs font-jersey">✓</span>}
</div>
))}
</div>
Expand All @@ -176,19 +176,19 @@ export default function SpecialtyPage() {
<PixelCard key={s.id} onClick={() => handleCardSelect(s.id, s.label)} selected={isSelected}>
<div
className={`h-full flex flex-col items-center justify-center gap-3 transition-all duration-100 relative ${
isSelected ? "bg-[#3a6666] translate-y-[4px]" : "bg-transparent translate-y-0"
isSelected ? "bg-[#0080cc] translate-y-[4px]" : "bg-transparent translate-y-0"
}`}
>
<div
className={`w-12 h-12 flex items-center justify-center transition-colors duration-100 ${
isSelected ? "text-white" : "text-[#4e8888]"
isSelected ? "text-white" : "text-[#78ADCF]"
}`}
>
{s.image}
</div>
<span
className={`text-xl text-center font-jersey leading-tight transition-colors duration-100 px-1 ${
isSelected ? "text-white" : "text-[#2d5050]"
isSelected ? "text-white" : "text-[#334155]"
}`}
>
{s.label}
Expand All @@ -199,7 +199,7 @@ export default function SpecialtyPage() {
})}
</div>

{selectedLabel && <div className="text-sm text-[#4e8888] font-jersey">Selected: {selectedLabel}</div>}
{selectedLabel && <div className="text-sm text-[#78ADCF] font-jersey">Selected: {selectedLabel}</div>}

<div className="flex items-center justify-between mt-3">
<PixelButton variant="ghost" onClick={() => router.push("/")} size="md">
Expand Down
22 changes: 11 additions & 11 deletions frontend/app/OnBoarding/Preferences/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function LearningPreferences() {
}, [canContinue]);

return (
<div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
<div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
<div className="scanlines" />

<div className="max-w-5xl mx-auto w-full flex flex-col justify-between flex-1">
Expand All @@ -54,15 +54,15 @@ export default function LearningPreferences() {
text="How do you learn best?"
speed={20}
delay={400}
className="text-5xl text-[#2d5050] leading-relaxed block"
className="text-5xl text-[#334155] leading-relaxed block"
/>
</div>
<div className="min-h-[5rem]">
<TypewriterText
text="Select the modalities that help you absorb complex technical concepts most effectively."
speed={10}
delay={800}
className="text-2xl text-[#4e8888] leading-relaxed max-w-2xl block"
className="text-2xl text-[#78ADCF] leading-relaxed max-w-2xl block"
/>
</div>
</div>
Expand All @@ -74,19 +74,19 @@ export default function LearningPreferences() {
<PixelCard key={p.id} onClick={() => toggle(p.id)} selected={isSelected}>
<div
className={`flex justify-center items-center p-3 flex flex-col gap-2 h-full transition-all duration-100 ${
isSelected ? "bg-[#3a6666] translate-y-[4px]" : "bg-transparent translate-y-0"
isSelected ? "bg-[#0080cc] translate-y-[4px]" : "bg-transparent translate-y-0"
}`}
>
<div
className={`w-10 h-10 flex items-center justify-center transition-colors duration-100 ${
isSelected ? "text-white" : "text-[#4e8888]"
isSelected ? "text-white" : "text-[#78ADCF]"
}`}
>
{p.icon}
</div>
<span
className={`text-3xl font-jersey transition-colors duration-100 ${
isSelected ? "text-white" : "text-[#2d5050]"
isSelected ? "text-white" : "text-[#334155]"
}`}
>
{p.label}
Expand All @@ -106,8 +106,8 @@ export default function LearningPreferences() {
return (
<div
key={id}
className="flex items-center gap-1.5 bg-[#3a6666] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#2d5050] transition-colors"
style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#4e8888', borderLeftColor: '#4e8888', borderRightColor: '#1e3838', borderBottomColor: '#1e3838' }}
className="flex items-center gap-1.5 bg-[#04A0FF] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#0080cc] transition-colors"
style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#8ED4FF', borderLeftColor: '#8ED4FF', borderRightColor: '#0060aa', borderBottomColor: '#0060aa' }}
onClick={() => toggle(id)}
>
{pref.label}
Expand All @@ -119,15 +119,15 @@ export default function LearningPreferences() {
)}

<div className="mb-2 flex-1 flex flex-col pt-2">
<span className="text-3xl text-[#4e8888] font-jersey uppercase tracking-widest mb-1">
<span className="text-3xl text-[#78ADCF] font-jersey uppercase tracking-widest mb-1">
Other Preferences
</span>
<div className="pixel-border border-[#7ab3b3] bg-white flex-1">
<div className="pixel-border border-[#8ED4FF] bg-white flex-1">
<textarea
value={otherText}
onChange={(e) => setOtherText(e.target.value)}
placeholder="E.g., I prefer focused 2-hour sprints with 15-minute breaks..."
className="w-full h-full text-sm text-[#2d5050] placeholder-[#9fc9c9] bg-transparent outline-none resize-none p-3 font-jersey leading-relaxed"
className="w-full h-full text-sm text-[#334155] placeholder-[#78ADCF] bg-transparent outline-none resize-none p-3 font-jersey leading-relaxed"
style={{ fontFamily: "'Press Start 2P', monospace", fontSize: "16px" }}
/>
</div>
Expand Down
Loading