Added admin comments, styling

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 className={styles.comment}>
-      <div className={`${styles.commentData} ${own && styles.ownComment}`}>
+      <div className={`${styles.commentData} ${commentStyle}`}>
         <div className={styles.commentHeader}>
           <div className={styles.userContainer}>
             <div

src/components/comments.module.css

@@ -5,8 +5,9 @@
 
 .commentData {
   padding: 5px 2px;
-  border-left: 1px solid var(--text-color);
+  border-left: 2px solid var(--text-color);
   background-color: #222;
+  border-radius: 3px;
 }
 
 .commentHeader {
@@ -34,7 +35,7 @@
 }
 
 .ownComment {
-  border-left: 1px solid yellow;
+  border-left: 2px solid green;
 }
 
 .showHide {
@@ -78,3 +79,7 @@
 .commentAreaContainer > div {
   margin: 5px 0px;
 }
+
+.adminComment {
+  border-left: 2px solid yellow;
+}

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 (
     <div>
-      <div className={styles.newsContainer}>
-        <div className={styles.itemNumber}>{newsKey} :</div>
-        <div
-          className={styles.newsTitle}
-          dangerouslySetInnerHTML={{ __html: title }}
-        />
+      <div
+        className={`${styles.newsContainer} ${adminPost && styles.adminPost}`}
+      >
+        <div className={styles.newsHeader}>
+          <div
+            className={styles.newsTitle}
+            dangerouslySetInnerHTML={{ __html: title }}
+          />
+          <div className={styles.user}>
+            <div>User #{user}</div>
+            <div className={styles.newsDate}>{date}</div>
+          </div>
+        </div>
         <div
           className={styles.newsBody}
-          dangerouslySetInnerHTML={{ __html: body }}
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+        <ReactButton
+          existingReacts={reacts}
+          uid={uid}
+          onClick={(reaction, isDelete) => {
+            onReact({ type: 'news', reaction, isDelete })
+          }}
         />
       </div>
-      <ReactButton
-        existingReacts={reacts}
-        uid={uid}
-        onClick={(reaction, isDelete) => {
-          onReact({ type: 'news', reaction, isDelete })
-        }}
-      />
-      <hr />
       <Comments
         uid={uid}
         onReact={(path, reaction, isDelete) => {

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