From d871cb8e2a9146273e306a27380c9e9f330bcc05 Mon Sep 17 00:00:00 2001
From: Raphael Jess Bacordio
 <91072520+raisondetre1207@users.noreply.github.com>
Date: Fri, 15 Mar 2024 11:23:49 +0800
Subject: [PATCH] Fix: Fix padding and alignment elements on quiz session
 header

---
 .../quiz_session/app/room/quiz/components/header.js       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/WebApp/frontend/quiz_session/app/room/quiz/components/header.js b/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
index f8710f7..5780f0d 100644
--- a/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
+++ b/WebApp/frontend/quiz_session/app/room/quiz/components/header.js
@@ -22,6 +22,8 @@ export default function Header() {
     { volume: isMute ? 0 : volume / 100 }
   );
 
+  console.log(metadata);
+
   useEffect(() => {
     setTime(question?.remainingTime);
   }, [question]);
@@ -51,10 +53,10 @@ export default function Header() {
         </div>
         <div className="flex justify-center">
           <div className="justify-center items-center">
-            <p className="text-white text-sm mb-2">
-              {metadata?.currentSetName}
+            <p className="text-white text-sm mb-2 text-center">
+              {`(${metadata?.currentSetIndex}/${metadata?.totalNumberOfSets}) ${metadata?.currentSetName}`}
             </p>
-            <div className="flex-row flex bg-white py-2 rounded-md text-green_text flex-2 justify-center items-center">
+            <div className="flex-row flex bg-white py-2 px-4 rounded-md text-green_text flex-2 justify-center items-center">
               <div className="text-base font-bold">
                 Question {metadata?.currentQuestionIndex}{" "}
               </div>