Floating balance icon (#22)

* use coins icon for floating balance

package-lock.json

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

package.json

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

src/component/floatingWalletBalance/view.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
-import { formatCredits } from 'lbry-redux';
+import { formatBigNumberCredits } from 'lbry-redux';
 import Address from 'component/address';
 import Button from 'component/button';
 import Colors from 'styles/colors';
@@ -23,7 +23,7 @@ class FloatingWalletBalance extends React.PureComponent<Props> {
             style={floatingButtonStyle.pendingContainer}
             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>
           </TouchableOpacity>
         )}
@@ -31,9 +31,10 @@ class FloatingWalletBalance extends React.PureComponent<Props> {
           style={floatingButtonStyle.container}
           onPress={() => navigation && navigation.navigate({ routeName: 'WalletStack' })}
         >
+          <Icon name="coins" size={12} style={floatingButtonStyle.balanceIcon} />
           {isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />}
           {(!isNaN(balance) || balance === 0) && (
-            <Text style={floatingButtonStyle.text}>{formatCredits(parseFloat(balance), 2) + ' LBC'}</Text>
+            <Text style={floatingButtonStyle.text}>{formatBigNumberCredits(parseFloat(balance), 0)}</Text>
           )}
         </TouchableOpacity>
       </View>

src/styles/floatingButton.js

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