From 745aa614664420526a068a7ccd372652233353cc Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 8 Aug 2018 16:22:56 +0100
Subject: [PATCH] Delete and Stop download button tweaks

---
 app/src/component/button/view.js     | 18 +++++++++++++-----
 app/src/component/walletSend/view.js | 14 +++++++-------
 app/src/page/file/view.js            | 13 ++++++++++---
 app/src/styles/button.js             | 17 +++++++++++++----
 app/src/styles/colors.js             |  1 +
 app/src/styles/filePage.js           |  6 +++---
 6 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/app/src/component/button/view.js b/app/src/component/button/view.js
index e0ccafdc..0f26c584 100644
--- a/app/src/component/button/view.js
+++ b/app/src/component/button/view.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, TouchableOpacity } from 'react-native';
 import buttonStyle from '../../styles/button';
+import Colors from '../../styles/colors';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 export default class Button extends React.PureComponent {
@@ -10,9 +11,10 @@ export default class Button extends React.PureComponent {
       style,
       text,
       icon,
+      theme,
       onPress
     } = this.props;
-    
+
     let styles = [buttonStyle.button, buttonStyle.row];
     if (style) {
       if (style.length) {
@@ -21,19 +23,25 @@ export default class Button extends React.PureComponent {
         styles.push(style);
       }
     }
-    
+
     if (disabled) {
       styles.push(buttonStyle.disabled);
     }
-    
+
     const textStyles = [buttonStyle.text];
     if (icon && icon.trim().length > 0) {
       textStyles.push(buttonStyle.textWithIcon);
     }
-    
+    if (theme === 'light') {
+      textStyles.push(buttonStyle.textDark);
+    } else {
+      // Dark background, default
+      textStyles.push(buttonStyle.textLight);
+    }
+
     return (
       <TouchableOpacity disabled={disabled} style={styles} onPress={onPress}>
-        {icon && <Icon name={icon} size={18} color='#ffffff' class={buttonStyle.icon} /> }
+        {icon && <Icon name={icon} size={18} color={'light' === theme ? Colors.DarkGrey : Colors.White} />}
         {text && (text.trim().length > 0) && <Text style={textStyles}>{text}</Text>}
       </TouchableOpacity>
     );
diff --git a/app/src/component/walletSend/view.js b/app/src/component/walletSend/view.js
index 2559410c..5df634ab 100644
--- a/app/src/component/walletSend/view.js
+++ b/app/src/component/walletSend/view.js
@@ -17,21 +17,21 @@ type Props = {
 
 class WalletSend extends React.PureComponent<Props> {
   amountInput = null;
-  
+
   state = {
     amount: null,
     address: null,
     addressChanged: false,
     addressValid: false
   };
-  
+
   componentWillUpdate(nextProps) {
     const { draftTransaction, transactionError } = nextProps;
     if (transactionError && transactionError.trim().length > 0) {
       this.setState({ address: draftTransaction.address, amount: draftTransaction.amount });
     }
   }
-  
+
   handleSend = () => {
     const { balance, sendToAddress, notify } = this.props;
     const { address, amount } = this.state;
@@ -42,7 +42,7 @@ class WalletSend extends React.PureComponent<Props> {
       });
       return;
     }
-    
+
     if (amount > balance) {
       notify({
         message: 'Insufficient credits',
@@ -50,13 +50,13 @@ class WalletSend extends React.PureComponent<Props> {
       });
       return;
     }
-    
+
     if (amount && address) {
       sendToAddress(address, parseFloat(amount));
       this.setState({ address: null, amount: null });
     }
   }
-  
+
   handleAddressInputBlur = () => {
     if (this.state.addressChanged && !this.state.addressValid) {
       const { notify } = this.props;
@@ -66,7 +66,7 @@ class WalletSend extends React.PureComponent<Props> {
       });
     }
   }
-  
+
   handleAddressInputSubmit = () => {
     if (this.amountInput) {
       this.amountInput.focus();
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index 1f19e7d7..155756d3 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -3,7 +3,6 @@ import { Lbry, normalizeURI } from 'lbry-redux';
 import {
   ActivityIndicator,
   Alert,
-  Button,
   Dimensions,
   NativeModules,
   ScrollView,
@@ -16,6 +15,7 @@ import {
   WebView
 } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
+import Button from '../../component/button';
 import Colors from '../../styles/colors';
 import ChannelPage from '../channel';
 import FileDownloadButton from '../../component/fileDownloadButton';
@@ -332,9 +332,16 @@ class FilePage extends React.PureComponent {
 
               { showActions &&
               <View style={filePageStyle.actions}>
-                {completed && <Button color="red" title="Delete" onPress={this.onDeletePressed} />}
+                {completed && <Button style={filePageStyle.actionButton}
+                                      theme={"light"}
+                                      icon={"trash"}
+                                      text={"Delete"}
+                                      onPress={this.onDeletePressed} />}
                 {!completed && fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes &&
-                  <Button color="red" title="Stop Download" onPress={this.onStopDownloadPressed} />
+                  <Button style={filePageStyle.actionButton}
+                          theme={"light"}
+                          text={"Stop Download"}
+                          onPress={this.onStopDownloadPressed} />
                 }
               </View>}
               <ScrollView style={showActions ? filePageStyle.scrollContainerActions : filePageStyle.scrollContainer}>
diff --git a/app/src/styles/button.js b/app/src/styles/button.js
index 5fc3e1c8..4ef0ad38 100644
--- a/app/src/styles/button.js
+++ b/app/src/styles/button.js
@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import Colors from './colors';
 
 const buttonStyle = StyleSheet.create({
   button: {
@@ -13,13 +14,21 @@ const buttonStyle = StyleSheet.create({
     backgroundColor: '#999999'
   },
   row: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
-  icon: {
-    color: '#ffffff',
+  iconLight: {
+    color: Colors.White,
+  },
+  iconDark: {
+    color: Colors.DarkGrey,
+  },
+  textLight: {
+    color: Colors.White,
+  },
+  textDark: {
+    color: Colors.DarkGrey
   },
   text: {
-    color: '#ffffff',
     fontFamily: 'Metropolis-Regular',
     fontSize: 14
   },
diff --git a/app/src/styles/colors.js b/app/src/styles/colors.js
index 7ae78d63..d2a47e86 100644
--- a/app/src/styles/colors.js
+++ b/app/src/styles/colors.js
@@ -1,6 +1,7 @@
 const Colors = {
   Black: '#000000',
   ChannelGrey: '#9b9b9b',
+  DarkGrey: '#555555',
   DescriptionGrey: '#999999',
   LbryGreen: '#40b89a',
   LightGrey: '#cccccc',
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index 2efd925e..1881f46a 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -146,9 +146,9 @@ const filePageStyle = StyleSheet.create({
     marginTop: -14,
     width: '50%',
   },
-  deleteButton: {
-    backgroundColor: Colors.Red,
-    width: 80
+  actionButton: {
+    backgroundColor: Colors.White,
+    width: 160
   },
   loading: {
     position: 'absolute',