Fancy new buttons and more consistent colors

src/screens/Music/stacks/RecentAlbums.tsx

@@ -12,31 +12,36 @@ import AlbumImage, { AlbumItem } from './components/AlbumImage';
 import { useRecentAlbums } from 'store/music/selectors';
 import { Header } from 'components/Typography';
 import ListButton from 'components/ListButton';
-import { colors } from 'components/Colors';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
 
 const styles = StyleSheet.create({
-    artist: {
-        ...colors.text,
-        opacity: 0.5,
+    columnWrapper: {
+        paddingLeft: 10,
+        paddingRight: 10
     }
 });
 
 const NavigationHeader: React.FC = () => {
     const navigation = useNavigation();
+    const defaultStyles = useDefaultStyles();
     const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]);
     const handleSearchClick = useCallback(() => { navigation.navigate('Search'); }, [navigation]);
     
     return (
-        <ListContainer>
+        <>
             <ListButton onPress={handleAllAlbumsClick}>{t('all-albums')}</ListButton>
             <ListButton onPress={handleSearchClick}>{t('search')}</ListButton>
-            <Header style={colors.text}>{t('recent-albums')}</Header>
-        </ListContainer>
+            <ListContainer>
+                <Header style={defaultStyles.text}>{t('recent-albums')}</Header>
+            </ListContainer>
+        </>
     );
 };
 
 const RecentAlbums: React.FC = () => {
+    const defaultStyles = useDefaultStyles();
+
     // Retrieve data from store
     const { entities: albums } = useTypedSelector((state) => state.music.albums);
     const recentAlbums = useRecentAlbums(24);
@@ -56,25 +61,24 @@ const RecentAlbums: React.FC = () => {
     
     return (
         <SafeAreaView>
-            <ListContainer>
-                <FlatList
-                    data={recentAlbums as string[]} 
-                    refreshing={isLoading}
-                    onRefresh={retrieveData}
-                    numColumns={2}
-                    keyExtractor={d => d}
-                    ListHeaderComponent={NavigationHeader}
-                    renderItem={({ item }) => (
-                        <TouchableHandler id={item} onPress={selectAlbum}>
-                            <AlbumItem>
-                                <AlbumImage source={{ uri: getImage(item) }} style={colors.imageBackground} />
-                                <Text style={colors.text} numberOfLines={1}>{albums[item]?.Name}</Text>
-                                <Text style={styles.artist} numberOfLines={1}>{albums[item]?.AlbumArtist}</Text>
-                            </AlbumItem>
-                        </TouchableHandler>
-                    )}
-                />
-            </ListContainer>
+            <FlatList
+                data={recentAlbums as string[]} 
+                refreshing={isLoading}
+                onRefresh={retrieveData}
+                numColumns={2}
+                keyExtractor={d => d}
+                columnWrapperStyle={styles.columnWrapper}
+                ListHeaderComponent={NavigationHeader}
+                renderItem={({ item }) => (
+                    <TouchableHandler id={item} onPress={selectAlbum}>
+                        <AlbumItem>
+                            <AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />
+                            <Text style={defaultStyles.text} numberOfLines={1}>{albums[item]?.Name}</Text>
+                            <Text style={defaultStyles.textHalfOpacity} numberOfLines={1}>{albums[item]?.AlbumArtist}</Text>
+                        </AlbumItem>
+                    </TouchableHandler>
+                )}
+            />
         </SafeAreaView>
     );
 };