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">
{user?.preparation_unit}
</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.map((mocks) => (
<div key={mocks.test_id}>
@ -110,11 +110,11 @@ export default function MockScreen() {
`/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">
<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}
</p>
</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 BackgroundWrapper from "@/components/BackgroundWrapper";
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";
type Subject = {
@ -91,11 +91,11 @@ export default function PaperScreen() {
<BackgroundWrapper>
<div>
<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">
{user?.preparation_unit}
</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
.filter((subject) => subject.unit === user?.preparation_unit)
@ -107,10 +107,15 @@ export default function PaperScreen() {
`/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>
<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>
</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">
{user?.preparation_unit}
</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.map((topic) => (
<div key={topic.topic_id}>
@ -109,16 +109,13 @@ export default function TopicScreen() {
`/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">
<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}
</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>
</button>
</div>

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

@ -5,17 +5,20 @@ import Link from "next/link";
import { ReactNode } from "react";
import { usePathname } from "next/navigation";
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 = [
{ name: "Home", href: "/home", component: <House size={30} /> },
{ name: "Home", href: "/home", component: <GoHomeFill size={30} /> },
{
name: "Categories",
href: "/categories",
component: <LayoutGrid size={30} />,
component: <HiViewGrid size={30} />,
},
{ name: "Bookmark", href: "/bookmark", component: <Bookmark size={30} /> },
{ name: "Settings", href: "/settings", component: <Settings size={30} /> },
{ name: "Bookmark", href: "/bookmark", component: <FaBookmark size={25} /> },
{ name: "Settings", href: "/settings", component: <HiCog6Tooth size={30} /> },
];
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 { Metadata } from "@/types/exam";
import { useExamStore } from "@/stores/examStore";
import { FaStar } from "react-icons/fa";
function PretestPageContent() {
const router = useRouter();
@ -125,7 +126,7 @@ function PretestPageContent() {
<div className="min-h-screen flex flex-col justify-between">
<div className="flex-1 overflow-y-auto mb-20">
{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`)}>
<ArrowLeft size={30} color="black" />
</button>
@ -134,52 +135,55 @@ function PretestPageContent() {
{metadata.name}
</h1>
<p className="text-xl font-medium text-[#113768]">
Rating: 8 / 10
<p className="text-xl font-medium text-[#113768] flex items-center gap-1">
<FaStar size={15} />
<FaStar size={15} />
<FaStar size={15} />
<FaStar size={15} />
</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">
<HelpCircle size={40} color="#113768" />
<div className="space-y-2">
<p className="font-bold text-4xl text-[#113768]">
<HelpCircle size={52} color="#113768" />
<div className="">
<p className="font-bold text-3xl text-[#113768]">
{metadata.num_questions}
</p>
<p className="font-normal text-lg">
<p className="font-normal text-md">
Multiple Choice Questions
</p>
</div>
</div>
<div className="flex gap-5 items-center">
<Clock size={40} color="#113768" />
<div className="space-y-2">
<p className="font-bold text-4xl text-[#113768]">
<Clock size={52} color="#113768" />
<div className="">
<p className="font-bold text-3xl text-[#113768]">
{String(metadata.time_limit_minutes)} mins
</p>
<p className="font-normal text-lg">Time Taken</p>
<p className="font-normal text-md">Time Taken</p>
</div>
</div>
<div className="flex gap-5 items-center">
<XCircle size={40} color="#113768" />
<div className="space-y-2">
<p className="font-bold text-4xl text-[#113768]">
<XCircle size={52} color="#113768" />
<div className="">
<p className="font-bold text-3xl text-[#113768]">
{metadata.deduction} marks
</p>
<p className="font-normal text-lg">
<p className="font-normal text-md">
From each wrong answer
</p>
</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>
<div className="flex pr-4">
<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
internet connection is reliable.
</p>
@ -187,14 +191,14 @@ function PretestPageContent() {
<div className="flex pr-4">
<span className="mx-4">•</span>
<p className="font-normal text-lg">
There is negative marking for the wrong answer.
<p className="font-medium text-md">
There is no negative marking for the wrong answer.
</p>
</div>
<div className="flex pr-4">
<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
winning a badge.
</p>
@ -202,7 +206,7 @@ function PretestPageContent() {
<div className="flex pr-4">
<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 will earn points only once.
</p>

10
package-lock.json generated
View File

@ -21,6 +21,7 @@
"next": "15.3.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.3.1",
"uuid": "^11.1.0",
"zustand": "^5.0.8"
@ -6362,6 +6363,15 @@
"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": {
"version": "16.13.1",
"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",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^3.3.1",
"uuid": "^11.1.0",
"zustand": "^5.0.8"