diff --git a/public/post_expand_minus.png b/public/post_expand_minus.png new file mode 100644 index 00000000..c499d841 Binary files /dev/null and b/public/post_expand_minus.png differ diff --git a/src/components/Board.jsx b/src/components/Board.jsx index 6f0133f3..650c1233 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; -import { Container, NavBar, Header, Break, PostForm, TopBar } from './styled/Board.styled'; +import { Container, NavBar, Header, Break, PostForm, TopBar, BoardForm } from './styled/Board.styled'; import { useFeed } from '@plebbit/plebbit-react-hooks'; const ImageBanner = () => { @@ -78,6 +78,72 @@ const Board = () => { ]
+ +
+
+
+
+ + H + +
+ + + Tom + + (User: plebeius.eth) + + + 2 weeks ago + + No. + 00000001 + + [ + Reply + ] + + + + +
+ + {'>'}imagine being a pleb + +
+
+
+
+
+
{'>>'}
+
+
+ + + Anonymous + + (User: Qma319kE7rrHNce8vH9fAjPjihUF4EZCaKSK8dBaFtxsVn) + + + 2 weeks ago + + No. + 00000002 + + +
+
+ I can imagine being a pleb +
+
+
+
+
+
) } diff --git a/src/components/styled/Board.styled.jsx b/src/components/styled/Board.styled.jsx index 6976ae83..ddc1aed3 100644 --- a/src/components/styled/Board.styled.jsx +++ b/src/components/styled/Board.styled.jsx @@ -120,4 +120,113 @@ export const TopBar = styled.div` a:hover { color: red; } +`; + +export const BoardForm = styled.form` + + .thread { + margin: 0; + clear: both; + } + + .op-container { + display: inline; + } + + .op { + display: inline; + } + + .post { + margin: 4px 0; + overflow: hidden; + } + + .ext-button { + float: left; + margin-right: 5px; + margin-top: -1px; + cursor: pointer; + margin-bottom: -4px; + width: 18px; + height: 18px; + } + + img { + border: none; + } + + .post-info { + display: block; + width: 100%; + } + + .name-block { + display: inline-block; + } + + .name { + color: #117743; + font-weight: 700; + } + + .post-link a { + text-decoration: none; + color: maroon; + } + + .post-link a:hover { + color: red; + } + + .reply-link a { + text-decoration: none; + color: #00e; + } + + .reply-link a:hover { + color: red; + } + + .post-menu-button { + color: #000080; + margin-left: 5px; + text-decoration: none; + line-height: 1em; + display: inline-block; + transition: transform 0.1s; + width: 1em; + height: 1em; + text-align: center; + outline: none; + opacity: 0.8; + } + + .backlink { + font-size: 0.8em !important; + display: inline; + padding: 0; + padding-left: 5px; + } + + .quote-link a { + color: navy !important; + text-decoration: none; + } + + .quote-link a:hover { + color: red; + } + + .backlink span { + padding: 0; + } + + blockquote { + display: block; + } + + .quote { + color: #789922; + } `; \ No newline at end of file