src/component/AppNavigator.js

@@ -88,12 +88,13 @@ const menuNavigationButton = navigation => (
 
 const discoverStack = createStackNavigator(
   {
-    Discover: {
-      screen: DiscoverPage,
-      navigationOptions: ({ navigation }) => ({
-        title: 'Explore',
+    Subscriptions: {
+      screen: SubscriptionsPage,
+      navigationOptions: {
+        title: 'Following',
         header: null,
-      }),
+        drawerIcon: ({ tintColor }) => <Icon name="heart" solid size={drawerIconSize} style={{ color: tintColor }} />,
+      },
     },
     File: {
       screen: FilePage,
@@ -160,10 +161,17 @@ const drawer = createDrawerNavigator(
     DiscoverStack: {
       screen: discoverStack,
       navigationOptions: {
-        title: 'Explore',
+        title: 'Following',
         drawerIcon: ({ tintColor }) => <Icon name="home" size={drawerIconSize} style={{ color: tintColor }} />,
       },
     },
+    Discover: {
+      screen: DiscoverPage,
+      navigationOptions: ({ navigation }) => ({
+        title: 'Your Tags',
+        header: null,
+      }),
+    },
     Trending: {
       screen: TrendingPage,
       navigationOptions: {
@@ -171,13 +179,6 @@ const drawer = createDrawerNavigator(
         drawerIcon: ({ tintColor }) => <Icon name="fire" size={drawerIconSize} style={{ color: tintColor }} />,
       },
     },
-    Subscriptions: {
-      screen: SubscriptionsPage,
-      navigationOptions: {
-        title: 'Subscriptions',
-        drawerIcon: ({ tintColor }) => <Icon name="heart" solid size={drawerIconSize} style={{ color: tintColor }} />,
-      },
-    },
     WalletStack: {
       screen: walletStack,
       navigationOptions: {

src/component/drawerContent/view.js

@@ -9,8 +9,8 @@ import discoverStyle from 'styles/discover';
 
 const groupedMenuItems = {
   'Find content': [
-    { icon: 'hashtag', label: 'Your Tags', route: Constants.DRAWER_ROUTE_DISCOVER },
     { icon: 'heart', solid: true, label: 'Following', route: Constants.DRAWER_ROUTE_SUBSCRIPTIONS },
+    { icon: 'hashtag', label: 'Your Tags', route: Constants.DRAWER_ROUTE_DISCOVER },
     { icon: 'globe-americas', label: 'All Content', route: Constants.DRAWER_ROUTE_TRENDING },
   ],
   'Your content': [
@@ -145,7 +145,7 @@ class DrawerContent extends React.PureComponent {
                     const focused =
                       activeItemKey === item.route ||
                       (activeItemKey === Constants.FULL_ROUTE_NAME_DISCOVER &&
-                        item.route === Constants.DRAWER_ROUTE_DISCOVER) ||
+                        item.route === Constants.DRAWER_ROUTE_SUBSCRIPTIONS) ||
                       (activeItemKey === Constants.FULL_ROUTE_NAME_WALLET &&
                         item.route === Constants.DRAWER_ROUTE_WALLET);
                     return (

src/component/modalSuggestedSubscriptions/view.js

@@ -4,7 +4,7 @@ import modalStyle from 'styles/modal';
 import subscriptionsStyle from 'styles/subscriptions';
 import Button from 'component/button';
 import Colors from 'styles/colors';
-import SuggestedSubscriptions from 'component/suggestedSubscriptions';
+import SuggestedSubscriptionsGrid from 'component/suggestedSubscriptionsGrid';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import Icon from 'react-native-vector-icons/FontAwesome5';
 
@@ -15,7 +15,7 @@ export default class ModalSuggestedSubcriptions extends React.PureComponent {
     return (
       <TouchableOpacity style={modalStyle.overlay} activeOpacity={1} onPress={onOverlayPress}>
         <TouchableOpacity style={[modalStyle.container, subscriptionsStyle.modalContainer]} activeOpacity={1}>
-          <SuggestedSubscriptions inModal navigation={navigation} />
+          <SuggestedSubscriptionsGrid inModal navigation={navigation} />
           <View style={modalStyle.buttons}>
             <Button style={modalStyle.doneButton} text={__('Done')} onPress={onDonePress} />
           </View>

src/component/subscribeButtonOverlay/index.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { doChannelSubscribe, doChannelUnsubscribe, selectSubscriptions, makeSelectIsSubscribed } from 'lbryinc';
+import { doToast } from 'lbry-redux';
+import SubscribeButtonOverlay from './view';
+
+const select = (state, props) => ({
+  subscriptions: selectSubscriptions(state),
+  isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
+});
+
+export default connect(
+  select,
+  {
+    doChannelSubscribe,
+    doChannelUnsubscribe,
+    doToast,
+  },
+)(SubscribeButtonOverlay);

src/component/subscribeButtonOverlay/view.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { normalizeURI, parseURI } from 'lbry-redux';
+import { NativeModules, Text, View, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import Button from 'component/button';
+import Colors from 'styles/colors';
+
+class SubscribeButtonOverlay extends React.PureComponent {
+  handlePress = () => {
+    const { claim, isSubscribed, doChannelSubscribe, doChannelUnsubscribe, uri } = this.props;
+    if (!claim) {
+      return;
+    }
+
+    const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
+    const { name: claimName } = claim;
+    subscriptionHandler({
+      channelName: claimName,
+      uri: normalizeURI(uri),
+    });
+  };
+
+  render() {
+    const { uri, isSubscribed, style } = this.props;
+
+    let styles = [];
+    if (style) {
+      if (style.length) {
+        styles = styles.concat(style);
+      } else {
+        styles.push(style);
+      }
+    }
+
+    return (
+      <TouchableOpacity style={styles} opacity={0.8} onPress={this.handlePress}>
+        {isSubscribed && <Icon name={'heart-broken'} size={20} color={Colors.DarkGrey} />}
+        {!isSubscribed && <Icon name={'heart'} size={20} solid color={Colors.Red} />}
+      </TouchableOpacity>
+    );
+  }
+}
+
+export default SubscribeButtonOverlay;

src/component/suggestedSubscriptionItem/index.js

@@ -6,6 +6,7 @@ import {
   makeSelectTitleForUri,
   makeSelectIsUriResolving,
 } from 'lbry-redux';
+import { doChannelSubscribe, doChannelUnsubscribe, makeSelectIsSubscribed } from 'lbryinc';
 import SuggestedSubscriptionItem from './view';
 
 const select = (state, props) => ({
@@ -13,13 +14,16 @@ const select = (state, props) => ({
   title: makeSelectTitleForUri(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
   isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+  isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
 });
 
 const perform = dispatch => ({
   resolveUri: uri => dispatch(doResolveUri(uri)),
+  subscribe: subscription => doChannelSubscribe(subscription),
+  unsubscribe: subscription => doChannelUnsubscribe(subscription),
 });
 
 export default connect(
   select,
-  perform
+  perform,
 )(SuggestedSubscriptionItem);

src/component/suggestedSubscriptionItem/view.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { buildURI, normalizeURI } from 'lbry-redux';
-import { ActivityIndicator, FlatList, Image, Text, View } from 'react-native';
+import { ActivityIndicator, FlatList, Image, Text, TouchableOpacity, View } from 'react-native';
 import { navigateToUri } from 'utils/helper';
 import Colors from 'styles/colors';
 import ChannelIconItem from 'component/channelIconItem';
 import channelIconStyle from 'styles/channelIcon';
 import discoverStyle from 'styles/discover';
 import FileItem from 'component/fileItem';
-import SubscribeButton from 'component/subscribeButton';
+import SubscribeButtonOverlay from 'component/subscribeButtonOverlay';
 import subscriptionsStyle from 'styles/subscriptions';
 import Link from 'component/link';
 import Tag from 'component/tag';
@@ -31,6 +31,7 @@ class SuggestedSubscriptionItem extends React.PureComponent {
 
   render() {
     const { claim, isResolvingUri, navigation, thumbnail, title, uri } = this.props;
+
     let shortUrl, tags;
     if (claim) {
       shortUrl = claim.short_url;
@@ -49,7 +50,7 @@ class SuggestedSubscriptionItem extends React.PureComponent {
     }
 
     return (
-      <View style={subscriptionsStyle.suggestedItem}>
+      <TouchableOpacity style={subscriptionsStyle.suggestedItem}>
         <View style={[subscriptionsStyle.suggestedItemThumbnailContainer, this.state.autoStyle]}>
           {hasThumbnail && (
             <Image style={subscriptionsStyle.suggestedItemThumbnail} resizeMode={'cover'} source={{ uri: thumbnail }} />
@@ -62,24 +63,14 @@ class SuggestedSubscriptionItem extends React.PureComponent {
         </View>
 
         <View style={subscriptionsStyle.suggestedItemDetails}>
-          {title && (
-            <Text style={subscriptionsStyle.suggestedItemTitle} numberOfLines={1}>
-              {title}
-            </Text>
-          )}
-          {claim && (
-            <Link
-              style={subscriptionsStyle.suggestedItemName}
-              numberOfLines={1}
-              text={claim.name}
-              onPress={() => navigateToUri(navigation, normalizeURI(shortUrl || uri), null, false, claim.permanent_url)}
-            />
-          )}
+          <Text style={subscriptionsStyle.suggestedItemTitle} numberOfLines={1}>
+            {title || claim.name}
+          </Text>
           {tags && (
             <View style={subscriptionsStyle.suggestedItemTagList}>
               {tags &&
                 tags
-                  .slice(0, 3)
+                  .slice(0, 1)
                   .map(tag => (
                     <Tag style={subscriptionsStyle.tag} key={tag} name={tag} navigation={navigation} truncate />
                   ))}
@@ -88,9 +79,13 @@ class SuggestedSubscriptionItem extends React.PureComponent {
         </View>
 
         {claim && (
-          <SubscribeButton style={subscriptionsStyle.suggestedItemSubscribe} uri={normalizeURI(claim.permanent_url)} />
+          <SubscribeButtonOverlay
+            claim={claim}
+            style={subscriptionsStyle.suggestedItemSubscribeOverlay}
+            uri={normalizeURI(claim.permanent_url)}
+          />
         )}
-      </View>
+      </TouchableOpacity>
     );
   }
 }

src/component/suggestedSubscriptionsGrid/index.js

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import { doClaimSearch, selectFetchingClaimSearch, selectClaimSearchByQuery, selectFollowedTags } from 'lbry-redux';
+import { selectSuggestedChannels, selectIsFetchingSuggested } from 'lbryinc';
+import { selectShowNsfw } from 'redux/selectors/settings';
+import SuggestedSubscriptionsGrid from './view';
+
+const select = state => ({
+  followedTags: selectFollowedTags(state),
+  suggested: selectSuggestedChannels(state),
+  loading: selectIsFetchingSuggested(state) || selectFetchingClaimSearch(state),
+  claimSearchByQuery: selectClaimSearchByQuery(state),
+  showNsfwContent: selectShowNsfw(state),
+});
+
+const perform = dispatch => ({
+  claimSearch: options => dispatch(doClaimSearch(options)),
+});
+
+export default connect(
+  select,
+  perform,
+)(SuggestedSubscriptionsGrid);

src/component/suggestedSubscriptionsGrid/view.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ActivityIndicator, SectionList, Text, View } from 'react-native';
+import { MATURE_TAGS, createNormalizedClaimSearchKey, normalizeURI } from 'lbry-redux';
+import { navigateToUri } from 'utils/helper';
+import { FlatGrid } from 'react-native-super-grid';
+import SubscribeButton from 'component/subscribeButton';
+import SuggestedSubscriptionItem from 'component/suggestedSubscriptionItem';
+import Colors from 'styles/colors';
+import discoverStyle from 'styles/discover';
+import subscriptionsStyle from 'styles/subscriptions';
+import Link from 'component/link';
+import _ from 'lodash';
+
+class SuggestedSubscriptionsGrid extends React.PureComponent {
+  state = {
+    options: {},
+  };
+
+  componentDidMount() {
+    const { claimSearch, followedTags, showNsfwContent } = this.props;
+    const options = {
+      page: 1,
+      page_size: 99,
+      no_totals: true,
+      claim_type: 'channel',
+      order_by: ['trending_global', 'trending_mixed'],
+    };
+    if (!showNsfwContent) {
+      options.not_tags = MATURE_TAGS;
+    }
+    this.setState({ options });
+    claimSearch(options);
+  }
+
+  render() {
+    const { claimSearchByQuery, suggested, inModal, loading, navigation } = this.props;
+    const claimSearchKey = createNormalizedClaimSearchKey(this.state.options);
+    const claimSearchUris = claimSearchByQuery[claimSearchKey];
+
+    if (loading) {
+      return (
+        <View style={subscriptionsStyle.centered}>
+          <ActivityIndicator size="large" color={Colors.NextLbryGreen} />
+        </View>
+      );
+    }
+
+    return (
+      <FlatGrid
+        horizontal
+        initialNumToRender={18}
+        maxToRenderPerBatch={24}
+        removeClippedSubviews
+        itemDimension={120}
+        spacing={2}
+        items={claimSearchUris}
+        style={inModal ? subscriptionsStyle.modalScrollContainer : subscriptionsStyle.scrollContainer}
+        contentContainerStyle={
+          inModal ? subscriptionsStyle.modalSuggestedScrollContent : subscriptionsStyle.suggestedScrollContent
+        }
+        renderItem={({ item, index }) => (
+          <SuggestedSubscriptionItem key={item} uri={normalizeURI(item)} navigation={navigation} />
+        )}
+      />
+    );
+  }
+}
+
+export default SuggestedSubscriptionsGrid;

src/page/discover/view.js

@@ -64,9 +64,7 @@ class DiscoverPage extends React.PureComponent {
 
   onComponentFocused = () => {
     const { pushDrawerStack, setPlayerVisible, currentRoute } = this.props;
-    if (currentRoute === Constants.DRAWER_ROUTE_DISCOVER) {
-      pushDrawerStack();
-    }
+    pushDrawerStack();
 
     NativeModules.Firebase.setCurrentScreen('Your tags');
     setPlayerVisible();

src/page/subscriptions/index.js

@@ -14,6 +14,7 @@ import {
   selectFirstRunCompleted,
   selectShowSuggestedSubs,
 } from 'lbryinc';
+import { doToast } from 'lbry-redux';
 import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
 import { doSetClientSetting, doSetTimeItem } from 'redux/actions/settings';
 import { makeSelectClientSetting, selectTimeItem } from 'redux/selectors/settings';
@@ -41,6 +42,7 @@ const perform = dispatch => ({
   doFetchMySubscriptions: () => dispatch(doFetchMySubscriptions()),
   doFetchRecommendedSubscriptions: () => dispatch(doFetchRecommendedSubscriptions()),
   doSetViewMode: viewMode => dispatch(doSetViewMode(viewMode)),
+  notify: data => dispatch(doToast(data)),
   pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SUBSCRIPTIONS)),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
@@ -49,5 +51,5 @@ const perform = dispatch => ({
 
 export default connect(
   select,
-  perform
+  perform,
 )(SubscriptionsPage);

src/page/subscriptions/view.js

@@ -28,6 +28,7 @@ import ModalPicker from 'component/modalPicker';
 import ModalSuggestedSubscriptions from 'component/modalSuggestedSubscriptions';
 import SubscribedChannelList from 'component/subscribedChannelList';
 import SuggestedSubscriptions from 'component/suggestedSubscriptions';
+import SuggestedSubscriptionsGrid from 'component/suggestedSubscriptionsGrid';
 import UriBar from 'component/uriBar';
 
 class SubscriptionsPage extends React.PureComponent {
@@ -56,6 +57,7 @@ class SubscriptionsPage extends React.PureComponent {
 
   onComponentFocused = () => {
     const {
+      currentRoute,
       doFetchMySubscriptions,
       doFetchRecommendedSubscriptions,
       doSetViewMode,
@@ -64,12 +66,13 @@ class SubscriptionsPage extends React.PureComponent {
       subscriptionsViewMode,
     } = this.props;
 
-    pushDrawerStack();
+    if (currentRoute === Constants.DRAWER_ROUTE_SUBSCRIPTIONS) {
+      pushDrawerStack();
+    }
     setPlayerVisible();
     NativeModules.Firebase.setCurrentScreen('Subscriptions');
 
     doFetchMySubscriptions();
-    doFetchRecommendedSubscriptions();
   };
 
   componentDidMount() {
@@ -90,6 +93,15 @@ class SubscriptionsPage extends React.PureComponent {
     this.setState({ currentSortByItem: item, orderBy: getOrderBy(item), showSortPicker: false });
   };
 
+  shouldComponentUpdate(nextProps, nextState) {
+    const { showModalSuggestedSubs: prevShowModalSuggestedSubs } = this.state;
+    const { showModalSuggestedSubs } = this.state;
+    if (prevShowModalSuggestedSubs && showModalSuggestedSubs) {
+      return false;
+    }
+    return true;
+  }
+
   handleTimeItemSelected = item => {
     const { setTimeItem } = this.props;
     setTimeItem(item);
@@ -138,6 +150,7 @@ class SubscriptionsPage extends React.PureComponent {
       timeItem,
       unreadSubscriptions,
       navigation,
+      notify,
     } = this.props;
     const { currentSortByItem, filteredChannels, showModalSuggestedSubs, showSortPicker, showTimePicker } = this.state;
 
@@ -164,7 +177,9 @@ class SubscriptionsPage extends React.PureComponent {
       <View style={subscriptionsStyle.container}>
         <UriBar navigation={navigation} belowOverlay={this.state.showSortPicker} />
         <View style={subscriptionsStyle.titleRow}>
-          <Text style={subscriptionsStyle.pageTitle}>{__('Channels you follow')}</Text>
+          <Text style={subscriptionsStyle.pageTitle}>
+            {hasSubscriptions ? __('Channels you follow') : __('Find Channels to follow')}
+          </Text>
         </View>
         {!this.state.showingSuggestedSubs && hasSubscriptions && (
           <View style={subscriptionsStyle.pickerRow}>
@@ -220,37 +235,37 @@ class SubscriptionsPage extends React.PureComponent {
 
         {this.state.showingSuggestedSubs && (
           <View style={subscriptionsStyle.suggestedSubsContainer}>
-            {!hasSubscriptions && (
-              <View style={subscriptionsStyle.infoArea}>
-                <Text style={subscriptionsStyle.infoText}>
-                  {__('You are not subscribed to any channels at the moment.')}
-                </Text>
-              </View>
-            )}
-
-            {hasSubscriptions && (
-              <View style={subscriptionsStyle.infoArea}>
-                <Text style={subscriptionsStyle.infoText}>
-                  You are currently subscribed to {numberOfSubscriptions} channel{numberOfSubscriptions > 1 ? 's' : ''}.
-                </Text>
-                <Button
-                  style={subscriptionsStyle.button}
-                  text={__('View my subscriptions')}
-                  onPress={() => this.setState({ showingSuggestedSubs: false })}
-                />
-              </View>
-            )}
+            <View style={subscriptionsStyle.infoArea}>
+              <Text style={subscriptionsStyle.infoText}>
+                {__('LBRY works better if you find and follow at least 5 creators you like.')}
+              </Text>
+              <Button
+                style={subscriptionsStyle.suggestedDoneButton}
+                text={
+                  numberOfSubscriptions < 5
+                    ? __('%remaining% more...', { remaining: 5 - numberOfSubscriptions })
+                    : __('Done')
+                }
+                onPress={() => {
+                  if (!hasSubscriptions) {
+                    notify({ message: __('Tap on any channel to follow') });
+                  } else {
+                    this.setState({ showingSuggestedSubs: false });
+                  }
+                }}
+              />
+            </View>
 
             {loadingSuggested && (
               <View style={subscriptionsStyle.centered}>
                 <ActivityIndicator size="large" colors={Colors.NextLbryGreen} style={subscriptionsStyle.loading} />
               </View>
             )}
-            {!loadingSuggested && <SuggestedSubscriptions navigation={navigation} />}
+            {!loadingSuggested && <SuggestedSubscriptionsGrid navigation={navigation} />}
           </View>
         )}
 
-        {!showSortPicker && !showTimePicker && !showModalSuggestedSubs && (
+        {false && !showSortPicker && !showTimePicker && !showModalSuggestedSubs && (
           <FloatingWalletBalance navigation={navigation} />
         )}
         {showSortPicker && (

src/redux/reducers/drawer.js

@@ -2,7 +2,7 @@ import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 
 const reducers = {};
 const defaultState = {
-  stack: [{ route: Constants.DRAWER_ROUTE_DISCOVER, params: {} }], // Discover is always the first drawer route
+  stack: [{ route: Constants.DRAWER_ROUTE_SUBSCRIPTIONS, params: {} }], // Following is always the first drawer route
   lastRouteInStack: {},
   playerVisible: false,
   playerVisibleByUri: {},
@@ -42,7 +42,7 @@ reducers[Constants.ACTION_PUSH_DRAWER_STACK] = (state, action) => {
   if (lastRoute === Constants.DRAWER_ROUTE_PUBLISH_FORM && routeName === Constants.DRAWER_ROUTE_PUBLISH) {
     canPushStack = false;
   }
-  if (routeName === Constants.DRAWER_ROUTE_DISCOVER && newStack.length === 1) {
+  if (routeName === Constants.DRAWER_ROUTE_SUBSCRIPTIONS && newStack.length === 1) {
     canPushStack = false;
   }
 

src/styles/subscriptions.js

@@ -41,8 +41,11 @@ const subscriptionsStyle = StyleSheet.create({
     fontSize: 16,
     marginTop: 8,
     marginBottom: 8,
+    flex: 0.7,
   },
   infoArea: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     marginLeft: 16,
     marginRight: 16,
     paddingBottom: 4,
@@ -188,11 +191,11 @@ const subscriptionsStyle = StyleSheet.create({
     justifyContent: 'center',
   },
   suggestedItem: {
-    flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 16,
     marginLeft: 16,
     marginRight: 16,
+    width: 120,
   },
   suggestedItemThumbnailContainer: {
     width: 70,
@@ -209,30 +212,34 @@ const subscriptionsStyle = StyleSheet.create({
   suggestedItemDetails: {
     marginLeft: 16,
     marginRight: 16,
-    flex: 0.8,
   },
   suggestedItemSubscribe: {
     backgroundColor: Colors.White,
+  },
+  suggestedItemSubscribeOverlay: {
     position: 'absolute',
+    left: 0,
     right: 0,
     top: 0,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingBottom: 4,
+    height: 70,
   },
   suggestedItemTitle: {
     fontFamily: 'Inter-Regular',
     fontSize: 16,
     marginBottom: 4,
-    width: '85%',
   },
   suggestedItemName: {
     fontFamily: 'Inter-SemiBold',
     fontSize: 14,
     marginBottom: 4,
     color: Colors.LbryGreen,
-    width: '95%',
   },
   suggestedItemTagList: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    justifyContent: 'center',
   },
   suggestedSubTitle: {
     fontFamily: 'Inter-Regular',
@@ -266,6 +273,13 @@ const subscriptionsStyle = StyleSheet.create({
   modalSuggestedScrollContent: {
     paddingTop: 16,
   },
+  suggestedDoneButton: {
+    backgroundColor: Colors.LbryGreen,
+    position: 'absolute',
+    right: 8,
+    top: 8,
+    zIndex: 100,
+  },
 });
 
 export default subscriptionsStyle;