Fix flickering numbers

pull/4459/head
Kamran Ahmed 1 year ago
parent cbe758349c
commit 58dd3f2f41
  1. 6
      src/components/Questions/QuestionCard.tsx
  2. 6
      src/components/Questions/QuestionsProgress.tsx

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import { Fragment, useEffect, useRef, useState } from 'react';
import type { QuestionType } from '../../lib/question-group';
import { markdownToHtml } from '../../lib/markdown';
import Prism from 'prismjs';
@ -58,12 +58,12 @@ export function QuestionCard(props: QuestionCardProps) {
const totalTopics = question.topics?.length || 0;
return (
<>
<Fragment key={topic}>
<span className="capitalize">{topic}</span>
{counter !== totalTopics - 1 && (
<span className="mx-2">&middot;</span>
)}
</>
</Fragment>
);
})}
</div>

@ -46,7 +46,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
<CheckCircle className="mr-1 h-4" />
<span>Knew</span>
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
{knowCount} Questions
<span className='tabular-nums'>{knowCount}</span> Questions
</span>
</span>
@ -54,7 +54,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
<Sparkles className="mr-1 h-4" />
<span>Learnt</span>
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
{didNotKnowCount} Questions
<span className='tabular-nums'>{didNotKnowCount}</span> Questions
</span>
</span>
@ -62,7 +62,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
<SkipForward className="mr-1 h-4" />
<span>Skipped</span>
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
{skippedCount} Questions
<span className='tabular-nums'>{skippedCount}</span> Questions
</span>
</span>

Loading…
Cancel
Save