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.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,7 +20,24 @@ 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.wrapper}>
       <div className={styles.content}>
         <HomeLogo />
         <div className={styles.boxOuter}>
@@ -41,6 +59,7 @@ const NotFound = () => {
           </div>
         </div>
       </div>
+    </div>
   );
 };