style: Enhance progress bar visibility across flashcards and quizzes
All checks were successful
Automated Container Build / build-and-push (push) Successful in 58s

This commit is contained in:
Elijah 2026-06-28 13:26:52 -07:00
parent 9dfb84bbd6
commit 7d3831149c
2 changed files with 4 additions and 4 deletions

View file

@ -309,9 +309,9 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
</span>
</div>
{/* Progress bar */}
<div className="w-full bg-bg-surface-alt rounded-full h-1.5 mt-2">
<div className="w-full bg-bg-surface rounded-full h-2 mt-2 border border-border-light/50 overflow-hidden">
<div
className="h-1.5 rounded-full bg-primary transition-all duration-300"
className="h-full bg-primary transition-all duration-300"
style={{ width: `${((currentIndex + 1) / order.length) * 100}%` }}
/>
</div>

View file

@ -278,9 +278,9 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
<div className="text-sm font-mono text-text-secondary whitespace-nowrap tracking-wider">
Q {currentIndex + 1} / {order.length}
</div>
<div className="flex-1 h-2 bg-border-light rounded-full overflow-hidden">
<div className="flex-1 h-2 bg-bg-surface rounded-full overflow-hidden border border-border-light/50">
<div
className="h-full bg-border transition-all duration-300"
className="h-full bg-primary transition-all duration-300"
style={{ width: `${(currentIndex / order.length) * 100}%` }}
/>
</div>