From 52f8e0670c039dfe1d1a395701f7bcc6d3c9dc62 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Fri, 24 Mar 2023 06:02:00 +0100
Subject: [PATCH] feat(website): color scheme / dark and light mode
 improvements

---
 apps/guide/src/components/Navbar.tsx          |  2 +-
 .../[package]/[version]/[item]/page.tsx       |  4 +-
 .../packages/[package]/[version]/layout.tsx   | 71 +-----------------
 .../src/app/docs/packages/[package]/page.tsx  |  2 +-
 apps/website/src/app/docs/packages/page.tsx   |  2 +-
 apps/website/src/app/global-error.tsx         |  2 +-
 apps/website/src/app/layout.tsx               |  2 +-
 apps/website/src/app/page.tsx                 |  4 +-
 apps/website/src/components/Footer.tsx        | 74 +++++++++++++++++++
 apps/website/src/components/Header.tsx        |  2 +-
 apps/website/src/components/Nav.tsx           |  6 +-
 .../src/components/OverloadSwitcher.tsx       |  4 +-
 apps/website/src/components/PackageSelect.tsx |  4 +-
 apps/website/src/components/Sidebar.tsx       |  3 +-
 apps/website/src/components/VersionSelect.tsx |  4 +-
 .../components/model/function/Function.tsx    |  4 +-
 .../src/components/model/method/Method.tsx    |  4 +-
 packages/ui/src/lib/components/Section.tsx    |  2 +-
 18 files changed, 104 insertions(+), 92 deletions(-)
 create mode 100644 apps/website/src/components/Footer.tsx

diff --git a/apps/guide/src/components/Navbar.tsx b/apps/guide/src/components/Navbar.tsx
index 76f16c043..7b1c9804b 100644
--- a/apps/guide/src/components/Navbar.tsx
+++ b/apps/guide/src/components/Navbar.tsx
@@ -18,7 +18,7 @@ export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
 
 	return (
 		<>
-			<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+			<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
 				<div className="h-18 block px-6">
 					<div className="flex h-full flex-row place-content-between place-items-center">
 						<Button
diff --git a/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx b/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
index 6a3f5d777..64e6bf6b7 100644
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
@@ -180,8 +180,8 @@ export default async function Page({ params }: { params: ItemRouteParams }) {
 					: ''
 			}
 		>
-			<article className="dark:bg-dark-600 bg-light-600">
-				<div className="dark:bg-dark-800  bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
+			<article className="dark:bg-dark-800 bg-light-600">
+				<div className="dark:bg-dark-600 bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
 			</article>
 		</div>
 	);
diff --git a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx b/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
index 9857d2a66..aa7feeab8 100644
--- a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
@@ -2,12 +2,10 @@ import { addPackageToModel } from '@discordjs/scripts';
 import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
 import { ApiModel } from '@microsoft/api-extractor-model';
 import dynamic from 'next/dynamic';
-import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { PropsWithChildren } from 'react';
 import { Providers } from './providers';
 import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
-import vercelLogo from '~/assets/powered-by-vercel.svg';
 import { CmdKDialog } from '~/components/CmdK';
 import { Nav } from '~/components/Nav';
 import type { SidebarSectionItemData } from '~/components/Sidebar';
@@ -15,6 +13,7 @@ import { resolveItemURI } from '~/components/documentation/util';
 import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
 
 const Header = dynamic(async () => import('~/components/Header'));
+const Footer = dynamic(async () => import('~/components/Footer'));
 
 export interface VersionRouteParams {
 	package: string;
@@ -76,74 +75,8 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 				<article className="pt-18 lg:pl-76">
 					<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
 					<div className="h-76 md:h-52" />
-					<footer className="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 xl:pr-84 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
-						<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
-							<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
-								<a
-									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-									href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-									rel="noopener noreferrer"
-									target="_blank"
-									title="Vercel"
-								>
-									<Image alt="Vercel" src={vercelLogo} />
-								</a>
-								<div className="flex flex-row gap-6 md:gap-12">
-									<div className="flex flex-col gap-2">
-										<div className="text-lg font-semibold">Community</div>
-										<div className="flex flex-col gap-1">
-											<a
-												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-												href="https://discord.gg/djs"
-												rel="noopener noreferrer"
-												target="_blank"
-											>
-												Discord
-											</a>
-											<a
-												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-												href="https://github.com/discordjs/discord.js/discussions"
-												rel="noopener noreferrer"
-												target="_blank"
-											>
-												GitHub discussions
-											</a>
-										</div>
-									</div>
-									<div className="flex flex-col gap-2">
-										<div className="text-lg font-semibold">Project</div>
-										<div className="flex flex-col gap-1">
-											<a
-												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-												href="https://github.com/discordjs/discord.js"
-												rel="noopener noreferrer"
-												target="_blank"
-											>
-												discord.js
-											</a>
-											<a
-												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-												href="https://discordjs.guide"
-												rel="noopener noreferrer"
-												target="_blank"
-											>
-												discord.js guide
-											</a>
-											<a
-												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-												href="https://discord-api-types.dev"
-												rel="noopener noreferrer"
-												target="_blank"
-											>
-												discord-api-types
-											</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</footer>
 				</article>
+				<Footer />
 			</main>
 			<CmdKDialog />
 		</Providers>
diff --git a/apps/website/src/app/docs/packages/[package]/page.tsx b/apps/website/src/app/docs/packages/[package]/page.tsx
index d03f243a8..7b9f4426c 100644
--- a/apps/website/src/app/docs/packages/[package]/page.tsx
+++ b/apps/website/src/app/docs/packages/[package]/page.tsx
@@ -27,7 +27,7 @@ export default async function Page({ params }: { params: { package: string } })
 	const data = await getData(params.package);
 
 	return (
-		<div className="min-w-xs sm:w-md mx-auto flex h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-8 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a version:</h1>
 				{data.map((version, idx) => (
diff --git a/apps/website/src/app/docs/packages/page.tsx b/apps/website/src/app/docs/packages/page.tsx
index 64842c2e5..be810680c 100644
--- a/apps/website/src/app/docs/packages/page.tsx
+++ b/apps/website/src/app/docs/packages/page.tsx
@@ -10,7 +10,7 @@ export const runtime: ServerRuntime = 'edge';
 
 export default function Page() {
 	return (
-		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-8 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a package:</h1>
 				<a
diff --git a/apps/website/src/app/global-error.tsx b/apps/website/src/app/global-error.tsx
index 7b98bce46..d4cf21ddc 100644
--- a/apps/website/src/app/global-error.tsx
+++ b/apps/website/src/app/global-error.tsx
@@ -8,7 +8,7 @@ export default function GlobalError({ error }: { error: Error }) {
 
 	return (
 		<html className={inter.variable} lang="en" suppressHydrationWarning>
-			<body className="dark:bg-dark-800 bg-white">
+			<body className="dark:bg-dark-800 bg-light-600">
 				<Providers>
 					<main className="mx-auto h-screen max-w-2xl">
 						<div className="mx-auto flex h-screen max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index 4f24b1ca4..1b78c0055 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -72,7 +72,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
 		<html className={inter.variable} lang="en" suppressHydrationWarning>
-			<body className="dark:bg-dark-800 bg-white">
+			<body className="dark:bg-dark-800 bg-light-600">
 				<Providers>{children}</Providers>
 				<Analytics />
 			</body>
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 53f070508..5240e7617 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -7,7 +7,7 @@ import { CODE_EXAMPLE } from '~/util/constants';
 
 export default function Page() {
 	return (
-		<div className="mx-auto flex h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-6">
+		<div className="mx-auto flex h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-8">
 			<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
 				<div className="flex max-w-lg flex-col gap-3 lg:mr-8">
 					<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
@@ -44,7 +44,7 @@ export default function Page() {
 						</a>
 					</div>
 				</div>
-				<div className="max-w-sm sm:max-w-6xl">
+				<div className="max-w-xs sm:max-w-6xl">
 					{/* @ts-expect-error async component */}
 					<SyntaxHighlighter code={CODE_EXAMPLE} />
 				</div>
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
new file mode 100644
index 000000000..7f9d75801
--- /dev/null
+++ b/apps/website/src/components/Footer.tsx
@@ -0,0 +1,74 @@
+import Image from 'next/image';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
+
+export default function Footer() {
+	return (
+		<footer className="dark:bg-dark-800 h-76 lg:pl-84 bg-light-600 xl:pr-84 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
+			<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
+				<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
+					<a
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<Image alt="Vercel" src={vercelLogo} />
+					</a>
+					<div className="flex flex-row gap-6 md:gap-12">
+						<div className="flex flex-col gap-2">
+							<div className="text-lg font-semibold">Community</div>
+							<div className="flex flex-col gap-1">
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord.gg/djs"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									Discord
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js/discussions"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									GitHub discussions
+								</a>
+							</div>
+						</div>
+						<div className="flex flex-col gap-2">
+							<div className="text-lg font-semibold">Project</div>
+							<div className="flex flex-col gap-1">
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discordjs.guide"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js guide
+								</a>
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord-api-types.dev"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord-api-types
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
+}
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index 7dbd0c7bd..13e789819 100644
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -64,7 +64,7 @@ export default function Header() {
 	);
 
 	return (
-		<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+		<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
 			<div className="h-18 block px-6">
 				<div className="flex h-full flex-row place-content-between place-items-center">
 					<Button
diff --git a/apps/website/src/components/Nav.tsx b/apps/website/src/components/Nav.tsx
index e8e8eb823..f5219a91b 100644
--- a/apps/website/src/components/Nav.tsx
+++ b/apps/website/src/components/Nav.tsx
@@ -1,12 +1,14 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import { Scrollbars } from 'react-custom-scrollbars-2';
-import { PackageSelect } from './PackageSelect';
 import { Sidebar } from './Sidebar';
 import type { SidebarSectionItemData } from './Sidebar';
-import { VersionSelect } from './VersionSelect';
 import { useNav } from '~/contexts/nav';
 
+const PackageSelect = dynamic(async () => import('./PackageSelect'));
+const VersionSelect = dynamic(async () => import('./VersionSelect'));
+
 export function Nav({ members }: { members: SidebarSectionItemData[] }) {
 	const { opened } = useNav();
 
diff --git a/apps/website/src/components/OverloadSwitcher.tsx b/apps/website/src/components/OverloadSwitcher.tsx
index e9bb8a85e..2a7e6ee54 100644
--- a/apps/website/src/components/OverloadSwitcher.tsx
+++ b/apps/website/src/components/OverloadSwitcher.tsx
@@ -10,7 +10,7 @@ export interface OverloadSwitcherProps {
 	overloads: ReactNode[];
 }
 
-export function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ overloads: ReactNode[] }>) {
+export default function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ overloads: ReactNode[] }>) {
 	const [overloadIndex, setOverloadIndex] = useState(1);
 	const overloadedNode = overloads[overloadIndex - 1]!;
 	const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
@@ -18,7 +18,7 @@ export function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ ov
 	return (
 		<div className="flex flex-col place-items-start gap-2">
 			<MenuButton
-				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+				className="bg-light-700 hover:bg-light-800 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 				state={menu}
 			>
 				<div className="flex flex-row place-content-between place-items-center gap-2">
diff --git a/apps/website/src/components/PackageSelect.tsx b/apps/website/src/components/PackageSelect.tsx
index d1e09d279..1f895bcde 100644
--- a/apps/website/src/components/PackageSelect.tsx
+++ b/apps/website/src/components/PackageSelect.tsx
@@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation';
 import { useMemo } from 'react';
 import { PACKAGES } from '~/util/constants';
 
-export function PackageSelect() {
+export default function PackageSelect() {
 	const pathname = usePathname();
 	const packageName = pathname?.split('/').slice(3, 4)[0];
 
@@ -43,7 +43,7 @@ export function PackageSelect() {
 	return (
 		<>
 			<MenuButton
-				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 				state={packageMenu}
 			>
 				<div className="flex flex-row place-content-between place-items-center">
diff --git a/apps/website/src/components/Sidebar.tsx b/apps/website/src/components/Sidebar.tsx
index 05b2dc154..d4ffa07e9 100644
--- a/apps/website/src/components/Sidebar.tsx
+++ b/apps/website/src/components/Sidebar.tsx
@@ -84,7 +84,6 @@ function resolveIcon(item: string) {
 
 export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 	const pathname = usePathname();
-	const asPathWithoutQueryAndAnchor = `/${pathname?.split('/').splice(-1) ?? ''}`;
 	const { setOpened } = useNav();
 
 	const groupItems = useMemo(() => groupMembers(members), [members]);
@@ -98,7 +97,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 						{groupItems[group].map((member, index) => (
 							<ItemLink
 								className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
-									asPathWithoutQueryAndAnchor === member.href
+									pathname === member.href
 										? 'bg-blurple text-white'
 										: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
 								}`}
diff --git a/apps/website/src/components/VersionSelect.tsx b/apps/website/src/components/VersionSelect.tsx
index 2c73b8429..84be682c7 100644
--- a/apps/website/src/components/VersionSelect.tsx
+++ b/apps/website/src/components/VersionSelect.tsx
@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 import useSWR from 'swr';
 import { fetcher } from '~/util/fetcher';
 
-export function VersionSelect() {
+export default function VersionSelect() {
 	const pathname = usePathname();
 	const packageName = pathname?.split('/').slice(3, 4)[0];
 	const branchName = pathname?.split('/').slice(4, 5)[0];
@@ -36,7 +36,7 @@ export function VersionSelect() {
 	return (
 		<>
 			<MenuButton
-				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
 				state={versionMenu}
 			>
 				<div className="flex flex-row place-content-between place-items-center">
diff --git a/apps/website/src/components/model/function/Function.tsx b/apps/website/src/components/model/function/Function.tsx
index 4e286b138..c5449a124 100644
--- a/apps/website/src/components/model/function/Function.tsx
+++ b/apps/website/src/components/model/function/Function.tsx
@@ -1,8 +1,10 @@
 import type { ApiFunction } from '@microsoft/api-extractor-model';
-import { OverloadSwitcher } from '../../OverloadSwitcher';
+import dynamic from 'next/dynamic';
 import { FunctionBody } from './FunctionBody';
 import { Header } from '~/components/documentation/Header';
 
+const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher'));
+
 export function Function({ item }: { item: ApiFunction }) {
 	const header = <Header kind={item.kind} name={item.name} />;
 
diff --git a/apps/website/src/components/model/method/Method.tsx b/apps/website/src/components/model/method/Method.tsx
index fcceff397..8d4306a5d 100644
--- a/apps/website/src/components/model/method/Method.tsx
+++ b/apps/website/src/components/model/method/Method.tsx
@@ -4,10 +4,12 @@ import type {
 	ApiMethod,
 	ApiMethodSignature,
 } from '@microsoft/api-extractor-model';
-import { OverloadSwitcher } from '../../OverloadSwitcher';
+import dynamic from 'next/dynamic';
 import { MethodDocumentation } from './MethodDocumentation';
 import { MethodHeader } from './MethodHeader';
 
+const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher'));
+
 export function Method({
 	method,
 	inheritedFrom,
diff --git a/packages/ui/src/lib/components/Section.tsx b/packages/ui/src/lib/components/Section.tsx
index c015c5bf7..c3a38e009 100644
--- a/packages/ui/src/lib/components/Section.tsx
+++ b/packages/ui/src/lib/components/Section.tsx
@@ -29,7 +29,7 @@ export function Section({
 	return (
 		<div className={`flex flex-col ${className}`}>
 			<Disclosure
-				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+				className="hover:bg-light-800 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded bg-white p-3 outline-0 focus:ring"
 				state={disclosure}
 			>
 				<div className="flex flex-row place-content-between place-items-center">