diff --git a/src/components/comments.js b/src/components/comments.js index 909e573..0524073 100644 --- a/src/components/comments.js +++ b/src/components/comments.js @@ -33,12 +33,18 @@ function CommentInput({ onSubmit }) { function Comment({ comment, index, onComment, onDelete, onReact, uid }) { const [displayed, setDisplayed] = useState(true) const [commenting, setCommenting] = useState(false) - const { text, subComments, date, user, reacts } = comment + const { text, subComments, date, user, reacts, adminComment } = comment const own = uid === user + const commentStyle = adminComment + ? styles.adminComment + : own + ? styles.ownComment + : '' + return (
-
+
div { margin: 5px 0px; } + +.adminComment { + border-left: 2px solid yellow; +} diff --git a/src/components/newsEntry.js b/src/components/newsEntry.js index f899f52..4942bd9 100644 --- a/src/components/newsEntry.js +++ b/src/components/newsEntry.js @@ -13,29 +13,35 @@ export default function NewsEntry({ onComment, onDelete, }) { - const { reacts, title, body, comments } = newsItem + const { reacts, title, text, user, comments, date, adminPost } = newsItem return (
-
-
{newsKey} :
-
+
+
+
+
+
User #{user}
+
{date}
+
+
+ { + onReact({ type: 'news', reaction, isDelete }) + }} />
- { - onReact({ type: 'news', reaction, isDelete }) - }} - /> -
{ diff --git a/src/components/newsEntry.module.css b/src/components/newsEntry.module.css index 7ac797b..6d8fc98 100644 --- a/src/components/newsEntry.module.css +++ b/src/components/newsEntry.module.css @@ -5,22 +5,36 @@ } .newsTitle { - font-size: 28px; + font-size: 20px; color: var(--text-color); margin: 0px 5px; } -.itemNumber { - color: #fff; +.newsDate { margin: 0px 5px; - font-size: 24px; } .newsContainer { - margin: 20px 5px; + margin: 5px 5px; +} + +.adminPost { + border-left: 5px solid yellow; + border-radius: 5px; } .newsContainer img { max-width: 100%; min-width: 200px; } + +.newsHeader { + display: flex; + justify-content: space-between; + align-items: center; +} + +.user { + display: flex; + align-items: center; +}