[mobile] highlight current song

Author: tsirysndr

mobile/src/Components/Songs/Songs.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import React, {FC} from 'react';
-import {TouchableOpacity, TouchableWithoutFeedback} from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native';
 import Feather from 'react-native-vector-icons/Feather';
 import {Track as TrackType} from '../../Types';
 
@@ -33,7 +33,6 @@ const TrackRow = styled.View`
   align-items: center;
   margin: 0 20px;
   height: 60px;
-  margin-bottom: 15px;
 `;
 
 const TrackTitle = styled.Text<{active?: boolean}>`
@@ -70,6 +69,16 @@ const NoCover = styled.View`
   border-radius: 3px;
 `;
 
+const TrackWrapper = styled.View`
+  background-color: #232323;
+`;
+
+const TouchableTrack = styled.TouchableOpacity`
+  background-color: #000;
+  justify-content: center;
+  height: 70px;
+`;
+
 export type TrackProps = {
   item: any;
   active: boolean;
@@ -79,24 +88,26 @@ export type TrackProps = {
 const Track: FC<TrackProps> = props => {
   const {item, active, onPress} = props;
   return (
-    <TouchableOpacity onPress={() => onPress(item)}>
-      <TrackRow>
-        {item.cover && <Cover source={{uri: item.cover}} />}
-        {!item.cover && (
-          <NoCover>
-            <Feather name="music" size={30} color="#a7a7a9" />
-          </NoCover>
-        )}
-        <TrackInfo>
-          <TrackTitle active={active} ellipsizeMode="tail" numberOfLines={1}>
-            {item.title}
-          </TrackTitle>
-          <TrackArtist ellipsizeMode="tail" numberOfLines={1}>
-            {item.artist}
-          </TrackArtist>
-        </TrackInfo>
-      </TrackRow>
-    </TouchableOpacity>
+    <TrackWrapper>
+      <TouchableTrack onPress={() => onPress(item)}>
+        <TrackRow>
+          {item.cover && <Cover source={{uri: item.cover}} />}
+          {!item.cover && (
+            <NoCover>
+              <Feather name="music" size={30} color="#a7a7a9" />
+            </NoCover>
+          )}
+          <TrackInfo>
+            <TrackTitle active={active} ellipsizeMode="tail" numberOfLines={1}>
+              {item.title}
+            </TrackTitle>
+            <TrackArtist ellipsizeMode="tail" numberOfLines={1}>
+              {item.artist}
+            </TrackArtist>
+          </TrackInfo>
+        </TrackRow>
+      </TouchableTrack>
+    </TrackWrapper>
   );
 };