[Glitch] Change "Explore" to "Trending" and remove explanation banners

Port d1fb957361 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/explore/index.tsx

@@ -5,7 +5,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { NavLink, Switch, Route } from 'react-router-dom';
 
-import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
+import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
 import { Column } from 'flavours/glitch/components/column';
 import type { ColumnRef } from 'flavours/glitch/components/column';
 import { ColumnHeader } from 'flavours/glitch/components/column_header';
@@ -20,7 +20,7 @@ import Suggestions from './suggestions';
 import Tags from './tags';
 
 const messages = defineMessages({
-  title: { id: 'explore.title', defaultMessage: 'Explore' },
+  title: { id: 'explore.title', defaultMessage: 'Trending' },
 });
 
 const Explore: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
@@ -41,7 +41,7 @@ const Explore: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
     >
       <ColumnHeader
         icon={'explore'}
-        iconComponent={logoRequired ? SymbolLogo : ExploreIcon}
+        iconComponent={logoRequired ? SymbolLogo : TrendingUpIcon}
         title={intl.formatMessage(messages.title)}
         onClick={handleHeaderClick}
         multiColumn={multiColumn}

app/javascript/flavours/glitch/features/explore/links.jsx

@@ -43,17 +43,9 @@ class Links extends PureComponent {
   render () {
     const { isLoading, links } = this.props;
 
-    const banner = (
-      <DismissableBanner id='explore/links'>
-        <FormattedMessage id='dismissable_banner.explore_links' defaultMessage='These news stories are being shared the most on the fediverse today. Newer news stories posted by more different people are ranked higher.' />
-      </DismissableBanner>
-    );
-
     if (!isLoading && links.isEmpty()) {
       return (
         <div className='explore__links scrollable scrollable--flex'>
-          {banner}
-
           <div className='empty-column-indicator'>
             <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
           </div>
@@ -63,8 +55,6 @@ class Links extends PureComponent {
 
     return (
       <div className='explore__links scrollable' data-nosnippet>
-        {banner}
-
         {isLoading ? (<LoadingIndicator />) : links.map((link, i) => (
           <Story
             key={link.get('id')}

app/javascript/flavours/glitch/features/explore/statuses.jsx

@@ -58,7 +58,6 @@ class Statuses extends PureComponent {
     return (
       <StatusList
         trackScroll
-        prepend={<DismissableBanner id='explore/statuses'><FormattedMessage id='dismissable_banner.explore_statuses' defaultMessage='These posts from across the fediverse are gaining traction today. Newer posts with more boosts and favorites are ranked higher.' /></DismissableBanner>}
         alwaysPrepend
         timelineId='explore'
         statusIds={statusIds}

app/javascript/flavours/glitch/features/explore/tags.jsx

@@ -42,17 +42,9 @@ class Tags extends PureComponent {
   render () {
     const { isLoading, hashtags } = this.props;
 
-    const banner = (
-      <DismissableBanner id='explore/tags'>
-        <FormattedMessage id='dismissable_banner.explore_tags' defaultMessage='These hashtags are gaining traction on the fediverse today. Hashtags that are used by more different people are ranked higher.' />
-      </DismissableBanner>
-    );
-
     if (!isLoading && hashtags.isEmpty()) {
       return (
         <div className='explore__links scrollable scrollable--flex'>
-          {banner}
-
           <div className='empty-column-indicator'>
             <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
           </div>
@@ -62,8 +54,6 @@ class Tags extends PureComponent {
 
     return (
       <div className='scrollable explore__links' data-nosnippet>
-        {banner}
-
         {isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
           <Hashtag key={hashtag.get('name')} hashtag={hashtag} />
         ))}

app/javascript/flavours/glitch/features/link_timeline/index.tsx

@@ -3,7 +3,7 @@ import { useRef, useEffect, useCallback } from 'react';
 import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router-dom';
 
-import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
+import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
 import { expandLinkTimeline } from 'flavours/glitch/actions/timelines';
 import { Column } from 'flavours/glitch/components/column';
 import type { ColumnRef } from 'flavours/glitch/components/column';
@@ -50,7 +50,7 @@ export const LinkTimeline: React.FC<{
     <Column bindToDocument={!multiColumn} ref={columnRef} label={story?.title}>
       <ColumnHeader
         icon='explore'
-        iconComponent={ExploreIcon}
+        iconComponent={TrendingUpIcon}
         title={story?.title}
         onClick={handleHeaderClick}
         multiColumn={multiColumn}

app/javascript/flavours/glitch/features/ui/components/navigation_panel.tsx

@@ -15,8 +15,6 @@ import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import BookmarksActiveIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
 import BookmarksIcon from '@/material-icons/400-24px/bookmarks.svg?react';
-import ExploreActiveIcon from '@/material-icons/400-24px/explore-fill.svg?react';
-import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
 import HomeActiveIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home.svg?react';
 import InfoIcon from '@/material-icons/400-24px/info.svg?react';
@@ -30,6 +28,7 @@ import SearchIcon from '@/material-icons/400-24px/search.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
 import StarActiveIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import StarIcon from '@/material-icons/400-24px/star.svg?react';
+import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
 import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
 import { openModal } from 'flavours/glitch/actions/modal';
 import {
@@ -62,7 +61,7 @@ const messages = defineMessages({
     id: 'tabs_bar.notifications',
     defaultMessage: 'Notifications',
   },
-  explore: { id: 'explore.title', defaultMessage: 'Explore' },
+  explore: { id: 'explore.title', defaultMessage: 'Trending' },
   firehose: { id: 'column.firehose', defaultMessage: 'Live feeds' },
   direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' },
   favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
@@ -203,8 +202,7 @@ const SearchLink: React.FC = () => {
       transparent
       to='/explore'
       icon='explore'
-      iconComponent={ExploreIcon}
+      iconComponent={TrendingUpIcon}
-      activeIconComponent={ExploreActiveIcon}
       text={intl.formatMessage(messages.explore)}
     />
   );