mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-21 01:04:42 +12:00
refactor(website): dark mode
This commit is contained in:
iCrawl
parent
78e02c4b63
commit
24c462bf6f
12 changed files with 23 additions and 12 deletions
|
|
@ -10,7 +10,7 @@ export default function Layout({ children }: PropsWithChildren) {
|
|||
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
|
||||
<Header />
|
||||
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
|
||||
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_100px)]">
|
||||
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_105px)]">
|
||||
<Nav />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export const metadata: Metadata = {
|
|||
export default function RootLayout({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
|
||||
<body className="dark:bg-dark-800 bg-light-600">
|
||||
<body className="dark:bg-dark-600 bg-light-600">
|
||||
<Providers>{children}</Providers>
|
||||
<Analytics />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
|
|||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="dark:bg-dark-800 bg-light-600 md:pl-12 md:pr-12">
|
||||
<footer className="md:pl-12 md:pr-12">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default function Header() {
|
|||
);
|
||||
|
||||
return (
|
||||
<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md">
|
||||
<header className="dark:bg-dark-600/75 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/75 shadow backdrop-blur-md">
|
||||
<div className="block h-16 px-6">
|
||||
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export function Nav() {
|
|||
|
||||
return (
|
||||
<nav
|
||||
className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
|
||||
className={`dark:bg-dark-600/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
|
||||
opened ? 'block' : 'hidden'
|
||||
} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default async function PackageLayout({ children, params }: PropsWithChild
|
|||
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
|
||||
<Header />
|
||||
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
|
||||
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_100px)]">
|
||||
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_105px)]">
|
||||
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export const metadata: Metadata = {
|
|||
export default function RootLayout({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
|
||||
<body className="dark:bg-dark-800 bg-light-600">
|
||||
<body className="dark:bg-dark-600 bg-light-600 dark:text-light-900">
|
||||
<Providers>{children}</Providers>
|
||||
<Analytics />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
|
|||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="dark:bg-dark-800 bg-light-600 md:pl-12 md:pr-12">
|
||||
<footer className="md:pl-12 md:pr-12">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default function Header() {
|
|||
);
|
||||
|
||||
return (
|
||||
<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md">
|
||||
<header className="dark:bg-dark-600/75 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/75 shadow backdrop-blur-md">
|
||||
<div className="block h-16 px-6">
|
||||
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
|
|||
|
||||
return (
|
||||
<nav
|
||||
className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
|
||||
className={`dark:bg-dark-600/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
|
||||
opened ? 'block' : 'hidden'
|
||||
} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,12 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
|
|||
{(Object.keys(groupItems) as (keyof GroupedMembers)[])
|
||||
.filter((group) => groupItems[group].length)
|
||||
.map((group, idx) => (
|
||||
<Section icon={resolveIcon(group)} key={`${group}-${idx}`} title={group}>
|
||||
<Section
|
||||
buttonClassName="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"
|
||||
icon={resolveIcon(group)}
|
||||
key={`${group}-${idx}`}
|
||||
title={group}
|
||||
>
|
||||
{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 ${
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import type { PropsWithChildren } from 'react';
|
|||
|
||||
export interface SectionOptions {
|
||||
background?: boolean | undefined;
|
||||
buttonClassName?: string;
|
||||
className?: string;
|
||||
defaultClosed?: boolean | undefined;
|
||||
dense?: boolean | undefined;
|
||||
|
|
@ -25,13 +26,18 @@ export function Section({
|
|||
gutter = false,
|
||||
children,
|
||||
className = '',
|
||||
buttonClassName = '',
|
||||
}: PropsWithChildren<SectionOptions>) {
|
||||
const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col ${className}`}>
|
||||
<Disclosure
|
||||
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"
|
||||
className={
|
||||
buttonClassName
|
||||
? buttonClassName
|
||||
: 'hover:bg-light-800 active:bg-light-900 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-200 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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue