Merge pull request #221 from lbryio/delete-button

Delete and Stop download button tweaks

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>
     );

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();

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}>

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
   },

app/src/styles/colors.js

@@ -1,6 +1,7 @@
 const Colors = {
   Black: '#000000',
   ChannelGrey: '#9b9b9b',
+  DarkGrey: '#555555',
   DescriptionGrey: '#999999',
   LbryGreen: '#40b89a',
   LightGrey: '#cccccc',

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',