diff --git a/src/App.js b/src/App.js index e981c5a3..44958c75 100644 --- a/src/App.js +++ b/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 (
@@ -44,9 +45,9 @@ export default function App() { color={bodyStyle.color} fontFamily={bodyStyle.fontFamily} /> - + - } /> + } /> }> } /> diff --git a/src/components/Board.jsx b/src/components/Board.jsx index f5541ec1..8a7a996e 100644 --- a/src/components/Board.jsx +++ b/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 } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext); const [showPostFormLink, setShowPostFormLink] = useState(true); const [showPostForm, setShowPostForm] = useState(false); const navigate = useNavigate(); @@ -204,7 +203,7 @@ const Board = ({ setBodyStyle }) => { Style:   - diff --git a/src/components/Home.jsx b/src/components/Home.jsx index c97ade4e..d5b31107 100644 --- a/src/components/Home.jsx +++ b/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); diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 93fe6061..b6ce7c99 100644 --- a/src/components/Thread.jsx +++ b/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 [selectedStyle, setSelectedStyle] = useState("Yotsuba"); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext); const [showReplyFormLink, setShowReplyFormLink] = useState(true); const [showReplyForm, setShowReplyForm] = useState(false); @@ -195,7 +194,7 @@ const Thread = ({ setBodyStyle }) => { Style:   - diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx index 1d0578c0..b23de414 100644 --- a/src/components/styles/Board.styled.jsx +++ b/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 {