Resolve colors and app icon

src/components/AlphabetScroller.tsx

@@ -29,7 +29,7 @@ const Letter = styled.Text`
     text-align: center;
     padding: 1px 0;
     font-size: 12px;
-    color: salmon;
+    color: #FF3C00;
 `;
 
 interface Props {

src/components/ListButton.tsx

@@ -16,8 +16,8 @@ const Container = styled.TouchableOpacity`
 const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
     return (
         <Container {...props}>
-            <Text style={{ color: 'salmon', fontSize: 16 }}>{children}</Text>
-            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill="salmon" />
+            <Text style={{ color: '#FF3C00', fontSize: 16 }}>{children}</Text>
+            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#FF3C00" />
         </Container>
     );
 };

src/screens/Music/stacks/Album.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { StackParams } from '../types';
 import { Text, ScrollView, Dimensions, Button, RefreshControl } from 'react-native';
 import { useGetImage } from 'utility/JellyfinApi';
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 import { useRoute, RouteProp } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import { useDispatch } from 'react-redux';
@@ -13,6 +13,7 @@ import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import usePlayAlbum from 'utility/usePlayAlbum';
 import usePlayTrack from 'utility/usePlayTrack';
 import TouchableHandler from 'components/TouchableHandler';
+import useCurrentTrack from 'utility/useCurrentTrack';
 
 type Route = RouteProp<StackParams, 'Album'>;
 
@@ -25,11 +26,17 @@ const AlbumImage = styled(FastImage)`
     margin: 10px auto;
 `;
 
-const TrackContainer = styled.View`
+const TrackContainer = styled.View<{isPlaying: boolean}>`
     padding: 15px;
     border-bottom-width: 1px;
     border-bottom-color: #eee;
     flex-direction: row;
+
+    ${props => props.isPlaying && css`
+        background-color: #FF3C0016;
+        margin: 0 -20px;
+        padding: 15px 35px;
+    `}
 `;
 
 const Album: React.FC = () => {
@@ -43,6 +50,7 @@ const Album: React.FC = () => {
     const dispatch = useDispatch();
     const getImage = useGetImage();
     const playAlbum = usePlayAlbum();
+    const currentTrack = useCurrentTrack();
 
     // Setup callbacks
     const selectAlbum = useCallback(() => { playAlbum(id); }, [playAlbum, id]);
@@ -74,8 +82,10 @@ const Album: React.FC = () => {
             <Button title="Play Album" onPress={selectAlbum} />
             {album?.Tracks?.length ? album.Tracks.map((trackId) =>
                 <TouchableHandler key={trackId} id={trackId} onPress={selectTrack}>
-                    <TrackContainer>
-                        <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{tracks[trackId]?.IndexNumber}</Text>
+                    <TrackContainer isPlaying={trackId === currentTrack?.id}>
+                        <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>
+                            {tracks[trackId]?.IndexNumber}
+                        </Text>
                         <Text>{tracks[trackId]?.Name}</Text>
                     </TrackContainer>
                 </TouchableHandler>

src/screens/Player/components/ProgressBar.tsx

@@ -72,7 +72,7 @@ export default class ProgressBar extends Component<{}, State> {
                     maximumValue={duration || 0}
                     onValueChange={this.handleGesture}
                     onSlidingComplete={this.handleEndOfGesture}
-                    minimumTrackTintColor={'#ff8c69'}
+                    minimumTrackTintColor={'#FF3C00'}
                     disabled={!duration}
                 />
                 <NumberBar>

src/screens/Player/components/Queue.tsx

@@ -13,7 +13,7 @@ const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
 
     ${props => props.active && css`
         font-weight: 900;
-        background-color: #ff8c6922;
+        background-color: #FF3C0016;
         padding: 20px 35px;
         margin: 0 -25px;
     `}

src/screens/index.tsx

@@ -47,7 +47,7 @@ function Screens() {
                 }
             })}
             tabBarOptions={{
-                activeTintColor: 'salmon',
+                activeTintColor: '#FF3C00',
                 inactiveTintColor: 'gray',
             }}
         >