Skip to content

Commit c9dd917

Browse files
kaloudiskaloudis
authored
Update button styles (#828)
1 parent c0e04bf commit c9dd917

File tree

7 files changed

+116
-88
lines changed

7 files changed

+116
-88
lines changed

‎components/Button.tsx‎

Lines changed: 64 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,112 @@ import { themeColor } from './../utils/ThemeUtils';
55
interface ButtonProps {
66
title: string;
77
icon?: any;
8+
titleStyle?: any;
89
onPress?: any;
910
secondary?: boolean;
1011
tertiary?: boolean;
1112
quaternary?: boolean;
1213
iconOnly?: boolean;
1314
adaptiveWidth?: boolean;
1415
containerStyle?: any;
16+
buttonStyle?: any;
1517
noUppercase?: boolean;
1618
}
1719

1820
function Button(props: ButtonProps) {
1921
const {
2022
title,
2123
icon,
24+
titleStyle,
2225
onPress,
2326
secondary,
2427
tertiary,
2528
quaternary,
2629
iconOnly,
2730
adaptiveWidth,
2831
containerStyle,
32+
buttonStyle,
2933
noUppercase
3034
} = props;
3135

3236
const newContainerStyle: any = adaptiveWidth
3337
? {
3438
...containerStyle,
3539
borderWidth: secondary ? 2 : 0,
36-
borderColor: themeColor('highlight'),
40+
borderColor:
41+
(containerStyle && containerStyle.borderColor) ||
42+
themeColor('highlight'),
3743
alignSelf: 'center',
3844
borderRadius: 30
3945
}
4046
: {
4147
...containerStyle,
4248
borderWidth: secondary ? 2 : 0,
43-
borderColor: themeColor('highlight'),
49+
borderColor:
50+
(containerStyle && containerStyle.borderColor) ||
51+
themeColor('highlight'),
4452
alignSelf: 'center',
4553
borderRadius: 30,
4654
width: '90%'
4755
};
4856

4957
return (
5058
<ElementsButton
51-
icon={{
52-
...icon,
53-
color: iconOnly
54-
? themeColor('text')
55-
: secondary
56-
? themeColor('highlight')
57-
: themeColor('background')
58-
}}
59+
icon={
60+
icon
61+
? {
62+
color: icon.color
63+
? icon.color
64+
: iconOnly
65+
? themeColor('text')
66+
: secondary
67+
? themeColor('highlight')
68+
: themeColor('background'),
69+
...icon
70+
}
71+
: {
72+
color: iconOnly
73+
? themeColor('text')
74+
: secondary
75+
? themeColor('highlight')
76+
: themeColor('background')
77+
}
78+
}
5979
title={title}
60-
buttonStyle={{
61-
backgroundColor: iconOnly
62-
? 'transparent'
63-
: quaternary
64-
? themeColor('background')
65-
: tertiary
66-
? themeColor('highlight')
67-
: secondary
68-
? themeColor('secondary')
69-
: themeColor('text')
70-
}}
71-
titleStyle={{
72-
color: iconOnly
73-
? themeColor('text')
74-
: quaternary
75-
? themeColor('text')
76-
: secondary
77-
? themeColor('highlight')
78-
: themeColor('background'),
79-
textTransform: noUppercase ? 'none' : 'uppercase',
80-
fontFamily: 'Lato-Bold'
81-
}}
80+
buttonStyle={
81+
buttonStyle
82+
? buttonStyle
83+
: {
84+
backgroundColor: iconOnly
85+
? 'transparent'
86+
: quaternary
87+
? themeColor('background')
88+
: tertiary
89+
? themeColor('highlight')
90+
: secondary
91+
? themeColor('secondary')
92+
: themeColor('text')
93+
}
94+
}
95+
titleStyle={
96+
titleStyle
97+
? {
98+
...titleStyle,
99+
textTransform: noUppercase ? 'none' : 'uppercase',
100+
fontFamily: 'Lato-Bold'
101+
}
102+
: {
103+
color: iconOnly
104+
? themeColor('text')
105+
: quaternary
106+
? themeColor('text')
107+
: secondary
108+
? themeColor('highlight')
109+
: themeColor('background'),
110+
textTransform: noUppercase ? 'none' : 'uppercase',
111+
fontFamily: 'Lato-Bold'
112+
}
113+
}
82114
onPress={onPress}
83115
containerStyle={newContainerStyle}
84116
/>

‎components/CollapsedQR.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,10 @@ export default class CollapsedQR extends React.Component<
129129
containerStyle={{
130130
margin: 20
131131
}}
132+
icon={{
133+
name: 'nfc',
134+
size: 25
135+
}}
132136
onPress={() => this.toggleNfc()}
133137
tertiary
134138
/>

‎views/OpenChannel.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -520,8 +520,7 @@ export default class OpenChannel extends React.Component<
520520
title={localeString('general.enableNfc')}
521521
icon={{
522522
name: 'nfc',
523-
size: 25,
524-
color: 'white'
523+
size: 25
525524
}}
526525
onPress={() => this.enableNfc()}
527526
secondary

‎views/Send.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -549,8 +549,7 @@ export default class Send extends React.Component<SendProps, SendState> {
549549
)}
550550
icon={{
551551
name: 'send',
552-
size: 25,
553-
color: 'white'
552+
size: 25
554553
}}
555554
onPress={() =>
556555
this.sendCoins(satAmount)
@@ -725,8 +724,7 @@ export default class Send extends React.Component<SendProps, SendState> {
725724
title={localeString('general.send')}
726725
icon={{
727726
name: 'send',
728-
size: 25,
729-
color: 'white'
727+
size: 25
730728
}}
731729
onPress={() =>
732730
this.sendKeySendPayment(satAmount)
@@ -758,8 +756,7 @@ export default class Send extends React.Component<SendProps, SendState> {
758756
title={localeString('views.Send.lookup')}
759757
icon={{
760758
name: 'send',
761-
size: 25,
762-
color: 'white'
759+
size: 25
763760
}}
764761
onPress={() =>
765762
navigation.navigate('PaymentRequest')
@@ -772,8 +769,7 @@ export default class Send extends React.Component<SendProps, SendState> {
772769
title={localeString('general.scan')}
773770
icon={{
774771
name: 'crop-free',
775-
size: 25,
776-
color: 'white'
772+
size: 25
777773
}}
778774
onPress={() =>
779775
navigation.navigate('AddressQRCodeScanner')
@@ -788,8 +784,7 @@ export default class Send extends React.Component<SendProps, SendState> {
788784
title={localeString('general.enableNfc')}
789785
icon={{
790786
name: 'nfc',
791-
size: 25,
792-
color: 'white'
787+
size: 25
793788
}}
794789
onPress={() => this.enableNfc()}
795790
secondary

‎views/SendingLightning.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export default class SendingLightning extends React.Component<
139139
{!!success && !error && (
140140
<Text
141141
style={{
142-
color: 'white',
142+
color: themeColor('text'),
143143
fontFamily: 'Lato-Regular',
144144
padding: 20,
145145
fontSize: 22
@@ -158,10 +158,10 @@ export default class SendingLightning extends React.Component<
158158
preimage={payment_preimage}
159159
/>
160160
)}
161-
{!!payment_hash && (
161+
{!!payment_hash && !(!!error || !!payment_error) && (
162162
<Text
163163
style={{
164-
color: 'white',
164+
color: themeColor('text'),
165165
fontFamily: 'Lato-Regular',
166166
paddingTop: 20,
167167
paddingLeft: 50,
@@ -174,7 +174,7 @@ export default class SendingLightning extends React.Component<
174174
)}
175175

176176
<View style={styles.buttons}>
177-
{payment_hash && (
177+
{payment_hash && !(!!error || !!payment_error) && (
178178
<View style={{ margin: 10, width: '100%' }}>
179179
<CopyButton
180180
title={localeString(
@@ -193,16 +193,29 @@ export default class SendingLightning extends React.Component<
193193
icon={{
194194
name: 'list',
195195
size: 25,
196-
color: backgroundColor
196+
color:
197+
!!error || !!payment_error
198+
? 'darkred'
199+
: backgroundColor
197200
}}
198201
onPress={() =>
199202
navigation.navigate('Wallet', {
200203
refresh: true
201204
})
202205
}
203206
titleStyle={{
204-
color: backgroundColor
207+
color:
208+
!!error || !!payment_error
209+
? 'darkred'
210+
: backgroundColor
205211
}}
212+
buttonStyle={
213+
!!error || !!payment_error
214+
? {
215+
backgroundColor: 'white'
216+
}
217+
: null
218+
}
206219
containerStyle={{ width: '100%' }}
207220
/>
208221
)}

‎views/SendingOnChain.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import { Image, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
33
import { inject, observer } from 'mobx-react';
4-
import { Button } from 'react-native-elements';
54

5+
import Button from './../components/Button';
66
import CopyButton from './../components/CopyButton';
77
import LoadingIndicator from './../components/LoadingIndicator';
88

@@ -91,7 +91,7 @@ export default class SendingOnChain extends React.Component<
9191
<Text
9292
style={{
9393
...styles.text,
94-
color: themeColor('text'),
94+
color: 'white',
9595
padding: 20,
9696
fontSize: 30,
9797
alignSelf: 'center'
@@ -103,7 +103,8 @@ export default class SendingOnChain extends React.Component<
103103
{publishSuccess && (
104104
<Text
105105
style={{
106-
...styles.textWhite,
106+
...styles.text,
107+
color: themeColor('text'),
107108
padding: 20,
108109
fontSize: 22,
109110
alignSelf: 'center'
@@ -120,7 +121,8 @@ export default class SendingOnChain extends React.Component<
120121
>
121122
<Text
122123
style={{
123-
...styles.textWhite,
124+
...styles.text,
125+
color: themeColor('text'),
124126
padding: 20,
125127
fontSize: 15
126128
}}
@@ -144,6 +146,7 @@ export default class SendingOnChain extends React.Component<
144146
borderRadius: 30
145147
}}
146148
onPress={() => void 0}
149+
iconOnly
147150
/>
148151
)}
149152

@@ -171,15 +174,19 @@ export default class SendingOnChain extends React.Component<
171174
? themeColor('background')
172175
: 'darkred'
173176
}}
174-
buttonStyle={{
175-
backgroundColor: '#fff',
176-
borderRadius: 30
177-
}}
178177
titleStyle={{
179178
color: publishSuccess
180179
? themeColor('background')
181180
: 'darkred'
182181
}}
182+
buttonStyle={
183+
publishSuccess
184+
? null
185+
: {
186+
backgroundColor: 'white'
187+
}
188+
}
189+
containerStyle={{ width: '100%' }}
183190
onPress={() => navigation.navigate('Wallet')}
184191
/>
185192
)}
@@ -194,10 +201,6 @@ const styles = StyleSheet.create({
194201
text: {
195202
fontFamily: 'Lato-Regular'
196203
},
197-
textWhite: {
198-
fontFamily: 'Lato-Regular',
199-
color: 'white'
200-
},
201204
container: {
202205
flex: 1
203206
},

0 commit comments

Comments
 (0)