Bottom navbar + icons (#13)

* navbar with icons * fix statusbar color
MetaMask · Aug 2, 2018 · 0244c0e · 0244c0e
1 parent 82a4f7a
commit 0244c0e
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 26 deletions.
diff --git a/android/app/src/main/assets/metamask.ttf b/android/app/src/main/assets/metamask.ttf
diff --git a/app/components/App/index.js b/app/components/App/index.js
@@ -1,15 +1,40 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import { createBottomTabNavigator } from 'react-navigation';
 import BrowserScreen from '../BrowserScreen';
 import WalletScreen from '../WalletScreen';
+import { createIconSetFromFontello } from 'react-native-vector-icons';
+import fontelloConfig from '../../fonts/config.json';
+const Icon = createIconSetFromFontello(fontelloConfig);
 
+import { colors } from '../../styles/common';
 /**
  * Root application component responsible for configuring the tab navigator
  */
-export default createBottomTabNavigator({
-	Home: {
-		screen: BrowserScreen
+export default createBottomTabNavigator(
+	{
+		Home: {
+			screen: BrowserScreen,
+			navigationOptions: () => ({
+				title: 'ÐApps',
+				tabBarIcon: ico => <Icon name="dapp" size={18} color={ico.tintColor} /> // eslint-disable-line react/display-name
+			})
+		},
+		Wallet: {
+			screen: WalletScreen,
+			navigationOptions: () => ({
+				title: 'Wallet',
+				tabBarIcon: ico => <Icon name="wallet" size={20} color={ico.tintColor} /> // eslint-disable-line react/display-name
+			})
+		}
 	},
-	Wallet: {
-		screen: WalletScreen
+	{
+		tabBarOptions: {
+			activeTintColor: colors.primary,
+			inactiveTintColor: colors.inactive,
+			style: {
+				borderTopWidth: StyleSheet.hairlineWidth
+			}
+		}
 	}
-});
+);
diff --git a/app/components/Screen/index.js b/app/components/Screen/index.js
@@ -5,7 +5,7 @@ import { colors, baseStyles } from '../../styles/common';
 
 const styles = StyleSheet.create({
 	underlay: {
-		backgroundColor: colors.tar,
+		backgroundColor: colors.concrete,
 		left: 0,
 		position: 'absolute',
 		top: 0
@@ -29,7 +29,7 @@ export default class Screen extends Component {
 		return (
 			<View style={baseStyles.flexGrow}>
 				<View style={{ ...styles.underlay, ...{ width, height } }}>
-					<StatusBar backgroundColor={colors.tar} barStyle="light-content" />
+					<StatusBar backgroundColor={colors.tar} barStyle="dark-content" />
 				</View>
 				<SafeAreaView style={baseStyles.flexGrow}>{this.props.children}</SafeAreaView>
 			</View>

diff --git a/app/fonts/Metamask.ttf b/app/fonts/Metamask.ttf
diff --git a/app/fonts/config.json b/app/fonts/config.json
@@ -0,0 +1,36 @@
+{
+	"name": "metamask",
+	"css_prefix_text": "icon-",
+	"css_use_suffix": false,
+	"hinting": true,
+	"units_per_em": 1000,
+	"ascent": 850,
+	"glyphs": [
+		{
+			"uid": "c034e3a61e091876e98cfd466b2b4dd9",
+			"css": "dapp",
+			"code": 59392,
+			"src": "custom_icons",
+			"selected": true,
+			"svg": {
+				"path":
+					"M109.6 998.2L109.6 544 0 544 0 454.2 109.6 454.2 109.6 0 454.1 0C531.3 0 590.3 4.8 631.2 14.3 688.4 27.5 737.1 51.3 777.5 85.8 830.2 130.3 869.6 187.1 895.7 256.4 921.8 325.6 934.8 404.7 934.8 493.7 934.8 595.3 918.7 682.8 886.5 756.1 854.3 829.5 815.7 882.7 770.7 915.8 725.8 949 674.1 972.6 615.5 986.6 583.3 994.3 534.7 998.2 469.8 998.2L109.6 998.2ZM241.7 880.4L454.8 880.4C521.1 880.4 572.8 874.3 610.1 862 647.3 849.8 676.8 832.7 698.6 811 729.9 779.6 754.4 737.6 772.1 685 789.8 632.3 798.7 568.1 798.7 492.3 798.7 414.2 789.9 351.8 772.4 305 755 258.3 732.2 220.8 704 192.7 675.9 164.6 644.6 145 610.1 134.1 575.6 123.2 522.7 117.8 451.4 117.8L241.7 117.8 241.7 454.2 516.8 454.2 516.8 544 241.7 544 241.7 880.4Z",
+				"width": 937
+			},
+			"search": ["dapp"]
+		},
+		{
+			"uid": "85c265158680936150d2644ddf98a821",
+			"css": "wallet",
+			"code": 59393,
+			"src": "custom_icons",
+			"selected": true,
+			"svg": {
+				"path":
+					"M995 465.8H947V245.1C947 192.2 904 149.2 851 149.2H786.1L719.6 29.6C709.4 11.3 690.1 0 669.2 0 659.5 0 649.8 2.5 641.3 7.3L386 149.2H101C48.1 149.2 5 192.2 5 245.1V904C5 957 48.1 1000 101 1000H851C904 1000 947 957 947 904V710.5H995V465.8ZM851 187.6C880.6 187.6 904.7 210 908 238.7H835.9L807.4 187.6H851ZM659.9 40.8C668.9 35.8 681 39.3 686 48.2L792 238.7H304L659.9 40.8ZM908.6 904C908.6 935.8 882.8 961.6 851 961.6H101C69.2 961.6 43.4 935.8 43.4 904V245.1C43.4 213.4 69.2 187.6 101 187.6H317L225 238.7H113C102.4 238.7 93.8 247.3 93.8 257.9S102.4 277.1 113 277.1H156 857.2 908.6V465.9H768.3C703.1 465.9 650.1 518.9 650.1 584.1V592.3C650.1 657.5 703.1 710.6 768.3 710.6H908.6V904ZM956.6 672.1H947 768.3C724.2 672.1 688.4 636.3 688.4 592.3V584.1C688.4 540 724.2 504.2 768.3 504.2H947 956.6V672.1ZM827.1 589.8C827.1 613.2 808.1 632.1 784.7 632.1 761.3 632.1 742.3 613.2 742.3 589.8S761.3 547.4 784.7 547.4C808.1 547.4 827.1 566.4 827.1 589.8Z",
+				"width": 1000
+			},
+			"search": ["wallet"]
+		}
+	]
+}
diff --git a/app/styles/common.js b/app/styles/common.js
@@ -10,7 +10,9 @@ export const colors = {
 	asphalt: '#747d8c',
 	concrete: '#f1f2f6',
 	slate: '#dfe4ea',
-	tar: '#2f3542'
+	tar: '#2f3542',
+	primary: '#f76c20',
+	inactive: '#808080'
 };
 
 /**

diff --git a/ios/MetaMask.xcodeproj/project.pbxproj b/ios/MetaMask.xcodeproj/project.pbxproj
@@ -23,6 +23,7 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
+		15D158ED210BD912006982B5 /* Metamask.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 15D158EC210BD8C8006982B5 /* Metamask.ttf */; };
 		2348DAE74F344434A57B334F /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7FF1597C0ACA4902B86140B2 /* Zocial.ttf */; };
 		2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
@@ -411,6 +412,7 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = MetaMask/main.m; sourceTree = "<group>"; };
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
 		14E7DBD0B81B4F6087628BA0 /* libRNRandomBytes-tvOS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = "libRNRandomBytes-tvOS.a"; sourceTree = "<group>"; };
+		15D158EC210BD8C8006982B5 /* Metamask.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = Metamask.ttf; path = ../app/fonts/Metamask.ttf; sourceTree = "<group>"; };
 		1C516951C09F43CB97129B66 /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
 		2D02E47B1E0B4A5D006451C7 /* MetaMask-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "MetaMask-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D02E4901E0B4A5D006451C7 /* MetaMask-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "MetaMask-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -676,6 +678,7 @@
 		4A27949D046C4516B9653BBB /* Resources */ = {
 			isa = PBXGroup;
 			children = (
+				15D158EC210BD8C8006982B5 /* Metamask.ttf */,
 				A498EA4CD2F8488DB666B94C /* Entypo.ttf */,
 				BF485CDA047B4D52852B87F5 /* EvilIcons.ttf */,
 				E9629905BA1940ADA4189921 /* Feather.ttf */,
@@ -1315,6 +1318,7 @@
 				A0E2F0B8210276220084ABC0 /* entry.js in Resources */,
 				F0C672CC75F549ABBA1CF52A /* MaterialIcons.ttf in Resources */,
 				5992255DBD134582AE0C5AA5 /* Octicons.ttf in Resources */,
+				15D158ED210BD912006982B5 /* Metamask.ttf in Resources */,
 				F34655B90A524BB3B87EAB00 /* SimpleLineIcons.ttf in Resources */,
 				2348DAE74F344434A57B334F /* Zocial.ttf in Resources */,
 			);

diff --git a/ios/MetaMask/Info.plist b/ios/MetaMask/Info.plist
@@ -24,26 +24,10 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
 		<key>NSAllowsArbitraryLoads</key>
-    	<true/>
+		<true/>
 		<key>NSExceptionDomains</key>
 		<dict>
 			<key>localhost</key>
@@ -53,6 +37,8 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
 	<key>UIAppFonts</key>
 	<array>
 		<string>Entypo.ttf</string>
@@ -66,6 +52,21 @@
 		<string>Octicons.ttf</string>
 		<string>SimpleLineIcons.ttf</string>
 		<string>Zocial.ttf</string>
+		<string>Metamask.ttf</string>
+	</array>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
 	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
 </dict>
 </plist>
diff --git a/scripts/copy-android-assets.sh b/scripts/copy-android-assets.sh
@@ -0,0 +1,2 @@
+yes | cp -rf ./app/entry.js ./android/app/src/main/assets/entry.js
+yes | cp -rf ./app/fonts/metamask.ttf ./android/app/src/main/assets/metamask.ttf