update: FinishModal>見た目をそれとなく改善

watasuke102 · Feb 25, 2024 · be97667 · be97667
1 parent 0e863fa
commit be97667
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/src/app/exam/_components/FinishModal/FinishModal.module.scss b/src/app/exam/_components/FinishModal/FinishModal.module.scss
@@ -30,4 +30,22 @@
 
 .correct_rate {
   font-size: 1.25em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+.percentage {
+  margin: 0 4px;
+  font-size: 3.8em;
+  font-weight: bold;
+  text-decoration: underline $color-primary-3;
+}
+
+.question_num_wrapper {
+  margin-top: 16px;
+}
+.question_num {
+  font-size: 2.1em;
+  margin: 0 4px;
 }
diff --git a/src/app/exam/_components/FinishModal/FinishModal.tsx b/src/app/exam/_components/FinishModal/FinishModal.tsx
@@ -38,8 +38,20 @@ export function FinishModal(props: Props): JSX.Element {
         <div className={css.modal_header}>
           <TadaIcon /> <span>問題終了</span>
         </div>
-        <p className={css.correct_rate}>
-          正答率：{correct_rate}% （{total_questions}問中{correct_answers}問正解）
+        <p
+          className={css.correct_rate}
+          aria-label={`正答率${correct_rate}%、${total_questions}問中${correct_answers}問正解`}
+        >
+          <div aria-hidden>
+            正答率
+            <span className={css.percentage}>{correct_rate}</span>%
+          </div>
+          <div aria-hidden className={css.question_num_wrapper}>
+            <span className={css.question_num}>{total_questions}</span>
+            問中
+            <span className={css.question_num}>{correct_answers}</span>
+            問正解
+          </div>
         </p>
         <ButtonContainer>
           <Button