From 4738774011db71e337ca6a1cca95180ba0bcf023 Mon Sep 17 00:00:00 2001
From: Maximouse <51849865+mxmou@users.noreply.github.com>
Date: Tue, 15 Mar 2022 13:00:08 +0100
Subject: [PATCH] Correct comment compose spacing

---
 .../commenting-status/commenting-status.scss        |  2 +-
 src/views/preview/comment/comment.scss              | 13 ++++++-------
 src/views/studio/studio-comments.jsx                | 10 ++++++----
 src/views/studio/studio.scss                        |  4 ++++
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/commenting-status/commenting-status.scss b/src/components/commenting-status/commenting-status.scss
index 1c1d14a81..1a5e47b14 100644
--- a/src/components/commenting-status/commenting-status.scss
+++ b/src/components/commenting-status/commenting-status.scss
@@ -4,7 +4,7 @@
     border: 1px solid $ui-blue-10percent;
     border-radius: 8px;
     padding: 1.75rem 3rem 2rem;
-    margin: .5rem 0 2.25rem;
+    margin: .5rem 0 2rem;
     background-color: $ui-blue-10percent;
     text-align: center;
     box-sizing: border-box;
diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss
index b1bc682b4..6836e861a 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -1,10 +1,5 @@
 @import "../../../colors";
 
-.compose-row, .compose-disabled {
-    margin-top: 30px;
-    margin-bottom: 32px;
-}
-
 .compose-comment {
     margin-left: .5rem;
     width: 100%;
@@ -42,6 +37,7 @@
 
     .compose-bottom-row {
         width: 100%;
+        margin-top: 0.4rem;
         justify-content: space-between;
         flex-direction: row;
 
@@ -61,6 +57,8 @@
 
         .button {
             margin-left: 0;
+            margin-top: 0;
+            margin-bottom: 0;
             border-radius: .25rem;
         }
     }
@@ -298,11 +296,12 @@
 }
 
 .comments-root-reply {
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
 }
 
 .comment-reply-row {
-    margin-top: 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: .5rem;
     margin-left: .5rem;
     width: 100%;
 }
diff --git a/src/views/studio/studio-comments.jsx b/src/views/studio/studio-comments.jsx
index b0654e0d3..7ece61b9f 100644
--- a/src/views/studio/studio-comments.jsx
+++ b/src/views/studio/studio-comments.jsx
@@ -110,10 +110,12 @@ const StudioComments = ({
                 <div>
                     {shouldShowCommentComposer ?
                         (commentsAllowed ?
-                            <ComposeComment
-                                postURI={postURI}
-                                onAddComment={handleNewComment}
-                            /> :
+                            <div className="comments-root-reply">
+                                <ComposeComment
+                                    postURI={postURI}
+                                    onAddComment={handleNewComment}
+                                />
+                            </div> :
                             <StudioCommentsNotAllowed />
                         ) : null
                     }
diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss
index 551c9683d..2e9c16e4d 100644
--- a/src/views/studio/studio.scss
+++ b/src/views/studio/studio.scss
@@ -509,6 +509,10 @@ $radius: 8px;
 .studio-compose-container {
     padding-top: 8px;
 
+    .comments-root-reply {
+        margin-top: 20px;
+    }
+
     .load-more-button {
         width: 100%;
     }