From 80c30c23c7fe517f33602144d25c6e754876eff9 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 4 May 2024 14:01:48 +0200
Subject: [PATCH] fix body css and forced yotsuba theme for homepage

---
 src/app.module.css |  8 --------
 src/app.tsx        | 10 +++++-----
 src/index.css      |  4 ++++
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/app.module.css b/src/app.module.css
index 20cd05b9..83b697a9 100644
--- a/src/app.module.css
+++ b/src/app.module.css
@@ -1,13 +1,5 @@
 .app {
-  background: var(--body-background-base-color) var(--body-background-pattern-image) top center repeat-x;
-  font-size: var(--body-font-size);
-  font-family: var(--body-font-family);
-  color: var(--body-font-color);
   z-index: 1;
-  min-height: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  min-height: 100vh;
 }
 
 @media (min-width: 640px) {
diff --git a/src/app.tsx b/src/app.tsx
index 7d9ee195..9d4fbf33 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -39,13 +39,13 @@ const BoardLayout = () => {
 const App = () => {
   const location = useLocation();
   const isInHomeView = isHomeView(location.pathname);
-
-  // add theme className to body so it can set the correct body background in index.css
   const [theme] = useTheme();
+
   useEffect(() => {
     document.body.classList.forEach((className) => document.body.classList.remove(className));
-    document.body.classList.add(theme);
-  }, [theme]);
+    const classToAdd = isInHomeView ? 'yotsuba' : theme;
+    document.body.classList.add(classToAdd);
+  }, [theme, isInHomeView]);
 
   const globalLayout = (
     <>
@@ -55,7 +55,7 @@ const App = () => {
   );
 
   return (
-    <div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
+    <div className={styles.app}>
       <Routes>
         <Route element={globalLayout}>
           <Route path='/' element={<Home />} />
diff --git a/src/index.css b/src/index.css
index 6bac7beb..aabf2312 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,10 @@ html, body {
 
 body {
   background-color: white;
+  background: var(--body-background-base-color) var(--body-background-pattern-image) top center repeat-x;
+  font-size: var(--body-font-size);
+  font-family: var(--body-font-family);
+  color: var(--body-font-color);
 }
 
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, th, td, iframe, blockquote {