diff --git a/src/CONSTANTS.ts b/src/CONSTANTS.ts index 776b4d2..e7f872d 100644 --- a/src/CONSTANTS.ts +++ b/src/CONSTANTS.ts @@ -1,2 +1,3 @@ export const ALBUM_CACHE_AMOUNT_OF_DAYS = 7; -export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ '; \ No newline at end of file +export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ '; +export const THEME_COLOR = '#FF3C00'; \ No newline at end of file diff --git a/src/components/AlphabetScroller.tsx b/src/components/AlphabetScroller.tsx index 89a7a0c..4099a5a 100644 --- a/src/components/AlphabetScroller.tsx +++ b/src/components/AlphabetScroller.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState } from 'react'; import styled from 'styled-components/native'; -import { ALPHABET_LETTERS } from 'CONSTANTS'; +import { ALPHABET_LETTERS, THEME_COLOR } from 'CONSTANTS'; import { View, LayoutChangeEvent } from 'react-native'; import { PanGestureHandler, @@ -29,7 +29,7 @@ const Letter = styled.Text` text-align: center; padding: 1px 0; font-size: 12px; - color: #FF3C00; + color: ${THEME_COLOR}; `; interface Props { diff --git a/src/components/ListButton.tsx b/src/components/ListButton.tsx index b32f2b0..e97f661 100644 --- a/src/components/ListButton.tsx +++ b/src/components/ListButton.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { TouchableOpacityProps, Text } from 'react-native'; import ChevronRight from 'assets/chevron-right.svg'; import styled from 'styled-components/native'; +import { THEME_COLOR } from 'CONSTANTS'; const BUTTON_SIZE = 14; @@ -16,8 +17,8 @@ const Container = styled.TouchableOpacity` const ListButton: React.FC = ({ children, ...props }) => { return ( - {children} - + {children} + ); }; diff --git a/src/screens/Music/index.tsx b/src/screens/Music/index.tsx index f91417b..6589427 100644 --- a/src/screens/Music/index.tsx +++ b/src/screens/Music/index.tsx @@ -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(); +const navigationOptions = { + headerTintColor: THEME_COLOR, + headerTitleStyle: { color: 'black' } +}; + function MusicStack() { return ( - + diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx index 0484019..b46ac0a 100644 --- a/src/screens/Music/stacks/Album.tsx +++ b/src/screens/Music/stacks/Album.tsx @@ -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 = () => { {album?.Name} {album?.AlbumArtist} -