From dad3b86ba7089523254a57d7ded4b419ee6898a5 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 8 Aug 2018 15:29:01 +0100
Subject: [PATCH] Add play icon to the Play button for media

---
 app/src/component/fileDownloadButton/view.js | 23 ++++++++++----------
 app/src/styles/button.js                     |  5 +++--
 app/src/styles/wallet.js                     |  3 ++-
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/src/component/fileDownloadButton/view.js b/app/src/component/fileDownloadButton/view.js
index c7901fe1..fe05f737 100644
--- a/app/src/component/fileDownloadButton/view.js
+++ b/app/src/component/fileDownloadButton/view.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { NativeModules, Text, View, TouchableOpacity } from 'react-native';
+import Button from '../button';
 import fileDownloadButtonStyle from '../../styles/fileDownloadButton';
 
 class FileDownloadButton extends React.PureComponent {
@@ -64,17 +65,17 @@ class FileDownloadButton extends React.PureComponent {
         );
       }
       return (
-        <TouchableOpacity style={[style, fileDownloadButtonStyle.container]} onPress={() => {
-            if (NativeModules.Mixpanel) {
-              NativeModules.Mixpanel.track('Purchase Uri', { Uri: uri });
-            }
-            purchaseUri(uri);
-            if (isPlayable && onPlay) {
-              this.props.onPlay();
-            }
-          }}>
-          <Text style={fileDownloadButtonStyle.text}>{isPlayable ? 'Play' : 'Download'}</Text>
-        </TouchableOpacity>
+        <Button icon={isPlayable ? 'play' : null}
+                text={isPlayable ? 'Play' : 'Download'}
+                style={[style, fileDownloadButtonStyle.container]} onPress={() => {
+          if (NativeModules.Mixpanel) {
+            NativeModules.Mixpanel.track('Purchase Uri', { Uri: uri });
+          }
+          purchaseUri(uri);
+          if (isPlayable && onPlay) {
+            this.props.onPlay();
+          }
+        }} />
       );
     } else if (fileInfo && fileInfo.download_path) {
       return (
diff --git a/app/src/styles/button.js b/app/src/styles/button.js
index a1c3265f..5fc3e1c8 100644
--- a/app/src/styles/button.js
+++ b/app/src/styles/button.js
@@ -5,13 +5,14 @@ const buttonStyle = StyleSheet.create({
     borderRadius: 24,
     padding: 8,
     paddingLeft: 12,
-    paddingRight: 12
+    paddingRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   disabled: {
     backgroundColor: '#999999'
   },
   row: {
-    alignSelf: 'flex-start',
     flexDirection: 'row',
   },
   icon: {
diff --git a/app/src/styles/wallet.js b/app/src/styles/wallet.js
index da79f90f..8b07c679 100644
--- a/app/src/styles/wallet.js
+++ b/app/src/styles/wallet.js
@@ -20,7 +20,8 @@ const walletStyle = StyleSheet.create({
     width: '85%'
   },
   button: {
-    backgroundColor: Colors.LbryGreen
+    backgroundColor: Colors.LbryGreen,
+    alignSelf: 'flex-start'
   },
   historyList: {
     backgroundColor: '#ffffff'