mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-04-27 22:20:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

Style Fixes (#593)

Browse Source 
* style fixes for Home and Discover cards

* add margin to the home screen, discover screen containers

* styling for headers on Home and Discover
This commit is contained in:
Violet Caulfield
2025-10-25 15:12:53 -05:00
committed by GitHub
parent 212ca4e697
commit 9bef325d49
12 changed files with 50 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Discover/component.tsx
+1
View File
@@ -15,6 +15,7 @@ export default function Index(): React.JSX.Element {
contentContainerStyle={{
flexGrow: 1,
marginTop: getToken('$4'),
marginHorizontal: getToken('$2'),
}}
contentInsetAdjustmentBehavior='automatic'
removeClippedSubviews
src/components/Discover/helpers/just-added.tsx
+5 -3
View File
@@ -2,7 +2,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import HorizontalCardList from '../../../components/Global/components/horizontal-list'
import { ItemCard } from '../../../components/Global/components/item-card'
import { useDiscoverContext } from '../../../providers/Discover'
import { View, XStack } from 'tamagui'
import { H5, View, XStack } from 'tamagui'
import { H4 } from '../../../components/Global/helpers/text'
import Icon from '../../Global/components/icon'
import { useNavigation } from '@react-navigation/native'
@@ -25,7 +25,7 @@ export default function RecentlyAdded(): React.JSX.Element {
})
}}
>
<H4 marginLeft={'$2'}>Recently Added</H4>
<H5 marginLeft={'$2'}>Recently Added</H5>
<Icon name='arrow-right' />
</XStack>
@@ -36,7 +36,7 @@ export default function RecentlyAdded(): React.JSX.Element {
caption={item.Name}
subCaption={`${item.Artists?.join(', ')}`}
squared
size={'$10'}
size={'$11'}
item={item}
onPress={() => {
navigation.navigate('Album', {
@@ -49,6 +49,8 @@ export default function RecentlyAdded(): React.JSX.Element {
navigation,
})
}}
gap={'$1'}
captionAlign='left'
/>
)}
/>
src/components/Discover/helpers/public-playlists.tsx
+5 -3
View File
@@ -1,4 +1,4 @@
import { View, XStack } from 'tamagui'
import { H5, View, XStack } from 'tamagui'
import { useDiscoverContext } from '../../../providers/Discover'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import Icon from '../../Global/components/icon'
@@ -41,9 +41,9 @@ export default function PublicPlaylists() {
})
}}
>
<H4 marginLeft={'$2'} lineBreakStrategyIOS='standard' maxWidth={width * 0.8}>
<H5 marginLeft={'$2'} lineBreakStrategyIOS='standard' maxWidth={width * 0.8}>
Playlists on {server?.name ?? 'Jellyfin'}
</H4>
</H5>
<Icon name='arrow-right' />
</XStack>
<HorizontalCardList
@@ -64,6 +64,8 @@ export default function PublicPlaylists() {
navigation,
})
}
marginHorizontal={'$1'}
captionAlign='left'
/>
)}
/>
src/components/Discover/helpers/suggested-artists.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { View, XStack } from 'tamagui'
import { H5, View, XStack } from 'tamagui'
import Icon from '../../Global/components/icon'
import HorizontalCardList from '../../Global/components/horizontal-list'
import { ItemCard } from '../../Global/components/item-card'
@@ -26,7 +26,7 @@ export default function SuggestedArtists(): React.JSX.Element {
}}
marginLeft={'$2'}
>
<H4>Suggested Artists</H4>
<H5>Suggested Artists</H5>
<Icon name='arrow-right' />
</XStack>
<HorizontalCardList
src/components/Global/components/image.tsx
+3 -3
View File
@@ -114,7 +114,7 @@ function Image({
? getBorderRadius(circular, width)
: circular
? getTokenValue('$20') * 10
: getTokenValue('$2'),
: getTokenValue('$5'),
width: !isUndefined(width)
? typeof width === 'number'
? width
@@ -180,8 +180,8 @@ function getBorderRadius(
? width / 25
: typeof width === 'string' && width.includes('%')
? 0
: getTokenValue(width as Token) / 15
} else borderRadius = getTokenValue('$2')
: getTokenValue(width as Token) / 10
} else borderRadius = getTokenValue('$10')
return borderRadius
}
src/components/Global/components/item-card.tsx
+16 -3
View File
@@ -13,6 +13,7 @@ interface CardProps extends TamaguiCardProps {
item: BaseItemDto
squared?: boolean
testId?: string | null | undefined
captionAlign?: 'center' | 'left' | 'right'
}
/**
@@ -29,6 +30,7 @@ function ItemCardComponent({
squared,
testId,
onPress,
captionAlign = 'center',
...cardProps
}: CardProps) {
usePerformanceMonitor('ItemCard', 2)
@@ -74,13 +76,24 @@ function ItemCardComponent({
</TamaguiCard.Background>
</TamaguiCard>
{caption && (
<YStack alignContent='center' alignItems='center' maxWidth={cardProps.size}>
<Text bold lineBreakStrategyIOS='standard' numberOfLines={1}>
<YStack maxWidth={cardProps.size}>
<Text
bold
lineBreakStrategyIOS='standard'
width={cardProps.size}
numberOfLines={1}
textAlign={captionAlign}
>
{caption}
</Text>
{subCaption && (
<Text lineBreakStrategyIOS='standard' numberOfLines={1} textAlign='center'>
<Text
lineBreakStrategyIOS='standard'
width={cardProps.size}
numberOfLines={1}
textAlign={captionAlign}
>
{subCaption}
</Text>
)}
src/components/Home/helpers/frequent-artists.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import HorizontalCardList from '../../../components/Global/components/horizontal
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import React, { useCallback } from 'react'
import { ItemCard } from '../../../components/Global/components/item-card'
import { View, XStack } from 'tamagui'
import { H5, View, XStack } from 'tamagui'
import { H4 } from '../../../components/Global/helpers/text'
import Icon from '../../Global/components/icon'
import { useDisplayContext } from '../../../providers/Display/display-provider'
@@ -51,7 +51,7 @@ export default function FrequentArtists(): React.JSX.Element {
})
}}
>
<H4 marginLeft={'$2'}>Most Played</H4>
<H5 marginLeft={'$2'}>Most Played</H5>
<Icon name='arrow-right' />
</XStack>
src/components/Home/helpers/frequent-tracks.tsx
+5 -3
View File
@@ -1,5 +1,5 @@
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { View, XStack } from 'tamagui'
import { H5, View, XStack } from 'tamagui'
import HorizontalCardList from '../../../components/Global/components/horizontal-list'
import { ItemCard } from '../../../components/Global/components/item-card'
import { QueuingType } from '../../../enums/queuing-type'
@@ -41,7 +41,7 @@ export default function FrequentlyPlayedTracks(): React.JSX.Element {
})
}}
>
<H4 marginLeft={'$2'}>On Repeat</H4>
<H5 marginLeft={'$2'}>On Repeat</H5>
<Icon name='arrow-right' />
</XStack>
@@ -54,7 +54,7 @@ export default function FrequentlyPlayedTracks(): React.JSX.Element {
renderItem={({ item: track, index }) => (
<ItemCard
item={track}
size={'$10'}
size={'$11'}
caption={track.Name}
subCaption={`${track.Artists?.join(', ')}`}
squared
@@ -77,6 +77,8 @@ export default function FrequentlyPlayedTracks(): React.JSX.Element {
navigation,
})
}}
marginHorizontal={'$1'}
captionAlign='left'
/>
)}
/>
src/components/Home/helpers/recent-artists.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { View, XStack } from 'tamagui'
import { H5, View, XStack } from 'tamagui'
import { H4 } from '../../Global/helpers/text'
import { RootStackParamList } from '../../../screens/types'
import { ItemCard } from '../../Global/components/item-card'
@@ -29,7 +29,7 @@ export default function RecentArtists(): React.JSX.Element {
})
}}
>
<H4 marginLeft={'$2'}>Recent Artists</H4>
<H5 marginLeft={'$2'}>Recent Artists</H5>
<Icon name='arrow-right' />
</XStack>
src/components/Home/helpers/recently-played.tsx
+5 -3
View File
@@ -1,5 +1,5 @@
import React, { useMemo } from 'react'
import { View, XStack } from 'tamagui'
import { H5, View, XStack } from 'tamagui'
import { H4 } from '../../Global/helpers/text'
import { ItemCard } from '../../Global/components/item-card'
import { RootStackParamList } from '../../../screens/types'
@@ -45,7 +45,7 @@ export default function RecentlyPlayed(): React.JSX.Element {
})
}}
>
<H4 marginLeft={'$2'}>Play it again</H4>
<H5 marginLeft={'$2'}>Play it again</H5>
<Icon name='arrow-right' />
</XStack>
@@ -57,7 +57,7 @@ export default function RecentlyPlayed(): React.JSX.Element {
}
renderItem={({ index, item: recentlyPlayedTrack }) => (
<ItemCard
size={'$10'}
size={'$11'}
caption={recentlyPlayedTrack.Name}
subCaption={`${recentlyPlayedTrack.Artists?.join(', ')}`}
squared
@@ -82,6 +82,8 @@ export default function RecentlyPlayed(): React.JSX.Element {
navigation,
})
}}
marginHorizontal={'$1'}
captionAlign='left'
/>
)}
/>
src/components/Home/index.tsx
+1
View File
@@ -22,6 +22,7 @@ export function Home(): React.JSX.Element {
contentInsetAdjustmentBehavior='automatic'
contentContainerStyle={{
marginVertical: getToken('$4'),
marginHorizontal: getToken('$2'),
}}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={refresh} />}
>
src/components/Player/components/header.tsx
+3 -1
View File
@@ -16,6 +16,8 @@ export default function PlayerHeader(): React.JSX.Element {
const theme = useTheme()
const artworkMaxHeight = Platform.OS === 'android' ? '65%' : '70%'
// If the Queue is a BaseItemDto, display the name of it
const playingFrom = useMemo(
() =>
@@ -56,7 +58,7 @@ export default function PlayerHeader(): React.JSX.Element {
flexGrow={1}
justifyContent='center'
paddingHorizontal={'$2'}
maxHeight={'70%'}
maxHeight={artworkMaxHeight}
marginVertical={'auto'}
>
<Animated.View