Skip to content

Commit 291d87f

Browse files
antmikinkaclaude
antmikinka
and
claude
committed
feat(ui): bold generosity spacing overhaul for Feedback.tsx
Apply premium spacing design system to interview feedback review: - Loading screen: px-8 → px-16, gap-8 → gap-12, icons enlarged - Loading title: text-2xl → text-4xl for commanding presence - Header: px-8 py-5 → px-12 py-6 with larger typography - Header title: text-base → text-xl, score text-2xl → text-4xl - Subheader: px-8 py-4 → px-12 py-6 - Content areas: p-8 → px-12 py-10, space-y-8 → space-y-10 - Cards: p-6 → p-8 throughout - Typography: text-base → text-lg for all body content - Footer: px-8 py-5 → px-12 py-6 - All icons: size increased (w-5 h-5 → w-6 h-6) - Buttons: larger padding and gaps - Progress bar: h-3 → h-4 for better visibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent a800b7e commit 291d87f

File tree

1 file changed

+64
-64
lines changed

1 file changed

+64
-64
lines changed

‎src/ui/pages/Feedback.tsx‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -99,30 +99,30 @@ const Feedback: React.FC = () => {
9999
if (phase === 'loading') {
100100
return (
101101
<div className="h-screen w-full bg-lemonade-bg dark:bg-lemonade-dark-bg text-black dark:text-white flex flex-col items-center justify-center transition-colors duration-300">
102-
<div className="w-full max-w-lg px-8 flex flex-col items-center gap-8">
103-
<div className="w-20 h-20 rounded-2xl bg-lemonade-accent/10 flex items-center justify-center">
104-
<Loader2 className="w-10 h-10 text-lemonade-accent-hover animate-spin" />
102+
<div className="w-full max-w-2xl px-16 flex flex-col items-center gap-12">
103+
<div className="w-28 h-28 rounded-3xl bg-lemonade-accent/10 flex items-center justify-center">
104+
<Loader2 className="w-14 h-14 text-lemonade-accent-hover animate-spin" />
105105
</div>
106106

107-
<div className="text-center space-y-3">
108-
<h2 className="text-2xl font-bold">Analyzing Your Interview</h2>
109-
<p className="text-base text-gray-500 dark:text-white/40">{progressInfo.status}</p>
107+
<div className="text-center space-y-5">
108+
<h2 className="text-4xl font-bold">Analyzing Your Interview</h2>
109+
<p className="text-lg text-gray-500 dark:text-white/40">{progressInfo.status}</p>
110110
</div>
111111

112-
<div className="w-full space-y-3">
113-
<div className="w-full h-3 bg-gray-200/60 dark:bg-white/10 rounded-full overflow-hidden">
112+
<div className="w-full space-y-4">
113+
<div className="w-full h-4 bg-gray-200/60 dark:bg-white/10 rounded-full overflow-hidden">
114114
<div
115115
className="h-full bg-gradient-to-r from-lemonade-accent to-lemonade-accent-hover rounded-full transition-all duration-500 ease-out"
116116
style={{ width: `${progressPercent}%` }}
117117
/>
118118
</div>
119-
<p className="text-sm text-gray-400 dark:text-white/30 text-center">
119+
<p className="text-base text-gray-400 dark:text-white/30 text-center">
120120
{progressInfo.questionIndex} of {progressInfo.totalQuestions} questions graded
121121
</p>
122122
</div>
123123

124124
{error && (
125-
<div className="w-full border border-red-200/60 dark:border-red-500/15 bg-red-50 dark:bg-red-500/10 rounded-2xl p-6 text-base text-red-600 dark:text-red-400">
125+
<div className="w-full border border-red-200/60 dark:border-red-500/15 bg-red-50 dark:bg-red-500/10 rounded-2xl p-8 text-lg text-red-600 dark:text-red-400">
126126
{error}
127127
</div>
128128
)}
@@ -143,31 +143,31 @@ const Feedback: React.FC = () => {
143143
return (
144144
<div className="h-screen w-full bg-lemonade-bg dark:bg-lemonade-dark-bg text-black dark:text-white flex flex-col overflow-hidden transition-colors duration-300">
145145
{/* Header */}
146-
<header className="flex items-center justify-between px-8 py-5 border-b border-gray-200/50 dark:border-white/[0.08] bg-lemonade-bg dark:bg-lemonade-dark-surface transition-colors duration-300">
147-
<div className="flex items-center gap-4">
146+
<header className="flex items-center justify-between px-12 py-6 border-b border-gray-200/50 dark:border-white/[0.08] bg-lemonade-bg dark:bg-lemonade-dark-surface transition-colors duration-300">
147+
<div className="flex items-center gap-6">
148148
<button
149149
onClick={() => navigate('/dashboard')}
150-
className="p-3 rounded-xl hover:bg-black/[0.03] dark:hover:bg-white/[0.04] transition-colors text-gray-400 hover:text-black dark:hover:text-white"
150+
className="p-3.5 rounded-xl hover:bg-black/[0.03] dark:hover:bg-white/[0.04] transition-colors text-gray-400 hover:text-black dark:hover:text-white"
151151
>
152-
<ArrowLeft className="w-5 h-5" />
152+
<ArrowLeft className="w-6 h-6" />
153153
</button>
154154
<div>
155-
<h1 className="text-base font-semibold">Interview Feedback</h1>
156-
<p className="text-sm text-gray-500 dark:text-white/40 mt-1">
155+
<h1 className="text-xl font-semibold">Interview Feedback</h1>
156+
<p className="text-base text-gray-500 dark:text-white/40 mt-1.5">
157157
Question {currentQuestionIndex + 1} of {totalQuestions}
158158
</p>
159159
</div>
160160
</div>
161161

162-
<div className="flex items-center gap-4">
162+
<div className="flex items-center gap-6">
163163
<div className="text-right">
164-
<p className="text-xs text-gray-400 dark:text-white/30 uppercase tracking-wider font-medium">Overall</p>
165-
<p className={`text-2xl font-bold ${getScoreColor(feedback.overallScore)}`}>
164+
<p className="text-sm text-gray-400 dark:text-white/30 uppercase tracking-wider font-medium">Overall</p>
165+
<p className={`text-4xl font-bold ${getScoreColor(feedback.overallScore)}`}>
166166
{feedback.overallScore}%
167167
</p>
168168
</div>
169-
<div className="w-12 h-12 rounded-xl bg-lemonade-accent/10 flex items-center justify-center">
170-
<Trophy className={`w-5 h-5 ${getScoreColor(feedback.overallScore)}`} />
169+
<div className="w-16 h-16 rounded-2xl bg-lemonade-accent/10 flex items-center justify-center">
170+
<Trophy className={`w-7 h-7 ${getScoreColor(feedback.overallScore)}`} />
171171
</div>
172172
</div>
173173
</header>
@@ -176,51 +176,51 @@ const Feedback: React.FC = () => {
176176
<div className="flex-1 flex overflow-hidden">
177177
{/* Left Side: Q/A */}
178178
<div className="flex-1 border-r border-gray-200/50 dark:border-white/[0.08] flex flex-col">
179-
<div className="px-8 py-4 bg-lemonade-bg dark:bg-white/[0.02] border-b border-gray-100/60 dark:border-white/[0.04]">
180-
<div className="flex items-center gap-3">
179+
<div className="px-12 py-6 bg-lemonade-bg dark:bg-white/[0.02] border-b border-gray-100/60 dark:border-white/[0.04]">
180+
<div className="flex items-center gap-4">
181181
{getRatingIcon(currentQF.rating)}
182-
<span className={`text-sm font-semibold px-3 py-1 rounded-full border ${getRatingBg(currentQF.rating)} ${getRatingColor(currentQF.rating)}`}>
182+
<span className={`text-base font-semibold px-4 py-1.5 rounded-full border ${getRatingBg(currentQF.rating)} ${getRatingColor(currentQF.rating)}`}>
183183
{currentQF.rating.replace('-', ' ')}
184184
</span>
185-
<span className={`text-lg font-bold ml-auto ${getScoreColor(currentQF.score)}`}>
185+
<span className={`text-2xl font-bold ml-auto ${getScoreColor(currentQF.score)}`}>
186186
{currentQF.score}/100
187187
</span>
188188
</div>
189189
</div>
190190

191191
<div className="flex-1 overflow-y-auto">
192-
<div className={`p-8 space-y-8 transition-all duration-300 ${
192+
<div className={`px-12 py-10 space-y-10 transition-all duration-300 ${
193193
animatingIn ? 'opacity-0 translate-y-3' : 'opacity-100 translate-y-0'
194194
}`}>
195195
{/* Question */}
196-
<div className="space-y-4">
196+
<div className="space-y-5">
197197
<p className="text-sm font-medium text-gray-400 dark:text-white/30 uppercase tracking-wider">
198198
Question {currentQuestionIndex + 1}
199199
</p>
200-
<div className="p-6 rounded-2xl bg-lemonade-bg dark:bg-white/[0.03] border border-gray-200/50 dark:border-white/[0.08]">
201-
<p className="text-base leading-relaxed">{currentQF.question}</p>
200+
<div className="p-8 rounded-2xl bg-lemonade-bg dark:bg-white/[0.03] border border-gray-200/50 dark:border-white/[0.08]">
201+
<p className="text-lg leading-relaxed">{currentQF.question}</p>
202202
</div>
203203
</div>
204204

205205
{/* Answer */}
206-
<div className="space-y-4">
206+
<div className="space-y-5">
207207
<p className="text-sm font-medium text-gray-400 dark:text-white/30 uppercase tracking-wider">
208208
Your Answer
209209
</p>
210-
<div className="p-6 rounded-2xl bg-lemonade-bg dark:bg-white/[0.03] border border-gray-200/50 dark:border-white/[0.08]">
211-
<p className="text-base leading-relaxed">{currentQF.answer}</p>
210+
<div className="p-8 rounded-2xl bg-lemonade-bg dark:bg-white/[0.03] border border-gray-200/50 dark:border-white/[0.08]">
211+
<p className="text-lg leading-relaxed">{currentQF.answer}</p>
212212
</div>
213213
</div>
214214

215215
{/* Suggested Answer */}
216216
{currentQF.suggestedAnswer && (
217-
<div className="space-y-4">
218-
<p className="text-sm font-medium text-gray-400 dark:text-white/30 uppercase tracking-wider flex items-center gap-2">
219-
<Zap className="w-4 h-4 text-lemonade-accent-hover" />
217+
<div className="space-y-5">
218+
<p className="text-sm font-medium text-gray-400 dark:text-white/30 uppercase tracking-wider flex items-center gap-3">
219+
<Zap className="w-5 h-5 text-lemonade-accent-hover" />
220220
Suggested Response
221221
</p>
222-
<div className="p-6 rounded-2xl bg-lemonade-accent/[0.04] border border-lemonade-accent/15">
223-
<p className="text-base leading-relaxed">{currentQF.suggestedAnswer}</p>
222+
<div className="p-8 rounded-2xl bg-lemonade-accent/[0.04] border border-lemonade-accent/15">
223+
<p className="text-lg leading-relaxed">{currentQF.suggestedAnswer}</p>
224224
</div>
225225
</div>
226226
)}
@@ -230,27 +230,27 @@ const Feedback: React.FC = () => {
230230

231231
{/* Right Side: Feedback & Suggestions */}
232232
<div className="w-[450px] flex flex-col">
233-
<div className="px-8 py-4 bg-lemonade-bg dark:bg-white/[0.02] border-b border-gray-100/60 dark:border-white/[0.04]">
233+
<div className="px-12 py-6 bg-lemonade-bg dark:bg-white/[0.02] border-b border-gray-100/60 dark:border-white/[0.04]">
234234
<p className="text-sm font-medium text-gray-400 dark:text-white/30 uppercase tracking-wider">
235235
Feedback & Suggestions
236236
</p>
237237
</div>
238238

239239
<div className="flex-1 overflow-y-auto">
240-
<div className={`p-8 space-y-8 transition-all duration-300 delay-100 ${
240+
<div className={`px-12 py-10 space-y-10 transition-all duration-300 delay-100 ${
241241
animatingIn ? 'opacity-0 translate-y-3' : 'opacity-100 translate-y-0'
242242
}`}>
243243
{/* Strengths */}
244244
{currentQF.strengths.length > 0 && (
245245
<div className="bg-green-50 dark:bg-green-500/10 border border-green-200/60 dark:border-green-500/15 rounded-2xl overflow-hidden">
246-
<div className="px-6 pt-6 pb-4">
247-
<h3 className="text-sm font-semibold uppercase tracking-wider text-green-700 dark:text-green-400 flex items-center gap-2">
248-
<CheckCircle2 className="w-4 h-4" />
246+
<div className="px-8 pt-8 pb-5">
247+
<h3 className="text-sm font-semibold uppercase tracking-wider text-green-700 dark:text-green-400 flex items-center gap-3">
248+
<CheckCircle2 className="w-5 h-5" />
249249
Strengths
250250
</h3>
251251
</div>
252-
<div className="px-6 pb-6">
253-
<ul className="space-y-3">
252+
<div className="px-8 pb-8">
253+
<ul className="space-y-4">
254254
{currentQF.strengths.map((s, i) => (
255255
<li key={i} className="text-base text-green-800 dark:text-green-300 flex items-start gap-3">
256256
<span className="text-green-500 dark:text-green-400 mt-0.5">+</span>
@@ -269,16 +269,16 @@ const Feedback: React.FC = () => {
269269
? 'bg-red-50 dark:bg-red-500/10 border-red-200/60 dark:border-red-500/15'
270270
: 'bg-amber-50 dark:bg-amber-500/10 border-amber-200/60 dark:border-amber-500/15'
271271
}`}>
272-
<div className="px-6 pt-6 pb-4">
273-
<h3 className={`text-sm font-semibold uppercase tracking-wider flex items-center gap-2 ${
272+
<div className="px-8 pt-8 pb-5">
273+
<h3 className={`text-sm font-semibold uppercase tracking-wider flex items-center gap-3 ${
274274
currentQF.rating === 'needs-improvement' ? 'text-red-700 dark:text-red-400' : 'text-amber-700 dark:text-amber-400'
275275
}`}>
276-
<AlertTriangle className="w-4 h-4" />
276+
<AlertTriangle className="w-5 h-5" />
277277
Areas to Improve
278278
</h3>
279279
</div>
280-
<div className="px-6 pb-6">
281-
<ul className="space-y-3">
280+
<div className="px-8 pb-8">
281+
<ul className="space-y-4">
282282
{currentQF.improvements.map((imp, i) => (
283283
<li key={i} className={`text-base flex items-start gap-3 ${
284284
currentQF.rating === 'needs-improvement' ? 'text-red-800 dark:text-red-300' : 'text-amber-800 dark:text-amber-300'
@@ -292,19 +292,19 @@ const Feedback: React.FC = () => {
292292
</div>
293293
)}
294294

295-
<div className="border-t border-gray-100/60 dark:border-white/[0.04]" />
295+
<div className="border-t border-gray-100/60 dark:border-white/[0.04] my-8" />
296296

297297
{/* Question Navigator */}
298-
<div className="space-y-5">
298+
<div className="space-y-6">
299299
<p className="text-sm font-medium text-gray-400 dark:text-white/30 uppercase tracking-wider">
300300
All Questions
301301
</p>
302-
<div className="grid grid-cols-5 gap-3">
302+
<div className="grid grid-cols-5 gap-4">
303303
{feedback.questionFeedbacks.map((qf, idx) => (
304304
<button
305305
key={idx}
306306
onClick={() => goToQuestion(idx)}
307-
className={`w-full aspect-square rounded-xl text-sm font-semibold transition-all flex items-center justify-center border ${
307+
className={`w-full aspect-square rounded-xl text-base font-semibold transition-all flex items-center justify-center border ${
308308
idx === currentQuestionIndex
309309
? 'bg-lemonade-accent text-black border-lemonade-accent scale-105'
310310
: getRatingBg(qf.rating) + ' hover:scale-105'
@@ -321,25 +321,25 @@ const Feedback: React.FC = () => {
321321
</div>
322322

323323
{/* Footer Navigation */}
324-
<footer className="flex items-center justify-between px-8 py-5 border-t border-gray-200/50 dark:border-white/[0.08] bg-lemonade-bg dark:bg-lemonade-dark-surface transition-colors duration-300">
324+
<footer className="flex items-center justify-between px-12 py-6 border-t border-gray-200/50 dark:border-white/[0.08] bg-lemonade-bg dark:bg-lemonade-dark-surface transition-colors duration-300">
325325
<button
326326
onClick={() => goToQuestion(currentQuestionIndex - 1)}
327327
disabled={currentQuestionIndex === 0}
328-
className="flex items-center gap-2 px-5 py-3 text-base font-semibold border border-gray-200/50 dark:border-white/[0.08] rounded-xl hover:bg-gray-50 dark:hover:bg-white/[0.04] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
328+
className="flex items-center gap-3 px-6 py-4 text-base font-semibold border border-gray-200/50 dark:border-white/[0.08] rounded-xl hover:bg-gray-50 dark:hover:bg-white/[0.04] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
329329
>
330-
<ChevronLeft className="w-5 h-5" />
330+
<ChevronLeft className="w-6 h-6" />
331331
Previous
332332
</button>
333333

334-
<div className="flex items-center gap-2">
334+
<div className="flex items-center gap-3">
335335
{feedback.questionFeedbacks.map((_, idx) => (
336336
<button
337337
key={idx}
338338
onClick={() => goToQuestion(idx)}
339-
className={`h-2.5 rounded-full transition-all ${
339+
className={`h-3 rounded-full transition-all ${
340340
idx === currentQuestionIndex
341-
? 'bg-lemonade-accent w-8'
342-
: 'bg-gray-300 dark:bg-white/15 w-2.5 hover:bg-gray-400 dark:hover:bg-white/30'
341+
? 'bg-lemonade-accent w-10'
342+
: 'bg-gray-300 dark:bg-white/15 w-3 hover:bg-gray-400 dark:hover:bg-white/30'
343343
}`}
344344
/>
345345
))}
@@ -348,18 +348,18 @@ const Feedback: React.FC = () => {
348348
{currentQuestionIndex < totalQuestions - 1 ? (
349349
<button
350350
onClick={() => goToQuestion(currentQuestionIndex + 1)}
351-
className="flex items-center gap-2 px-5 py-3 text-base font-semibold border border-gray-200/50 dark:border-white/[0.08] rounded-xl hover:bg-gray-50 dark:hover:bg-white/[0.04] transition-colors"
351+
className="flex items-center gap-3 px-6 py-4 text-base font-semibold border border-gray-200/50 dark:border-white/[0.08] rounded-xl hover:bg-gray-50 dark:hover:bg-white/[0.04] transition-colors"
352352
>
353353
Next
354-
<ChevronRight className="w-5 h-5" />
354+
<ChevronRight className="w-6 h-6" />
355355
</button>
356356
) : (
357357
<button
358358
onClick={() => navigate('/dashboard')}
359-
className="flex items-center gap-2 px-6 py-3 text-base font-semibold bg-lemonade-accent text-black rounded-xl hover:bg-lemonade-accent-hover transition-colors"
359+
className="flex items-center gap-3 px-7 py-4 text-base font-semibold bg-lemonade-accent text-black rounded-xl hover:bg-lemonade-accent-hover transition-colors"
360360
>
361361
Done
362-
<CheckCircle2 className="w-5 h-5" />
362+
<CheckCircle2 className="w-6 h-6" />
363363
</button>
364364
)}
365365
</footer>

0 commit comments

Comments
 (0)