shafin808s/examjam-frontend
1
0
Fork 0
generated from muhtadeetaron/nextjs-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): improve ui/ux and visibility

Browse Source
This commit is contained in:
shafin-r
2025-10-06 18:39:58 +06:00
parent 351c8eab48
commit 981fe6973f
7 changed files with 63 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/(tabs)/categories/mocks/page.tsx
View File

@ -100,7 +100,7 @@ export default function MockScreen() {
<h1 className="text-2xl font-semibold my-5"> <h1 className="text-2xl font-semibold my-5">
{user?.preparation_unit} {user?.preparation_unit}
</h1> </h1>
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4"> <div className="border border-[#c0dafc]/50 flex flex-col gap-4 w-full rounded-[25px] p-3">
{mocks.length > 0 ? ( {mocks.length > 0 ? (
mocks.map((mocks) => ( mocks.map((mocks) => (
<div key={mocks.test_id}> <div key={mocks.test_id}>
@ -110,11 +110,11 @@ export default function MockScreen() {
`/exam/pretest?type=mock&test_id=${mocks.test_id}` `/exam/pretest?type=mock&test_id=${mocks.test_id}`
) )
} }
className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors" className="w-full border-1 border-[#B0C2DA] py-3 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
> >
<h3 className="text-xl font-medium">{mocks.name}</h3> <h3 className="text-lg font-medium">{mocks.name}</h3>
<div className="flex space-x-2"> <div className="flex space-x-2">
<p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white"> <p className="text-sm font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
{mocks.unit} {mocks.unit}
</p> </p>
</div> </div>

15
app/(tabs)/categories/subjects/page.tsx
View File

@ -6,7 +6,7 @@ import Header from "@/components/Header";
import DestructibleAlert from "@/components/DestructibleAlert"; import DestructibleAlert from "@/components/DestructibleAlert";
import BackgroundWrapper from "@/components/BackgroundWrapper"; import BackgroundWrapper from "@/components/BackgroundWrapper";
import { API_URL, getToken } from "@/lib/auth"; import { API_URL, getToken } from "@/lib/auth";
import { Loader, RefreshCw } from "lucide-react"; import { Loader, RefreshCw, Star, StarHalf } from "lucide-react";
import { useAuthStore } from "@/stores/authStore"; import { useAuthStore } from "@/stores/authStore";
type Subject = { type Subject = {
@ -91,11 +91,11 @@ export default function PaperScreen() {
<BackgroundWrapper> <BackgroundWrapper>
<div> <div>
<Header displayTabTitle="Subjects" /> <Header displayTabTitle="Subjects" />
<div className="mx-10 pt-10 overflow-y-auto"> <div className="mx-10 pt-5 overflow-y-auto">
<h1 className="text-2xl font-semibold mb-5"> <h1 className="text-2xl font-semibold mb-5">
{user?.preparation_unit} {user?.preparation_unit}
</h1> </h1>
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4"> <div className="border border-[#c0dafc]/50 flex flex-col gap-4 w-full rounded-[20px] p-3">
{subjects.length > 0 ? ( {subjects.length > 0 ? (
subjects subjects
.filter((subject) => subject.unit === user?.preparation_unit) .filter((subject) => subject.unit === user?.preparation_unit)
@ -107,10 +107,15 @@ export default function PaperScreen() {
`/exam/pretest?type=subject&test_id=${subject.subject_id}` `/exam/pretest?type=subject&test_id=${subject.subject_id}`
) )
} }
className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors" className="w-full border-1 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
> >
<h3 className="text-xl font-medium">{subject.name}</h3> <h3 className="text-xl font-medium">{subject.name}</h3>
<p className="text-md font-normal">Rating: 8/10</p> <p className="text-md font-normal flex">
<Star size={17} />
<Star size={17} />
<Star size={17} />
<Star size={17} />
</p>
</button> </button>
</div> </div>
)) ))

11
app/(tabs)/categories/topics/page.tsx
View File

@ -99,7 +99,7 @@ export default function TopicScreen() {
<h1 className="text-2xl font-semibold my-5"> <h1 className="text-2xl font-semibold my-5">
{user?.preparation_unit} {user?.preparation_unit}
</h1> </h1>
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4"> <div className="border border-[#c0dafc]/50 flex flex-col gap-4 w-full rounded-[20px] p-3">
{topics.length > 0 ? ( {topics.length > 0 ? (
topics.map((topic) => ( topics.map((topic) => (
<div key={topic.topic_id}> <div key={topic.topic_id}>
@ -109,16 +109,13 @@ export default function TopicScreen() {
`/exam/pretest?type=topic&test_id=${topic.topic_id}` `/exam/pretest?type=topic&test_id=${topic.topic_id}`
) )
} }
className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors" className="w-full border-1 border-[#B0C2DA] py-3 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
> >
<h3 className="text-xl font-medium">{topic.name}</h3> <h3 className="text-lg font-medium">{topic.name}</h3>
<div className="flex space-x-2"> <div className="flex space-x-2">
<p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white"> <p className="text-sm font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
{topic.subject.name} {topic.subject.name}
</p> </p>
<p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
{topic.subject.unit}
</p>
</div> </div>
</button> </button>
</div> </div>

13
app/(tabs)/layout.tsx
View File

@ -5,17 +5,20 @@ import Link from "next/link";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import clsx from "clsx"; import clsx from "clsx";
import { House, LayoutGrid, Bookmark, Settings } from "lucide-react"; import { GoHomeFill } from "react-icons/go";
import { HiViewGrid } from "react-icons/hi";
import { FaBookmark } from "react-icons/fa";
import { HiCog6Tooth } from "react-icons/hi2";
const tabs = [ const tabs = [
{ name: "Home", href: "/home", component: <House size={30} /> }, { name: "Home", href: "/home", component: <GoHomeFill size={30} /> },
{ {
name: "Categories", name: "Categories",
href: "/categories", href: "/categories",
component: <LayoutGrid size={30} />, component: <HiViewGrid size={30} />,
}, },
{ name: "Bookmark", href: "/bookmark", component: <Bookmark size={30} /> }, { name: "Bookmark", href: "/bookmark", component: <FaBookmark size={25} /> },
{ name: "Settings", href: "/settings", component: <Settings size={30} /> }, { name: "Settings", href: "/settings", component: <HiCog6Tooth size={30} /> },
]; ];
export default function TabsLayout({ children }: { children: ReactNode }) { export default function TabsLayout({ children }: { children: ReactNode }) {

48
app/exam/pretest/page.tsx
View File

@ -15,6 +15,7 @@ import BackgroundWrapper from "@/components/BackgroundWrapper";
import { API_URL, getToken } from "@/lib/auth"; import { API_URL, getToken } from "@/lib/auth";
import { Metadata } from "@/types/exam"; import { Metadata } from "@/types/exam";
import { useExamStore } from "@/stores/examStore"; import { useExamStore } from "@/stores/examStore";
import { FaStar } from "react-icons/fa";
function PretestPageContent() { function PretestPageContent() {
const router = useRouter(); const router = useRouter();
@ -125,7 +126,7 @@ function PretestPageContent() {
<div className="min-h-screen flex flex-col justify-between"> <div className="min-h-screen flex flex-col justify-between">
<div className="flex-1 overflow-y-auto mb-20"> <div className="flex-1 overflow-y-auto mb-20">
{metadata ? ( {metadata ? (
<div className="mx-10 mt-10 gap-6 pb-6 space-y-6"> <div className="mx-10 mt-10 gap-6 pb-6 space-y-5">
<button onClick={() => router.replace(`/categories/${type}s`)}> <button onClick={() => router.replace(`/categories/${type}s`)}>
<ArrowLeft size={30} color="black" /> <ArrowLeft size={30} color="black" />
</button> </button>
@ -134,52 +135,55 @@ function PretestPageContent() {
{metadata.name} {metadata.name}
</h1> </h1>
<p className="text-xl font-medium text-[#113768]"> <p className="text-xl font-medium text-[#113768] flex items-center gap-1">
Rating: 8 / 10 <FaStar size={15} />
<FaStar size={15} />
<FaStar size={15} />
<FaStar size={15} />
</p> </p>
<div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-8 py-7 px-5 space-y-8"> <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] py-5 px-5 space-y-6">
<div className="flex gap-5 items-center"> <div className="flex gap-5 items-center">
<HelpCircle size={40} color="#113768" /> <HelpCircle size={52} color="#113768" />
<div className="space-y-2"> <div className="">
<p className="font-bold text-4xl text-[#113768]"> <p className="font-bold text-3xl text-[#113768]">
{metadata.num_questions} {metadata.num_questions}
</p> </p>
<p className="font-normal text-lg"> <p className="font-normal text-md">
Multiple Choice Questions Multiple Choice Questions
</p> </p>
</div> </div>
</div> </div>
<div className="flex gap-5 items-center"> <div className="flex gap-5 items-center">
<Clock size={40} color="#113768" /> <Clock size={52} color="#113768" />
<div className="space-y-2"> <div className="">
<p className="font-bold text-4xl text-[#113768]"> <p className="font-bold text-3xl text-[#113768]">
{String(metadata.time_limit_minutes)} mins {String(metadata.time_limit_minutes)} mins
</p> </p>
<p className="font-normal text-lg">Time Taken</p> <p className="font-normal text-md">Time Taken</p>
</div> </div>
</div> </div>
<div className="flex gap-5 items-center"> <div className="flex gap-5 items-center">
<XCircle size={40} color="#113768" /> <XCircle size={52} color="#113768" />
<div className="space-y-2"> <div className="">
<p className="font-bold text-4xl text-[#113768]"> <p className="font-bold text-3xl text-[#113768]">
{metadata.deduction} marks {metadata.deduction} marks
</p> </p>
<p className="font-normal text-lg"> <p className="font-normal text-md">
From each wrong answer From each wrong answer
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-4 py-7 px-5 space-y-4"> <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] px-6 py-5 space-y-3">
<h2 className="text-xl font-bold">Ready yourself!</h2> <h2 className="text-xl font-bold">Ready yourself!</h2>
<div className="flex pr-4"> <div className="flex pr-4">
<span className="mx-4">•</span> <span className="mx-4">•</span>
<p className="font-normal text-lg"> <p className="font-medium text-md">
You must complete this test in one session - make sure your You must complete this test in one session - make sure your
internet connection is reliable. internet connection is reliable.
</p> </p>
@ -187,14 +191,14 @@ function PretestPageContent() {
<div className="flex pr-4"> <div className="flex pr-4">
<span className="mx-4">•</span> <span className="mx-4">•</span>
<p className="font-normal text-lg"> <p className="font-medium text-md">
There is negative marking for the wrong answer. There is no negative marking for the wrong answer.
</p> </p>
</div> </div>
<div className="flex pr-4"> <div className="flex pr-4">
<span className="mx-4">•</span> <span className="mx-4">•</span>
<p className="font-normal text-lg"> <p className="font-medium text-md">
The more you answer correctly, the better chance you have of The more you answer correctly, the better chance you have of
winning a badge. winning a badge.
</p> </p>
@ -202,7 +206,7 @@ function PretestPageContent() {
<div className="flex pr-4"> <div className="flex pr-4">
<span className="mx-4">•</span> <span className="mx-4">•</span>
<p className="font-normal text-lg"> <p className="font-medium text-md">
You can retake this test however many times you want. But, You can retake this test however many times you want. But,
you will earn points only once. you will earn points only once.
</p> </p>

10
package-lock.json generated
View File

@ -21,6 +21,7 @@
"next": "15.3.2", "next": "15.3.2",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"uuid": "^11.1.0", "uuid": "^11.1.0",
"zustand": "^5.0.8" "zustand": "^5.0.8"
@ -6362,6 +6363,15 @@
"react": "^19.1.1" "react": "^19.1.1"
} }
}, },
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

1
package.json
View File

@ -22,6 +22,7 @@
"next": "15.3.2", "next": "15.3.2",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"uuid": "^11.1.0", "uuid": "^11.1.0",
"zustand": "^5.0.8" "zustand": "^5.0.8"