Add dark mode to /cms

sergiodxa · Jan 31, 2024 · a50947b · a50947b
1 parent 19d181e
commit a50947b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 41 deletions.
diff --git a/app/routes/_layout.cms._index/create-like.tsx b/app/routes/_layout.cms._index/create-like.tsx
@@ -1,13 +1,10 @@
-import { Form } from "@remix-run/react";
-import {
-	Button,
-	Heading,
-	Input,
-	Label,
-	TextField,
-} from "react-aria-components";
+import { Heading } from "react-aria-components";
 
 import { useT } from "~/helpers/use-i18n.hook";
+import { Button } from "~/ui/Button";
+import { Input, Label } from "~/ui/Field";
+import { Form } from "~/ui/Form";
+import { TextField } from "~/ui/TextField";
 
 import { INTENT } from "./types";
 
@@ -16,30 +13,23 @@ export function CreateLike() {
 
 	return (
 		<div className="flex flex-col gap-5">
-			<Heading className="text-base font-semibold leading-6 text-gray-900">
+			<Heading className="text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-50">
 				{t("title")}
 			</Heading>
 
 			<Form
 				method="post"
-				className="flex items-end gap-2 rounded-lg bg-white px-4 py-5 shadow sm:p-6"
+				className="flex-row items-end gap-2 rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-zinc-600"
 				reloadDocument
 			>
 				<input type="hidden" name="intent" value={INTENT.createLike} />
-				<TextField type="url" className="flex flex-grow flex-col gap-0.5">
-					<Label className="text-sm font-medium text-gray-700">
-						{t("label")}
-					</Label>
-					<Input
-						name="url"
-						className="w-full rounded-md border-2 border-blue-600 bg-white px-4 py-2 text-base"
-					/>
+
+				<TextField type="url">
+					<Label>{t("label")}</Label>
+					<Input name="url" />
 				</TextField>
 
-				<Button
-					type="submit"
-					className="block flex-shrink-0 rounded-md border-2 border-blue-600 bg-blue-100 px-4 py-2 text-center text-base font-medium text-blue-900"
-				>
+				<Button type="submit" variant="primary">
 					{t("cta")}
 				</Button>
 			</Form>

diff --git a/app/routes/_layout.cms._index/last-day-search.tsx b/app/routes/_layout.cms._index/last-day-search.tsx
@@ -11,13 +11,13 @@ export function LastDaySearch() {
 
 	return (
 		<div className="flex flex-col gap-5">
-			<Heading className="text-base font-semibold leading-6 text-gray-900">
+			<Heading className="text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-50">
 				{t("title")}
 			</Heading>
 
 			<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-				<div className="flex flex-col gap-1 rounded-lg bg-white px-4 py-5 shadow sm:p-6">
-					<Heading className="text-base font-semibold leading-6 text-gray-900">
+				<div className="flex flex-col gap-1 rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-zinc-600">
+					<Heading className="text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-50">
 						Articles
 					</Heading>
 
@@ -30,8 +30,8 @@ export function LastDaySearch() {
 					</ul>
 				</div>
 
-				<div className="flex flex-col gap-1 rounded-lg bg-white px-4 py-5 shadow sm:p-6">
-					<Heading className="text-base font-semibold leading-6 text-gray-900">
+				<div className="flex flex-col gap-1 rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-zinc-600">
+					<Heading className="text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-50">
 						Tutorials
 					</Heading>
 

diff --git a/app/routes/_layout.cms._index/queries.ts b/app/routes/_layout.cms._index/queries.ts
@@ -30,6 +30,12 @@ export async function createQuickLike(
 	url: URL,
 	userId: UUID,
 ) {
+	let db = database(context.db);
+
+	let likes = await Like.list({ db });
+
+	if (likes.some((like) => like.url.toString() === url.toString())) return;
+
 	let response = await fetch(url, {
 		method: "GET",
 		redirect: "follow",
@@ -44,8 +50,6 @@ export async function createQuickLike(
 
 	if (!title) throw new Error("Couldn't find title for this URL");
 
-	let db = database(context.db);
-
 	await Like.create({ db }, { title, url: url.toString(), authorId: userId });
 }
 

diff --git a/app/routes/_layout.cms._index/stats.tsx b/app/routes/_layout.cms._index/stats.tsx
@@ -1,9 +1,10 @@
 import type { loader } from "./route";
 
-import { Link, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { Heading } from "react-aria-components";
 
 import { useT } from "~/helpers/use-i18n.hook";
+import { Link } from "~/ui/Link";
 
 export function Stats() {
 	let loaderData = useLoaderData<typeof loader>();
@@ -25,31 +26,27 @@ export function Stats() {
 
 	return (
 		<div className="flex flex-col gap-5">
-			<Heading className="text-base font-semibold leading-6 text-gray-900">
+			<Heading className="text-base font-semibold leading-6 text-zinc-900 dark:text-zinc-50">
 				{t("title")}
 			</Heading>
 
 			<dl className="grid grid-cols-1 gap-5 sm:grid-cols-3">
 				{stats.map((item) => (
 					<div
 						key={item.name}
-						className="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6"
+						className="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6 dark:bg-zinc-600"
 					>
 						<dt>
-							<p className="truncate text-sm font-medium text-gray-500">
+							<p className="truncate text-sm font-medium text-zinc-500 dark:text-zinc-300">
 								{item.name}
 							</p>
 						</dt>
 						<dd className="flex items-baseline pb-6 sm:pb-7">
-							<p className="text-2xl font-semibold text-gray-900">
+							<p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
 								{item.stat}
 							</p>
-							<div className="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
-								<Link
-									to={item.path}
-									prefetch="intent"
-									className="text-sm font-medium text-indigo-600 visited:text-indigo-600 hover:text-indigo-500"
-								>
+							<div className="absolute inset-x-0 bottom-0 bg-zinc-50 px-4 py-4 sm:px-6 dark:bg-zinc-700">
+								<Link href={item.path} prefetch="intent">
 									{t("viewAll")}
 								</Link>
 							</div>

diff --git a/app/routes/_layout.cms/nav.tsx b/app/routes/_layout.cms/nav.tsx
@@ -15,7 +15,7 @@ export function Navigation() {
 	] as const;
 
 	return (
-		<nav className="rounded-b-lg bg-blue-600" aria-label={t("label")}>
+		<nav className="rounded-lg bg-blue-600" aria-label={t("label")}>
 			<div className="flex w-full flex-col justify-between gap-4 border-b border-blue-500 py-6 md:flex-row md:items-center md:gap-10 lg:border-none">
 				<div className="flex flex-wrap items-center gap-x-6 gap-y-4 px-6">
 					{navigation.map((link) => (