synced style context

src/App.js

@@ -27,6 +27,7 @@ export default function App() {
 
   const [selectedTitle, setSelectedTitle] = useState('');
   const [selectedAddress, setSelectedAddress] = useState('');
+  const [selectedStyle, setSelectedStyle] = useState('Yotsuba');
 
   return (
   <div>
@@ -44,9 +45,9 @@ export default function App() {
     color={bodyStyle.color} 
     fontFamily={bodyStyle.fontFamily}
     />
-    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress }}>
+    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle }}>
       <Routes>
-        <Route exact path='/' element={<Home />} />
+        <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
         <Route path='/board' element={<Board setBodyStyle={setBodyStyle} />}>
           <Route path='post-thread' element={<Board />} />
         </Route>

src/components/Board.jsx

@@ -7,8 +7,7 @@ import { BoardContext } from '../App';
 
 const Board = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const navigate = useNavigate();
@@ -204,7 +203,7 @@ const Board = ({ setBodyStyle }) => {
         <span className="style-changer">
           Style:
            
-          <select id="style-selector" onChange={handleStyleChange}>
+          <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
             <option value="Yotsuba">Yotsuba</option>
             <option value="Yotsuba B">Yotsuba B</option>
             <option value="Futaba">Futaba</option>

src/components/Home.jsx

@@ -3,9 +3,18 @@ import { Link } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
 import { BoardContext } from '../App';
 
-const Home = () => {
+const Home = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext);
+
+  useEffect(() => {
+    setBodyStyle({
+      background: "#ffe url(/fade.png) top repeat-x",
+      color: "maroon",
+      fontFamily: "Helvetica, Arial, sans-serif"
+    });
+    setSelectedStyle("Yotsuba");
+  }, [setBodyStyle, setSelectedStyle]);
 
   const handleClick = (title, address) => {
     setSelectedTitle(title);

src/components/Thread.jsx

@@ -7,8 +7,7 @@ import ImageBanner from './ImageBanner';
 
 const Thread = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext);
-  const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
   const [showReplyFormLink, setShowReplyFormLink] = useState(true);
   const [showReplyForm, setShowReplyForm] = useState(false);
 
@@ -195,7 +194,7 @@ const Thread = ({ setBodyStyle }) => {
         <span className="style-changer">
           Style:
            
-          <select id="style-selector" onChange={handleStyleChange}>
+          <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
             <option value="Yotsuba">Yotsuba</option>
             <option value="Yotsuba B">Yotsuba B</option>
             <option value="Futaba">Futaba</option>

src/components/styles/Board.styled.jsx

@@ -414,6 +414,7 @@ export const PostFormTable = styled.table`
         margin-bottom: -3px;
         outline: none;
         border-radius: none;
+        margin-top: 0px;
       }
 
       #t-root {
@@ -423,6 +424,7 @@ export const PostFormTable = styled.table`
         background: #eee;
         border: 1px solid #777;
         margin: 2px 0;
+        margin-bottom: 0px;
         width: 300px;
       }
 
@@ -489,6 +491,7 @@ export const PostFormTable = styled.table`
         margin-bottom: -3px;
         outline: none;
         border-radius: none;
+        margin-top: 0px;
       }
 
       #t-root {
@@ -498,6 +501,7 @@ export const PostFormTable = styled.table`
         background: #eee;
         border: 1px solid #777;
         margin: 2px 0;
+        margin-bottom: 0px;
         width: 300px;
       }
 
@@ -562,6 +566,7 @@ export const PostFormTable = styled.table`
         margin-bottom: -3px;
         outline: none;
         border-radius: none;
+        margin-top: 0px;
       }
 
       #t-root {
@@ -572,6 +577,7 @@ export const PostFormTable = styled.table`
         border: 1px solid #777;
         margin: 2px 0;
         width: 300px;
+        margin-bottom: 0px;
       }
 
       #t-resp {
@@ -635,6 +641,7 @@ export const PostFormTable = styled.table`
         margin-bottom: -3px;
         outline: none;
         border-radius: none;
+        margin-top: 0px;
       }
 
       #t-root {
@@ -645,6 +652,7 @@ export const PostFormTable = styled.table`
         border: 1px solid #777;
         margin: 2px 0;
         width: 300px;
+        margin-bottom: 0px;
       }
 
       #t-resp {
@@ -715,6 +723,7 @@ export const PostFormTable = styled.table`
         border: 1px solid #000;
         background-color: #282a2e;
         color: #c5c8c6;
+        margin-top: 0px;
       }
 
       #t-root {
@@ -725,6 +734,7 @@ export const PostFormTable = styled.table`
         border: 1px solid #777;
         margin: 2px 0;
         width: 300px;
+        margin-bottom: 0px;
       }
 
       #t-resp {
@@ -794,6 +804,7 @@ export const PostFormTable = styled.table`
         margin-bottom: -3px;
         outline: none;
         border-radius: none;
+        margin-top: 0px;
       }
 
       #t-root {
@@ -804,6 +815,7 @@ export const PostFormTable = styled.table`
         border: 1px solid #777;
         margin: 2px 0;
         width: 300px;
+        margin-bottom: 0px;
       }
 
       #t-resp {
@@ -1098,6 +1110,7 @@ export const BoardForm = styled.form`
 
       .quote-link {
         color: navy;
+        text-decoration: underline;
       }
 
       .quote-link:hover {
@@ -1226,6 +1239,7 @@ export const BoardForm = styled.form`
 
       .quote-link {
         color: navy;
+        text-decoration: underline;
       }
 
       .quote-link:hover {
@@ -1362,6 +1376,7 @@ export const BoardForm = styled.form`
 
       .quote-link {
         color: navy;
+        text-decoration: underline;
       }
 
       .quote-link:hover {
@@ -1496,6 +1511,7 @@ export const BoardForm = styled.form`
 
       .quote-link {
         color: navy;
+        text-decoration: underline;
       }
 
       .quote-link:hover {
@@ -1624,6 +1640,7 @@ export const BoardForm = styled.form`
 
       .quote-link {
         color: #5f89ac;
+        text-decoration: underline;
       }
 
       .quote-link:hover {
@@ -1752,6 +1769,7 @@ export const BoardForm = styled.form`
 
       .quote-link {
         color: #34345C;
+        text-decoration: underline;
       }
 
       .quote-link:hover {