Use theme color more consistently

This commit is contained in:
Lei Nelissen
2020-07-10 15:25:32 +02:00
parent 91f4f349b9
commit f9b589cbe2
10 changed files with 32 additions and 14 deletions

View File

@@ -5,12 +5,18 @@ import Albums from './stacks/Albums';
import Album from './stacks/Album';
import RecentAlbums from './stacks/RecentAlbums';
import Search from './stacks/Search';
import { THEME_COLOR } from 'CONSTANTS';
const Stack = createStackNavigator<StackParams>();
const navigationOptions = {
headerTintColor: THEME_COLOR,
headerTitleStyle: { color: 'black' }
};
function MusicStack() {
return (
<Stack.Navigator initialRouteName="RecentAlbums">
<Stack.Navigator initialRouteName="RecentAlbums" screenOptions={navigationOptions}>
<Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: 'Recent Albums' }} />
<Stack.Screen name="Albums" component={Albums} />
<Stack.Screen name="Album" component={Album} />

View File

@@ -9,7 +9,7 @@ import { useDispatch } from 'react-redux';
import { differenceInDays } from 'date-fns';
import { useTypedSelector } from 'store';
import { fetchTracksByAlbum } from 'store/music/actions';
import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
import { ALBUM_CACHE_AMOUNT_OF_DAYS, THEME_COLOR } from 'CONSTANTS';
import usePlayAlbum from 'utility/usePlayAlbum';
import usePlayTrack from 'utility/usePlayTrack';
import TouchableHandler from 'components/TouchableHandler';
@@ -33,7 +33,7 @@ const TrackContainer = styled.View<{isPlaying: boolean}>`
flex-direction: row;
${props => props.isPlaying && css`
background-color: #FF3C0016;
background-color: ${THEME_COLOR};
margin: 0 -20px;
padding: 15px 35px;
`}
@@ -79,7 +79,7 @@ const Album: React.FC = () => {
<AlbumImage source={{ uri: getImage(album?.Id) }} />
<Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album?.Name}</Text>
<Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{album?.AlbumArtist}</Text>
<Button title="Play Album" onPress={selectAlbum} />
<Button title="Play Album" onPress={selectAlbum} color={THEME_COLOR} />
{album?.Tracks?.length ? album.Tracks.map((trackId) =>
<TouchableHandler key={trackId} id={trackId} onPress={selectTrack}>
<TrackContainer isPlaying={trackId === currentTrack?.id}>