Update styling on newsletter page

drewlyton · Aug 20, 2023 · c3a10bd · c3a10bd
1 parent d9b0af2
commit c3a10bd
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/app/emails/NewPostNewsletter.tsx b/app/emails/NewPostNewsletter.tsx
@@ -9,7 +9,6 @@ import {
 import { getMDXComponent } from "mdx-bundler/client";
 import { PropsWithChildren } from "react";
 import type Story from "~/data/Story";
-import { TailwindEmailConfig } from "./TailwindEmailConfig";
 
 type NewsletterEmailProps = {
   messageBody?: string[];
@@ -54,6 +53,7 @@ export function NewPostNewsletter({
       </Section>
       <Button
         href={`https://www.drewis.cool/story/${story.slug}?ref=newsletter`}
+        className="text-black"
       >
         <Section>
           <div className="border border-solid rounded-md border-gray-300 my-6">
@@ -62,12 +62,8 @@ export function NewPostNewsletter({
               className="rounded-t-md"
               width={"100%"}
             />
-            <Text className="text-xl px-5 font-bold text-black ">
-              {story.title}
-            </Text>
-            <Text className="px-5 text-base text-black ">
-              {story.description}
-            </Text>
+            <Text className="text-xl px-5 font-bold">{story.title}</Text>
+            <Text className="px-5 text-base">{story.description}</Text>
           </div>
         </Section>
       </Button>
@@ -94,7 +90,7 @@ const MDXText: React.FC<PropsWithChildren> = ({ children }) => {
 
 const MDXBlockQuote: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <blockquote className="m-0 pl-8 border-solid border-0 border-l-4 border-l-[#F66100] italic">
+    <blockquote className="m-0 pl-8 border-solid border-0 border-l-4 !border-l-black italic">
       {children}
     </blockquote>
   );

diff --git a/app/helpers/useTheme.tsx b/app/helpers/useTheme.tsx
@@ -8,7 +8,7 @@ import React, {
 } from "react";
 
 type themeContextValue = {
-  theme: themeValue;
+  theme: ThemeValue;
   toggleTheme: () => any;
 };
 
@@ -17,22 +17,24 @@ const Theme = createContext<themeContextValue>({
   toggleTheme: () => {}
 });
 
-type themeValue = "apache" | "midnight";
+type ThemeValue = "apache" | "midnight";
 
-function switchThemeValue(oldValue: themeValue): themeValue {
+function switchThemeValue(oldValue: ThemeValue): ThemeValue {
   return oldValue === "apache" ? "midnight" : "apache";
 }
 
 export const ThemeContext: React.FC<PropsWithChildren> = ({ children }) => {
-  const [theme, setTheme] = useState<themeValue>("apache");
+  const [theme, setTheme] = useState<ThemeValue>("apache");
 
   useEffect(() => {
+    // Restore theme from localstorage if we've got one
     setTheme(
-      (oldValue) => (localStorage.getItem("theme") as themeValue) || oldValue
+      (oldValue) => (localStorage.getItem("theme") as ThemeValue) || oldValue
     );
   }, []);
 
   useEffect(() => {
+    // When theme value changes, update the document body
     theme === "apache"
       ? document.documentElement.classList.remove("dark")
       : document.documentElement.classList.add("dark");

diff --git a/app/routes/newsletter/$issueNumber/index.tsx b/app/routes/newsletter/$issueNumber/index.tsx
@@ -1,11 +1,14 @@
+import { render } from "@react-email/render";
 import { LoaderArgs, json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
+import { useEffect } from "react";
 import GetNewsletter from "~/data/GetNewsletter";
 import { Newsletter } from "~/data/Newsletter";
 import { client } from "~/data/client";
 import { EmailLayout } from "~/emails/EmailLayout";
 import { NewPostNewsletter } from "~/emails/NewPostNewsletter";
 import { getMessageBodyMarkdown } from "~/helpers/getMessageBodyMarkdown";
+import { useTheme } from "~/helpers/useTheme";
 
 export async function loader({ params }: LoaderArgs) {
   const issueNumber = params.issueNumber;
@@ -31,15 +34,26 @@ export async function loader({ params }: LoaderArgs) {
 export default function ViewNewsletter() {
   const { newsletter, messageAboveLink, messageBelowLink } =
     useLoaderData<typeof loader>();
+
+  const { theme, toggleTheme } = useTheme();
+
+  useEffect(() => {
+    // Only allow this page to be light mode
+    if (theme === "midnight") toggleTheme();
+  }, [theme]);
   return (
-    <section className="top-section min-h-screen">
-      <EmailLayout recipient="">
-        <NewPostNewsletter
-          {...newsletter}
-          messageBody={[messageAboveLink, messageBelowLink]}
-        />
-      </EmailLayout>
-      ,
-    </section>
+    <section
+      className="top-section min-h-screen"
+      dangerouslySetInnerHTML={{
+        __html: render(
+          <EmailLayout recipient="">
+            <NewPostNewsletter
+              {...newsletter}
+              messageBody={[messageAboveLink, messageBelowLink]}
+            />
+          </EmailLayout>
+        )
+      }}
+    ></section>
   );
 }