Use theme color more consistently

src/CONSTANTS.ts

@@ -1,2 +1,3 @@
 export const ALBUM_CACHE_AMOUNT_OF_DAYS = 7;
-export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ ';
+export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ ';
+export const THEME_COLOR = '#FF3C00';

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 {

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<TouchableOpacityProps> = ({ children, ...props }) => {
     return (
         <Container {...props}>
-            <Text style={{ color: '#FF3C00', fontSize: 16 }}>{children}</Text>
+            <Text style={{ color: THEME_COLOR, fontSize: 16 }}>{children}</Text>
-            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#FF3C00" />
+            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={THEME_COLOR} />
         </Container>
     );
 };

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<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} />

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 = () => {
             <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}>

src/screens/Player/components/ProgressBar.tsx

@@ -3,6 +3,7 @@ import TrackPlayer from 'react-native-track-player';
 import styled from 'styled-components/native';
 import { Text } from 'react-native';
 import Slider from '@react-native-community/slider';
+import { THEME_COLOR } from 'CONSTANTS';
 
 const NumberBar = styled.View`
     flex-direction: row;
@@ -72,7 +73,7 @@ export default class ProgressBar extends Component<{}, State> {
                     maximumValue={duration || 0}
                     onValueChange={this.handleGesture}
                     onSlidingComplete={this.handleEndOfGesture}
-                    minimumTrackTintColor={'#FF3C00'}
+                    minimumTrackTintColor={THEME_COLOR}
                     disabled={!duration}
                 />
                 <NumberBar>

src/screens/Player/components/Queue.tsx

@@ -5,6 +5,7 @@ import styled, { css } from 'styled-components/native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import TouchableHandler from 'components/TouchableHandler';
 import usePlayTrack from 'utility/usePlayTrack';
+import { THEME_COLOR } from 'CONSTANTS';
 
 const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
     padding: 10px;
@@ -13,7 +14,7 @@ const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
 
     ${props => props.active && css`
         font-weight: 900;
-        background-color: #FF3C0016;
+        background-color: ${THEME_COLOR}16;
         padding: 20px 35px;
         margin: 0 -25px;
     `}

src/screens/Settings/index.tsx

@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationProp } from '..';
+import { THEME_COLOR } from 'CONSTANTS';
 
 const InputContainer = styled.View`
     margin: 10px 0;
@@ -41,7 +42,7 @@ export default function Settings() {
                         <Text>Jellyfin User ID</Text>
                         <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} />
                     </InputContainer>
-                    <Button title="Set Jellyfin server" onPress={handleClick} />
+                    <Button title="Set Jellyfin server" onPress={handleClick} color={THEME_COLOR} />
                     <InputContainer>
                         <Text>Bitrate</Text>
                         <Picker selectedValue={bitrate}>

src/screens/index.tsx

@@ -9,6 +9,7 @@ import Settings from './Settings';
 import PlayPauseIcon from 'assets/play-pause-fill.svg';
 import NotesIcon from 'assets/notes.svg';
 import GearIcon from 'assets/gear.svg';
+import { THEME_COLOR } from 'CONSTANTS';
 
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -47,7 +48,7 @@ function Screens() {
                 }
             })}
             tabBarOptions={{
-                activeTintColor: '#FF3C00',
+                activeTintColor: THEME_COLOR,
                 inactiveTintColor: 'gray',
             }}
         >

src/screens/modals/SetJellyfinServer/index.tsx

@@ -6,6 +6,7 @@ import { setJellyfinCredentials } from 'store/settings/actions';
 import { useDispatch } from 'react-redux';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import CredentialGenerator from './components/CredentialGenerator';
+import { THEME_COLOR } from 'CONSTANTS';
 
 export default function SetJellyfinServer() {
     // State for first screen
@@ -40,7 +41,12 @@ export default function SetJellyfinServer() {
                         autoCapitalize="none"
                         autoCorrect={false}
                     />
-                    <Button title="Set server" onPress={() => setIsLogginIn(true)} disabled={!serverUrl?.length} />
+                    <Button
+                        title="Set server"
+                        onPress={() => setIsLogginIn(true)}
+                        disabled={!serverUrl?.length} 
+                        color={THEME_COLOR}
+                    />
                 </View>
             )}
         </Modal>