[FEATURE]: updated content page to have same colours as Huys' (#73)

* feature: updated content page to have same colours as Huys' * chore: clean up eslint warnings
kwicherbelliaken · May 1, 2023 · 6fb12d3 · 6fb12d3
1 parent 66f71e6
commit 6fb12d3
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 39 deletions.
diff --git a/app/components/Paragraph.tsx b/app/components/Paragraph.tsx
@@ -20,7 +20,7 @@ const Paragraph = <BlockType extends object>({
         const isItalic = text.annotations.italic;
 
         const richProps = {
-          className: `font-sim text-lg text-midnight-light inline selection:bg-yellow-meringue  
+          className: `font-sim text-lg text-black-pearl inline selection:bg-yellow-meringue  
           ${isBold ? "font-bold" : ""} 
           ${isItalic ? "italic" : ""} 
           ${isUnderlined ? "underline" : ""}`,

diff --git a/app/components/RichText.tsx b/app/components/RichText.tsx
@@ -9,24 +9,4 @@ const RichText = ({
   ...styleProps
 }: PropsWithChildren<RichTextProps>) => <p {...styleProps}>{children}</p>;
 
-export default RichText;
-
-// type Apple = {
-//   hasSeeds: boolean;
-//   name: string;
-// };
-
-// type Banana = {
-//   name: string;
-// };
-
-// type Fruit = Banana | Apple;
-
-// const isApple = (check: Fruit): check is Apple => {
-//   return (check as Apple).hasSeeds !== "undefined";
-// };
-
-// function pluck<DataType, KeyType extends keyof DataType>(
-//   items: DataType[],
-//   key: KeyType
-// ) {}
+export default RichText;
diff --git a/app/components/Title.tsx b/app/components/Title.tsx
@@ -9,7 +9,12 @@ const H1 = ({
   <h1 className={classNames(styleProps?.join(" "))}>{children}</h1>
 );
 
-const H2 = ({ children }: PropsWithChildren<{}>) => <h2>{children}</h2>;
+const H2 = ({
+  children,
+  styleProps,
+}: PropsWithChildren<{ styleProps?: Array<string> }>) => (
+  <h2 className={classNames(styleProps?.join(" "))}>{children}</h2>
+);
 
 const H3 = ({
   children,

diff --git a/app/routes/braindumps.list.$braindumpId.tsx b/app/routes/braindumps.list.$braindumpId.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useEffect, useState, Fragment, useMemo } from "react";
-import { HeadersFunction, json } from "@remix-run/node";
+import { type HeadersFunction, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import notionClient from "~/integrations/notion";
 
@@ -9,7 +9,6 @@ import A from "~/components/A";
 import Title from "~/components/Title";
 import CodeBlock from "~/components/CodeBlock";
 import Paragraph from "~/components/Paragraph";
-import { PillButton } from "~/components/button";
 import ImageContainer from "~/components/ImageContainer";
 import PageTransition from "~/components/pageTransition";
 
@@ -108,16 +107,26 @@ export default function BraindumpIndex() {
 
   if (!braindumpContent || !braindumpMeta) return null;
 
+  const PillContainer = ({ children }: PropsWithChildren) => (
+    <div className="relative block w-fit cursor-default rounded-full py-1 px-2 text-sm text-graphite-huy outline outline-graphite-huy">
+      {children}
+    </div>
+  );
+
+  // todo: sometimes multiple categories apply to a particular braindump
   const Header = () => (
     <div className="mb-12 flex flex-col">
-      <Title.H1 styleProps={["text-8xl"]}>
+      <Title.H1 styleProps={["text-8xl text-graphite-merlin pb-4"]}>
         {braindumpMeta["properties"]["title"]["title"][0]["plain_text"]}
       </Title.H1>
-      <div className="space-between flex w-full flex-row justify-around pt-6">
-        <PillButton>{braindumpMeta["created_time"]}</PillButton>
-        <PillButton>Uncategorised</PillButton>
+
+      <div className="flex flex-col gap-4 px-4">
+        <div className="cursor-default text-sm text-graphite-huy">
+          Posted on{" "}
+          {new Date(braindumpMeta["created_time"]).toLocaleDateString()}
+        </div>
+        <PillContainer>Uncategorised</PillContainer>
       </div>
-      <div>POSTED_ON_PLACEHOLDER</div>
     </div>
   );
 
@@ -262,7 +271,7 @@ const InnerLayout = ({ children }: PropsWithChildren<{}>) => {
 
   return (
     <div
-      className={`transistion flex h-full w-full flex-col items-center bg-white p-4 duration-1000 ease-out`}
+      className={`transistion flex h-full w-full flex-col items-center bg-stone-50 p-4 duration-1000 ease-out`}
       style={{ borderRadius: borderRadius }}
     >
       {children}
@@ -282,21 +291,21 @@ const useNotionInterpretBlocks = (
 
           case "heading_1":
             return (
-              <Title.H1 key={block.id}>
+              <Title.H1 key={block.id} styleProps={["text-graphite-merlin"]}>
                 {block.heading_1.rich_text[0]?.plain_text}
               </Title.H1>
             );
 
           case "heading_2":
             return (
-              <Title.H2 key={block.id}>
+              <Title.H2 key={block.id} styleProps={["text-graphite-merlin"]}>
                 {block.heading_2.rich_text[0]?.plain_text}
               </Title.H2>
             );
 
           case "heading_3":
             return (
-              <Title.H3 key={block.id}>
+              <Title.H3 key={block.id} styleProps={["text-graphite-merlin"]}>
                 {block.heading_3.rich_text[0]?.plain_text}
               </Title.H3>
             );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
         sim: ["Suisse Intl Mono"],
       },
       fontSize: {
-        base: ['1rem', '1.65'],
+        base: ["1rem", "1.65"],
       },
       gridTemplateRows: {
         // TODO: do not extend tailwind theme, add this as custom class inline
@@ -26,16 +26,20 @@ module.exports = {
       black: colors.black,
       rose: colors.rose,
       teal: colors.teal,
+      stone: colors.stone,
       graphite: {
-        lightest: "#E1DFE1",
-        light: "#C7C7C7",
+        huy: "#6C7871",
         dark: "#54545C",
-        "light-green": "#8C9490",
+        light: "#C7C7C7",
+        merlin: "#44403C",
+        lightest: "#E1DFE1",
         "dark-green": "#545c54",
+        "light-green": "#8C9490",
       },
       midnight: {
-        light: "#191919",
         dark: "#202226",
+        light: "#191919",
+        "black-pearl": "#17191C",
       },
       pink: "#FADAD8",
       white: "#FFF",