Formatted Project with Prettier

apps/web/src/app/admin/layout.tsx

@@ -48,7 +48,7 @@ export default async function AdminLayout({ children }: AdminLayoutProps) {
 					<div className="h-[45%] w-[2px] rotate-[25deg] bg-muted-foreground" />
 					<h2 className="font-bold tracking-tight">Admin</h2>
 				</div>
-				<div className="hidden items-center justify-end gap-x-4 md:flex">
+				<div className="md:flex hidden items-center justify-end gap-x-4">
 					<Link href={"/"}>
 						<Button
 							variant={"outline"}
@@ -75,7 +75,7 @@ export default async function AdminLayout({ children }: AdminLayoutProps) {
 					</Link>
 					<ProfileButton />
 				</div>
-				<div className="flex items-center justify-end gap-x-4 md:hidden"></div>
+				<div className="md:hidden flex items-center justify-end gap-x-4"></div>
 			</div>
 			<div className="fixed z-20 mt-16 flex h-12 w-full border-b border-b-border bg-nav px-5">
 				{Object.entries(c.dashPaths.admin).map(([name, path]) => (

apps/web/src/app/dash/layout.tsx

@@ -52,7 +52,7 @@ export default async function DashLayout({ children }: DashLayoutProps) {
 						<div className="h-[45%] w-[2px] rotate-[25deg] bg-muted-foreground" />
 						<h2 className="font-bold tracking-tight">Dashboard</h2>
 					</div>
-					<div className="hidden items-center justify-end gap-x-4 md:flex">
+					<div className="md:flex hidden items-center justify-end gap-x-4">
 						<Link href={"/"}>
 							<Button
 								variant={"outline"}
@@ -79,7 +79,7 @@ export default async function DashLayout({ children }: DashLayoutProps) {
 						</Link>
 						<ProfileButton />
 					</div>
-					<div className="flex items-center justify-end gap-x-4 md:hidden">
+					<div className="md:hidden flex items-center justify-end gap-x-4">
 						<ProfileButton />
 					</div>
 				</div>

apps/web/src/app/dash/page.tsx

@@ -31,7 +31,7 @@ export default async function Page() {
 					{user.firstName}
 				</h1>
 			</div>
-			<div className="rows-[] grid w-full grid-cols-1 gap-2 px-2 pt-10 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
+			<div className="rows-[] sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 grid w-full grid-cols-1 gap-2 px-2 pt-10">
 				<QuickQR qrPayload={qrPayload} />
 				<TitleBubble />
 				<Countdown

apps/web/src/app/dash/team/new/page.tsx

@@ -6,7 +6,7 @@ export default async function Page() {
 		<main className="mx-auto mt-16 flex min-h-[70%] w-full max-w-5xl flex-col items-center">
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
 			<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-			<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				Team
 			</h1>
 			<div className="flex aspect-video min-h-[max(60vh,625px)] w-full max-w-[500px] flex-col items-center rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

apps/web/src/app/dash/team/page.tsx

@@ -47,7 +47,7 @@ export default async function Page() {
 			<main className="mx-auto mt-16 flex min-h-[70%] w-full max-w-5xl flex-col items-center">
 				<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
 				<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-				<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+				<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 					Team
 				</h1>
 				<div className="aspect-video min-h-[60vh] w-full max-w-[500px] rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

apps/web/src/app/faq/page.tsx

@@ -9,21 +9,21 @@ export default function Page() {
 	return (
 		<>
 			<Navbar />
-			<div className="min-h-96 gap-4 bg-[#1A3A9E] px-2 pb-48 pt-12 font-oswald md:px-10 lg:gap-6">
+			<div className="min-h-96 md:px-10 lg:gap-6 gap-4 bg-[#1A3A9E] px-2 pb-48 pt-12 font-oswald">
 				<Accordion
 					type="single"
 					collapsible
-					className="grid grid-cols-1 gap-4 font-bold lg:grid-cols-2 lg:gap-6"
+					className="lg:grid-cols-2 lg:gap-6 grid grid-cols-1 gap-4 font-bold"
 				>
-					<div className="mb-8 flex items-center justify-center gap-3 rounded-lg border-4 border-[#ea580c] bg-white py-4 md:gap-6 lg:col-span-2">
+					<div className="md:gap-6 lg:col-span-2 mb-8 flex items-center justify-center gap-3 rounded-lg border-4 border-[#ea580c] bg-white py-4">
 						<Image
 							src="/img/logo/rhbttf.svg"
 							alt="RowdyHacks Logo"
-							className="w-20 md:w-32"
+							className="md:w-32 w-20"
 							width={100}
 							height={50}
 						/>
-						<h1 className="text-center text-4xl font-extrabold text-[#ea580c] sm:text-5xl md:text-7xl">
+						<h1 className="sm:text-5xl md:text-7xl text-center text-4xl font-extrabold text-[#ea580c]">
 							Hackathon FAQ
 						</h1>
 					</div>

apps/web/src/app/i/approval/page.tsx

@@ -6,7 +6,7 @@ export default function Page() {
 	return (
 		<main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col items-center justify-center">
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
-			<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				{c.hackathonName}
 			</h1>
 			<div className="relative flex aspect-video w-full max-w-[500px] flex-col items-center justify-center rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

apps/web/src/app/register/page.tsx

@@ -33,7 +33,7 @@ export default async function Page() {
 				<Navbar />
 				<main className="dark:bg-zinc-950">
 					<div className="mx-auto min-h-screen max-w-5xl px-5 pb-10 pt-[20vh] font-sans dark:text-white">
-						<h1 className="text-6xl font-black md:text-8xl">
+						<h1 className="md:text-8xl text-6xl font-black">
 							Register
 						</h1>
 						<p className="mt-5 font-medium">
@@ -64,7 +64,7 @@ export default async function Page() {
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform" />
 			<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
 			{/* Why is this not a component? This same code is in here and insideo of sign-up */}
-			<h1 className="mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				Registration
 			</h1>
 			<div className="relative z-10 flex aspect-video w-full max-w-[500px] flex-col items-center justify-center gap-y-4 rounded-xl bg-white px-5 py-4 backdrop-blur transition dark:bg-white/[0.08]">

apps/web/src/app/rsvp/page.tsx

@@ -58,7 +58,7 @@ export default async function RsvpPage({
 					<h2 className="text-4xl font-extrabold">
 						{c.hackathonName}
 					</h2>
-					<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+					<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 						RSVP
 					</h1>
 					<ConfirmDialogue hasRsvped={user.isRSVPed} />
@@ -70,7 +70,7 @@ export default async function RsvpPage({
 			<main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col items-center justify-center">
 				<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
 				<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-				<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+				<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 					RSVP
 				</h1>
 				<div className="relative flex aspect-video w-full max-w-[500px] flex-col items-center justify-center rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

apps/web/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -29,7 +29,7 @@ export default async function Page() {
 		<main className="flex min-h-screen flex-col items-center justify-center px-2">
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform" />
 			<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-			<h1 className="mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				Registration
 			</h1>
 			<div className="relative z-10 flex aspect-video w-full max-w-[500px] flex-col items-center justify-center gap-y-4 rounded-xl bg-white px-5 backdrop-blur transition dark:bg-white/[0.08]">

apps/web/src/components/admin/scanner/CheckinScanner.tsx

@@ -74,7 +74,7 @@ export default function CheckinScanner({
 
 	return (
 		<>
-			<div className="flex h-dvh flex-col items-center justify-center pt-32">
+			<div className="h-dvh flex flex-col items-center justify-center pt-32">
 				<div className="flex w-screen flex-col items-center justify-center gap-5">
 					<div className="mx-auto aspect-square w-screen max-w-[500px] overflow-hidden">
 						<QrScanner

apps/web/src/components/admin/scanner/PassScanner.tsx

@@ -96,7 +96,7 @@ export default function PassScanner({
 
 	return (
 		<>
-			<div className="flex h-dvh flex-col items-center justify-center pt-32">
+			<div className="h-dvh flex flex-col items-center justify-center pt-32">
 				<div className="flex w-screen flex-col items-center justify-center gap-5">
 					<div className="mx-auto aspect-square w-screen max-w-[500px] overflow-hidden">
 						<QrScanner

apps/web/src/components/admin/users/UpdateRoleDialog.tsx

@@ -110,7 +110,7 @@ export default function UpdateRoleDialog({
 				</div>
 				<DialogFooter>
 					{roleToSet !== currPermision ? (
-						<div className="flex h-full w-full items-center justify-center gap-x-2 self-end sm:justify-start">
+						<div className="sm:justify-start flex h-full w-full items-center justify-center gap-x-2 self-end">
 							<Badge>
 								{titleCase(currPermision.replace("_", " "))}
 							</Badge>

apps/web/src/components/events/admin/EventDetails.tsx

@@ -35,7 +35,7 @@ export default function EventFull({ event }: { event: Event }) {
 					>
 						{event.type}
 					</Badge>
-					<p className="text-xs font-bold md:text-sm">{`${formatInTimeZone(
+					<p className="md:text-sm text-xs font-bold">{`${formatInTimeZone(
 						event.startTime,
 						userTimeZone,
 						"EEEE MMMM do",

apps/web/src/components/faq/FAQItem.tsx

@@ -14,10 +14,10 @@ interface Props {
 export default function FAQItem({ title, children }: PropsWithChildren<Props>) {
 	return (
 		<AccordionItem
-			className="w-[100%] items-center self-start justify-self-center rounded-lg border-4 border-orange-500 bg-white px-6 text-orange-500 transition-transform lg:data-[state=closed]:hover:scale-105"
+			className="lg:data-[state=closed]:hover:scale-105 w-[100%] items-center self-start justify-self-center rounded-lg border-4 border-orange-500 bg-white px-6 text-orange-500 transition-transform"
 			value={`item-${title}`}
 		>
-			<AccordionTrigger className="text-left font-oswald text-2xl font-bold sm:text-3xl">
+			<AccordionTrigger className="sm:text-3xl text-left font-oswald text-2xl font-bold">
 				{title}
 			</AccordionTrigger>
 			<AccordionContent>

apps/web/src/components/landing/About.tsx

@@ -27,13 +27,13 @@ export default function About() {
 			className="relative z-10 min-h-screen w-full bg-cover bg-no-repeat"
 			id="About"
 		>
-			<div className="container mx-auto grid grid-cols-1 gap-x-10 gap-y-16 py-4 md:grid-cols-2">
+			<div className="md:grid-cols-2 container mx-auto grid grid-cols-1 gap-x-10 gap-y-16 py-4">
 				{/* ABOUT US Section */}
-				<div className="flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300 md:hover:scale-105">
-					<h1 className="text-center font-oswald text-3xl font-bold italic text-[#ea580c] sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
+				<div className="md:hover:scale-105 flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300">
+					<h1 className="sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-center font-oswald text-3xl font-bold italic text-[#ea580c]">
 						ABOUT US
 					</h1>
-					<p className="text-center font-mono text-lg font-bold text-[#ea580c] md:text-center">
+					<p className="md:text-center text-center font-mono text-lg font-bold text-[#ea580c]">
 						<Balancer>
 							RowdyHacks is a free, weekend-long, overnight
 							hackathon hosted at UTSA! Students can join us to
@@ -45,11 +45,11 @@ export default function About() {
 				</div>
 
 				{/* WHO CAN ATTEND Section */}
-				<div className="flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300 md:hover:scale-105">
-					<h1 className="text-center font-oswald text-3xl font-bold italic text-[#ea580c] sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
+				<div className="md:hover:scale-105 flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300">
+					<h1 className="sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-center font-oswald text-3xl font-bold italic text-[#ea580c]">
 						WHO CAN ATTEND?
 					</h1>
-					<p className="text-center font-mono text-lg font-bold text-[#ea580c] md:text-center">
+					<p className="md:text-center text-center font-mono text-lg font-bold text-[#ea580c]">
 						<Balancer>
 							We're excited to welcome hackers from all
 							disciplines, backgrounds, & technical levels!
@@ -61,15 +61,15 @@ export default function About() {
 			</div>
 
 			{/* Celebrating 10 Years Section */}
-			<div className="container mx-auto mt-16 grid grid-cols-1 gap-y-16 md:grid-cols-1">
-				<div className="flex transform flex-col justify-center gap-y-10 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300 md:hover:scale-105">
-					<h1 className="text-center font-oswald text-3xl font-bold italic text-[#ea580c] sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
+			<div className="md:grid-cols-1 container mx-auto mt-16 grid grid-cols-1 gap-y-16">
+				<div className="md:hover:scale-105 flex transform flex-col justify-center gap-y-10 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300">
+					<h1 className="sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-center font-oswald text-3xl font-bold italic text-[#ea580c]">
 						CELEBRATING 10 YEARS
 						<br />
 						OF ROWDYHACKS
 					</h1>
 					{/* Mobile: Truncated content with read more */}
-					<div className="block text-center font-mono text-lg font-bold text-[#ea580c] md:hidden">
+					<div className="md:hidden block text-center font-mono text-lg font-bold text-[#ea580c]">
 						{/* Animation for scrolling. Has to have exact heights so it knows where to animate to and from*/}
 						<Balancer>
 							<>
@@ -88,7 +88,7 @@ export default function About() {
 					</div>
 
 					{/* Desktop: Full content displayed */}
-					<div className="hidden text-center font-mono text-lg font-bold text-[#ea580c] md:block">
+					<div className="md:block hidden text-center font-mono text-lg font-bold text-[#ea580c]">
 						<Balancer>
 							This year marks a significant milestone for
 							RowdyHacks, as we celebrate 10 years of fostering

apps/web/src/components/landing/Footer.tsx

@@ -8,17 +8,17 @@ import ManagedByHackkit from "./ManagedWithHackkit";
 
 export default function Footer() {
 	return (
-		<section className="min-h-[25vh] w-full items-center justify-center border-t-2 border-muted-foreground bg-white p-1 py-8 sm:p-8 md:px-10">
-			<div className="grid grid-cols-2 gap-y-8 sm:grid-cols-4 md:justify-items-center lg:grid-cols-5 lg:justify-items-start">
-				<div className="col-span-2 row-span-1 flex items-center justify-self-center font-black sm:row-span-3 lg:row-span-1 lg:justify-self-start">
+		<section className="sm:p-8 md:px-10 min-h-[25vh] w-full items-center justify-center border-t-2 border-muted-foreground bg-white p-1 py-8">
+			<div className="sm:grid-cols-4 md:justify-items-center lg:grid-cols-5 lg:justify-items-start grid grid-cols-2 gap-y-8">
+				<div className="sm:row-span-3 lg:row-span-1 lg:justify-self-start col-span-2 row-span-1 flex items-center justify-self-center font-black">
 					<Image
-						className="w-20 sm:w-28"
+						className="sm:w-28 w-20"
 						src="/img/logo/rhbttf.svg"
 						alt="RowdyHacks Logo"
 						width={100}
 						height={50}
 					/>
-					<h1 className="bg-gradient-to-b from-orange-600 via-yellow-300 to-orange-600 bg-clip-text pl-0 pr-2 font-bttf text-3xl text-transparent sm:text-4xl">
+					<h1 className="sm:text-4xl bg-gradient-to-b from-orange-600 via-yellow-300 to-orange-600 bg-clip-text pl-0 pr-2 font-bttf text-3xl text-transparent">
 						HACK&lt;
 						<br></br>&future&gt;
 					</h1>
@@ -30,7 +30,7 @@ export default function Footer() {
 						key={idx}
 					/>
 				))}
-				<div className="col-span-2 justify-self-center lg:col-span-1 flex flex-col gap-y-3">
+				<div className="lg:col-span-1 col-span-2 flex flex-col gap-y-3 justify-self-center">
 					<Link href="https://vercel.com">
 						<Image
 							className="select-none"
@@ -41,10 +41,10 @@ export default function Footer() {
 						/>
 					</Link>
 					<Link href="https://github.com/acmutsa/HackKit">
-					<ManagedByHackkit/>
+						<ManagedByHackkit />
 					</Link>
 				</div>
-				<div className="col-span-2 flex h-[41px] w-[200px] items-center justify-between gap-2 justify-self-center rounded-lg bg-black px-2 lg:col-span-1 lg:col-start-5">
+				<div className="lg:col-span-1 lg:col-start-5 col-span-2 flex h-[41px] w-[200px] items-center justify-between gap-2 justify-self-center rounded-lg bg-black px-2">
 					<Link href="https://twitter.com/rowdyhacks/">
 						<Twitter className="invert dark:invert-0" />
 					</Link>
@@ -67,7 +67,7 @@ export default function Footer() {
 						/>
 					</Link>
 				</div>
-				<p className="col-span-2 self-center justify-self-center text-center font-mono text-xs text-orange-500 sm:col-start-2 md:py-0 lg:col-span-3 lg:col-start-2 lg:row-start-2 lg:w-11/12">
+				<p className="sm:col-start-2 md:py-0 lg:col-span-3 lg:col-start-2 lg:row-start-2 lg:w-11/12 col-span-2 self-center justify-self-center text-center font-mono text-xs text-orange-500">
 					Made with &lt;/&gt; &amp; ♥ @ RowdyHacks
 					<br />© RowdyHacks &amp; Association of Computing Machinery
 					at UTSA 2024. All Rights Reserved.