fix(style): Fix styles after classname refactor (#2368)

Float detailed status display avatar left. Only apply display block to display names in status info, not in detailed status. Thanks to @nightpool for finding those. Make star icon in notification show up as gold. Add anchor selector back to status__content__spoiler-link in order to override default anchor style elsewhere.

2 files changed, 10 insertions, 3 deletions

diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
index c2fa1a325..8ab214372 100644
--- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx
+++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx
@@ -51,7 +51,7 @@ class DetailedStatus extends React.PureComponent {
     return (
       <div className='detailed-status'>
         <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
-          <div className='.detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div>
+          <div className='detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div>
           <DisplayName account={status.get('account')} />
         </a>
 
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index a7d1b2865..1c798f2f2 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -496,6 +496,9 @@ a.status__content__spoiler-link {
 
 .status__display-name {
   color: lighten($color1, 26%);
+}
+
+.status__info .status__display-name {
   display: block;
   max-width: 100%;
   padding-right: 25px;
@@ -835,7 +838,7 @@ a.status__content__spoiler-link {
 }
 
 .detailed-status__display-avatar {
-  float: right;
+  float: left;
   margin-right: 10px;
 }
 
@@ -861,7 +864,7 @@ a.status__content__spoiler-link {
     opacity: 0.5;
   }
 
-  .status__content__spoiler-link {
+  a.status__content__spoiler-link {
     background: lighten($color1, 26%);
     color: lighten($color1, 4%);
 
@@ -889,6 +892,10 @@ a.status__content__spoiler-link {
 .notification__favourite-icon-wrapper {
   left: -26px;
   position: absolute;
+
+  .star-icon {
+    color: #ca8f04;
+  }
 }
 
 .star-icon.active {