Styled the history timeline a bit better

src/pages/history.tsx

@@ -22,6 +22,8 @@ import {Module} from "@/interfaces";
 import axios from "axios";
 import {toast} from "react-toastify";
 import {useRouter} from "next/router";
+import Icon from "@mdi/react";
+import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -116,20 +118,23 @@ export default function History({user}: {user: User}) {
 		return (
 			<div className="flex flex-col gap-2">
 				<span>{formatTimestamp(timestamp)}</span>
-				<div className="bg-white p-4 rounded-xl mb-4 flex flex-col gap-2 drop-shadow-lg">
+				<div
-					<span>
+					className="bg-white p-4 rounded-xl mb-4 flex justify-between items-center drop-shadow-lg cursor-pointer hover:bg-neutral-100 hover:drop-shadow-xl focus:bg-neutral-100 focus:drop-shadow-xl transition ease-in-out duration-300"
-						Modules:{" "}
+					onClick={selectExam}
-						{formatModuleTotalStats(dateStats)
+					role="button">
-							.filter((x) => x.value > 0)
+					<div className="flex flex-col gap-2 ">
-							.map((x) => x.label)
+						<span>
-							.join(", ")}
+							Modules:{" "}
-					</span>
+							{formatModuleTotalStats(dateStats)
-					<span>
+								.filter((x) => x.value > 0)
-						Score: {correct}/{total} | {((correct / total) * 100).toFixed(2)}%
+								.map((x) => x.label)
-					</span>
+								.join(", ")}
-					<button onClick={selectExam} className="btn">
+						</span>
-						View
+						<span>
-					</button>
+							Score: {correct}/{total} | {((correct / total) * 100).toFixed(2)}%
+						</span>
+					</div>
+					<Icon path={mdiChevronRight} color="black" size={1} className="cursor-pointer" />
 				</div>
 			</div>
 		);
@@ -154,7 +159,9 @@ export default function History({user}: {user: User}) {
 					)}
 				</div>
 				<div className="w-2/3 h-full p-4 relative flex flex-col gap-8">
-					{groupedStats && !isStatsLoading && <Timeline value={Object.keys(groupedStats)} content={customContent} />}
+					{groupedStats && !isStatsLoading && (
+						<Timeline value={Object.keys(groupedStats).sort((a, b) => parseInt(b) - parseInt(a))} content={customContent} />
+					)}
 				</div>
 			</main>
 		</>