From df6f666447f0545a091501d8466b257fac1d3bfc Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Thu, 6 Aug 2020 15:20:57 -0400
Subject: [PATCH] make spacing between discussions and headers explicit (#3084)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../tabs/Discussions/MostActiveDiscussionsContainer.css   | 2 +-
 .../tabs/Discussions/MostActiveDiscussionsContainer.tsx   | 8 ++++++--
 .../tabs/Discussions/MyOngoingDiscussionsContainer.css    | 2 +-
 .../tabs/Discussions/MyOngoingDiscussionsContainer.tsx    | 8 ++++++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.css b/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.css
index 3c4dfcc62..2e80dec17 100644
--- a/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.css
+++ b/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.css
@@ -3,7 +3,7 @@
 }
 
 .list {
-  margin-left: 0;
+  margin: 0;
   padding-left: 0;
   counter-reset: activeDiscussionsCounter;
   list-style: none;
diff --git a/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.tsx b/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.tsx
index e5ac21f01..297340551 100644
--- a/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.tsx
+++ b/src/core/client/stream/tabs/Discussions/MostActiveDiscussionsContainer.tsx
@@ -5,6 +5,7 @@ import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { MostActiveDiscussionsContainer_site } from "coral-stream/__generated__/MostActiveDiscussionsContainer_site.graphql";
 
@@ -19,7 +20,10 @@ interface Props {
 
 const MostActiveDiscussionsContainer: FunctionComponent<Props> = ({ site }) => {
   return (
-    <div className={cn(styles.root, CLASSES.discussions.mostActiveDiscussions)}>
+    <HorizontalGutter
+      spacing={4}
+      className={cn(styles.root, CLASSES.discussions.mostActiveDiscussions)}
+    >
       <DiscussionsHeader
         header={
           <Localized id="discussions-mostActiveDiscussions">
@@ -49,7 +53,7 @@ const MostActiveDiscussionsContainer: FunctionComponent<Props> = ({ site }) => {
           </li>
         ))}
       </ol>
-    </div>
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.css b/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.css
index 889e528ce..431e6033a 100644
--- a/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.css
+++ b/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.css
@@ -3,7 +3,7 @@
 }
 
 .list {
-  margin-left: 0;
+  margin: 0;
   padding-left: 0;
 }
 
diff --git a/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.tsx b/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.tsx
index 20db00d4a..33ea89d2f 100644
--- a/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.tsx
+++ b/src/core/client/stream/tabs/Discussions/MyOngoingDiscussionsContainer.tsx
@@ -5,6 +5,7 @@ import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { MyOngoingDiscussionsContainer_settings } from "coral-stream/__generated__/MyOngoingDiscussionsContainer_settings.graphql";
 import { MyOngoingDiscussionsContainer_viewer } from "coral-stream/__generated__/MyOngoingDiscussionsContainer_viewer.graphql";
@@ -26,7 +27,10 @@ const MyOngoingDiscussionsContainer: FunctionComponent<Props> = ({
   currentSiteID,
 }) => {
   return (
-    <div className={cn(styles.root, CLASSES.discussions.myOngoingDiscussions)}>
+    <HorizontalGutter
+      className={cn(styles.root, CLASSES.discussions.myOngoingDiscussions)}
+      spacing={4}
+    >
       <DiscussionsHeader
         header={
           <Localized id="discussions-myOngoingDiscussions">
@@ -57,7 +61,7 @@ const MyOngoingDiscussionsContainer: FunctionComponent<Props> = ({
           </li>
         ))}
       </ul>
-    </div>
+    </HorizontalGutter>
   );
 };