From f78db52e0a04bca4486d58912c6f8aa33c75387a Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sun, 2 Jan 2022 23:02:54 +0100
Subject: [PATCH] Fix Dark Mode colors in new features

---
 src/screens/Downloads/index.tsx                       |  2 +-
 src/screens/Music/stacks/components/TrackListView.tsx |  6 ++++--
 src/screens/Player/components/ConnectionNotice.tsx    | 10 +++++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/screens/Downloads/index.tsx b/src/screens/Downloads/index.tsx
index 3f6af97..1e17f72 100644
--- a/src/screens/Downloads/index.tsx
+++ b/src/screens/Downloads/index.tsx
@@ -92,7 +92,7 @@ function Downloads() {
                 <DownloadIcon trackId={item} />
             </View>
             <View style={{ flexShrink: 1, marginRight: 8 }}>
-                <Text style={{ fontSize: 16, marginBottom: 4 }} numberOfLines={1}>
+                <Text style={[{ fontSize: 16, marginBottom: 4 }, defaultStyles.text]} numberOfLines={1}>
                     {tracks[item]?.Name}
                 </Text>
                 <Text style={[{ flexShrink: 1, fontSize: 11 }, defaultStyles.textHalfOpacity]} numberOfLines={1}>
diff --git a/src/screens/Music/stacks/components/TrackListView.tsx b/src/screens/Music/stacks/components/TrackListView.tsx
index 5d96168..08f97e6 100644
--- a/src/screens/Music/stacks/components/TrackListView.tsx
+++ b/src/screens/Music/stacks/components/TrackListView.tsx
@@ -55,7 +55,6 @@ const TrackContainer = styled.View<{isPlaying: boolean}>`
     flex-direction: row;
 
     ${props => props.isPlaying && css`
-        background-color: ${THEME_COLOR}16;
         margin: 0 -20px;
         padding: 15px 24px;
     `}
@@ -140,7 +139,10 @@ const TrackListView: React.FC<TrackListViewProps> = ({
                         onPress={selectTrack}
                         onLongPress={longPressTrack}
                     >
-                        <TrackContainer isPlaying={currentTrack?.backendId === trackId || false} style={defaultStyles.border}>
+                        <TrackContainer
+                            isPlaying={currentTrack?.backendId === trackId || false}
+                            style={[defaultStyles.border, currentTrack?.backendId === trackId || false ? defaultStyles.activeBackground : null ]}
+                        >
                             <Text
                                 style={[
                                     defaultStyles.text,
diff --git a/src/screens/Player/components/ConnectionNotice.tsx b/src/screens/Player/components/ConnectionNotice.tsx
index d7e7764..6ab81b0 100644
--- a/src/screens/Player/components/ConnectionNotice.tsx
+++ b/src/screens/Player/components/ConnectionNotice.tsx
@@ -4,10 +4,11 @@ import { THEME_COLOR } from 'CONSTANTS';
 import styled from 'styled-components/native';
 import CloudSlash from 'assets/cloud-slash.svg';
 import { Text } from 'react-native';
+import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
 
 const Well = styled.View`
     border-radius: 8px;
-    background-color: ${THEME_COLOR}22;
     flex: 1;
     flex-direction: row;
     align-items: center;
@@ -16,13 +17,16 @@ const Well = styled.View`
 `;
 
 function ConnectionNotice() {
+    const defaultStyles = useDefaultStyles();
     const { isInternetReachable } = useNetInfo();
 
     if (!isInternetReachable) {
         return (
-            <Well>
+            <Well style={defaultStyles.activeBackground}>
                 <CloudSlash width={24} height={24} fill={THEME_COLOR} />
-                <Text style={{ color: THEME_COLOR, marginLeft: 12 }}>You are currently offline. You can only play previously downloaded music.</Text>
+                <Text style={{ color: THEME_COLOR, marginLeft: 12 }}>
+                    {t('you-are-offline-message')}
+                </Text>
             </Well>
         );
     }