diff --git a/src/components/Post.jsx b/src/components/Post.jsx index 907d8279..0f462f67 100644 --- a/src/components/Post.jsx +++ b/src/components/Post.jsx @@ -53,7 +53,7 @@ const createQuotelink = (handlequoteclick, comment, children) => { const Post = ({ content, handlequoteclick, comment }) => { - const doubleNewlineContent = content.replaceAll(/\n(?!\n)/g, '\n\n'); + const doubleNewlineContent = content?.replaceAll(/\n(?!\n)/g, '\n\n'); const sanitizedContent = DOMPurify.sanitize(doubleNewlineContent); return ( diff --git a/src/components/styled/Board.styled.jsx b/src/components/styled/Board.styled.jsx index 981cb3f0..9398ff87 100644 --- a/src/components/styled/Board.styled.jsx +++ b/src/components/styled/Board.styled.jsx @@ -7,6 +7,10 @@ export const Container = styled.div` margin-top: 5px; padding-left: 5px; padding-right: 5px; + + .footer-links { + text-decoration: none; + } `; export const NavBar = styled.div` @@ -1535,6 +1539,7 @@ export const TopBar = styled.div` export const BoardForm = styled.div` @media (min-width: 480px) { + margin-bottom: 25px; .thread-mobile { display: none; } diff --git a/src/components/styled/Thread.styled.jsx b/src/components/styled/Thread.styled.jsx index 8e6e5f65..425310ec 100644 --- a/src/components/styled/Thread.styled.jsx +++ b/src/components/styled/Thread.styled.jsx @@ -2783,4 +2783,119 @@ export const BoardForm = styled.div` } }} } +`; + +export const Footer = styled.div` + #version { + text-align: center; + font-size: 11px; + font-family: "arial"; + } + @media (min-width: 480px) { + #break { + display: none; + } + + hr { + margin-top: -10px; + } + + #version { + margin-top: 25px; + } + } + + @media (max-width: 480px) { + margin-top: 60px; + + .style-changer { + display: none; + } + + #version { + margin-top: -2em; + } + } + + ${({ selectedStyle }) => { + switch (selectedStyle) { + case 'Yotsuba': + return ` + .footer-links { + a { + color: #00e; + text-decoration: none; + } + + a:hover { + color: red; + } + }`; + + case 'Yotsuba-B': + return ` + .footer-links { + a { + color: #34345c; + text-decoration: none; + } + + a:hover { + color: #d00; + } + }`; + + case 'Futaba': + return ` + .footer-links { + a { + color: #00e; + text-decoration: underline; + } + + a:hover { + color: red; + } + }`; + + case 'Burichan': + return ` + .footer-links { + a { + color: #34345c; + text-decoration: underline; + } + + a:hover { + color: #d00; + } + }`; + + case 'Tomorrow': + return ` + .footer-links { + a { + color: #81a2be; + text-decoration: none; + } + + a:hover { + color: #5f89ac; + } + }`; + + case 'Photon': + return ` + .footer-links { + a { + color: #f60; + text-decoration: none; + } + + a:hover { + color: #f30; + } + }`; + } + }} `; \ No newline at end of file diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index e92c7dc3..bc07546f 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -7,6 +7,7 @@ import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks'; import { debounce } from 'lodash'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled'; +import { Footer } from '../styled/Thread.styled'; import ImageBanner from '../ImageBanner'; import Post from '../Post'; import PostLoader from '../PostLoader'; @@ -932,14 +933,77 @@ const Board = () => { )} -