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,6 +11,7 @@ export default class Button extends React.PureComponent {
       style,
       text,
       icon,
+      theme,
       onPress
     } = this.props;
 
@@ -30,10 +32,16 @@ export default class Button extends React.PureComponent {
     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/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: {
+  iconLight: {
-    color: '#ffffff',
+    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: {
+  actionButton: {
-    backgroundColor: Colors.Red,
+    backgroundColor: Colors.White,
-    width: 80
+    width: 160
   },
   loading: {
     position: 'absolute',