fix(threaded-replies): fix styling for replies (#3110)

* fix(threaded-replies): fix styling for replies

* fix(threaded-replies): fix styling for replies

* fix(threaded-replies): fix styling for replies

* fix(threaded-replies): minor amendments

Author: wpiesiak

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.scss

@@ -1,14 +1,25 @@
 @import '../../../common/variables';
 
-.bcs-ActivityThread-toggle {
-    margin-left: $sidebarActivityFeedSpacingHorizontal;
-    color: $bdl-box-blue;
-    font-weight: bold;
+.bcs-ActivityThread {
+    .bcs-ActivityThread-toggle {
+        color: $bdl-box-blue;
 
-    &:hover,
-    &:active {
-        margin-left: $sidebarActivityFeedSpacingHorizontal;
-        font-weight: bold;
+        &,
+        &:hover,
+        &:active {
+            margin-top: -$bdl-grid-unit * 2; // to decreased spacing with parent comment
+            margin-left: $sidebarActivityFeedSpacingHorizontal;
+            font-weight: bold;
+        }
+    }
+
+    .bcs-ActivityCard {
+        margin: $sidebarActivityFeedSpacingVertical $sidebarActivityFeedSpacingHorizontal;
+        padding: 0;
+    }
+
+    .btn-plain:focus-visible {
+        outline: auto;
     }
 }
 

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.scss

@@ -6,11 +6,12 @@
 
     &::before {
         position: absolute;
-        top: $sidebarActivityFeedSpacingVertical;
-        bottom: $sidebarActivityFeedSpacingVertical;
+        top: 0;
+        bottom: 0;
         left: $sidebarActivityFeedSpacingHorizontal;
-        width: 4px;
+        width: $bdl-grid-unit;
         background: $bdl-gray-10;
+        border-radius: $bdl-border-radius-size;
         content: '';
     }
 }

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplyForm.scss

@@ -3,6 +3,7 @@
 .bcs-ActivityThreadReplyForm-toggle {
     display: flex;
     align-items: center;
+    color: $bdl-gray-62;
 
     &,
     &:hover {
@@ -16,6 +17,13 @@
     }
 }
 
+.btn-plain.bcs-ActivityThreadReplyForm-toggle {
+    &,
+    &:hover {
+        font-weight: bold;
+    }
+}
+
 .bcs-CommentForm.bcs-ActivityThreadReplyForm-comment {
     padding-top: 0;
     border-top: none;