From 34a4a005d1b5600387916a15aa1b1c512c8b8e25 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 10 Jul 2017 21:12:52 +0700
Subject: [PATCH] Add margin to highlighted comment

---
 .../src/components/Stream.css                 |  4 ++
 .../src/components/Stream.js                  | 62 ++++++++++---------
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Stream.css b/client/coral-embed-stream/src/components/Stream.css
index afedab0eb..06f1efd1f 100644
--- a/client/coral-embed-stream/src/components/Stream.css
+++ b/client/coral-embed-stream/src/components/Stream.css
@@ -17,6 +17,10 @@
   margin-top: 6px;
 }
 
+.highlightedContainer {
+  margin-top: 28px;
+}
+
 .tabContainer {
   margin-top: 28px;
 }
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 6205a2a10..67e22ab6a 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -167,35 +167,39 @@ class Stream extends React.Component {
 
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
-          ? <Comment
-              data={data}
-              root={root}
-              commentClassNames={commentClassNames}
-              addTag={addTag}
-              removeTag={removeTag}
-              ignoreUser={ignoreUser}
-              setActiveReplyBox={setActiveReplyBox}
-              activeReplyBox={activeReplyBox}
-              addNotification={addNotification}
-              depth={0}
-              disableReply={!open}
-              postComment={postComment}
-              asset={asset}
-              currentUser={user}
-              highlighted={comment.id}
-              postFlag={postFlag}
-              postDontAgree={postDontAgree}
-              loadMore={loadNewReplies}
-              deleteAction={deleteAction}
-              showSignInDialog={showSignInDialog}
-              key={highlightedComment.id}
-              commentIsIgnored={commentIsIgnored}
-              comment={highlightedComment}
-              charCountEnable={asset.settings.charCountEnable}
-              maxCharCount={asset.settings.charCount}
-              editComment={editComment}
-              liveUpdates={true}
-            />
+          ? (
+            <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
+              <Comment
+                data={data}
+                root={root}
+                commentClassNames={commentClassNames}
+                addTag={addTag}
+                removeTag={removeTag}
+                ignoreUser={ignoreUser}
+                setActiveReplyBox={setActiveReplyBox}
+                activeReplyBox={activeReplyBox}
+                addNotification={addNotification}
+                depth={0}
+                disableReply={!open}
+                postComment={postComment}
+                asset={asset}
+                currentUser={user}
+                highlighted={comment.id}
+                postFlag={postFlag}
+                postDontAgree={postDontAgree}
+                loadMore={loadNewReplies}
+                deleteAction={deleteAction}
+                showSignInDialog={showSignInDialog}
+                key={highlightedComment.id}
+                commentIsIgnored={commentIsIgnored}
+                comment={highlightedComment}
+                charCountEnable={asset.settings.charCountEnable}
+                maxCharCount={asset.settings.charCount}
+                editComment={editComment}
+                liveUpdates={true}
+              />
+            </div>
+            )
           : <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
               <div
                 className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}