Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
src/components/flashcards/FlashcardViewer.tsx
View file

@ -309,9 +309,9 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
</span> </span>
</div> </div>
{/* Progress bar */} {/* 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 <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}%` }} style={{ width: `${((currentIndex + 1) / order.length) * 100}%` }}
/> />
</div> </div>

4
src/components/quizzes/QuizViewer.tsx
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"> <div className="text-sm font-mono text-text-secondary whitespace-nowrap tracking-wider">
Q {currentIndex + 1} / {order.length} Q {currentIndex + 1} / {order.length}
</div> </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 <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}%` }} style={{ width: `${(currentIndex / order.length) * 100}%` }}
/> />
</div> </div>