Make direct statuses stand out more (#3025)

Resolves #2515

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index e82f1d7aa4ca827ff90347b1b602778e57133210..d2049c44a4832aa66e0f346e87603bf947cf0578 100644 (file)
--- a/app/javascript/mastodon/components/status.js
+++ b/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>

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index b5bbe749dae784399dadd1b2e4d82dc0e85728ae..773ef0a5b74b86cc6310f34f02a072a87e931dd7 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/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;