From 4037bad8964e365a8d032d9b6d97f18a91ca42c7 Mon Sep 17 00:00:00 2001
From: ncoelho <nunovc@gmail.com>
Date: Sun, 29 Mar 2020 17:33:37 +0200
Subject: [PATCH 1/4] improve readability of list, increased white space

---
 BlueComponents.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/BlueComponents.js b/BlueComponents.js
index 47be7f9a..4a3565d9 100644
--- a/BlueComponents.js
+++ b/BlueComponents.js
@@ -581,16 +581,17 @@ export class BlueListItem extends Component {
         bottomDivider
         containerStyle={{
           backgroundColor: 'transparent',
-          borderBottomStartRadius: 20,
-          borderBottomEndRadius: 20,
           borderBottomColor: '#ededed',
+          paddingTop: 16,
+          paddingBottom: 16,
         }}
         titleStyle={{
           color: BlueApp.settings.foregroundColor,
           fontSize: 16,
           fontWeight: '500',
+          marginLeft: 16,
         }}
-        subtitleStyle={{ color: BlueApp.settings.alternativeTextColor }}
+        subtitleStyle={{ color: BlueApp.settings.alternativeTextColor, marginLeft: 16, fontWeight: '400', width: 230 }}
         subtitleNumberOfLines={1}
         titleNumberOfLines={0}
         {...this.props}
@@ -1025,6 +1026,12 @@ const stylesBlueIcon = StyleSheet.create({
     borderRadius: 15,
     backgroundColor: '#f8d2d2',
   },
+  ballOutgoingExpired: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: '#EEF0F4',
+  },
   ballTransparrent: {
     width: 30,
     height: 30,
@@ -1109,15 +1116,8 @@ export class BlueTransactionExpiredIcon extends Component {
     return (
       <View {...this.props}>
         <View style={stylesBlueIcon.boxIncoming}>
-          <View style={stylesBlueIcon.ballOutgoingWithoutRotate}>
-            <Icon
-              {...this.props}
-              name="hourglass-end"
-              size={16}
-              type="font-awesome"
-              color={BlueApp.settings.outgoingForegroundColor}
-              iconStyle={{ left: 0, top: 6 }}
-            />
+          <View style={stylesBlueIcon.ballOutgoingExpired}>
+            <Icon {...this.props} name="clock" size={16} type="octicon" color="#9AA0AA" iconStyle={{ left: 0, top: 6 }} />
           </View>
         </View>
       </View>
@@ -1482,7 +1482,7 @@ export const BlueTransactionListItem = ({ item, itemPriceUnit = BitcoinUnit.BTC,
         if (item.ispaid) {
           color = BlueApp.settings.successColor;
         } else {
-          color = BlueApp.settings.failedColor;
+          color = '#9AA0AA';
         }
       }
     } else if (item.value / 100000000 < 0) {
@@ -1672,7 +1672,7 @@ export class BlueListTransactionItem extends Component {
         if (item.ispaid) {
           color = '#37c0a1';
         } else {
-          color = '#FF0000';
+          color = '#9AA0AA';
         }
       }
     } else if (item.value / 100000000 < 0) {

From f312c4133d24290d41ae6a2427a6c3bae6107070 Mon Sep 17 00:00:00 2001
From: ncoelho <nunovc@gmail.com>
Date: Sat, 28 Mar 2020 22:39:16 +0100
Subject: [PATCH 2/4] add badge

---
 screen/settings/electrumSettings.js | 35 +++++++++++++++++++++--------
 screen/settings/settings.js         |  2 +-
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/screen/settings/electrumSettings.js b/screen/settings/electrumSettings.js
index 8ad33fef..cf2f5105 100644
--- a/screen/settings/electrumSettings.js
+++ b/screen/settings/electrumSettings.js
@@ -13,6 +13,7 @@ import {
   BlueText,
   BlueButtonLink,
 } from '../../BlueComponents';
+import { Badge } from 'react-native-elements';
 import PropTypes from 'prop-types';
 let loc = require('../../loc');
 let BlueElectrum = require('../../BlueElectrum');
@@ -84,6 +85,31 @@ export default class ElectrumSettings extends Component {
   render() {
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+        <BlueCard>
+          <BlueText style={{ textAlign: "center", color: "#9AA0AA", marginBottom: 4, }}>Status</BlueText>
+            <View style={{ width: 'auto', height: 34, flexWrap: 'wrap', justifyContent: 'center', flexDirection: 'row', }}>
+            <Badge containerStyle={{
+                    backgroundColor: this.state.config.status === 1 ? '#D2F8D6' : '#F8D2D2',
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    paddingLeft: 16,
+                    paddingRight: 16,
+                    borderRadius: 20,
+
+                  }}
+                >
+              <BlueText style={{ color: this.state.config.status === 1 ? '#37C0A1' : '#D0021B', }}>
+              {(this.state.config.status === 1 && 'Connected') || 'Not Connected'}
+              </BlueText>
+            </Badge>
+            </View>
+          <BlueSpacing20 />
+          <BlueText>Currently using:</BlueText>
+          <BlueText>Host: {this.state.config.host}</BlueText>
+          <BlueText>Port: {this.state.config.port}</BlueText>
+          <BlueSpacing20 />
+          <BlueButtonLink onPress={this.checkServer} title={'Check current server'} />
+        </BlueCard>
         <BlueCard>
           <BlueText>{loc.settings.electrum_settings_explain}</BlueText>
         </BlueCard>
@@ -169,15 +195,6 @@ export default class ElectrumSettings extends Component {
           {this.state.isLoading ? <BlueLoading /> : <BlueButton onPress={this.save} title={loc.settings.save} />}
         </BlueCard>
 
-        <BlueCard>
-          <BlueSpacing20 />
-          <BlueText>Currently using:</BlueText>
-          <BlueText>Host: {this.state.config.host}</BlueText>
-          <BlueText>Port: {this.state.config.port}</BlueText>
-          <BlueText>Connected: {(this.state.config.status === 1 && 'Yes') || 'No'}</BlueText>
-          <BlueSpacing20 />
-          {this.state.isLoading ? <BlueLoading /> : <BlueButtonLink onPress={this.checkServer} title={'Check current server'} />}
-        </BlueCard>
       </SafeBlueArea>
     );
   }
diff --git a/screen/settings/settings.js b/screen/settings/settings.js
index 2dde4f1d..6bd42e63 100644
--- a/screen/settings/settings.js
+++ b/screen/settings/settings.js
@@ -46,10 +46,10 @@ const Settings = () => {
           <BlueListItem component={TouchableOpacity} onPress={() => navigate('DefaultView')} title="On Launch" />
         )}
         <BlueListItem title="Security" onPress={() => navigate('EncryptStorage')} component={TouchableOpacity} testID="SecurityButton" />
-        <BlueListItem title={loc.settings.lightning_settings} component={TouchableOpacity} onPress={() => navigate('LightningSettings')} />
         <BlueListItem title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} />
         <BlueListItem title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} />
         <BlueListItem title={'Electrum server'} component={TouchableOpacity} onPress={() => navigate('ElectrumSettings')} />
+        <BlueListItem title={loc.settings.lightning_settings} component={TouchableOpacity} onPress={() => navigate('LightningSettings')} />
         <BlueListItem title={loc.settings.advanced_options} component={TouchableOpacity} onPress={onShowAdvancedOptions} />
         {showAdvancedOptions && (
           <BlueCard>

From 59006006e23dded83e288ee916be361c227ccc33 Mon Sep 17 00:00:00 2001
From: ncoelho <nunovc@gmail.com>
Date: Sun, 29 Mar 2020 13:12:03 +0200
Subject: [PATCH 3/4] Visual styling to electrum view

This is missing a listenner to retrieve live changes. At the moment the user has to kill the app to see any changes.
---
 screen/settings/electrumSettings.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/screen/settings/electrumSettings.js b/screen/settings/electrumSettings.js
index cf2f5105..5ebe9cd2 100644
--- a/screen/settings/electrumSettings.js
+++ b/screen/settings/electrumSettings.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { View, TextInput } from 'react-native';
 import { AppStorage } from '../../class';
 import AsyncStorage from '@react-native-community/async-storage';
+import { ScrollView } from 'react-native-gesture-handler';
 import {
   BlueLoading,
   BlueSpacing20,
@@ -85,6 +86,7 @@ export default class ElectrumSettings extends Component {
   render() {
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+      <ScrollView>
         <BlueCard>
           <BlueText style={{ textAlign: "center", color: "#9AA0AA", marginBottom: 4, }}>Status</BlueText>
             <View style={{ width: 'auto', height: 34, flexWrap: 'wrap', justifyContent: 'center', flexDirection: 'row', }}>
@@ -98,20 +100,17 @@ export default class ElectrumSettings extends Component {
 
                   }}
                 >
-              <BlueText style={{ color: this.state.config.status === 1 ? '#37C0A1' : '#D0021B', }}>
+              <BlueText style={{ fontWeight: "600", color: this.state.config.status === 1 ? '#37C0A1' : '#D0021B', }}>
               {(this.state.config.status === 1 && 'Connected') || 'Not Connected'}
               </BlueText>
             </Badge>
             </View>
           <BlueSpacing20 />
-          <BlueText>Currently using:</BlueText>
-          <BlueText>Host: {this.state.config.host}</BlueText>
-          <BlueText>Port: {this.state.config.port}</BlueText>
+          <BlueText style={{ textAlign: "center", color: "#0C2550" }} onPress={this.checkServer}>{this.state.config.host}:{this.state.config.port}</BlueText>
           <BlueSpacing20 />
-          <BlueButtonLink onPress={this.checkServer} title={'Check current server'} />
         </BlueCard>
         <BlueCard>
-          <BlueText>{loc.settings.electrum_settings_explain}</BlueText>
+          <BlueText style={{ color: "#9AA0AA", marginBottom: -24 }}>{loc.settings.electrum_settings_explain}</BlueText>
         </BlueCard>
         <BlueCard>
           <View
@@ -148,7 +147,6 @@ export default class ElectrumSettings extends Component {
               borderBottomWidth: 0.5,
               backgroundColor: '#f5f5f5',
               minHeight: 44,
-              width: 200,
               height: 44,
               alignItems: 'center',
               borderRadius: 4,
@@ -175,7 +173,6 @@ export default class ElectrumSettings extends Component {
               backgroundColor: '#f5f5f5',
               minHeight: 44,
               height: 44,
-              width: 200,
               alignItems: 'center',
               borderRadius: 4,
             }}
@@ -194,7 +191,7 @@ export default class ElectrumSettings extends Component {
           <BlueSpacing20 />
           {this.state.isLoading ? <BlueLoading /> : <BlueButton onPress={this.save} title={loc.settings.save} />}
         </BlueCard>
-
+        </ScrollView>
       </SafeBlueArea>
     );
   }

From 8ab5edfc293ff18c7b4b68df30d815efbcf52cdf Mon Sep 17 00:00:00 2001
From: ncoelho <nunovc@gmail.com>
Date: Sun, 29 Mar 2020 13:16:49 +0200
Subject: [PATCH 4/4] fix linting

---
 screen/settings/electrumSettings.js | 209 ++++++++++++++--------------
 1 file changed, 105 insertions(+), 104 deletions(-)

diff --git a/screen/settings/electrumSettings.js b/screen/settings/electrumSettings.js
index 5ebe9cd2..cb322c9a 100644
--- a/screen/settings/electrumSettings.js
+++ b/screen/settings/electrumSettings.js
@@ -12,7 +12,6 @@ import {
   BlueCard,
   BlueNavigationStyle,
   BlueText,
-  BlueButtonLink,
 } from '../../BlueComponents';
 import { Badge } from 'react-native-elements';
 import PropTypes from 'prop-types';
@@ -86,111 +85,113 @@ export default class ElectrumSettings extends Component {
   render() {
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
-      <ScrollView>
-        <BlueCard>
-          <BlueText style={{ textAlign: "center", color: "#9AA0AA", marginBottom: 4, }}>Status</BlueText>
-            <View style={{ width: 'auto', height: 34, flexWrap: 'wrap', justifyContent: 'center', flexDirection: 'row', }}>
-            <Badge containerStyle={{
-                    backgroundColor: this.state.config.status === 1 ? '#D2F8D6' : '#F8D2D2',
-                    paddingTop: 6,
-                    paddingBottom: 6,
-                    paddingLeft: 16,
-                    paddingRight: 16,
-                    borderRadius: 20,
-
-                  }}
-                >
-              <BlueText style={{ fontWeight: "600", color: this.state.config.status === 1 ? '#37C0A1' : '#D0021B', }}>
-              {(this.state.config.status === 1 && 'Connected') || 'Not Connected'}
-              </BlueText>
-            </Badge>
+        <ScrollView>
+          <BlueCard>
+            <BlueText style={{ textAlign: 'center', color: '#9AA0AA', marginBottom: 4 }}>Status</BlueText>
+            <View style={{ width: 'auto', height: 34, flexWrap: 'wrap', justifyContent: 'center', flexDirection: 'row' }}>
+              <Badge
+                containerStyle={{
+                  backgroundColor: this.state.config.status === 1 ? '#D2F8D6' : '#F8D2D2',
+                  paddingTop: 6,
+                  paddingBottom: 6,
+                  paddingLeft: 16,
+                  paddingRight: 16,
+                  borderRadius: 20,
+                }}
+              >
+                <BlueText style={{ fontWeight: '600', color: this.state.config.status === 1 ? '#37C0A1' : '#D0021B' }}>
+                  {(this.state.config.status === 1 && 'Connected') || 'Not Connected'}
+                </BlueText>
+              </Badge>
+            </View>
+            <BlueSpacing20 />
+            <BlueText style={{ textAlign: 'center', color: '#0C2550' }} onPress={this.checkServer}>
+              {this.state.config.host}:{this.state.config.port}
+            </BlueText>
+            <BlueSpacing20 />
+          </BlueCard>
+          <BlueCard>
+            <BlueText style={{ color: '#9AA0AA', marginBottom: -24 }}>{loc.settings.electrum_settings_explain}</BlueText>
+          </BlueCard>
+          <BlueCard>
+            <View
+              style={{
+                flexDirection: 'row',
+                borderColor: '#d2d2d2',
+                borderBottomColor: '#d2d2d2',
+                borderWidth: 1.0,
+                borderBottomWidth: 0.5,
+                backgroundColor: '#f5f5f5',
+                minHeight: 44,
+                height: 44,
+                alignItems: 'center',
+                borderRadius: 4,
+              }}
+            >
+              <TextInput
+                placeholder={'host, for example 111.222.333.444'}
+                value={this.state.host}
+                onChangeText={text => this.setState({ host: text })}
+                numberOfLines={1}
+                style={{ flex: 1, marginHorizontal: 8, minHeight: 36, height: 36 }}
+                editable={!this.state.isLoading}
+                underlineColorAndroid="transparent"
+              />
+            </View>
+            <BlueSpacing20 />
+            <View
+              style={{
+                flexDirection: 'row',
+                borderColor: '#d2d2d2',
+                borderBottomColor: '#d2d2d2',
+                borderWidth: 1.0,
+                borderBottomWidth: 0.5,
+                backgroundColor: '#f5f5f5',
+                minHeight: 44,
+                height: 44,
+                alignItems: 'center',
+                borderRadius: 4,
+              }}
+            >
+              <TextInput
+                placeholder={'TCP port, usually 50001'}
+                value={this.state.port}
+                onChangeText={text => this.setState({ port: text })}
+                numberOfLines={1}
+                style={{ flex: 1, marginHorizontal: 8, minHeight: 36, height: 36 }}
+                editable={!this.state.isLoading}
+                underlineColorAndroid="transparent"
+              />
+            </View>
+            <BlueSpacing20 />
+            <View
+              style={{
+                flexDirection: 'row',
+                borderColor: '#d2d2d2',
+                borderBottomColor: '#d2d2d2',
+                borderWidth: 1.0,
+                borderBottomWidth: 0.5,
+                backgroundColor: '#f5f5f5',
+                minHeight: 44,
+                height: 44,
+                alignItems: 'center',
+                borderRadius: 4,
+              }}
+            >
+              <TextInput
+                placeholder={'SSL port, usually 50002'}
+                value={this.state.sslPort}
+                onChangeText={text => this.setState({ sslPort: text })}
+                numberOfLines={1}
+                style={{ flex: 1, marginHorizontal: 8, minHeight: 36, height: 36 }}
+                editable={!this.state.isLoading}
+                underlineColorAndroid="transparent"
+              />
             </View>
-          <BlueSpacing20 />
-          <BlueText style={{ textAlign: "center", color: "#0C2550" }} onPress={this.checkServer}>{this.state.config.host}:{this.state.config.port}</BlueText>
-          <BlueSpacing20 />
-        </BlueCard>
-        <BlueCard>
-          <BlueText style={{ color: "#9AA0AA", marginBottom: -24 }}>{loc.settings.electrum_settings_explain}</BlueText>
-        </BlueCard>
-        <BlueCard>
-          <View
-            style={{
-              flexDirection: 'row',
-              borderColor: '#d2d2d2',
-              borderBottomColor: '#d2d2d2',
-              borderWidth: 1.0,
-              borderBottomWidth: 0.5,
-              backgroundColor: '#f5f5f5',
-              minHeight: 44,
-              height: 44,
-              alignItems: 'center',
-              borderRadius: 4,
-            }}
-          >
-            <TextInput
-              placeholder={'host, for example 111.222.333.444'}
-              value={this.state.host}
-              onChangeText={text => this.setState({ host: text })}
-              numberOfLines={1}
-              style={{ flex: 1, marginHorizontal: 8, minHeight: 36, height: 36 }}
-              editable={!this.state.isLoading}
-              underlineColorAndroid="transparent"
-            />
-          </View>
-          <BlueSpacing20 />
-          <View
-            style={{
-              flexDirection: 'row',
-              borderColor: '#d2d2d2',
-              borderBottomColor: '#d2d2d2',
-              borderWidth: 1.0,
-              borderBottomWidth: 0.5,
-              backgroundColor: '#f5f5f5',
-              minHeight: 44,
-              height: 44,
-              alignItems: 'center',
-              borderRadius: 4,
-            }}
-          >
-            <TextInput
-              placeholder={'TCP port, usually 50001'}
-              value={this.state.port}
-              onChangeText={text => this.setState({ port: text })}
-              numberOfLines={1}
-              style={{ flex: 1, marginHorizontal: 8, minHeight: 36, height: 36 }}
-              editable={!this.state.isLoading}
-              underlineColorAndroid="transparent"
-            />
-          </View>
-          <BlueSpacing20 />
-          <View
-            style={{
-              flexDirection: 'row',
-              borderColor: '#d2d2d2',
-              borderBottomColor: '#d2d2d2',
-              borderWidth: 1.0,
-              borderBottomWidth: 0.5,
-              backgroundColor: '#f5f5f5',
-              minHeight: 44,
-              height: 44,
-              alignItems: 'center',
-              borderRadius: 4,
-            }}
-          >
-            <TextInput
-              placeholder={'SSL port, usually 50002'}
-              value={this.state.sslPort}
-              onChangeText={text => this.setState({ sslPort: text })}
-              numberOfLines={1}
-              style={{ flex: 1, marginHorizontal: 8, minHeight: 36, height: 36 }}
-              editable={!this.state.isLoading}
-              underlineColorAndroid="transparent"
-            />
-          </View>
 
-          <BlueSpacing20 />
-          {this.state.isLoading ? <BlueLoading /> : <BlueButton onPress={this.save} title={loc.settings.save} />}
-        </BlueCard>
+            <BlueSpacing20 />
+            {this.state.isLoading ? <BlueLoading /> : <BlueButton onPress={this.save} title={loc.settings.save} />}
+          </BlueCard>
         </ScrollView>
       </SafeBlueArea>
     );