Add empty state message for follow recommendations in web UI (#16161)
This commit is contained in:
parent
6d9ad30bf8
commit
8d75bd002d
@ -75,10 +75,14 @@ class FollowRecommendations extends ImmutablePureComponent {
|
||||
|
||||
{!isLoading && (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
{suggestions.map(suggestion => (
|
||||
<div className='column-list'>
|
||||
{suggestions.size > 0 ? suggestions.map(suggestion => (
|
||||
<Account key={suggestion.get('account')} id={suggestion.get('account')} />
|
||||
))}
|
||||
)) : (
|
||||
<div className='column-list__empty-message'>
|
||||
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='column-actions'>
|
||||
|
@ -2525,6 +2525,22 @@ a.account__display-name {
|
||||
}
|
||||
}
|
||||
|
||||
.column-list {
|
||||
margin: 0 20px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
background: darken($ui-base-color, 2%);
|
||||
border-radius: 4px;
|
||||
|
||||
&__empty-message {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-panel {
|
||||
width: 285px;
|
||||
margin-top: 10px;
|
||||
|
Loading…
Reference in New Issue
Block a user