From 200e11ae88cdecb131ac806857ef49a2021a212f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 19 Feb 2024 12:09:58 +0100 Subject: [PATCH] [Glitch] Change follow suggestions design in web UI Port 63f4ea055aceff47ae47eabe6da103af05ffafd5 to glitch-soc Signed-off-by: Claire --- .../components/inline_follow_suggestions.jsx | 25 ++++++++++++++++--- .../flavours/glitch/styles/components.scss | 9 +++++-- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx index d915f1e55f..97b64a09b1 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx +++ b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx @@ -21,6 +21,7 @@ import { DisplayName } from 'flavours/glitch/components/display_name'; import { Icon } from 'flavours/glitch/components/icon'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; +import { domain } from 'flavours/glitch/initial_state'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -28,27 +29,43 @@ const messages = defineMessages({ previous: { id: 'lightbox.previous', defaultMessage: 'Previous' }, next: { id: 'lightbox.next', defaultMessage: 'Next' }, dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" }, + friendsOfFriendsHint: { id: 'follow_suggestions.hints.friends_of_friends', defaultMessage: 'This profile is popular among the people you follow.' }, + similarToRecentlyFollowedHint: { id: 'follow_suggestions.hints.similar_to_recently_followed', defaultMessage: 'This profile is similar to the profiles you have most recently followed.' }, + featuredHint: { id: 'follow_suggestions.hints.featured', defaultMessage: 'This profile has been hand-picked by the {domain} team.' }, + mostFollowedHint: { id: 'follow_suggestions.hints.most_followed', defaultMessage: 'This profile is one of the most followed on {domain}.'}, + mostInteractionsHint: { id: 'follow_suggestions.hints.most_interactions', defaultMessage: 'This profile has been recently getting a lot of attention on {domain}.' }, }); const Source = ({ id }) => { - let label; + const intl = useIntl(); + + let label, hint; switch (id) { case 'friends_of_friends': + hint = intl.formatMessage(messages.friendsOfFriendsHint); + label = ; + break; case 'similar_to_recently_followed': + hint = intl.formatMessage(messages.similarToRecentlyFollowedHint); label = ; break; case 'featured': - label = ; + hint = intl.formatMessage(messages.featuredHint, { domain }); + label = ; break; case 'most_followed': + hint = intl.formatMessage(messages.mostFollowedHint, { domain }); + label = ; + break; case 'most_interactions': + hint = intl.formatMessage(messages.mostInteractionsHint, { domain }); label = ; break; } return ( -
+
{label}
@@ -92,7 +109,7 @@ const Card = ({ id, sources }) => { {firstVerifiedField ? : }
-