[C-2760, C-2779] Fix header for playlist and artists tabs in explore …

…screen (#3579)

packages/mobile/src/components/core/CardList.tsx

@@ -35,9 +35,11 @@ const DefaultLoadingCard = () => null
 
 const useStyles = makeStyles(({ spacing }) => ({
   cardList: {
-    padding: spacing(3),
     paddingRight: 0
   },
+  columnWrapper: {
+    paddingLeft: spacing(3)
+  },
   card: {
     width: '50%',
     paddingRight: spacing(3),
@@ -90,6 +92,7 @@ export function CardList<ItemT extends {}>(props: CardListProps<ItemT>) {
   return (
     <FlatListComponent
       style={styles.cardList}
+      columnWrapperStyle={styles.columnWrapper}
       ref={ref}
       data={data}
       renderItem={handleRenderItem}

packages/mobile/src/screens/explore-screen/components/TabInfo.tsx

@@ -13,6 +13,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     backgroundColor: palette.white,
     padding: spacing(4),
     paddingHorizontal: spacing(7),
+    marginBottom: spacing(3),
     ...shadow()
   },
   header: {

packages/mobile/src/screens/explore-screen/tabs/ArtistsTab.tsx

@@ -37,8 +37,8 @@ export const ArtistsTab = () => {
       isLoading={
         exploreStatus === Status.LOADING || artistsStatus !== Status.SUCCESS
       }
-      profiles={artists}
       ListHeaderComponent={<TabInfo header={messages.infoHeader} />}
+      profiles={artists}
     />
   )
 }

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/ForYouTab.tsx

@@ -36,7 +36,7 @@ const useStyles = makeStyles(({ spacing }) => ({
   },
   contentContainer: {
     padding: spacing(3),
-    paddingVertical: spacing(6),
+    paddingBottom: spacing(6),
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'space-between'

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/LetThemDJScreen.tsx

@@ -12,6 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { CollectionList } from 'app/components/collection-list'
 import { Screen, ScreenContent, ScreenHeader } from 'app/components/core'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
+import { spacing } from 'app/styles/spacing'
 
 import { LET_THEM_DJ } from '../../collections'
 const { getCollections, getStatus } = explorePageCollectionsSelectors
@@ -38,7 +39,10 @@ export const LetThemDJScreen = () => {
       <ScreenContent>
         <View style={{ flex: 1 }}>
           <WithLoader loading={status === Status.LOADING}>
-            <CollectionList collection={exploreData} />
+            <CollectionList
+              style={{ paddingTop: spacing(3) }}
+              collection={exploreData}
+            />
           </WithLoader>
         </View>
       </ScreenContent>

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TopAlbumsScreen.tsx

@@ -11,6 +11,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { CollectionList } from 'app/components/collection-list'
 import { Screen, ScreenContent, ScreenHeader } from 'app/components/core'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
+import { spacing } from 'app/styles/spacing'
 
 import { TOP_ALBUMS } from '../../collections'
 const { getCollections, getStatus } = explorePageCollectionsSelectors
@@ -36,7 +37,10 @@ export const TopAlbumsScreen = () => {
       <ScreenHeader text={TOP_ALBUMS.title} />
       <ScreenContent>
         <WithLoader loading={status === Status.LOADING}>
-          <CollectionList collection={exploreData} />
+          <CollectionList
+            style={{ paddingTop: spacing(3) }}
+            collection={exploreData}
+          />
         </WithLoader>
       </ScreenContent>
     </Screen>

packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TrendingUndergroundScreen.tsx

@@ -6,7 +6,7 @@ import {
 import { useSelector } from 'react-redux'
 
 import { RewardsBanner } from 'app/components/audio-rewards'
-import { ScreenContent, ScreenHeader } from 'app/components/core'
+import { Screen, ScreenContent, ScreenHeader } from 'app/components/core'
 import { Lineup } from 'app/components/lineup'
 const { makeGetLineupMetadatas } = lineupSelectors
 const { getLineup } = trendingUndergroundPageLineupSelectors
@@ -21,7 +21,7 @@ export const TrendingUndergroundScreen = () => {
   const lineup = useSelector(getTrendingUndergroundLineup)
 
   return (
-    <>
+    <Screen>
       <ScreenHeader text={messages.header} />
       <ScreenContent>
         <Lineup
@@ -33,6 +33,6 @@ export const TrendingUndergroundScreen = () => {
           selfLoad
         />
       </ScreenContent>
-    </>
+    </Screen>
   )
 }

packages/mobile/src/screens/explore-screen/tabs/MoodsTab.tsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles(({ spacing }) => ({
     flexDirection: 'row',
     flexWrap: 'wrap',
     padding: spacing(3),
-    paddingVertical: spacing(6)
+    paddingBottom: spacing(6)
   }
 }))
 

packages/mobile/src/screens/mood-collection-screen/MoodCollectionScreen.tsx

@@ -48,7 +48,7 @@ export const MoodCollectionScreen = ({
         <WithLoader loading={status === Status.LOADING}>
           <CollectionList
             collection={exploreData}
-            style={{ marginBottom: spacing(12) }}
+            style={{ paddingTop: spacing(3), marginBottom: spacing(10) }}
           />
         </WithLoader>
       </ScreenContent>

packages/mobile/src/screens/profile-screen/AlbumsTab.tsx

@@ -35,6 +35,7 @@ export const AlbumsTab = () => {
   return (
     <CollectionList
       collection={album_count > 0 ? albums : emptyAlbums}
+      style={{ paddingTop: album_count > 0 ? 12 : 0 }}
       ListEmptyComponent={<EmptyProfileTile tab='albums' />}
       disableTopTabScroll
       showsVerticalScrollIndicator={false}

packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx

@@ -45,6 +45,7 @@ export const PlaylistsTab = () => {
   return (
     <CollectionList
       collection={playlist_count > 0 ? playlists : emptyPlaylists}
+      style={{ paddingTop: playlist_count > 0 ? 12 : 0 }}
       ListEmptyComponent={<EmptyProfileTile tab='playlists' />}
       disableTopTabScroll
       showsVerticalScrollIndicator={false}

packages/mobile/src/screens/search-results-screen/tabs/AlbumsTab.tsx

@@ -7,6 +7,7 @@ import {
 } from '@audius/common'
 
 import { CollectionList } from 'app/components/collection-list/CollectionList'
+import { spacing } from 'app/styles/spacing'
 
 import { EmptyResults } from '../EmptyResults'
 
@@ -34,6 +35,7 @@ export const AlbumsTab = () => {
 
   return (
     <CollectionList
+      style={{ paddingTop: spacing(3) }}
       isLoading={!albums}
       collection={albums}
       ListEmptyComponent={<EmptyResults />}

packages/mobile/src/screens/search-results-screen/tabs/PlaylistsTab.tsx

@@ -7,6 +7,7 @@ import {
 } from '@audius/common'
 
 import { CollectionList } from 'app/components/collection-list/CollectionList'
+import { spacing } from 'app/styles/spacing'
 
 import { EmptyResults } from '../EmptyResults'
 
@@ -34,6 +35,7 @@ export const PlaylistsTab = () => {
 
   return (
     <CollectionList
+      style={{ paddingTop: spacing(3) }}
       isLoading={!playlists}
       collection={playlists}
       ListEmptyComponent={<EmptyResults />}

packages/mobile/src/screens/search-results-screen/tabs/ProfilesTab.tsx

@@ -7,6 +7,7 @@ import {
 } from '@audius/common'
 
 import { ProfileList } from 'app/components/profile-list'
+import { spacing } from 'app/styles/spacing'
 
 import { EmptyResults } from '../EmptyResults'
 
@@ -30,6 +31,7 @@ export const ProfilesTab = () => {
 
   return (
     <ProfileList
+      style={{ paddingTop: spacing(3) }}
       isLoading={!users}
       profiles={users}
       ListEmptyComponent={<EmptyResults />}