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,7 +118,11 @@ 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
+					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"
+					onClick={selectExam}
+					role="button">
+					<div className="flex flex-col gap-2 ">
 						<span>
 							Modules:{" "}
 							{formatModuleTotalStats(dateStats)
@@ -127,9 +133,8 @@ export default function History({user}: {user: User}) {
 						<span>
 							Score: {correct}/{total} | {((correct / total) * 100).toFixed(2)}%
 						</span>
-					<button onClick={selectExam} className="btn">
-						View
-					</button>
+					</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>
 		</>