From 48519c42c386589da212ca921f1be18fe91be3e7 Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Mon, 7 Jul 2025 13:57:04 +0600
Subject: [PATCH] fix(ui): fix exam screen layout, bottom navigation tabs

---
 app/(tabs)/layout.tsx     |  2 +-
 app/exam/[id]/page.tsx    | 26 +++++++++++++++++---------
 app/exam/pretest/page.tsx |  4 ++--
 css/Header.module.css     |  8 ++++----
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/(tabs)/layout.tsx b/app/(tabs)/layout.tsx
index 386fdd8..12fdfcb 100644
--- a/app/(tabs)/layout.tsx
+++ b/app/(tabs)/layout.tsx
@@ -21,7 +21,7 @@ export default function TabsLayout({ children }: { children: ReactNode }) {
     <div className="min-h-screen flex flex-col">
       <main className="flex-1">{children}</main>
 
-      <nav className="h-[70px] flex justify-around items-center border-t border-t-neutral-400 p-4 rounded-t-4xl bg-white">
+      <nav className="h-[70px] w-full flex justify-around items-center border-t border-t-neutral-400 p-4 rounded-t-4xl bg-white fixed bottom-0">
         {tabs.map((tab) => (
           <Link
             key={tab.name}
diff --git a/app/exam/[id]/page.tsx b/app/exam/[id]/page.tsx
index 7caf332..47bfbeb 100644
--- a/app/exam/[id]/page.tsx
+++ b/app/exam/[id]/page.tsx
@@ -4,6 +4,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState, useCallback, useReducer } from "react";
 import { useTimer } from "@/context/TimerContext";
 import { API_URL, getToken } from "@/lib/auth";
+import Header from "@/components/Header";
 
 // Types
 interface Question {
@@ -31,22 +32,22 @@ interface AnswerAction {
 // Components
 const QuestionItem = React.memo<QuestionItemProps>(
   ({ question, selectedAnswer, handleSelect }) => (
-    <div className="question-container">
-      <h3 className="question-text">
+    <div className="border border-[#8abdff]/50 rounded-2xl p-4">
+      <h3 className="text-xl font-medium mb-[20px]">
         {question.id}. {question.question}
       </h3>
-      <div className="options-container">
+      <div className="flex flex-col gap-4 items-start">
         {Object.entries(question.options).map(([key, value]) => (
           <button
             key={key}
-            className={`option-button ${
-              selectedAnswer === key ? "selected-option" : ""
-            }`}
+            className="flex items-center gap-3"
             onClick={() => handleSelect(question.id, key)}
           >
             <span
-              className={`option-text ${
-                selectedAnswer === key ? "selected-option-text" : ""
+              className={`flex items-center rounded-full border px-1.5 ${
+                selectedAnswer === key
+                  ? "text-white bg-[#113768] border-[#113768]"
+                  : ""
               }`}
             >
               {key.toUpperCase()}
@@ -196,13 +197,20 @@ export default function ExamPage() {
 
   return (
     <div className="min-h-screen bg-gray-50">
+      <Header
+        examDuration={time}
+        displayTabTitle={null}
+        image={undefined}
+        displayUser={undefined}
+        displaySubject={undefined}
+      />
       <div className="container mx-auto px-4 py-8">
         {loading ? (
           <div className="flex items-center justify-center min-h-64">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900"></div>
           </div>
         ) : (
-          <div className="space-y-6">
+          <div className="space-y-6 mb-20">
             {questions?.map((question) => (
               <QuestionItem
                 key={question.id}
diff --git a/app/exam/pretest/page.tsx b/app/exam/pretest/page.tsx
index 5813018..5365d80 100644
--- a/app/exam/pretest/page.tsx
+++ b/app/exam/pretest/page.tsx
@@ -78,7 +78,7 @@ export default function PretestPage() {
   return (
     <BackgroundWrapper>
       <div className="min-h-screen flex flex-col justify-between">
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto mb-20">
           {metadata ? (
             <div className="mx-10 mt-10 gap-6 pb-6 space-y-6">
               <button onClick={() => router.push("/unit")}>
@@ -171,7 +171,7 @@ export default function PretestPage() {
         </div>
 
         <button
-          className="w-full bg-[#113768] h-[78px] flex justify-center items-center border border-transparent text-white font-bold text-2xl hover:bg-[#0d2a52] transition-colors"
+          className="fixed bottom-0 w-full bg-[#113768] h-[78px] flex justify-center items-center border border-transparent text-white font-bold text-2xl hover:bg-[#0d2a52] transition-colors"
           onClick={() => {
             if (metadata) {
               router.push(`/exam/${id}?time=${metadata.metadata.duration}`);
diff --git a/css/Header.module.css b/css/Header.module.css
index 3c1aada..2b40c97 100644
--- a/css/Header.module.css
+++ b/css/Header.module.css
@@ -153,17 +153,17 @@
     }
     
     .timer {
-      width: 120px;
-      height: 40px;
+      width: 160px;
+      height: 60px;
       padding: 0 5px;
     }
     
     .timeValue {
-      font-size: 14px;
+      font-size: 18px;
     }
     
     .timeLabel {
-      font-size: 10px;
+      font-size: 12px;
     }
     
     .examHeader {