Several icon fixes

views/Channels/Channel.tsx

@@ -172,9 +172,11 @@ export default class ChannelView extends React.Component<
         const EditFees = () => (
             <TouchableOpacity
                 onPress={() => navigation.navigate('SetFees', { channel })}
-                style={{ top: -5 }}
             >
-                <Edit fill={themeColor('text')} height={38} width={38} />
+                <Edit
+                    fill={themeColor('text')}
+                    style={{ alignSelf: 'center' }}
+                />
             </TouchableOpacity>
         );
 
@@ -188,7 +190,10 @@ export default class ChannelView extends React.Component<
                     })
                 }
             >
-                <Share fill={themeColor('text')} height={30} width={30} />
+                <Share
+                    fill={themeColor('text')}
+                    style={{ alignSelf: 'center' }}
+                />
             </TouchableOpacity>
         );
 

views/ContactDetails.tsx

@@ -8,7 +8,6 @@ import {
     ScrollView
 } from 'react-native';
 import EncryptedStorage from 'react-native-encrypted-storage';
-import { Icon } from 'react-native-elements';
 import Screen from '../components/Screen';
 import LoadingIndicator from '../components/LoadingIndicator';
 import Header from '../components/Header';
@@ -18,6 +17,7 @@ import BitcoinIcon from '../assets/images/SVG/BitcoinIcon.svg';
 import KeySecurity from '../assets/images/SVG/Key Security.svg';
 import VerifiedAccount from '../assets/images/SVG/Verified Account.svg';
 import EditContact from '../assets/images/SVG/Pen.svg';
+import Star from '../assets/images/SVG/Star.svg';
 
 import { themeColor } from '../utils/ThemeUtils';
 import LinkingUtils from '../utils/LinkingUtils';
@@ -165,13 +165,14 @@ export default class ContactDetails extends React.Component<
         const { navigation } = this.props;
 
         const StarButton = () => (
-            <Icon
-                name={contact.isFavourite ? 'star' : 'star-outline'}
-                onPress={this.toggleFavorite}
-                color={themeColor('text')}
-                underlayColor="transparent"
-                size={32}
-            />
+            <TouchableOpacity onPress={this.toggleFavorite}>
+                <Star
+                    fill={contact.isFavourite ? themeColor('text') : 'none'}
+                    stroke={contact.isFavourite ? 'none' : themeColor('text')}
+                    strokeWidth={2}
+                    style={{ alignSelf: 'center' }}
+                />
+            </TouchableOpacity>
         );
         const EditContactButton = () => (
             <TouchableOpacity
@@ -182,7 +183,10 @@ export default class ContactDetails extends React.Component<
                     })
                 }
             >
-                <EditContact height={40} width={40} />
+                <EditContact
+                    fill={themeColor('text')}
+                    style={{ alignSelf: 'center' }}
+                />
             </TouchableOpacity>
         );
         return (

views/EditFee.tsx

@@ -21,7 +21,7 @@ import { themeColor } from '../utils/ThemeUtils';
 import { localeString } from '../utils/LocaleUtils';
 
 import MempoolSpace from '../assets/images/affiliates/Mempool.svg';
-import Refresh from '../assets/images/SVG/Refresh.svg';
+import Refresh from '../assets/images/SVG/Sync.svg';
 import ErrorIcon from '../assets/images/SVG/ErrorIcon.svg';
 
 import FeeStore from './../stores/FeeStore';
@@ -80,7 +80,12 @@ export default class EditFee extends React.Component<
 
         const ReloadButton = () => (
             <TouchableOpacity onPress={() => getOnchainFeesviaMempool()}>
-                <Refresh stroke={themeColor('text')} />
+                <Refresh
+                    fill={themeColor('text')}
+                    height={30}
+                    width={41}
+                    style={{ alignSelf: 'center' }}
+                />
             </TouchableOpacity>
         );
 

views/Invoice.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import EncryptedStorage from 'react-native-encrypted-storage';
 
 import { StyleSheet, ScrollView, View, TouchableOpacity } from 'react-native';
-import { Icon } from 'react-native-elements';
 
 import Amount from '../components/Amount';
 import Header from '../components/Header';
@@ -17,6 +16,7 @@ import { localeString } from '../utils/LocaleUtils';
 import { themeColor } from '../utils/ThemeUtils';
 
 import EditNotes from '../assets/images/SVG/Pen.svg';
+import QR from '../assets/images/SVG/QR.svg';
 
 interface InvoiceProps {
     navigation: any;
@@ -64,24 +64,25 @@ export default class InvoiceView extends React.Component<InvoiceProps> {
         const noteKey = getRPreimage || payment_hash;
 
         const QRButton = () => (
-            <Icon
-                name="qr-code"
-                onPress={() => {
-                    navigation.navigate('QR', { value: getPaymentRequest });
-                }}
-                color={themeColor('text')}
-                underlayColor="transparent"
-                size={35}
-            />
+            <TouchableOpacity
+                onPress={() =>
+                    navigation.navigate('QR', { value: getPaymentRequest })
+                }
+            >
+                <QR fill={themeColor('text')} style={{ alignSelf: 'center' }} />
+            </TouchableOpacity>
         );
         const EditNotesButton = () => (
             <TouchableOpacity
                 onPress={() =>
                     navigation.navigate('AddNotes', { getRPreimage: noteKey })
                 }
-                style={{ marginTop: -6, alignSelf: 'center', marginRight: 14 }}
+                style={{ marginRight: 15 }}
             >
-                <EditNotes height={40} width={40} />
+                <EditNotes
+                    fill={themeColor('text')}
+                    style={{ alignSelf: 'center' }}
+                />
             </TouchableOpacity>
         );
 

views/Payment.tsx

@@ -93,7 +93,10 @@ export default class PaymentView extends React.Component<PaymentProps> {
                     navigation.navigate('AddNotes', { payment_hash: noteKey })
                 }
             >
-                <EditNotes />
+                <EditNotes
+                    style={{ alignSelf: 'center' }}
+                    fill={themeColor('text')}
+                />
             </TouchableOpacity>
         );
 

views/PaymentRequest.tsx

@@ -9,7 +9,6 @@ import {
     TouchableOpacity
 } from 'react-native';
 import { inject, observer } from 'mobx-react';
-import { Icon } from 'react-native-elements';
 
 import Amount from '../components/Amount';
 import AmountInput from '../components/AmountInput';
@@ -43,6 +42,7 @@ import { Row } from '../components/layout/Row';
 
 import CaretDown from '../assets/images/SVG/Caret Down.svg';
 import CaretRight from '../assets/images/SVG/Caret Right.svg';
+import QR from '../assets/images/SVG/QR.svg';
 import Conversion from '../components/Conversion';
 
 interface InvoiceProps {
@@ -355,15 +355,13 @@ export default class PaymentRequest extends React.Component<
         const noBalance = this.props.BalanceStore.lightningBalance === 0;
 
         const QRButton = () => (
-            <Icon
-                name="qr-code"
-                onPress={() => {
-                    navigation.navigate('QR', { value: paymentRequest });
-                }}
-                color={themeColor('text')}
-                underlayColor="transparent"
-                size={35}
-            />
+            <TouchableOpacity
+                onPress={() =>
+                    navigation.navigate('QR', { value: paymentRequest })
+                }
+            >
+                <QR fill={themeColor('text')} style={{ alignSelf: 'center' }} />
+            </TouchableOpacity>
         );
 
         return (