Resolve "Redesign activity feed"

4 files changed, 56 insertions, 37 deletions

diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 1e93bf2b751..a20920e2503 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -39,7 +39,7 @@
 svg {
   fill: currentColor;
 
-  $svg-sizes: 8 10 12 16 18 24 32 48 72;
+  $svg-sizes: 8 10 12 14 16 18 24 32 48 72;
   @each $svg-size in $svg-sizes {
     &.s#{$svg-size} {
       @include svg-size(#{$svg-size}px);
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 19eee4e4aba..bfcac3f1c3f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -269,6 +269,7 @@ $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 $project-title-row-height: 24px;
+$gl-line-height: 16px;
 
 /*
 * Common component specific colors
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index a91d44805ee..618f23d81b1 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -4,41 +4,29 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding-top 0 $gl-padding-top 40px;
+  padding: $gl-padding 0 $gl-padding 56px;
   border-bottom: 1px solid $white-normal;
-  color: $gl-text-color;
+  color: $gl-text-color-secondary;
   position: relative;
-
-  &.event-inline {
-    .system-note-image {
-      top: 20px;
-    }
-
-    .user-avatar {
-      top: 14px;
-    }
-
-    .event-title,
-    .event-item-timestamp {
-      line-height: 40px;
-    }
-  }
-
-  a {
-    color: $gl-text-color;
-  }
+  line-height: $gl-line-height;
 
   .system-note-image {
     position: absolute;
     left: 0;
-    top: 14px;
 
     svg {
-      width: 20px;
-      height: 20px;
       fill: $gl-text-color-secondary;
     }
+  }
+
+  .system-note-image-inline {
+    svg {
+      fill: $gl-text-color-secondary;
+    }
+  }
 
+  .system-note-image,
+  .system-note-image-inline {
     &.opened-icon,
     &.created-icon {
       svg {
@@ -53,16 +41,35 @@
     &.accepted-icon svg {
       fill: $blue-300;
     }
+
+    &.commented-on-icon svg {
+      fill: $blue-600;
+    }
+  }
+
+  .event-user-info {
+    margin-bottom: $gl-padding-8;
+
+    .author_name {
+      a {
+        color: $gl-text-color;
+        font-weight: $gl-font-weight-bold;
+      }
+    }
   }
 
   .event-title {
-    @include str-truncated(calc(100% - 174px));
-    font-weight: $gl-font-weight-bold;
-    color: $gl-text-color;
+    .event-type {
+      &::first-letter {
+        text-transform: capitalize;
+      }
+    }
   }
 
   .event-body {
+    margin-top: $gl-padding-8;
     margin-right: 174px;
+    color: $gl-text-color;
 
     .event-note {
       word-wrap: break-word;
@@ -92,7 +99,7 @@
       }
 
       .note-image-attach {
-        margin-top: 4px;
+        margin-top: $gl-padding-4;
         margin-left: 0;
         max-width: 200px;
         float: none;
@@ -107,7 +114,6 @@
       color: $gl-gray-500;
       float: left;
       font-size: $gl-font-size;
-      line-height: 16px;
       margin-right: 5px;
     }
   }
@@ -127,7 +133,9 @@
     }
   }
 
-  &:last-child { border: 0; }
+  &:last-child {
+    border: 0;
+  }
 
   .event_commits {
     li {
@@ -154,7 +162,6 @@
 
   .event-item-timestamp {
     float: right;
-    line-height: 22px;
   }
 }
 
@@ -177,10 +184,8 @@
   .event-item {
     padding-left: 0;
 
-    &.event-inline {
-      .event-title {
-        line-height: 20px;
-      }
+    .event-user-info {
+      margin-bottom: $gl-padding-4;
     }
 
     .event-title {
@@ -194,7 +199,8 @@
     }
 
     .event-body {
-      margin: 0;
+      margin-top: $gl-padding-4;
+      margin-right: 0;
       padding-left: 0;
     }
 
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index f084adaf5d3..1d691d1d8b8 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -240,6 +240,12 @@
     left: 0;
   }
 
+  .activities-block {
+    .event-item {
+      padding-left: 40px;
+    }
+  }
+
   @include media-breakpoint-down(xs) {
     .cover-block {
       padding-top: 20px;
@@ -267,6 +273,12 @@
         margin-right: 0;
       }
     }
+
+    .activities-block {
+      .event-item {
+        padding-left: 0;
+      }
+    }
   }
 }