LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

Floating balance icon (#23)

Browse source 
* use coins icon for floating balance
This commit is contained in:
Akinwale Ariwodola 2019-08-15 19:15:41 +01:00 committed by GitHub
parent e443a0fdbb
commit 84fe0f69d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/component/floatingWalletBalance/view.js
View file

@ -23,7 +23,7 @@ class FloatingWalletBalance extends React.PureComponent<Props> {
style={floatingButtonStyle.pendingContainer} style={floatingButtonStyle.pendingContainer}
onPress={() => navigation && navigation.navigate({ routeName: 'Rewards' })} onPress={() => navigation && navigation.navigate({ routeName: 'Rewards' })}
> >
<Icon name="award" size={18} style={floatingButtonStyle.rewardIcon} /> <Icon name="award" size={14} style={floatingButtonStyle.rewardIcon} />
<Text style={floatingButtonStyle.text}>{unclaimedRewardAmount}</Text> <Text style={floatingButtonStyle.text}>{unclaimedRewardAmount}</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
@ -31,9 +31,10 @@ class FloatingWalletBalance extends React.PureComponent<Props> {
style={floatingButtonStyle.container} style={floatingButtonStyle.container}
onPress={() => navigation && navigation.navigate({ routeName: 'WalletStack' })} onPress={() => navigation && navigation.navigate({ routeName: 'WalletStack' })}
> >
<Icon name="coins" size={12} style={floatingButtonStyle.balanceIcon} />
{isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />} {isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />}
{(!isNaN(balance) || balance === 0) && ( {(!isNaN(balance) || balance === 0) && (
<Text style={floatingButtonStyle.text}>{formatCredits(parseFloat(balance), 2) + ' LBC'}</Text> <Text style={floatingButtonStyle.text}>{formatCredits(parseFloat(balance), 0)}</Text>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>

28
src/styles/floatingButton.js
View file

@ -13,13 +13,14 @@ const floatingButtonStyle = StyleSheet.create({
container: { container: {
zIndex: 100, zIndex: 100,
borderRadius: 24, borderRadius: 24,
padding: 14, padding: 10,
paddingLeft: 20, paddingLeft: 16,
paddingRight: 20, paddingRight: 16,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flexDirection: 'row',
backgroundColor: Colors.LbryGreen, backgroundColor: Colors.LbryGreen,
shadowColor: 'black', shadowColor: Colors.Black,
shadowOpacity: 0.1, shadowOpacity: 0.1,
shadowRadius: StyleSheet.hairlineWidth, shadowRadius: StyleSheet.hairlineWidth,
shadowOffset: { shadowOffset: {
@ -29,10 +30,10 @@ const floatingButtonStyle = StyleSheet.create({
}, },
pendingContainer: { pendingContainer: {
borderRadius: 24, borderRadius: 24,
padding: 14, padding: 10,
paddingLeft: 20, paddingLeft: 12,
paddingRight: 70, paddingRight: 58,
marginRight: -60, marginRight: -52,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: Colors.BrighterLbryGreen, backgroundColor: Colors.BrighterLbryGreen,
@ -41,8 +42,8 @@ const floatingButtonStyle = StyleSheet.create({
}, },
text: { text: {
color: Colors.White, color: Colors.White,
fontFamily: 'Inter-UI-Bold', fontFamily: 'Inter-UI-SemiBold',
fontSize: 18, fontSize: 16,
}, },
bottomRight: { bottomRight: {
right: 10, right: 10,
@ -50,7 +51,12 @@ const floatingButtonStyle = StyleSheet.create({
}, },
rewardIcon: { rewardIcon: {
color: Colors.White, color: Colors.White,
marginRight: 4, marginRight: 3,
},
balanceIcon: {
color: Colors.White,
marginRight: 3,
marginTop: -1,
}, },
}); });