diff --git a/src/components/Board.jsx b/src/components/Board.jsx index dc449125..464e000e 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -391,7 +391,7 @@ const Board = ({ setBodyStyle }) => { return ( <>
-
+
@@ -447,7 +447,7 @@ const Board = ({ setBodyStyle }) => { counter++; const counterString = counter.toString().padStart(8, '0'); return ( -
+
{'>>'}
@@ -479,22 +479,22 @@ const Board = ({ setBodyStyle }) => {
-
+
... - {thread.author.displayName || "Anonymous"} + LongName (...)   (User:  - {thread.author.address} + CCxfJWFT... )
{/* {thread.title ? `${thread.title}` : null} */} - This is a test title because titles are (…) + Sometimes titles can be very lon (…) @@ -527,12 +527,12 @@ const Board = ({ setBodyStyle }) => { counter++; const counterString = counter.toString().padStart(8, '0'); return ( -
+
... - {reply.author.displayName || "Anonymous"} + LongName (...)   (User:  diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index c2b43766..174cd470 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -3,12 +3,12 @@ import { Link, useNavigate } from 'react-router-dom'; import { Container, NavBar, Header, Break, PostForm, BoardForm } from './styles/Board.styled'; import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled'; import { BoardContext } from '../App'; -import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks'; +import { useComment } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; const Thread = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); const [showReplyFormLink, setShowReplyFormLink] = useState(true); const [showReplyForm, setShowReplyForm] = useState(false); const navigate = useNavigate(); @@ -317,7 +317,7 @@ const Thread = ({ setBodyStyle }) => { {comment ? ( <>
-
+
@@ -365,7 +365,7 @@ const Thread = ({ setBodyStyle }) => { counter++; const counterString = counter.toString().padStart(8, '0'); return ( -
+
{'>>'}
@@ -397,7 +397,90 @@ const Thread = ({ setBodyStyle }) => { ) }) })} - +
+
+
+
+
+
+ ... + + LongName (...) +   + + (User:  + CCxfJWFT... + ) + +
+ + {/* {thread.title ? `${thread.title}` : null} */} + Sometimes titles can be very lon (…) + + + + 2 weeks ago +   + No. + 00000001 + +
+ +
+ {comment.content ? ( + <> + {comment.content} + + ) : null} +
+
+
+ {comment.replyCount > 0 && + Object.keys(comment.replies.pages.topAll.comments).map(() => { + const renderedComments = renderComments(comment.replies.pages.topAll.comments); + return renderedComments.map(reply => { + let counter = 1; + counter++; + const counterString = counter.toString().padStart(8, '0'); + return ( +
+
+
+ ... + + {reply.author.displayName || "Anonymous"} +   + + (User:  + CCxfJWFT... + ) + +
+ + + 2 weeks ago  + No. + {counterString} + +
+
+ + {`>>${counterString}`}{
} + + {reply.content} +
+
+
+ ) + }) + })} +
+
@@ -428,56 +511,55 @@ const Thread = ({ setBodyStyle }) => {
-
- -
- - Style: -   - +
+ +
+ + Style: +   + + + {comment ? ( + comment.replyCount > 0 ? ( + {comment.replyCount} replies + ) : ( + No replies yet + )) : ( + null + )} +
+ + +
+ + event.target.style.cursor='pointer'}>Post a Reply - {comment ? ( - comment.replyCount > 0 ? ( - {comment.replyCount} replies - ) : ( - No replies yet - )) : ( - null - )} -
- - -
+
+ +
) : ( diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx index 25118eb3..77923399 100644 --- a/src/components/styles/Board.styled.jsx +++ b/src/components/styles/Board.styled.jsx @@ -1,4 +1,4 @@ -import styled, { keyframes } from 'styled-components'; +import styled from 'styled-components'; export const Container = styled.div` font-size: 10pt; @@ -1680,6 +1680,11 @@ export const BoardForm = styled.div` .quotelink-mobile:hover { color: red !important; } + + p:first-of-type::before { + content: '>'; + color: #789922; + } } } }`; @@ -1778,6 +1783,17 @@ export const BoardForm = styled.div` blockquote { font-size: 11pt; + + .quotelink-mobile { + color: #d00; + text-decoration: underline; + font-family: arial; + } + + p:first-of-type::before { + content: '>'; + color: #789922; + } } } }`; @@ -1885,6 +1901,11 @@ export const BoardForm = styled.div` .quotelink-mobile:hover { color: red !important; } + + p:first-of-type::before { + content: '>'; + color: #789922; + } } } }`; @@ -1983,6 +2004,16 @@ export const BoardForm = styled.div` blockquote { font-size: 12pt; + + .quotelink-mobile { + color: #d00; + text-decoration: underline; + } + + p:first-of-type::before { + content: '>'; + color: #789922; + } } } }`; @@ -2091,11 +2122,17 @@ export const BoardForm = styled.div` .quotelink-mobile { color: #81A2BE; + text-decoration: underline; } .quotelink-mobile:hover { color: #5F89AC; } + + p:first-of-type::before { + content: '>'; + color: #b5bd68; + } } }`; @@ -2198,11 +2235,17 @@ export const BoardForm = styled.div` .quotelink-mobile { color: #f60; + text-decoration: underline; } .quotelink-mobile:hover { color: #ff3300; } + + p:first-of-type::before { + content: '>'; + color: #789922; + } } }`; @@ -3091,7 +3134,7 @@ export const BoardForm = styled.div` blockquote > p:first-of-type::before { content: '>'; - color: #789922; + color: #b5bd68; } .quotelink { diff --git a/src/components/styles/Thread.styled.jsx b/src/components/styles/Thread.styled.jsx index f2f9f6bb..f07b38fa 100644 --- a/src/components/styles/Thread.styled.jsx +++ b/src/components/styles/Thread.styled.jsx @@ -662,8 +662,7 @@ export const TopBar = styled.div` } hr { - margin-left: calc((100% - 100vw) / 2); - margin-right: calc((100% - 100vw) / 2); + display: none; } }