feat: dark mode (#219)

load1n9 · iuioiua · web-flow · commit 6576159875fb · 2023-06-05T10:53:38.000+10:00
* feat(WIP): dark mode

* feat: dark mode

* feat: hover styles + fmt

* Update utils/constants.ts

Co-authored-by: Asher Gomez &lt;ashersaupingomez@gmail.com&gt;

* tweaks

---------

Co-authored-by: Asher Gomez &lt;ashersaupingomez@gmail.com&gt;
diff --git a/components/ItemSummary.tsx b/components/ItemSummary.tsx
@@ -11,19 +11,26 @@ export interface ItemSummaryProps {
 
 export default function ItemSummary(props: ItemSummaryProps) {
   return (
-    <div class="py-2 flex gap-2 text-gray-500">
+    <div class="py-2 flex gap-2">
       <VoteButton
         item={props.item}
         isVoted={props.isVoted}
       />
       <div>
         <span class="mr-2">
-          <a class="text-black hover:underline" href={`/item/${props.item.id}`}>
+          <a
+            class="hover:underline"
+            href={`/item/${props.item.id}`}
+          >
             {props.item.title}
           </a>
         </span>
         <span>
-          <a class="hover:underline" href={props.item.url} target="_blank">
+          <a
+            class="hover:underline text-gray-500"
+            href={props.item.url}
+            target="_blank"
+          >
             {new URL(props.item.url).host} ↗
           </a>
         </span>
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -70,7 +70,7 @@ function Footer(props: JSX.HTMLAttributes<HTMLElement>) {
       {...props}
       class={`flex flex-col md:flex-row p-4 justify-between gap-y-4 ${SITE_WIDTH_STYLES} ${
         props.class ?? ""
-      }`}
+      } `}
     >
       <span>
         <strong>{SITE_NAME}</strong>
@@ -133,7 +133,7 @@ export default function Layout(props: LayoutProps) {
   ];
 
   return (
-    <div class="flex flex-col min-h-screen">
+    <div class="flex flex-col min-h-screen dark:bg-gray-900 dark:text-white">
       <Notice />
       <Header>
         <Nav items={headerNavItems} />
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -60,7 +60,7 @@ function PageSelector(props: { currentPage: number; lastPage: number }) {
       <form class="inline-flex items-center gap-x-2">
         <input
           id="current_page"
-          class={`bg-white rounded rounded-lg outline-none w-full border-1 border-gray-300 hover:border-black transition duration-300 disabled:(opacity-50 cursor-not-allowed) rounded-md px-2 py-1`}
+          class={`bg-transparent rounded rounded-lg outline-none w-full border-1 border-gray-500 hover:border-black transition duration-300 disabled:(opacity-50 cursor-not-allowed) rounded-md px-2 py-1 dark:(hover:border-white)`}
           type="number"
           name="page"
           min="1"
diff --git a/routes/item/[id].tsx b/routes/item/[id].tsx
@@ -114,10 +114,8 @@ export default function ItemPage(props: PageProps<ItemPageData>) {
             <button type="submit" class={BUTTON_STYLES}>Comment</button>
           </form>
           <div>
-            <h2>
-              <strong>
-                {pluralize(props.data.comments.length, "comment")}
-              </strong>
+            <h2 class="font-bold">
+              {pluralize(props.data.comments.length, "comment")}
             </h2>
             {props.data.comments.sort((a, b) =>
               b.createdAt.getTime() - a.createdAt.getTime()
diff --git a/routes/pricing.tsx b/routes/pricing.tsx
@@ -44,7 +44,7 @@ interface PricingCardProps {
 
 function PricingCard(props: PricingCardProps) {
   return (
-    <div class="flex-1 space-y-4 p-4 ring-1 ring-gray-300 rounded-xl text-center">
+    <div class="flex-1 space-y-4 p-4 ring-1 ring-gray-300 rounded-xl text-center dark:bg-gray-700">
       <div>
         <h3 class="text-2xl font-bold">
           {props.name}
diff --git a/routes/submit.tsx b/routes/submit.tsx
@@ -76,7 +76,9 @@ export default function SubmitPage(props: PageProps<State>) {
       <Head title="Submit" href={props.url.href} />
       <Layout session={props.data.sessionId}>
         <div class="flex-1 flex flex-col justify-center max-w-sm mx-auto w-full space-y-8">
-          <h1 class="text-center text-2xl font-bold">Share your project</h1>
+          <h1 class="text-center text-2xl font-bold">
+            Share your project
+          </h1>
           <Form />
         </div>
       </Layout>
diff --git a/utils/constants.ts b/utils/constants.ts
@@ -6,12 +6,12 @@ export const REDIRECT_PATH_AFTER_LOGIN = "/";
 /**
  * These are base styles for some elements. This approach is chosen as it avoids more complex alternatives:
  * 1. Writing custom classes in Tailwind CSS (see https://tailwindcss.com/docs/reusing-styles#compared-to-css-abstractions)
- * 2. Writing custom components which offer no additional funtionality beyond styling
+ * 2. Writing custom components which offer no additional functionality beyond styling
  */
 export const BUTTON_STYLES =
-  "px-4 py-2 bg-pink-700 hover:bg-white text-white hover:text-pink-700 text-lg rounded-lg border-2 border-pink-700 transition duration-300 disabled:(opacity-50 cursor-not-allowed)";
+  "px-4 py-2 bg-pink-700 text-white text-lg rounded-lg border-2 border-pink-700 transition duration-300 disabled:(opacity-50 cursor-not-allowed) hover:(bg-transparent text-pink-700)";
 export const INPUT_STYLES =
-  "px-4 py-2 bg-white rounded rounded-lg outline-none w-full border-1 border-gray-300 hover:border-black transition duration-300 disabled:(opacity-50 cursor-not-allowed)";
+  "px-4 py-2 bg-transparent rounded rounded-lg outline-none w-full border-1 border-gray-500 hover:border-black transition duration-300 disabled:(opacity-50 cursor-not-allowed) dark:(hover:border-white)";
 export const NOTICE_STYLES =
   "px-4 py-2 rounded-lg bg-yellow-100 text-yellow-700";
 export const SITE_WIDTH_STYLES = "mx-auto max-w-7xl w-full";
