Skip to content

Commit 63006ba

Browse files
steven-teysteven-tey
authored
Added dark mode 🥳 (#228)
1 parent e4f18e5 commit 63006ba

37 files changed

+233
-285
lines changed

‎app/app/(dashboard)/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
1010
<Profile />
1111
</Suspense>
1212
</Nav>
13-
<div className="sm:pl-60">{children}</div>
13+
<div className="min-h-screen dark:bg-black sm:pl-60">{children}</div>
1414
</div>
1515
);
1616
}

‎app/app/(dashboard)/loading.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import LoadingDots from "@/components/icons/loading-dots";
33
export default function Loading() {
44
return (
55
<>
6-
<div className="h-10 w-48 animate-pulse rounded-md bg-stone-100" />
6+
<div className="h-10 w-48 animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
77
<div className="flex h-full w-full items-center justify-center">
88
<LoadingDots />
99
</div>

‎app/app/(dashboard)/page.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,17 @@ export default function Overview() {
1010
return (
1111
<div className="flex max-w-screen-xl flex-col space-y-12 p-8">
1212
<div className="flex flex-col space-y-6">
13-
<h1 className="font-cal text-3xl font-bold">Overview</h1>
13+
<h1 className="font-cal text-3xl font-bold dark:text-white">
14+
Overview
15+
</h1>
1416
<OverviewStats />
1517
</div>
1618

1719
<div className="flex flex-col space-y-6">
1820
<div className="flex items-center justify-between">
19-
<h1 className="font-cal text-3xl font-bold">Top Sites</h1>
21+
<h1 className="font-cal text-3xl font-bold dark:text-white">
22+
Top Sites
23+
</h1>
2024
<Suspense fallback={null}>
2125
<OverviewSitesCTA />
2226
</Suspense>
@@ -35,7 +39,9 @@ export default function Overview() {
3539
</div>
3640

3741
<div className="flex flex-col space-y-6">
38-
<h1 className="font-cal text-3xl font-bold">Recent Posts</h1>
42+
<h1 className="font-cal text-3xl font-bold dark:text-white">
43+
Recent Posts
44+
</h1>
3945
<Suspense
4046
fallback={
4147
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">

‎app/app/(dashboard)/post/[id]/loading.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
export default function Loading() {
44
return (
55
<>
6-
<div className="h-10 w-48 animate-pulse rounded-md bg-stone-100" />
7-
<div className="h-96 w-full max-w-screen-md animate-pulse rounded-md bg-stone-100" />
6+
<div className="h-10 w-48 animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
7+
<div className="h-96 w-full max-w-screen-md animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
88
</>
99
);
1010
}

‎app/app/(dashboard)/post/[id]/settings/page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ export default async function PostSettings({
2525
return (
2626
<div className="flex max-w-screen-xl flex-col space-y-12 p-6">
2727
<div className="flex flex-col space-y-6">
28-
<h1 className="font-cal text-3xl font-bold">Post Settings</h1>
28+
<h1 className="font-cal text-3xl font-bold dark:text-white">
29+
Post Settings
30+
</h1>
2931
<Form
3032
title="Post Slug"
3133
description="The slug is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens."

‎app/app/(dashboard)/settings/page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export default async function SettingsPage() {
1212
return (
1313
<div className="flex max-w-screen-xl flex-col space-y-12 p-8">
1414
<div className="flex flex-col space-y-6">
15-
<h1 className="font-cal text-3xl font-bold">Settings</h1>
15+
<h1 className="font-cal text-3xl font-bold dark:text-white">
16+
Settings
17+
</h1>
1618
<Form
1719
title="Name"
1820
description="Your name on this app."

‎app/app/(dashboard)/site/[id]/analytics/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@ export default async function SiteAnalytics({
2727
<>
2828
<div className="flex items-center justify-center sm:justify-start">
2929
<div className="flex flex-col items-center space-x-0 space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
30-
<h1 className="font-cal text-xl font-bold sm:text-3xl">
30+
<h1 className="font-cal text-xl font-bold dark:text-white sm:text-3xl">
3131
Analytics for {data.name}
3232
</h1>
3333
<a
3434
href={`https://${url}`}
3535
target="_blank"
3636
rel="noreferrer"
37-
className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-200"
37+
className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-400"
3838
>
3939
{url} ↗
4040
</a>

‎app/app/(dashboard)/site/[id]/loading.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import PlacholderCard from "@/components/placeholder-card";
55
export default function Loading() {
66
return (
77
<>
8-
<div className="h-10 w-48 animate-pulse rounded-md bg-stone-100" />
8+
<div className="h-10 w-48 animate-pulse rounded-md bg-stone-100 dark:bg-stone-800" />
99
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
1010
{Array.from({ length: 8 }).map((_, i) => (
1111
<PlacholderCard key={i} />

‎app/app/(dashboard)/site/[id]/not-found.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,22 @@ import Image from "next/image";
33
export default function NotFoundSite() {
44
return (
55
<div className="mt-20 flex flex-col items-center space-x-4">
6-
<h1 className="font-cal text-4xl">404</h1>
6+
<h1 className="font-cal text-4xl dark:text-white">404</h1>
77
<Image
88
alt="missing site"
99
src="https://illustrations.popsy.co/gray/falling.svg"
1010
width={400}
1111
height={400}
12+
className="dark:hidden"
1213
/>
13-
<p className="text-lg text-stone-500">
14+
<Image
15+
alt="missing site"
16+
src="https://illustrations.popsy.co/white/falling.svg"
17+
width={400}
18+
height={400}
19+
className="hidden dark:block"
20+
/>
21+
<p className="text-lg text-stone-500 dark:text-stone-400">
1422
Site does not exist, or you do not have permission to view it
1523
</p>
1624
</div>

‎app/app/(dashboard)/site/[id]/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default async function SitePosts({
2929
<>
3030
<div className="flex flex-col items-center justify-between space-y-4 sm:flex-row sm:space-y-0">
3131
<div className="flex flex-col items-center space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
32-
<h1 className="w-60 truncate font-cal text-xl font-bold sm:w-auto sm:text-3xl">
32+
<h1 className="w-60 truncate font-cal text-xl font-bold dark:text-white sm:w-auto sm:text-3xl">
3333
All Posts for {data.name}
3434
</h1>
3535
<a
@@ -40,7 +40,7 @@ export default async function SitePosts({
4040
}
4141
target="_blank"
4242
rel="noreferrer"
43-
className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-200"
43+
className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-400"
4444
>
4545
{url} ↗
4646
</a>

‎app/app/(dashboard)/site/[id]/settings/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default async function SiteAnalyticsLayout({
3030
return (
3131
<>
3232
<div className="flex flex-col items-center space-x-4 space-y-2 sm:flex-row sm:space-y-0">
33-
<h1 className="font-cal text-xl font-bold sm:text-3xl">
33+
<h1 className="font-cal text-xl font-bold dark:text-white sm:text-3xl">
3434
Settings for {data.name}
3535
</h1>
3636
<a
@@ -41,7 +41,7 @@ export default async function SiteAnalyticsLayout({
4141
}
4242
target="_blank"
4343
rel="noreferrer"
44-
className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-200"
44+
className="truncate rounded-md bg-stone-100 px-2 py-1 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-400"
4545
>
4646
{url} ↗
4747
</a>

‎app/app/(dashboard)/site/[id]/settings/nav.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,17 @@ export default function SiteSettingsNav() {
2727
];
2828

2929
return (
30-
<div className="flex space-x-4 border-b border-stone-200 pb-4 pt-2">
30+
<div className="flex space-x-4 border-b border-stone-200 dark:border-stone-700 pb-4 pt-2">
3131
{navItems.map((item) => (
3232
<Link
3333
key={item.name}
3434
href={item.href}
3535
// Change style depending on whether the link is active
3636
className={clsx(
37-
"rounded-md px-2 py-1 text-sm font-medium transition-colors active:bg-stone-200",
37+
"rounded-md px-2 py-1 text-sm font-medium transition-colors active:bg-stone-200 dark:active:bg-stone-600",
3838
segment === item.segment
39-
? "bg-stone-100 text-stone-600"
40-
: "text-stone-600 hover:bg-stone-100",
39+
? "bg-stone-100 text-stone-600 dark:bg-stone-800 dark:text-stone-400"
40+
: "text-stone-600 hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-800",
4141
)}
4242
>
4343
{item.name}

‎app/app/(dashboard)/sites/page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export default function AllSites({ params }: { params: { id: string } }) {
99
<div className="flex max-w-screen-xl flex-col space-y-12 p-8">
1010
<div className="flex flex-col space-y-6">
1111
<div className="flex items-center justify-between">
12-
<h1 className="font-cal text-3xl font-bold">All Sites</h1>
12+
<h1 className="font-cal text-3xl font-bold dark:text-white">
13+
All Sites
14+
</h1>
1315
<CreateSiteButton>
1416
<CreateSiteModal />
1517
</CreateSiteButton>

‎app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function RootLayout({
1818
children: React.ReactNode;
1919
}) {
2020
return (
21-
<html lang="en">
21+
<html lang="en" suppressHydrationWarning>
2222
<body className={clsx(cal.variable, inter.variable)}>
2323
<Providers>
2424
{children}

‎app/providers.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { ModalProvider } from "@/components/modal/provider";
77
export function Providers({ children }: { children: React.ReactNode }) {
88
return (
99
<SessionProvider>
10-
<Toaster />
10+
<Toaster className="dark:hidden" />
11+
<Toaster theme="dark" className="hidden dark:block" />
1112
<ModalProvider>{children}</ModalProvider>
1213
</SessionProvider>
1314
);

‎components/create-post-button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export default function CreatePostButton() {
2525
className={clsx(
2626
"flex h-8 w-36 items-center justify-center space-x-2 rounded-lg border text-sm transition-all focus:outline-none sm:h-9",
2727
isPending
28-
? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
29-
: "border border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100",
28+
? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300"
29+
: "border border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100 dark:border-stone-700 dark:hover:border-stone-200 dark:hover:bg-black dark:hover:text-white dark:active:bg-stone-800",
3030
)}
3131
disabled={isPending}
3232
>

‎components/create-site-button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function CreateSiteButton({
1212
return (
1313
<button
1414
onClick={() => modal?.show(children)}
15-
className="rounded-lg border border-black bg-black px-4 py-1.5 text-sm font-medium text-white transition-all hover:bg-white hover:text-black active:bg-stone-100"
15+
className="rounded-lg border border-black bg-black px-4 py-1.5 text-sm font-medium text-white transition-all hover:bg-white hover:text-black active:bg-stone-100 dark:border-stone-700 dark:hover:border-stone-200 dark:hover:bg-black dark:hover:text-white dark:active:bg-stone-800"
1616
>
1717
Create New Site
1818
</button>

‎components/editor/extensions/slash-command.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const getSuggestionItems = ({ query }: { query: string }) => {
7777
title: "Continue writing",
7878
description: "Use AI to expand your thoughts.",
7979
searchTerms: ["gpt"],
80-
icon: <Magic className="w-7 text-black" />,
80+
icon: <Magic className="w-7 text-black dark:text-white" />,
8181
},
8282
{
8383
title: "Send Feedback",
@@ -340,18 +340,20 @@ const CommandList = ({
340340
<div
341341
id="slash-command"
342342
ref={commandListContainer}
343-
className="z-50 h-auto max-h-[330px] w-72 overflow-y-auto scroll-smooth rounded-md border border-stone-200 bg-white px-1 py-2 shadow-md transition-all"
343+
className="z-50 h-auto max-h-[330px] w-72 overflow-y-auto scroll-smooth rounded-md border border-stone-200 bg-white px-1 py-2 shadow-md transition-all dark:border-stone-700 dark:bg-black"
344344
>
345345
{items.map((item: CommandItemProps, index: number) => {
346346
return (
347347
<button
348-
className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-stone-900 hover:bg-stone-100 ${
349-
index === selectedIndex ? "bg-stone-100 text-stone-900" : ""
348+
className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-stone-900 hover:bg-stone-100 dark:text-white dark:hover:bg-stone-800 ${
349+
index === selectedIndex
350+
? "bg-stone-100 text-stone-900 dark:bg-stone-800 dark:text-white"
351+
: ""
350352
}`}
351353
key={index}
352354
onClick={() => selectItem(index)}
353355
>
354-
<div className="flex h-10 w-10 items-center justify-center rounded-md border border-stone-200 bg-white">
356+
<div className="flex h-10 w-10 items-center justify-center rounded-md border border-stone-200 bg-white dark:border-stone-700 dark:bg-black">
355357
{item.title === "Continue writing" && isLoading ? (
356358
<LoadingCircle />
357359
) : (

‎components/editor/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default function Editor({ post }: { post: PostWithSite }) {
164164
}, [editor, post, hydrated]);
165165

166166
return (
167-
<div className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg">
167+
<div className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 p-12 px-8 dark:border-stone-700 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg">
168168
<div className="absolute right-5 top-5 mb-5 flex items-center space-x-3">
169169
{data.published && (
170170
<a
@@ -176,7 +176,7 @@ export default function Editor({ post }: { post: PostWithSite }) {
176176
<ExternalLink className="h-4 w-4" />
177177
</a>
178178
)}
179-
<div className="rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
179+
<div className="rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400 dark:bg-stone-800 dark:text-stone-500">
180180
{isPendingSaving ? "Saving..." : "Saved"}
181181
</div>
182182
<button
@@ -200,8 +200,8 @@ export default function Editor({ post }: { post: PostWithSite }) {
200200
className={clsx(
201201
"flex h-7 w-24 items-center justify-center space-x-2 rounded-lg border text-sm transition-all focus:outline-none",
202202
isPendingPublishing
203-
? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
204-
: "border border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100",
203+
? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300"
204+
: "border border-black bg-black text-white hover:bg-white hover:text-black active:bg-stone-100 dark:border-stone-700 dark:hover:border-stone-200 dark:hover:bg-black dark:hover:text-white dark:active:bg-stone-800",
205205
)}
206206
disabled={isPendingPublishing}
207207
>
@@ -212,20 +212,20 @@ export default function Editor({ post }: { post: PostWithSite }) {
212212
)}
213213
</button>
214214
</div>
215-
<div className="mb-5 flex flex-col space-y-3 border-b border-stone-200 pb-5">
215+
<div className="mb-5 flex flex-col space-y-3 border-b border-stone-200 pb-5 dark:border-stone-700">
216216
<input
217217
type="text"
218218
placeholder="Title"
219219
defaultValue={post?.title || ""}
220220
autoFocus
221221
onChange={(e) => setData({ ...data, title: e.target.value })}
222-
className="border-none px-0 font-cal text-3xl placeholder:text-stone-400 focus:outline-none focus:ring-0"
222+
className="dark:placeholder-text-600 border-none px-0 font-cal text-3xl placeholder:text-stone-400 focus:outline-none focus:ring-0 dark:bg-black dark:text-white"
223223
/>
224224
<TextareaAutosize
225225
placeholder="Description"
226226
defaultValue={post?.description || ""}
227227
onChange={(e) => setData({ ...data, description: e.target.value })}
228-
className="w-full resize-none border-none px-0 placeholder:text-stone-400 focus:outline-none focus:ring-0"
228+
className="dark:placeholder-text-600 w-full resize-none border-none px-0 placeholder:text-stone-400 focus:outline-none focus:ring-0 dark:bg-black dark:text-white"
229229
/>
230230
</div>
231231
{editor && <EditorBubbleMenu editor={editor} />}

‎components/editor/props.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { EditorProps } from "@tiptap/pm/view";
33

44
export const TiptapEditorProps: EditorProps = {
55
attributes: {
6-
class: "prose prose-headings:font-cal focus:outline-none max-w-full",
6+
class:
7+
"prose prose-stone prose-headings:font-cal focus:outline-none max-w-full dark:prose-invert",
78
},
89
handleDOMEvents: {
910
keydown: (_view, event) => {

‎components/form/delete-post-form.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ export default function DeletePostForm({ postName }: { postName: string }) {
2626
}
2727
})
2828
}
29-
className="rounded-lg border border-red-600 bg-white"
29+
className="rounded-lg border border-red-600 bg-white dark:bg-black"
3030
>
3131
<div className="relative flex flex-col space-y-4 p-5 sm:p-10">
32-
<h2 className="font-cal text-xl">Delete Post</h2>
33-
<p className="text-sm text-stone-500">
32+
<h2 className="font-cal text-xl dark:text-white">Delete Post</h2>
33+
<p className="text-sm text-stone-500 dark:text-stone-400">
3434
Deletes your post permanently. Type in the name of your post{" "}
3535
<b>{postName}</b> to confirm.
3636
</p>
@@ -41,12 +41,12 @@ export default function DeletePostForm({ postName }: { postName: string }) {
4141
required
4242
pattern={postName}
4343
placeholder={postName}
44-
className="w-full max-w-md rounded-md border border-stone-300 text-sm text-stone-900 placeholder-stone-300 focus:border-stone-500 focus:outline-none focus:ring-stone-500"
44+
className="w-full max-w-md rounded-md border border-stone-300 text-sm text-stone-900 placeholder-stone-300 focus:border-stone-500 focus:outline-none focus:ring-stone-500 dark:border-stone-600 dark:bg-black dark:text-white dark:placeholder-stone-700"
4545
/>
4646
</div>
4747

48-
<div className="flex flex-col items-center justify-center space-y-2 rounded-b-lg border-t border-stone-200 bg-stone-50 p-3 sm:flex-row sm:justify-between sm:space-y-0 sm:px-10">
49-
<p className="text-center text-sm text-stone-500">
48+
<div className="flex flex-col items-center justify-center space-y-2 rounded-b-lg border-t border-stone-200 bg-stone-50 p-3 dark:border-stone-700 dark:bg-stone-800 sm:flex-row sm:justify-between sm:space-y-0 sm:px-10">
49+
<p className="text-center text-sm text-stone-500 dark:text-stone-400">
5050
This action is irreversible. Please proceed with caution.
5151
</p>
5252
<div className="w-32">
@@ -64,8 +64,8 @@ function FormButton() {
6464
className={clsx(
6565
"flex h-8 w-32 items-center justify-center space-x-2 rounded-md border text-sm transition-all focus:outline-none sm:h-10",
6666
pending
67-
? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400"
68-
: "border-red-600 bg-red-600 text-white hover:bg-white hover:text-red-600",
67+
? "cursor-not-allowed border-stone-200 bg-stone-100 text-stone-400 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300"
68+
: "border-red-600 bg-red-600 text-white hover:bg-white hover:text-red-600 dark:hover:bg-transparent",
6969
)}
7070
disabled={pending}
7171
>

0 commit comments

Comments
 (0)