From a08f3e79830102989f09897f88c956877c30bb7b Mon Sep 17 00:00:00 2001
From: Kyle Shanks <kyle.j.shanks@gmail.com>
Date: Tue, 20 Jun 2023 13:40:41 -0400
Subject: [PATCH] [C-2760, C-2779] Fix header for playlist and artists tabs in
 explore screen (#3579)

---
 packages/mobile/src/components/core/CardList.tsx            | 5 ++++-
 .../src/screens/explore-screen/components/TabInfo.tsx       | 1 +
 .../mobile/src/screens/explore-screen/tabs/ArtistsTab.tsx   | 2 +-
 .../src/screens/explore-screen/tabs/ForYouTab/ForYouTab.tsx | 2 +-
 .../explore-screen/tabs/ForYouTab/LetThemDJScreen.tsx       | 6 +++++-
 .../explore-screen/tabs/ForYouTab/TopAlbumsScreen.tsx       | 6 +++++-
 .../tabs/ForYouTab/TrendingUndergroundScreen.tsx            | 6 +++---
 .../mobile/src/screens/explore-screen/tabs/MoodsTab.tsx     | 2 +-
 .../screens/mood-collection-screen/MoodCollectionScreen.tsx | 2 +-
 packages/mobile/src/screens/profile-screen/AlbumsTab.tsx    | 1 +
 packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx | 1 +
 .../src/screens/search-results-screen/tabs/AlbumsTab.tsx    | 2 ++
 .../src/screens/search-results-screen/tabs/PlaylistsTab.tsx | 2 ++
 .../src/screens/search-results-screen/tabs/ProfilesTab.tsx  | 2 ++
 14 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/mobile/src/components/core/CardList.tsx b/packages/mobile/src/components/core/CardList.tsx
index 0df63952459..f8792f609fb 100644
--- a/packages/mobile/src/components/core/CardList.tsx
+++ b/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}
diff --git a/packages/mobile/src/screens/explore-screen/components/TabInfo.tsx b/packages/mobile/src/screens/explore-screen/components/TabInfo.tsx
index 614b888ec4f..fd68e22c974 100644
--- a/packages/mobile/src/screens/explore-screen/components/TabInfo.tsx
+++ b/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: {
diff --git a/packages/mobile/src/screens/explore-screen/tabs/ArtistsTab.tsx b/packages/mobile/src/screens/explore-screen/tabs/ArtistsTab.tsx
index 2500255093a..ea9c7e0d68d 100644
--- a/packages/mobile/src/screens/explore-screen/tabs/ArtistsTab.tsx
+++ b/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}
     />
   )
 }
diff --git a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/ForYouTab.tsx b/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/ForYouTab.tsx
index f5697630b13..d5204725429 100644
--- a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/ForYouTab.tsx
+++ b/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'
diff --git a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/LetThemDJScreen.tsx b/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/LetThemDJScreen.tsx
index bcd3aa3eda0..ebfb23560f8 100644
--- a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/LetThemDJScreen.tsx
+++ b/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>
diff --git a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TopAlbumsScreen.tsx b/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TopAlbumsScreen.tsx
index c95077a6bb7..d8c8d0e6b82 100644
--- a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TopAlbumsScreen.tsx
+++ b/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>
diff --git a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TrendingUndergroundScreen.tsx b/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TrendingUndergroundScreen.tsx
index 0cf7afbf87f..5e355ef0220 100644
--- a/packages/mobile/src/screens/explore-screen/tabs/ForYouTab/TrendingUndergroundScreen.tsx
+++ b/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>
   )
 }
diff --git a/packages/mobile/src/screens/explore-screen/tabs/MoodsTab.tsx b/packages/mobile/src/screens/explore-screen/tabs/MoodsTab.tsx
index dfec89ee0b7..f7caec1c243 100644
--- a/packages/mobile/src/screens/explore-screen/tabs/MoodsTab.tsx
+++ b/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)
   }
 }))
 
diff --git a/packages/mobile/src/screens/mood-collection-screen/MoodCollectionScreen.tsx b/packages/mobile/src/screens/mood-collection-screen/MoodCollectionScreen.tsx
index f9b5e6c587d..a08f79de694 100644
--- a/packages/mobile/src/screens/mood-collection-screen/MoodCollectionScreen.tsx
+++ b/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>
diff --git a/packages/mobile/src/screens/profile-screen/AlbumsTab.tsx b/packages/mobile/src/screens/profile-screen/AlbumsTab.tsx
index 6a6f84d64ca..98ae88e9bf8 100644
--- a/packages/mobile/src/screens/profile-screen/AlbumsTab.tsx
+++ b/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}
diff --git a/packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx b/packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx
index e140ebbd642..f504e2ab169 100644
--- a/packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx
+++ b/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}
diff --git a/packages/mobile/src/screens/search-results-screen/tabs/AlbumsTab.tsx b/packages/mobile/src/screens/search-results-screen/tabs/AlbumsTab.tsx
index f06300c8f62..6aa6c02ea7a 100644
--- a/packages/mobile/src/screens/search-results-screen/tabs/AlbumsTab.tsx
+++ b/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 />}
diff --git a/packages/mobile/src/screens/search-results-screen/tabs/PlaylistsTab.tsx b/packages/mobile/src/screens/search-results-screen/tabs/PlaylistsTab.tsx
index 91f34b69c9c..a8c3c8db731 100644
--- a/packages/mobile/src/screens/search-results-screen/tabs/PlaylistsTab.tsx
+++ b/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 />}
diff --git a/packages/mobile/src/screens/search-results-screen/tabs/ProfilesTab.tsx b/packages/mobile/src/screens/search-results-screen/tabs/ProfilesTab.tsx
index 6ad67dc05cf..726b33e1887 100644
--- a/packages/mobile/src/screens/search-results-screen/tabs/ProfilesTab.tsx
+++ b/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 />}