Change follow suggestions design in web UI (#29272)

app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.jsx

@@ -21,6 +21,7 @@ import { DisplayName } from 'mastodon/components/display_name';
 import { Icon } from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { domain } from 'mastodon/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 = <FormattedMessage id='follow_suggestions.personalized_suggestion' defaultMessage='Personalized suggestion' />;
+    break;
   case 'similar_to_recently_followed':
+    hint = intl.formatMessage(messages.similarToRecentlyFollowedHint);
     label = <FormattedMessage id='follow_suggestions.personalized_suggestion' defaultMessage='Personalized suggestion' />;
     break;
   case 'featured':
-    label = <FormattedMessage id='follow_suggestions.curated_suggestion' defaultMessage="Editors' Choice" />;
+    hint = intl.formatMessage(messages.featuredHint, { domain });
+    label = <FormattedMessage id='follow_suggestions.curated_suggestion' defaultMessage='Staff pick' />;
     break;
   case 'most_followed':
+    hint = intl.formatMessage(messages.mostFollowedHint, { domain });
+    label = <FormattedMessage id='follow_suggestions.popular_suggestion' defaultMessage='Popular suggestion' />;
+    break;
   case 'most_interactions':
+    hint = intl.formatMessage(messages.mostInteractionsHint, { domain });
     label = <FormattedMessage id='follow_suggestions.popular_suggestion' defaultMessage='Popular suggestion' />;
     break;
   }
 
   return (
-    <div className='inline-follow-suggestions__body__scrollable__card__text-stack__source'>
+    <div className='inline-follow-suggestions__body__scrollable__card__text-stack__source' title={hint}>
       <Icon icon={InfoIcon} />
       {label}
     </div>
@@ -92,7 +109,7 @@ const Card = ({ id, sources }) => {
         {firstVerifiedField ? <VerifiedBadge link={firstVerifiedField.get('value')} /> : <Source id={sources.get(0)} />}
       </div>
 
-      <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={handleFollow} />
+      <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} secondary={following} onClick={handleFollow} />
     </div>
   );
 };

app/javascript/mastodon/locales/en.json

@@ -277,8 +277,13 @@
   "follow_request.authorize": "Authorize",
   "follow_request.reject": "Reject",
   "follow_requests.unlocked_explanation": "Even though your account is not locked, the {domain} staff thought you might want to review follow requests from these accounts manually.",
-  "follow_suggestions.curated_suggestion": "Editors' Choice",
+  "follow_suggestions.curated_suggestion": "Staff pick",
   "follow_suggestions.dismiss": "Don't show again",
+  "follow_suggestions.hints.featured": "This profile has been hand-picked by the {domain} team.",
+  "follow_suggestions.hints.friends_of_friends": "This profile is popular among the people you follow.",
+  "follow_suggestions.hints.most_followed": "This profile is one of the most followed on {domain}.",
+  "follow_suggestions.hints.most_interactions": "This profile has been recently getting a lot of attention on {domain}.",
+  "follow_suggestions.hints.similar_to_recently_followed": "This profile is similar to the profiles you have most recently followed.",
   "follow_suggestions.personalized_suggestion": "Personalized suggestion",
   "follow_suggestions.popular_suggestion": "Popular suggestion",
   "follow_suggestions.view_all": "View all",

app/javascript/styles/mastodon/components.scss

@@ -9416,6 +9416,7 @@ noscript {
   flex-direction: column;
   gap: 12px;
   padding: 16px 0;
+  padding-bottom: 0;
   border-bottom: 1px solid mix($ui-base-color, $ui-highlight-color, 75%);
   background: mix($ui-base-color, $ui-highlight-color, 95%);
 
@@ -9454,6 +9455,7 @@ noscript {
       cursor: pointer;
       top: 0;
       color: $primary-text-color;
+      opacity: 0.5;
 
       &.left {
         left: 0;
@@ -9481,6 +9483,8 @@ noscript {
       &:hover,
       &:focus,
       &:active {
+        opacity: 1;
+
         .inline-follow-suggestions__body__scroll-button__icon {
           background: lighten($ui-highlight-color, 4%);
         }
@@ -9492,11 +9496,10 @@ noscript {
       flex-wrap: nowrap;
       gap: 16px;
       padding: 16px;
-      padding-bottom: 0;
       scroll-snap-type: x mandatory;
       scroll-padding: 16px;
       scroll-behavior: smooth;
-      overflow-x: hidden;
+      overflow-x: scroll;
 
       &__card {
         background: darken($ui-base-color, 4%);
@@ -9521,6 +9524,7 @@ noscript {
           position: absolute;
           inset-inline-end: 8px;
           top: 8px;
+          opacity: 0.75;
         }
 
         &__avatar {
@@ -9558,6 +9562,7 @@ noscript {
             gap: 4px;
             overflow: hidden;
             white-space: nowrap;
+            cursor: help;
 
             > span {
               overflow: hidden;