added style

android/app/build.gradle

@@ -4,7 +4,7 @@ apply plugin: "com.facebook.react"
 apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
 
 project.ext.vectoricons = [
-    iconFontNames: [ 'Feather.ttf' ]
+    iconFontNames: [ 'Feather.ttf', 'Ionicons.ttf' ]
 ]
 
 /**

android/link-assets-manifest.json

@@ -0,0 +1,17 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "src/assets/fonts/Inconsolata Condensed Medium.ttf",
+      "sha1": "352263ace35c1aefd0cdc387e32189351cbbc112"
+    },
+    {
+      "path": "src/assets/fonts/Inconsolata Medium.ttf",
+      "sha1": "f72a59ce0107983a5fff171d27da81e8c128c8b2"
+    },
+    {
+      "path": "src/assets/fonts/Inconsolata Regular.ttf",
+      "sha1": "55181a8eafc09ca273f978d6e35d2ed46e47e570"
+    }
+  ]
+}

ios/keycardExit.xcodeproj/project.pbxproj

@@ -14,6 +14,9 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		7699B88040F8A987B510C191 /* libPods-keycardExit-keycardExitTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-keycardExit-keycardExitTests.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		B9C3311BDD14496BBB4E1CA8 /* Inconsolata Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C152A6052C4C4603A1D67162 /* Inconsolata Regular.ttf */; };
+		BB2182DA25304A4597E3C05B /* Inconsolata Condensed Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B73A75AC252241AD9A88316F /* Inconsolata Condensed Medium.ttf */; };
+		B411AC695C5A4B95AD8C63CF /* Inconsolata Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BFDDB358DEF6415188C7C046 /* Inconsolata Medium.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -45,6 +48,9 @@
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = keycardExit/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		89C6BE57DB24E9ADA2F236DE /* Pods-keycardExit-keycardExitTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-keycardExit-keycardExitTests.release.xcconfig"; path = "Target Support Files/Pods-keycardExit-keycardExitTests/Pods-keycardExit-keycardExitTests.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		C152A6052C4C4603A1D67162 /* Inconsolata Regular.ttf */ = {isa = PBXFileReference; name = "Inconsolata Regular.ttf"; path = "../src/assets/fonts/Inconsolata Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		B73A75AC252241AD9A88316F /* Inconsolata Condensed Medium.ttf */ = {isa = PBXFileReference; name = "Inconsolata Condensed Medium.ttf"; path = "../src/assets/fonts/Inconsolata Condensed Medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		BFDDB358DEF6415188C7C046 /* Inconsolata Medium.ttf */ = {isa = PBXFileReference; name = "Inconsolata Medium.ttf"; path = "../src/assets/fonts/Inconsolata Medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -124,6 +130,7 @@
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
 				BBD78D7AC51CEA395F1C20DB /* Pods */,
+				992F09F0E661463D9AC551F7 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -150,6 +157,17 @@
 			path = Pods;
 			sourceTree = "<group>";
 		};
+		992F09F0E661463D9AC551F7 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				C152A6052C4C4603A1D67162 /* Inconsolata Regular.ttf */,
+				B73A75AC252241AD9A88316F /* Inconsolata Condensed Medium.ttf */,
+				BFDDB358DEF6415188C7C046 /* Inconsolata Medium.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -245,6 +263,9 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				B9C3311BDD14496BBB4E1CA8 /* Inconsolata Regular.ttf in Resources */,
+				BB2182DA25304A4597E3C05B /* Inconsolata Condensed Medium.ttf in Resources */,
+				B411AC695C5A4B95AD8C63CF /* Inconsolata Medium.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/keycardExit/Info.plist

@@ -26,14 +26,13 @@
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	  <!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -48,5 +47,11 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Inconsolata Regular.ttf</string>
+		<string>Inconsolata Condensed Medium.ttf</string>
+		<string>Inconsolata Medium.ttf</string>
+	</array>
 </dict>
 </plist>

ios/link-assets-manifest.json

@@ -0,0 +1,17 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "src/assets/fonts/Inconsolata Condensed Medium.ttf",
+      "sha1": "352263ace35c1aefd0cdc387e32189351cbbc112"
+    },
+    {
+      "path": "src/assets/fonts/Inconsolata Medium.ttf",
+      "sha1": "f72a59ce0107983a5fff171d27da81e8c128c8b2"
+    },
+    {
+      "path": "src/assets/fonts/Inconsolata Regular.ttf",
+      "sha1": "55181a8eafc09ca273f978d6e35d2ed46e47e570"
+    }
+  ]
+}

react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  assets: ['./src/assets/fonts/'],
+};

src/Main.tsx

@@ -123,7 +123,7 @@ const Main = () => {
       didMount.current = true;
 
       const loadPairing = async () => {
-        await Keycard.setPairings(await getPairings());        
+        await Keycard.setPairings(await getPairings());
       };
 
       loadPairing().catch(console.log);
@@ -181,7 +181,7 @@ const Main = () => {
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    height: '100%',
+    height: '100%'
   },
 });
 

src/NFCModal.tsx

@@ -1,6 +1,9 @@
 import React, {FC, useEffect, useState } from "react";
-import {Platform, StyleSheet, Text, View } from "react-native";
+import {Platform, StyleSheet, Text, useColorScheme, View } from "react-native";
 import Modal from "react-native-modal/dist/modal";
+import Icon from 'react-native-vector-icons/Feather';
+import { Colors } from "react-native/Libraries/NewAppScreen";
+import Button from "./components/Button";
 
 type NFCModalProps = {
   isVisible: boolean;
@@ -9,12 +12,17 @@ type NFCModalProps = {
 
 const NFCModal: FC<NFCModalProps> = props => {
   const {isVisible, onChangeFunc} = props;
+  const isDarkMode = useColorScheme() === 'dark';
 
   return (
-    <Modal isVisible={(Platform.OS === 'android') && isVisible} onSwipeComplete={() => onChangeFunc(!isVisible)} swipeDirection={['up', 'left', 'right', 'down']} style={modalStyle.modalContainer}>
+    <Modal isVisible={(Platform.OS === 'android') && isVisible} style={modalStyle.modalContainer}>
-        <View style={modalStyle.container}>
+        <View style={[modalStyle.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
           <Text style={modalStyle.header}>Ready to Scan</Text>
+          <View style={modalStyle.iconContainer}>
+          <Icon name="smartphone" size={40} style={modalStyle.icon}/>
+          </View>
           <Text style={modalStyle.prompt}>Tap your Keycard</Text>
+          <Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnFontSize={13} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => onChangeFunc(!isVisible)} btnJustifyContent='center'></Button>
         </View>
     </Modal>
   )};
@@ -25,8 +33,7 @@ const modalStyle = StyleSheet.create({
     margin: 0
   },
   container: {
-    backgroundColor: '#4A646C',
+    height: 350,
-    height: 250,
     paddingBottom: 20,
     alignItems: 'center',
     borderTopLeftRadius: 10,
@@ -34,13 +41,27 @@ const modalStyle = StyleSheet.create({
     borderColor: 'rgba(0, 0, 0, 0.1)',
   },
   header: {
-    paddingTop: '5%',
+    paddingTop: '7%',
-    fontSize: 24
+    fontSize: 22,
+    fontFamily: 'Inconsolata Regular'
   },
   prompt: {
     paddingTop: '10%',
-    paddingBottom: '10%',
+    fontSize: 16,
-    fontSize: 15
+    fontFamily: 'Inconsolata Regular'
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: '#0e4e0b',
+    borderWidth: 3,
+    borderRadius: 80,
+    marginTop: '7%',
+  },
+  icon: {
+    color: '#0e4e0b'
   }
 });
 

src/components/Button.tsx

@@ -6,17 +6,20 @@ type ButtonProps = {
   disabled: boolean;
   btnColor: string;
   btnWidth: string;
+  btnFontSize?: number;
+  btnBorderColor?: string;
+  btnBorderWidth?: number;
   btnJustifyContent: string;
   onChangeFunc: () => void;
 };
 
 const  Button: FC<ButtonProps> = props => {
-  const {label, disabled, btnColor, btnWidth, btnJustifyContent, onChangeFunc} = props;
+  const {label, disabled, btnColor, btnWidth, btnJustifyContent, btnFontSize, btnBorderWidth, btnBorderColor, onChangeFunc} = props;
 
   return (
     <View style={[buttonStyle.textBtnContainer, {width: btnWidth as DimensionValue, justifyContent: btnJustifyContent as any}]}>
       <TouchableOpacity key={label} disabled={disabled} style={buttonStyle.button} onPress={onChangeFunc}>
-        <Text style={[buttonStyle.title, {color: btnColor}]}>{label}</Text>
+        <Text style={[buttonStyle.title, {color: btnColor, borderBottomColor: btnBorderColor || 'none', borderBottomWidth: btnBorderWidth || 0, fontSize: btnFontSize}]}>{label}</Text>
       </TouchableOpacity>
     </View>
   )};
@@ -32,9 +35,8 @@ const buttonStyle = StyleSheet.create({
     button: {
     },
     title: {
-      fontSize: 15,
       textTransform: 'uppercase',
-
+      fontFamily: 'Inconsolata Medium',
     },
   });
 

src/components/steps/DiscoveryScreen.tsx

@@ -10,10 +10,12 @@ const  DiscoveryScreen: FC<DiscoveryScreenProps> = props => {
   const {onPressFunc} = props;
 
   return (
-    <View>
+    <View style={styles.container}>
-      <View>
+      <View style={styles.headingContainer}>
         <Text style={styles.heading}> We are recruiting Operators to be the founders of a new, self-sovereign world in cyberspace</Text>
-        <Button label="Discover" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
+      </View>
+      <View style={styles.btnContainer}>
+      <Button label="Connect" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
       </View>
       <View>
     </View>
@@ -21,9 +23,23 @@ const  DiscoveryScreen: FC<DiscoveryScreenProps> = props => {
   )};
 
 const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%'
+  },
+  headingContainer: {
+    width: '100%',
+    paddingLeft: '5.5%',
+    paddingRight: '5.5%',
+    paddingTop: '50%',
+  },
   heading: {
     textAlign: 'center',
-    fontSize: 16
+    fontSize: 18,
+    fontFamily: 'Inconsolata Regular'
+  },
+  btnContainer: {
+    paddingTop: '7%'
   }
 });