From e99dee52ec87046d25767b5dd4a016b724aadc85 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 9 Aug 2021 16:53:41 -0400
Subject: [PATCH] Spiffier activity feed with line (#1594)

---
 .../Homepage/ActivityFeed/ActivityFeed.tsx     | 13 ++++++++-----
 .../pages/Homepage/ActivityFeed/_styles.scss   | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/pages/Homepage/ActivityFeed/ActivityFeed.tsx b/frontend/pages/Homepage/ActivityFeed/ActivityFeed.tsx
index 9004931496..f68d7d1072 100644
--- a/frontend/pages/Homepage/ActivityFeed/ActivityFeed.tsx
+++ b/frontend/pages/Homepage/ActivityFeed/ActivityFeed.tsx
@@ -143,14 +143,17 @@ const ActivityFeed = (): JSX.Element => {
     );
   };
 
+  const renderActivities = activities.map((activity: IActivity, i: number) =>
+    renderActivityBlock(activity, i)
+  );
   return (
     <div className={baseClass}>
       {isLoadingError && renderError()}
-      {!isLoadingError && !isLoading && isEmpty(activities)
-        ? renderNoActivities()
-        : activities.map((activity: IActivity, i: number) =>
-            renderActivityBlock(activity, i)
-          )}
+      {!isLoadingError && !isLoading && isEmpty(activities) ? (
+        renderNoActivities()
+      ) : (
+        <div>{renderActivities}</div>
+      )}
       {isLoading && <Spinner />}
       {!isLoadingError && !isEmpty(activities) && showMore && (
         <Button
diff --git a/frontend/pages/Homepage/ActivityFeed/_styles.scss b/frontend/pages/Homepage/ActivityFeed/_styles.scss
index 7d5b49520c..a9326d453a 100644
--- a/frontend/pages/Homepage/ActivityFeed/_styles.scss
+++ b/frontend/pages/Homepage/ActivityFeed/_styles.scss
@@ -9,12 +9,30 @@
     padding-bottom: $pad-large;
   }
 
+  &__block:before {
+    content: "";
+    position: relative;
+    height: 50px !important;
+    z-index: 0;
+    top: 35px;
+    left: 17px;
+    border-left: 1px dashed $ui-fleet-blue-15;
+    height: 100%;
+  }
+  &__block:last-child:before {
+    border-left: 0;
+  }
+
   &__avatar-frame {
     display: flex;
     width: 32px;
     height: 32px;
   }
 
+  &__avatar-image {
+    z-index: 2;
+  }
+
   &__details {
     padding-left: $pad-large;