Skip to content

Commit

Permalink
[C-2760, C-2779] Fix header for playlist and artists tabs in explore …
Browse files Browse the repository at this point in the history
…screen (#3579)
  • Loading branch information
Kyle-Shanks authored Jun 20, 2023
1 parent 9a98157 commit a08f3e7
Show file tree
Hide file tree
Showing 14 changed files with 30 additions and 10 deletions.
5 changes: 4 additions & 1 deletion packages/mobile/src/components/core/CardList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
backgroundColor: palette.white,
padding: spacing(4),
paddingHorizontal: spacing(7),
marginBottom: spacing(3),
...shadow()
},
header: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export const ArtistsTab = () => {
isLoading={
exploreStatus === Status.LOADING || artistsStatus !== Status.SUCCESS
}
profiles={artists}
ListHeaderComponent={<TabInfo header={messages.infoHeader} />}
profiles={artists}
/>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -21,7 +21,7 @@ export const TrendingUndergroundScreen = () => {
const lineup = useSelector(getTrendingUndergroundLineup)

return (
<>
<Screen>
<ScreenHeader text={messages.header} />
<ScreenContent>
<Lineup
Expand All @@ -33,6 +33,6 @@ export const TrendingUndergroundScreen = () => {
selfLoad
/>
</ScreenContent>
</>
</Screen>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const useStyles = makeStyles(({ spacing }) => ({
flexDirection: 'row',
flexWrap: 'wrap',
padding: spacing(3),
paddingVertical: spacing(6)
paddingBottom: spacing(6)
}
}))

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/mobile/src/screens/profile-screen/AlbumsTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -34,6 +35,7 @@ export const AlbumsTab = () => {

return (
<CollectionList
style={{ paddingTop: spacing(3) }}
isLoading={!albums}
collection={albums}
ListEmptyComponent={<EmptyResults />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -34,6 +35,7 @@ export const PlaylistsTab = () => {

return (
<CollectionList
style={{ paddingTop: spacing(3) }}
isLoading={!playlists}
collection={playlists}
ListEmptyComponent={<EmptyResults />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -30,6 +31,7 @@ export const ProfilesTab = () => {

return (
<ProfileList
style={{ paddingTop: spacing(3) }}
isLoading={!users}
profiles={users}
ListEmptyComponent={<EmptyResults />}
Expand Down

0 comments on commit a08f3e7

Please sign in to comment.