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;
+}