fix(not found): force yotsuba theme with ref, not with params in app because they can't be detected in app

src/app.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
-import { isHomeView, isNotFoundView } from './lib/utils/view-utils';
+import { isHomeView } from './lib/utils/view-utils';
 import useTheme from './hooks/use-theme';
 import styles from './app.module.css';
 import Board from './views/board';
@@ -47,16 +47,14 @@ const BoardLayout = () => {
 
 const App = () => {
   const location = useLocation();
-  const params = useParams();
   const isInHomeView = isHomeView(location.pathname);
-  const isInNotFoundPage = isNotFoundView(location.pathname, params);
   const [theme] = useTheme();
 
   useEffect(() => {
     document.body.classList.forEach((className) => document.body.classList.remove(className));
-    const classToAdd = isInHomeView || isInNotFoundPage ? 'yotsuba' : theme;
+    const classToAdd = isInHomeView ? 'yotsuba' : theme;
     document.body.classList.add(classToAdd);
-  }, [theme, isInHomeView, isInNotFoundPage]);
+  }, [theme, isInHomeView]);
 
   const globalLayout = (
     <>

src/views/not-found/not-found.module.css

@@ -1,8 +1,8 @@
 .content {
   margin: auto;
-    text-align: left;
-    width: 57.69em;
-    min-width: 750px;
+  text-align: left;
+  width: 57.69em;
+  min-width: 750px;
 }
 
 .boxOuter {

src/views/not-found/not-found.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { HomeLogo } from '../home';
 import styles from './not-found.module.css';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import useTheme from '../../hooks/use-theme';
 
 const totalNotFoundImages = 2;
 
@@ -19,24 +20,42 @@ const NotFoundImage = () => {
 const NotFound = () => {
   const { subplebbitAddress } = useParams();
 
+  const [theme, setTheme] = useTheme();
+  const previousThemeRef = useRef(theme);
+
+  useEffect(() => {
+    if (theme !== 'yotsuba') {
+      previousThemeRef.current = theme;
+      setTheme('yotsuba');
+    }
+
+    return () => {
+      if (theme === 'yotsuba') {
+        setTheme(previousThemeRef.current);
+      }
+    };
+  }, [theme, setTheme]);
+
   return (
-    <div className={styles.content}>
-      <HomeLogo />
-      <div className={styles.boxOuter}>
-        <div className={styles.boxInner}>
-          <div className={styles.boxBar}>
-            <h2>404 Not Found</h2>
-          </div>
-          <div className={styles.boxContent}>
-            <NotFoundImage />
-            {subplebbitAddress && (
-              <>
-                <br />
-                <div className={styles.backToBoard}>
-                  [<Link to={`/p/${subplebbitAddress}`}>Back to p/{Plebbit.getShortAddress(subplebbitAddress)}</Link>]
-                </div>
-              </>
-            )}
+    <div className={styles.wrapper}>
+      <div className={styles.content}>
+        <HomeLogo />
+        <div className={styles.boxOuter}>
+          <div className={styles.boxInner}>
+            <div className={styles.boxBar}>
+              <h2>404 Not Found</h2>
+            </div>
+            <div className={styles.boxContent}>
+              <NotFoundImage />
+              {subplebbitAddress && (
+                <>
+                  <br />
+                  <div className={styles.backToBoard}>
+                    [<Link to={`/p/${subplebbitAddress}`}>Back to p/{Plebbit.getShortAddress(subplebbitAddress)}</Link>]
+                  </div>
+                </>
+              )}
+            </div>
           </div>
         </div>
       </div>