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,21 +13,27 @@ 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
-        <div className={styles.itemNumber}>{newsKey} :</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 }}
         />
-      </div>
         <ReactButton
           existingReacts={reacts}
           uid={uid}
@@ -35,7 +41,7 @@ export default function NewsEntry({
             onReact({ type: 'news', reaction, isDelete })
           }}
         />
-      <hr />
+      </div>
       <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 {
+.newsDate {
-  color: #fff;
   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;
+}