updates pass

acmutsa · Sep 17, 2024 · 6f19796 · 6f19796
1 parent 7cd907a
commit 6f19796
Showing 1 changed file with 13 additions and 17 deletions.
diff --git a/apps/web/src/app/dash/pass/page.tsx b/apps/web/src/app/dash/pass/page.tsx
@@ -51,8 +51,8 @@ function EventPass({ qrPayload, user, clerk, guild }: EventPassProps) {
 	return (
 		<div className="relative my-20 h-max">
 			<div className="absolute left-1/2 top-0 z-10 h-[75px] w-[75px] -translate-x-1/2 -translate-y-[50%] rotate-45 rounded-full border-2 border-background border-b-muted border-r-muted bg-background dark:border" />
-			<div className="flex aspect-[8/17] !max-h-[calc(100vh-7rem)] w-full max-w-[400px] flex-col overflow-hidden rounded-3xl border-2 border-muted bg-background py-[37.5px] dark:border">
-				<div className="relative flex h-[30%] w-full flex-col items-center pt-2">
+			<div className="min-w-[min(100vw-5rem,350px)] flex aspect-[9/17] !max-h-[calc(100vh-7rem)] w-full max-w-[500px] flex-col overflow-hidden rounded-3xl border-2 border-muted bg-background py-[37.5px] dark:border">
+				<div className="relative flex min-h-fit w-full flex-col items-center pt-2">
 					<Image
 						src={clerk.imageUrl}
 						alt={`${user.firstName}'s Profile Picture`}
@@ -72,22 +72,18 @@ function EventPass({ qrPayload, user, clerk, guild }: EventPassProps) {
 						</h3>
 					</div>
 				</div>
-				<div className="event-pass-img relative flex h-full w-full items-end">
+				<div className="event-pass-img relative flex h-full w-full flex-col items-center justify-evenly">
 					<div className="absolute left-1/2 top-1/2 aspect-square w-[200px] -translate-x-1/2 -translate-y-[65%] bg-slate-400 opacity-60 blur-[50px] will-change-transform"></div>
-					<Image
-						src={c.eventPassBgImage}
-						alt={""}
-						fill
-						className="no-select -translate-y-[13%] scale-[0.5] object-contain"
-					/>
-					<div className="mx-6 grid h-20 w-full grid-cols-2 gap-4">
+					<div className="relative flex h-full w-full items-center justify-center">
+						<Image
+							src={c.eventPassBgImage}
+							alt={""}
+							fill
+							className="no-select z-50 scale-[0.8] object-contain"
+						/>
+					</div>
+					<div className="mx-6 grid h-20 w-[90%] grid-cols-2 gap-4">
 						<div className="flex h-full w-full items-center justify-start">
-							{/* <Image
-								src={c.icon.svg}
-								height={60}
-								width={60}
-								alt={``}
-							/> */}
 							<h1 className="text-md ml-1 font-bold leading-tight">
 								{c.hackathonName}{" "}
 								<span className="text-orange-400">
@@ -100,7 +96,7 @@ function EventPass({ qrPayload, user, clerk, guild }: EventPassProps) {
 								{c.prettyLocation}
 							</p>
 						</div>
-						<p className="font-mono text-xs col-span-2 text-center">{`${format(
+						<p className="col-span-2 text-center font-mono text-xs">{`${format(
 							c.startDate,
 							"MMM d, yyyy @ h:mma",
 						)}`}</p>