Floating balance icon #22

Merged
akinwale merged 4 commits from floating-balance-icon into master 2019-08-15 20:19:02 +02:00
4 changed files with 24 additions and 17 deletions
package-lock.jsonpackage.json
src
component/floatingWalletBalance
styles

4
package-lock.json generated
View file

@ -5562,8 +5562,8 @@
} }
}, },
"lbry-redux": { "lbry-redux": {
"version": "github:lbryio/lbry-redux#1a8ce5ee1397e101f2a015f1c3a9050c15ca6157", "version": "github:lbryio/lbry-redux#06b65b5bb474bd61aa4a6bcff2047a71575a17b0",
"from": "github:lbryio/lbry-redux#1a8ce5ee1397e101f2a015f1c3a9050c15ca6157", "from": "github:lbryio/lbry-redux#06b65b5bb474bd61aa4a6bcff2047a71575a17b0",
"requires": { "requires": {
"proxy-polyfill": "0.1.6", "proxy-polyfill": "0.1.6",
"reselect": "^3.0.0", "reselect": "^3.0.0",

View file

@ -12,7 +12,7 @@
"base-64": "^0.1.0", "base-64": "^0.1.0",
"@expo/vector-icons": "^8.1.0", "@expo/vector-icons": "^8.1.0",
"gfycat-style-urls": "^1.0.3", "gfycat-style-urls": "^1.0.3",
"lbry-redux": "lbryio/lbry-redux#e10986e8e54d25480ac2b5dd2a31fec8b254471a", "lbry-redux": "lbryio/lbry-redux#06b65b5bb474bd61aa4a6bcff2047a71575a17b0",
"lbryinc": "lbryio/lbryinc#430c280789a5031c2e49ca5bf8a7d90ccccc4cdb", "lbryinc": "lbryio/lbryinc#430c280789a5031c2e49ca5bf8a7d90ccccc4cdb",
"lodash": ">=4.17.11", "lodash": ">=4.17.11",
"merge": ">=1.2.1", "merge": ">=1.2.1",

View file

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native'; import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
import { formatCredits } from 'lbry-redux'; import { formatBigNumberCredits } from 'lbry-redux';
import Address from 'component/address'; import Address from 'component/address';
import Button from 'component/button'; import Button from 'component/button';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
@ -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}>{formatBigNumberCredits(parseFloat(balance), 0)}</Text>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>

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,
}, },
}); });