Unread indicator was invisible behind column header, adjusted (#3720)

* Unread indicator was invisible behind column header, adjusted

* Unread indicator now a CSS pseudo-element

* Adjust flex

app/javascript/mastodon/components/column_header.js

@@ -57,6 +57,10 @@ class ColumnHeader extends React.PureComponent {
     const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton } = this.props;
     const { collapsed, animating } = this.state;
 
+    const wrapperClassName = classNames('column-header__wrapper', {
+      'active': active,
+    });
+
     const buttonClassName = classNames('column-header', {
       'active': active,
     });
@@ -116,7 +120,7 @@ class ColumnHeader extends React.PureComponent {
     }
 
     return (
-      <div>
+      <div className={wrapperClassName}>
         <div role='button heading' tabIndex='0' className={buttonClassName} onClick={this.handleTitleClick}>
           <i className={`fa fa-fw fa-${icon} column-header__icon`} />
           {title}

app/javascript/mastodon/components/status_list.js

@@ -18,7 +18,6 @@ class StatusList extends ImmutablePureComponent {
     trackScroll: PropTypes.bool,
     shouldUpdateScroll: PropTypes.func,
     isLoading: PropTypes.bool,
-    isUnread: PropTypes.bool,
     hasMore: PropTypes.bool,
     prepend: PropTypes.node,
     emptyMessage: PropTypes.node,
@@ -89,25 +88,18 @@ class StatusList extends ImmutablePureComponent {
   }
 
   render () {
-    const { statusIds, onScrollToBottom, scrollKey, trackScroll, shouldUpdateScroll, isLoading, isUnread, hasMore, prepend, emptyMessage } = this.props;
+    const { statusIds, onScrollToBottom, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage } = this.props;
 
     let loadMore       = null;
     let scrollableArea = null;
-    let unread         = null;
 
     if (!isLoading && statusIds.size > 0 && hasMore) {
       loadMore = <LoadMore onClick={this.handleLoadMore} />;
     }
 
-    if (isUnread) {
-      unread = <div className='status-list__unread-indicator' />;
-    }
-
     if (isLoading || statusIds.size > 0 || !emptyMessage) {
       scrollableArea = (
         <div className='scrollable' ref={this.setRef}>
-          {unread}
-
           <div className='status-list'>
             {prepend}
 

app/javascript/mastodon/features/ui/containers/status_list_container.js

@@ -42,7 +42,6 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, { timelineId }) => ({
     statusIds: getStatusIds(state, { type: timelineId }),
     isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
-    isUnread: state.getIn(['timelines', timelineId, 'unread']) > 0,
     hasMore: !!state.getIn(['timelines', timelineId, 'next']),
   });