Merge pull request #6763 from topcoder-platform/feature-timeline-wall

Remaining timeline wall features and bug fixes

Author: luizrrodrigues

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

@@ -24,6 +24,8 @@ import './styles.scss';
 const FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL = _.get(config, 'TIMELINE.FETCHING_PENDING_APPROVAL_EVENTS_INTERVAL', 0);
 const FORUM_LINK = _.get(config, 'TIMELINE.FORUM_LINK', '');
 function TimelineWallContainer(props) {
+  const currentTime = new Date();
+  const thisYear = currentTime.getFullYear();
   const [tab, setTab] = useState(0);
   const fetchingApprovalsInterval = useRef(null);
   const [showRightFilterMobile, setShowRightFilterMobile] = useState(false);
@@ -223,7 +225,7 @@ function TimelineWallContainer(props) {
           type="button"
           styleName="filter-dropdown hide-desktop show-mobile"
         >
-          <span>{selectedFilterValue.year ? selectedFilterValue.year : ''}</span>
+          <span>{selectedFilterValue.year ? selectedFilterValue.year : thisYear}</span>
           <IconCheveronDownBlue />
         </button>
       </div>

src/shared/containers/timeline-wall/modal-event-add/index.jsx

@@ -3,6 +3,7 @@ import PT from 'prop-types';
 import { Modal } from 'topcoder-react-ui-kit';
 import IconCloseGreen from 'assets/images/icon-close-green.svg';
 import LoadingIndicator from 'components/LoadingIndicator';
+import cn from 'classnames';
 
 import style from './styles.scss';
 
@@ -17,14 +18,17 @@ function ModalEventAdd({
       onCancel={onClose}
     >
       <div styleName="header">
-        <span styleName="text-title">Confirmation</span>
+        <span styleName="text-title">{uploadResult ? 'Error' : 'Confirmation'}</span>
         <button styleName="btn-close" onClick={onClose} type="button"><IconCloseGreen /></button>
       </div>
       {
         uploading ? (
           <LoadingIndicator />
         ) : (
-          <span styleName="text-description">
+          <span styleName={cn('text-description', {
+            error: !!uploadResult,
+          })}
+          >
             {
               uploadResult || successMessage
             }

src/shared/containers/timeline-wall/modal-event-add/styles.scss

@@ -44,6 +44,10 @@
   strong {
     @include roboto-bold;
   }
+
+  &.error {
+    color: #ef476f;
+  }
 }
 
 .separator {

src/shared/containers/timeline-wall/styles.scss

@@ -86,6 +86,7 @@
   border: none;
   color: white;
 
+  &:visited,
   &:hover {
     color: white;
   }

src/shared/containers/timeline-wall/timeline-events/right-filter/styles.scss

@@ -3,6 +3,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  z-index: 1;
 
   @media (max-width: 768px) {
     position: fixed;
@@ -53,16 +54,16 @@
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
   padding: 10px 0;
-  position: fixed;
-  right: 0;
-  left: 1374px;
+  position: sticky;
+  margin-bottom: 80px;
+  top: 0;
   max-height: 70%;
   overflow: scroll;
-  -ms-overflow-style: none;  /* Internet Explorer 10+ */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
 
   &::-webkit-scrollbar {
-    display: none;  /* Safari and Chrome */
+    display: none; /* Safari and Chrome */
   }
 
   @media (max-width: 1500px) {
@@ -72,6 +73,8 @@
   @media (max-width: 768px) {
     border-radius: 0;
     width: calc(100% - 10px);
+    position: relative;
+    margin-bottom: unset;
   }
 
   span {

src/shared/containers/timeline-wall/timeline-events/styles.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  max-width: 1492px;
 }
 
 .left-content {