update CommentViewer styling

codefreak · May 3, 2021 · 34782a2 · 34782a2
1 parent b7be194
commit 34782a2
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 31 deletions.
diff --git a/src/components/CommentViewer.css b/src/components/CommentViewer.css
@@ -5,7 +5,11 @@
 
 .comments {
     padding: 0.5em 0.5em 0.5em 1em;
-    border-bottom: 1px solid #f0f0f0;
+}
+
+.infoComments {
+    padding: 0.5em 0.5em 0.5em 1em;
+    border-top: 1px solid #f0f0f0;
 }
 
 .ant-collapse {

diff --git a/src/components/CommentViewer.tsx b/src/components/CommentViewer.tsx
@@ -289,41 +289,44 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({
                 )}
               </div>
 
-              <div className="comments">
-                {comments.map((comment, key) => {
-                  if (comment.type === 'mildInfo') {
-                    return (
-                      <div
-                        style={{
-                          paddingTop: '0.5em',
-                          paddingLeft: '0.15em'
-                        }}
-                      >
-                        <Comment
-                          key={key}
-                          content={comment.content}
-                          author={
+              {comments.find(element => element.type === 'mildInfo') && (
+                  <div className="infoComments">
+                    {comments.map((comment, key) => {
+                      if (comment.type === 'mildInfo') {
+                        return (
                             <div
-                              style={{ display: 'flex', flexDirection: 'row' }}
-                            >
-                              <InfoCircleTwoTone
-                                twoToneColor="#FAC302"
                                 style={{
-                                  paddingTop: '0.25em',
-                                  paddingRight: '0.5em'
+                                  paddingTop: '0.5em',
+                                  paddingLeft: '0.15em'
                                 }}
+                            >
+                              <Comment
+                                  key={key}
+                                  content={comment.content}
+                                  author={
+                                    <div
+                                        style={{ display: 'flex', flexDirection: 'row' }}
+                                    >
+                                      <InfoCircleTwoTone
+                                          twoToneColor="#FAC302"
+                                          style={{
+                                            paddingTop: '0.25em',
+                                            paddingRight: '0.5em'
+                                          }}
+                                      />
+                                      <p>{comment.author}</p>
+                                    </div>
+                                  }
                               />
-                              <p>{comment.author}</p>
                             </div>
-                          }
-                        />
-                      </div>
-                    )
-                  } else {
-                    return <></>
-                  }
-                })}
-              </div>
+                        )
+                      } else {
+                        return <></>
+                      }
+                    })}
+                  </div>
+              )}
+
             </>
           ) : (
             <>

diff --git a/src/components/ReplyEditor.css b/src/components/ReplyEditor.css
@@ -6,6 +6,7 @@
     width: available;
     padding-top: 0.5em;
     padding-right: 0.5em;
+    padding-bottom: 0.5em;
 }
 
 .controlElementsReply {