Merge branch 'master' into general

5 years ago · 7a2388927c
2 changed files with 123 additions and 108 deletions
--- 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) {
--- 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,
@ -11,8 +12,8 @@ import {
  BlueCard,
  BlueNavigationStyle,
  BlueText,
-  BlueButtonLink,
 } from '../../BlueComponents';
+import { Badge } from 'react-native-elements';
 import PropTypes from 'prop-types';
 let loc = require('../../loc');
 let BlueElectrum = require('../../BlueElectrum');
@ -84,100 +85,114 @@ export default class ElectrumSettings extends Component {
  render() {
    return (
      <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
-        <BlueCard>
-          <BlueText>{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,
-              width: 200,
-              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,
-              width: 200,
-              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>
+        <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 />
-          {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>
+            <BlueSpacing20 />
+            {this.state.isLoading ? <BlueLoading /> : <BlueButton onPress={this.save} title={loc.settings.save} />}
+          </BlueCard>
+        </ScrollView>
      </SafeBlueArea>
    );
  }