Create separate MaterialStatus component for statuses with gaps (in timelines)

app/soapbox/components/material_status.js

@@ -0,0 +1,30 @@
+/**
+ * MaterialStatus: like a Status, but with gaps and rounded corners.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import StatusContainer from 'soapbox/containers/status_container';
+
+export default class MaterialStatus extends React.Component {
+
+  static propTypes = {
+    hidden: PropTypes.bool,
+  }
+
+  render() {
+    // Performance: when hidden, don't render the wrapper divs
+    if (this.props.hidden) {
+      return <StatusContainer {...this.props} />;
+    }
+
+    return (
+      <div className='material-status'>
+        <div className='material-status__status'>
+          <StatusContainer {...this.props} />
+        </div>
+      </div>
+    );
+  }
+
+}

app/soapbox/components/status_list.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import StatusContainer from '../containers/status_container';
+import MaterialStatus from 'soapbox/components/material_status';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import LoadGap from './load_gap';
 import ScrollableList from './scrollable_list';
@@ -117,7 +117,7 @@ export default class StatusList extends ImmutablePureComponent {
           onClick={onLoadMore}
         />
       ) : (
-        <StatusContainer
+        <MaterialStatus
           key={statusId}
           id={statusId}
           onMoveUp={this.handleMoveUp}
@@ -132,7 +132,7 @@ export default class StatusList extends ImmutablePureComponent {
 
     if (scrollableContent && featuredStatusIds) {
       scrollableContent = featuredStatusIds.map(statusId => (
-        <StatusContainer
+        <MaterialStatus
           key={`f-${statusId}`}
           id={statusId}
           featured

app/soapbox/containers/status_container.js

@@ -231,16 +231,4 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
 });
 
-export default @injectIntl
-@connect(makeMapStateToProps, mapDispatchToProps)
-class StatusContainer extends React.Component {
-
-  render() {
-    return (
-      <div className='status-container'>
-        <Status {...this.props} />
-      </div>
-    );
-  }
-
-}
+export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));

app/styles/components/status.scss

@@ -126,15 +126,6 @@
   vertical-align: middle;
 }
 
-.status-container {
-  padding-bottom: 10px;
-}
-
-.status__wrapper {
-  @include standard-panel;
-  padding: 15px 0 10px;
-}
-
 .status__wrapper--filtered {
   color: var(--primary-text-color);
   border: 0;
@@ -719,3 +710,12 @@ a.status-card.compact:hover {
     }
   }
 }
+
+.material-status {
+  padding-bottom: 10px;
+
+  &__status {
+    @include standard-panel;
+    padding: 15px 0 10px;
+  }
+}