From b571bc3278e39fda2caaa6663cdfd0015eb716b7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 5 May 2021 23:57:29 +0200 Subject: [PATCH] [Glitch] Add empty state message for follow recommendations in web UI Port 8d75bd002da5011237b537b522a5b6248e99b9d5 to glitch-soc Signed-off-by: Claire --- .../features/follow_recommendations/index.js | 10 +++++++--- .../glitch/styles/components/columns.scss | 16 ++++++++++++++++ 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/features/follow_recommendations/index.js b/app/javascript/flavours/glitch/features/follow_recommendations/index.js index ac75062e0e2..aea841bd65d 100644 --- a/app/javascript/flavours/glitch/features/follow_recommendations/index.js +++ b/app/javascript/flavours/glitch/features/follow_recommendations/index.js @@ -75,10 +75,14 @@ class FollowRecommendations extends ImmutablePureComponent { {!isLoading && ( -
- {suggestions.map(suggestion => ( +
+ {suggestions.size > 0 ? suggestions.map(suggestion => ( - ))} + )) : ( +
+ +
+ )}
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index c6045e96e4e..7f3d27dba2c 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -839,3 +839,19 @@ width: auto; } } + +.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; + } +}