Merge branch 'feature-timeline-wall' into timeline-wall-api-issues-18

# Conflicts:
#	src/shared/containers/timeline-wall/index.jsx

Author: suppermancool

src/assets/images/timeline-wall/icon-arrow-right.svg

@@ -1,9 +1,12 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, {
+  useState, useEffect, useRef, useMemo,
+} from 'react';
 import PT from 'prop-types';
 import { connect } from 'react-redux';
 import TopBanner from 'assets/images/timeline-wall/top-banner.png';
 import TopBannerMobile from 'assets/images/timeline-wall/top-banner-mobile.png';
 import IconCheveronDownBlue from 'assets/images/timeline-wall/cheveron-down-blue.svg';
+import IconArrowRight from 'assets/images/timeline-wall/icon-arrow-right.svg';
 import { deleteEventById, approveEventById, rejectEventById } from 'services/timelineWall';
 import cn from 'classnames';
 import moment from 'moment';
@@ -155,10 +158,23 @@ function TimelineWallContainer(props) {
   };
 
   const sortedEvents = _.orderBy(events, ['eventDate'], ['desc']);
+  const shouldShowDiscuss = useMemo(() => {
+    if (tab !== 0) {
+      return false;
+    }
+    if (isAdmin) {
+      return !isMobile;
+    }
+    return true;
+  }, [isAdmin, isMobile, tab]);
 
   return (
     <div styleName="container">
-      <div styleName={isAdmin ? 'header header-admin' : 'header'}>
+      <div styleName={cn('header', {
+        'header-admin': isAdmin,
+        'header-with-discuss': shouldShowDiscuss,
+      })}
+      >
         <img src={TopBanner} alt="top-banner" styleName="header-bg hide-mobile" />
         <img src={TopBannerMobile} alt="top-banner" styleName="header-bg hide-desktop show-mobile" />
 
@@ -188,6 +204,16 @@ function TimelineWallContainer(props) {
           </div>
         ) : (<h1 styleName="header-content-1">Topcoder Timeline Wall</h1>)}
 
+        {shouldShowDiscuss ? (
+          <button
+            type="button"
+            styleName="btn-discuss"
+          >
+            <span>DISCUSS</span>
+            <IconArrowRight />
+          </button>
+        ) : null}
+
         <button
           onClick={() => {
             setShowRightFilterMobile(true);

src/shared/containers/timeline-wall/index.jsx

@@ -17,10 +17,16 @@
   @media (max-width: 768px) {
     min-height: 190px;
   }
-}
 
-.header-admin {
-  min-height: 207px;
+  &.header-with-discuss {
+    @media (max-width: 768px) {
+      min-height: 214px;
+    }
+  }
+
+  &.header-admin {
+    min-height: 207px;
+  }
 }
 
 .header-content-1 {
@@ -68,6 +74,40 @@
   display: none !important;
 }
 
+.btn-discuss {
+  margin-top: 11px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 33px;
+  left: 1408px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: white;
+
+  @media (max-width: 1500px) {
+    left: unset;
+    right: 0;
+  }
+
+  @media (max-width: 768px) {
+    position: relative;
+    right: unset;
+    top: 0;
+    margin-left: 27px;
+  }
+
+  span {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 16px;
+    margin-right: 4px;
+  }
+}
+
 .tab-item {
   border: none;
   background-color: transparent;