commit: 7ee8e50b9cf15fd01719ec9a073fcacb18f31eeb
parent: 995f0ad51ca2d151291ff827c7e0b2378ff0e108
Author: Stephen Burgess <stephenburgess8@gmail.com>
Date: Sun, 23 Apr 2017 14:34:33 -0500
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.
Diffstat:
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
@@ -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
@@ -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 {