From 0c175c02e968fd9344f90490f909208496305ed1 Mon Sep 17 00:00:00 2001
From: brynpttrsn <brynpttrsn@yahoo.com>
Date: Tue, 9 May 2023 10:02:52 -0400
Subject: [PATCH] fix(website): package and version button formatting (#9556)

* fix for djs package button and removed redundant divs

* version arrow formatting

* formatting
---
 .../src/app/docs/packages/[package]/page.tsx  |  2 +-
 apps/website/src/app/docs/packages/page.tsx   | 45 ++++++++-----------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/apps/website/src/app/docs/packages/[package]/page.tsx b/apps/website/src/app/docs/packages/[package]/page.tsx
index 19928b6a6..51436a329 100644
--- a/apps/website/src/app/docs/packages/[package]/page.tsx
+++ b/apps/website/src/app/docs/packages/[package]/page.tsx
@@ -36,7 +36,7 @@ export default async function Page({ params }: { params: { package: string } })
 						href={`/docs/packages/${params.package}/${version}`}
 						key={`${version}-${idx}`}
 					>
-						<div className="flex flex-row place-content-between place-items-center gap-4">
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
 							<div className="flex flex-row place-content-between place-items-center gap-4">
 								<VscVersions size={25} />
 								<h2 className="font-semibold">{version}</h2>
diff --git a/apps/website/src/app/docs/packages/page.tsx b/apps/website/src/app/docs/packages/page.tsx
index ca72a67e6..d88b18a67 100644
--- a/apps/website/src/app/docs/packages/page.tsx
+++ b/apps/website/src/app/docs/packages/page.tsx
@@ -13,16 +13,11 @@ export default function Page() {
 		<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
 			<h1 className="text-2xl font-semibold">Select a package:</h1>
 			<div className="flex flex-col gap-4">
-				<a
-					className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
-					href="https://old.discordjs.dev/#/docs/discord.js"
-				>
+				<a className={buttonVariants({ variant: 'secondary' })} href="https://old.discordjs.dev/#/docs/discord.js">
 					<div className="flex grow flex-row place-content-between place-items-center gap-4">
-						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscPackage size={25} />
-								<h2 className="font-semibold">discord.js</h2>
-							</div>
+						<div className="flex flex-row place-content-between place-items-center gap-4">
+							<VscPackage size={25} />
+							<h2 className="font-semibold">discord.js</h2>
 						</div>
 						<VscArrowRight size={20} />
 					</div>
@@ -34,31 +29,27 @@ export default function Page() {
 						key={`${pkg}-${idx}`}
 					>
 						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex grow flex-row place-content-between place-items-center gap-4">
-								<div className="flex flex-row place-content-between place-items-center gap-4">
-									<VscPackage size={25} />
-									<h2 className="font-semibold">{pkg}</h2>
-								</div>
-								{/* <Link href={`/docs/packages/${pkg}`}>
-									<div
-										className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-none focus:ring focus:ring-white active:translate-y-px"
-										role="link"
-									>
-										Select version
-									</div>
-								</Link> */}
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<VscPackage size={25} />
+								<h2 className="font-semibold">{pkg}</h2>
 							</div>
+							{/* <Link href={`/docs/packages/${pkg}`}>
+								<div
+									className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-none focus:ring focus:ring-white active:translate-y-px"
+									role="link"
+								>
+									Select version
+								</div>
+							</Link> */}
 							<VscArrowRight size={20} />
 						</div>
 					</Link>
 				))}
 				<a className={buttonVariants({ variant: 'secondary' })} href="https://discord-api-types.dev/">
 					<div className="flex grow flex-row place-content-between place-items-center gap-4">
-						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscPackage size={25} />
-								<h2 className="font-semibold">discord-api-types</h2>
-							</div>
+						<div className="flex flex-row place-content-between place-items-center gap-4">
+							<VscPackage size={25} />
+							<h2 className="font-semibold">discord-api-types</h2>
 						</div>
 						<FiExternalLink size={20} />
 					</div>