Created a new message indicator component to indicate new messages (#4299)

* Created a new message indicator component to indicate new messages are present
outside the user's view:

 * Created new component with styling

 * Theming and i18n support for new messages indicator

 * Count new unviewed messages and integrate with component

 * Coding style for new message indicator

* Fixed bugs with new message indicator:

 * Fix display issues with new message indicator
 * Update text to deal with plurals in React

* Fix coded style for ticket 'PLT-1917': add new message indicator.

* Use only server generated timestamps for checking new messages at the bottom

* Move transitionend to prop, fix style selectors

1 files changed, 27 insertions, 0 deletions

diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 7a119b7af..9c93c09d7 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -258,6 +258,33 @@
         outline: none;
         text-align: center;
     }
+    .nav-pills__unread-indicator-bottom {
+      position: absolute;
+      bottom: -30px;
+      left: 0;
+      right: 0;
+
+      @include border-radius(50px);
+      font-size: 13.5px;
+      margin: 0 auto;
+      padding: 3px 0 4px;
+      text-align: center;
+      max-width: 250px;
+      z-index: 1;
+      cursor: pointer;
+      transition: bottom 0.2s ease-out;
+
+      .fa {
+        margin-right: 0.5rem;
+      }
+
+      &.visible {
+        bottom: 0;
+      }
+      &.disabled {
+        display: none;
+      }
+    }
 }
 
 .post-list__timestamp {