lukechilds
/
BlueWallet
mirror of https://github.com/lukechilds/BlueWallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #439 from davh/ColorCleanup 

Color cleanup
icloud
Igor Korsakov 6 years ago
committed by GitHub
parent
2254cc07d1 6e34263623
commit
4f911259f1
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 83 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 132
      BlueComponents.js
  2. 18
      class/app-storage.js

132
BlueComponents.js
View File

@ -45,11 +45,11 @@ if (aspectRatio > 1.6) {
export class BlueButton extends Component {
render() {
let backgroundColor = this.props.backgroundColor ? this.props.backgroundColor : '#ccddf9';
let fontColor = '#0c2550';
let backgroundColor = this.props.backgroundColor ? this.props.backgroundColor : BlueApp.settings.buttonBackgroundColor;
let fontColor = BlueApp.settings.buttonTextColor;
if (this.props.hasOwnProperty('disabled') && this.props.disabled === true) {
backgroundColor = '#eef0f4';
fontColor = '#9aa0aa';
backgroundColor = BlueApp.settings.buttonDisabledBackgroundColor;
fontColor = BlueApp.settings.buttonDisabledTextColor;
}
let buttonWidth = width / 1.5;
if (this.props.hasOwnProperty('noMinWidth')) {
@ -93,10 +93,10 @@ export class BitcoinButton extends Component {
<View
style={{
// eslint-disable-next-line
borderColor: (this.props.active && BlueApp.settings.foregroundColor) || '#d2d2d2',
borderColor: (this.props.active && BlueApp.settings.foregroundColor) || BlueApp.settings.inputBorderColor,
borderWidth: 0.5,
borderRadius: 5,
backgroundColor: '#f5f5f5',
backgroundColor: BlueApp.settings.inputBackgroundColor,
// eslint-disable-next-line
width: this.props.style.width,
// eslint-disable-next-line
@ -104,8 +104,8 @@ export class BitcoinButton extends Component {
}}
>
<View style={{ paddingTop: 30 }}>
<Icon name="btc" size={32} type="font-awesome" color={(this.props.active && BlueApp.settings.foregroundColor) || '#d2d2d2'} />
<Text style={{ textAlign: 'center', color: (this.props.active && BlueApp.settings.foregroundColor) || '#d2d2d2' }}>
<Icon name="btc" size={32} type="font-awesome" color={(this.props.active && BlueApp.settings.foregroundColor) || BlueApp.settings.inputBorderColor} />
<Text style={{ textAlign: 'center', color: (this.props.active && BlueApp.settings.foregroundColor) || BlueApp.settings.inputBorderColor }}>
{loc.wallets.add.bitcoin}
</Text>
</View>
@ -127,10 +127,10 @@ export class LightningButton extends Component {
<View
style={{
// eslint-disable-next-line
borderColor: (this.props.active && BlueApp.settings.foregroundColor) || '#d2d2d2',
borderColor: (this.props.active && BlueApp.settings.foregroundColor) || BlueApp.settings.inputBorderColor,
borderWidth: 0.5,
borderRadius: 5,
backgroundColor: '#f5f5f5',
backgroundColor: BlueApp.settings.inputBackgroundColor,
// eslint-disable-next-line
width: this.props.style.width,
// eslint-disable-next-line
@ -138,8 +138,8 @@ export class LightningButton extends Component {
}}
>
<View style={{ paddingTop: 30 }}>
<Icon name="bolt" size={32} type="font-awesome" color={(this.props.active && BlueApp.settings.foregroundColor) || '#d2d2d2'} />
<Text style={{ textAlign: 'center', color: (this.props.active && BlueApp.settings.foregroundColor) || '#d2d2d2' }}>
<Icon name="bolt" size={32} type="font-awesome" color={(this.props.active && BlueApp.settings.foregroundColor) || BlueApp.settings.inputBorderColor} />
<Text style={{ textAlign: 'center', color: (this.props.active && BlueApp.settings.foregroundColor) || BlueApp.settings.inputBorderColor }}>
{loc.wallets.add.lightning}
</Text>
</View>
@ -161,7 +161,7 @@ export class BlueButtonLink extends Component {
}}
{...this.props}
>
<Text style={{ color: '#0c2550', textAlign: 'center', fontSize: 16 }}>{this.props.title}</Text>
<Text style={{ color: BlueApp.settings.foregroundColor, textAlign: 'center', fontSize: 16 }}>{this.props.title}</Text>
</TouchableOpacity>
);
}
@ -169,15 +169,15 @@ export class BlueButtonLink extends Component {
export const BlueNavigationStyle = (navigation, withNavigationCloseButton = false, customCloseButtonFunction = undefined) => ({
headerStyle: {
backgroundColor: '#FFFFFF',
backgroundColor: BlueApp.settings.brandingColor,
borderBottomWidth: 0,
elevation: 0,
},
headerTitleStyle: {
fontWeight: '600',
color: '#0c2550',
color: BlueApp.settings.foregroundColor,
},
headerTintColor: '#0c2550',
headerTintColor: BlueApp.settings.foregroundColor,
headerRight: withNavigationCloseButton ? (
<TouchableOpacity
style={{ width: 40, height: 40, padding: 14 }}
@ -309,7 +309,7 @@ export class BlueListItem extends Component {
fontSize: 16,
fontWeight: '500',
}}
subtitleStyle={{ color: '#9aa0aa' }}
subtitleStyle={{ color: BlueApp.settings.alternativeTextColor }}
subtitleNumberOfLines={1}
{...this.props}
/>
@ -331,11 +331,11 @@ export class BlueFormInput extends Component {
inputStyle={{ color: BlueApp.settings.foregroundColor, maxWidth: width - 105 }}
containerStyle={{
marginTop: 5,
borderColor: '#d2d2d2',
borderBottomColor: '#d2d2d2',
borderColor: BlueApp.settings.inputBorderColor,
borderBottomColor: BlueApp.settings.inputBorderColor,
borderWidth: 0.5,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
backgroundColor: BlueApp.settings.inputBackgroundColor,
}}
/>
);
@ -363,11 +363,11 @@ export class BlueFormMultiInput extends Component {
style={{
marginTop: 5,
marginHorizontal: 20,
borderColor: '#d2d2d2',
borderBottomColor: '#d2d2d2',
borderColor: BlueApp.settings.inputBorderColor,
borderBottomColor: BlueApp.settings.inputBorderColor,
borderWidth: 0.5,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
backgroundColor: BlueApp.settings.inputBackgroundColor,
height: 200,
color: BlueApp.settings.foregroundColor,
}}
@ -396,11 +396,11 @@ export class BlueFormInputAddress extends Component {
}}
containerStyle={{
marginTop: 5,
borderColor: '#d2d2d2',
borderBottomColor: '#d2d2d2',
borderColor: BlueApp.settings.inputBorderColor,
borderBottomColor: BlueApp.settings.inputBorderColor,
borderWidth: 0.5,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
backgroundColor: BlueApp.settings.inputBackgroundColor,
}}
/>
);
@ -426,9 +426,9 @@ export class BlueHeader extends Component {
export class BlueHeaderDefaultSub extends Component {
render() {
return (
<SafeAreaView style={{ backgroundColor: '#FFFFFF' }}>
<SafeAreaView style={{ backgroundColor: BlueApp.settings.brandingColor }}>
<Header
backgroundColor="#FFFFFF"
backgroundColor={BlueApp.settings.brandingColor}
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
@ -473,10 +473,10 @@ export class BlueHeaderDefaultSub extends Component {
export class BlueHeaderDefaultMain extends Component {
render() {
return (
<SafeAreaView style={{ backgroundColor: '#FFFFFF' }}>
<SafeAreaView style={{ backgroundColor: BlueApp.settings.brandingColor }}>
<Header
{...this.props}
backgroundColor="#FFFFFF"
backgroundColor={BlueApp.settings.brandingColor}
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
@ -582,7 +582,7 @@ export class BlueUseAllFundsButton extends Component {
return (
<InputAccessoryView nativeID={BlueUseAllFundsButton.InputAccessoryViewID}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<Text style={{ color: '#9aa0aa', fontSize: 16, marginHorizontal: 8 }}>
<Text style={{ color: BlueApp.settings.alternativeTextColor, fontSize: 16, marginHorizontal: 8 }}>
Total: {this.props.wallet.getBalance()} {BitcoinUnit.BTC}
</Text>
<BlueButtonLink title="Use All" onPress={this.props.onUseAllPressed} />
@ -725,7 +725,7 @@ export class BlueTransactionIncomingIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballIncoming}>
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#37c0a1" iconStyle={{ left: 0, top: 8 }} />
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color={BlueApp.settings.incomingForegroundColor} iconStyle={{ left: 0, top: 8 }} />
</View>
</View>
</View>
@ -760,7 +760,7 @@ export class BlueTransactionExpiredIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballOutgoingWithoutRotate}>
<Icon {...this.props} name="hourglass-end" size={16} type="font-awesome" color="#d0021b" iconStyle={{ left: 0, top: 6 }} />
<Icon {...this.props} name="hourglass-end" size={16} type="font-awesome" color={BlueApp.settings.outgoingForegroundColor} iconStyle={{ left: 0, top: 6 }} />
</View>
</View>
</View>
@ -779,7 +779,7 @@ export class BlueTransactionOnchainIcon extends Component {
name="link"
size={16}
type="font-awesome"
color="#37c0a1"
color={BlueApp.settings.incomingForegroundColor}
iconStyle={{ left: 0, top: 7, transform: [{ rotate: '-45deg' }] }}
/>
</View>
@ -795,7 +795,7 @@ export class BlueTransactionOffchainIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballOutgoingWithoutRotate}>
<Icon {...this.props} name="bolt" size={16} type="font-awesome" color="#d0021b" iconStyle={{ left: 0, top: 7 }} />
<Icon {...this.props} name="bolt" size={16} type="font-awesome" color={BlueApp.settings.outgoingForegroundColor} iconStyle={{ left: 0, top: 7 }} />
</View>
</View>
</View>
@ -809,7 +809,7 @@ export class BlueTransactionOffchainIncomingIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballIncomingWithoutRotate}>
<Icon {...this.props} name="bolt" size={16} type="font-awesome" color="#37c0a1" iconStyle={{ left: 0, top: 7 }} />
<Icon {...this.props} name="bolt" size={16} type="font-awesome" color={BlueApp.settings.incomingForegroundColor} iconStyle={{ left: 0, top: 7 }} />
</View>
</View>
</View>
@ -823,7 +823,7 @@ export class BlueTransactionOutgoingIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballOutgoing}>
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#d0021b" iconStyle={{ left: 0, top: 8 }} />
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color={BlueApp.settings.outgoingForegroundColor} iconStyle={{ left: 0, top: 8 }} />
</View>
</View>
</View>
@ -841,7 +841,7 @@ export class BlueReceiveButtonIcon extends Component {
style={{
flex: 1,
minWidth: 130,
backgroundColor: '#ccddf9',
backgroundColor: BlueApp.settings.buttonBackgroundColor,
}}
>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
@ -856,11 +856,11 @@ export class BlueReceiveButtonIcon extends Component {
marginBottom: -11,
}}
>
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" />
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color={BlueApp.settings.buttonAlternativeTextColor} />
</View>
<Text
style={{
color: '#2f5fb3',
color: BlueApp.settings.buttonAlternativeTextColor,
fontSize: (isIpad && 10) || 16,
fontWeight: '500',
left: 5,
@ -884,7 +884,7 @@ export class BlueSendButtonIcon extends Component {
style={{
flex: 1,
minWidth: 130,
backgroundColor: '#ccddf9',
backgroundColor: BlueApp.settings.buttonBackgroundColor,
alignItems: 'center',
}}
>
@ -899,11 +899,11 @@ export class BlueSendButtonIcon extends Component {
marginBottom: 11,
}}
>
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" />
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color={BlueApp.settings.buttonAlternativeTextColor} />
</View>
<Text
style={{
color: '#2f5fb3',
color: BlueApp.settings.buttonAlternativeTextColor,
fontSize: (isIpad && 10) || 16,
fontWeight: '500',
backgroundColor: 'transparent',
@ -926,7 +926,7 @@ export class ManageFundsBigButton extends Component {
style={{
flex: 1,
width: 168,
backgroundColor: '#ccddf9',
backgroundColor: BlueApp.settings.buttonBackgroundColor,
}}
>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
@ -939,11 +939,11 @@ export class ManageFundsBigButton extends Component {
transform: [{ rotate: '90deg' }],
}}
>
<Icon {...this.props} name="link" size={16} type="font-awesome" color="#2f5fb3" />
<Icon {...this.props} name="link" size={16} type="font-awesome" color={BlueApp.settings.buttonAlternativeTextColor} />
</View>
<Text
style={{
color: '#2f5fb3',
color: BlueApp.settings.buttonAlternativeTextColor,
fontSize: (isIpad && 10) || 16,
fontWeight: '500',
backgroundColor: 'transparent',
@ -1017,7 +1017,7 @@ export class NewWalletPanel extends Component {
backgroundColor: 'transparent',
fontWeight: 'bold',
fontSize: 20,
color: '#9aa0aa',
color: BlueApp.settings.alternativeTextColor,
}}
>
{loc.wallets.list.create_a_wallet}
@ -1027,7 +1027,7 @@ export class NewWalletPanel extends Component {
style={{
backgroundColor: 'transparent',
fontSize: 13,
color: '#9aa0aa',
color: BlueApp.settings.alternativeTextColor,
}}
>
{loc.wallets.list.create_a_wallet1}
@ -1036,7 +1036,7 @@ export class NewWalletPanel extends Component {
style={{
backgroundColor: 'transparent',
fontSize: 13,
color: '#9aa0aa',
color: BlueApp.settings.alternativeTextColor,
}}
>
{loc.wallets.list.create_a_wallet2}
@ -1090,7 +1090,7 @@ export class BlueTransactionListItem extends Component {
rowTitleStyle = () => {
const item = this.props.item;
let color = '#37c0a1';
let color = BlueApp.settings.successColor;
if (item.type === 'user_invoice' || item.type === 'payment_request') {
const currentDate = new Date();
@ -1098,12 +1098,12 @@ export class BlueTransactionListItem extends Component {
const invoiceExpiration = item.timestamp + item.expire_time;
if (invoiceExpiration > now) {
color = '#37c0a1';
color = BlueApp.settings.successColor;
} else if (invoiceExpiration < now) {
if (item.ispaid) {
color = '#37c0a1';
color = BlueApp.settings.successColor;
} else {
color = '#FF0000';
color = BlueApp.settings.failedColor;
}
}
} else if (item.value / 100000000 < 0) {
@ -1486,7 +1486,7 @@ export class WalletsCarousel extends Component {
}}
>
<LinearGradient
shadowColor="#000000"
shadowColor={BlueApp.settings.shadowColor}
colors={WalletGradient.gradientsFor(item.type)}
style={{
padding: 15,
@ -1512,7 +1512,7 @@ export class WalletsCarousel extends Component {
style={{
backgroundColor: 'transparent',
fontSize: 19,
color: '#fff',
color: BlueApp.settings.inverseForegroundColor,
}}
>
{item.getLabel()}
@ -1524,7 +1524,7 @@ export class WalletsCarousel extends Component {
backgroundColor: 'transparent',
fontWeight: 'bold',
fontSize: 36,
color: '#fff',
color: BlueApp.settings.inverseForegroundColor,
}}
>
{loc.formatBalance(Number(item.getBalance()), item.getPreferredBalanceUnit(), true)}
@ -1535,7 +1535,7 @@ export class WalletsCarousel extends Component {
style={{
backgroundColor: 'transparent',
fontSize: 13,
color: '#fff',
color: BlueApp.settings.inverseForegroundColor,
}}
>
{loc.wallets.list.latest_transaction}
@ -1546,7 +1546,7 @@ export class WalletsCarousel extends Component {
backgroundColor: 'transparent',
fontWeight: 'bold',
fontSize: 16,
color: '#fff',
color: BlueApp.settings.inverseForegroundColor,
}}
>
{loc.transactionTimeToReadable(item.getLatestTransactionTime())}
@ -1602,11 +1602,11 @@ export class BlueAddressInput extends Component {
<View
style={{
flexDirection: 'row',
borderColor: '#d2d2d2',
borderBottomColor: '#d2d2d2',
borderColor: BlueApp.settings.inputBorderColor,
borderBottomColor: BlueApp.settings.inputBorderColor,
borderWidth: 1.0,
borderBottomWidth: 0.5,
backgroundColor: '#f5f5f5',
backgroundColor: BlueApp.settings.inputBackgroundColor,
minHeight: 44,
height: 44,
marginHorizontal: 20,
@ -1667,8 +1667,8 @@ export class BlueAddressInput extends Component {
marginHorizontal: 4,
}}
>
<Icon name="qrcode" size={22} type="font-awesome" color="#FFFFFF" />
<Text style={{ color: '#FFFFFF' }}>{loc.send.details.scan}</Text>
<Icon name="qrcode" size={22} type="font-awesome" color={BlueApp.settings.inverseForegroundColor} />
<Text style={{ color: BlueApp.settings.inverseForegroundColor }}>{loc.send.details.scan}</Text>
</TouchableOpacity>
</View>
);
@ -1712,16 +1712,16 @@ export class BlueBitcoinAmount extends Component {
ref={textInput => (this.textInput = textInput)}
editable={!this.props.isLoading && !this.props.disabled}
value={amount}
placeholderTextColor={this.props.disabled ? '#99a0ab' : '#0f5cc0'}
placeholderTextColor={this.props.disabled ? BlueApp.settings.buttonDisabledTextColor : BlueApp.settings.alternativeTextColor2}
style={{
color: this.props.disabled ? '#99a0ab' : '#0f5cc0',
color: this.props.disabled ? BlueApp.settings.buttonDisabledTextColor : BlueApp.settings.alternativeTextColor2,
fontSize: 36,
fontWeight: '600',
}}
/>
<Text
style={{
color: this.props.disabled ? '#99a0ab' : '#0f5cc0',
color: this.props.disabled ? BlueApp.settings.buttonDisabledTextColor : BlueApp.settings.alternativeTextColor2,
fontSize: 16,
marginHorizontal: 4,
paddingBottom: 6,

18
class/app-storage.js
View File

@ -26,8 +26,24 @@ export class AppStorage {
this.settings = {
brandingColor: '#ffffff',
foregroundColor: '#0c2550',
buttonBackground: '#ffffff',
buttonBackgroundColor: '#ccddf9',
buttonTextColor: '#0c2550',
buttonAlternativeTextColor: '#2f5fb3',
buttonDisabledBackgroundColor: '#eef0f4',
buttonDisabledTextColor: '#9aa0aa',
inputBorderColor: '#d2d2d2',
inputBackgroundColor: '#f5f5f5',
alternativeTextColor: '#9aa0aa',
alternativeTextColor2: '#0f5cc0',
buttonBlueBackgroundColor: '#ccddf9',
incomingBackgroundColor: '#d2f8d6',
incomingForegroundColor: '#37c0a1',
outgoingBackgroundColor: '#f8d2d2',
outgoingForegroundColor: '#d0021b',
successColor: '#37c0a1',
failedColor: '#ff0000',
shadowColor: '#000000',
inverseForegroundColor: '#ffffff',
};
}

Write Preview
Loading…
Cancel
Save