Make direct statuses stand out more (#3025)

Resolves #2515

app/javascript/mastodon/components/status.js

@@ -97,7 +97,7 @@ class Status extends ImmutablePureComponent {
     }
 
     return (
-      <div className={this.props.muted ? 'status muted' : 'status'}>
+      <div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')}`}>
         <div className='status__info'>
           <div className='status__info-time'>
             <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>

app/javascript/styles/components.scss

@@ -501,6 +501,18 @@
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: default;
 
+  &.status-direct {
+    background: lighten($ui-base-color, 8%);
+
+    .status__display-name strong {
+      color: $primary-text-color;
+    }
+
+    .icon-button.disabled {
+      color: lighten($ui-base-color, 16%);
+    }
+  }
+
   &.light {
     .status__relative-time {
       color: $ui-primary-color;