added authentication style

src/Main.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { SafeAreaView, StyleSheet, useColorScheme, DeviceEventEmitter } from 'react-native';
+import { SafeAreaView, StyleSheet, DeviceEventEmitter } from 'react-native';
-import { Colors } from 'react-native/Libraries/NewAppScreen';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import DiscoveryScreen from './components/steps/DiscoveryScreen';
@@ -20,7 +19,6 @@ enum Step {
 }
 
 const Main = () => {
-  const isDarkMode = useColorScheme() === 'dark';
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const [step, setStep] = useState(Step.Discovery);
 
@@ -134,10 +132,6 @@ const Main = () => {
     }
   });
 
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
   const connectCard = async () => {
     if (await Keycard.nfcIsSupported() && !await Keycard.nfcIsEnabled()) {
       await Keycard.openNfcSettings();
@@ -168,7 +162,7 @@ const Main = () => {
   }
 
   return (
-    <SafeAreaView style={[backgroundStyle, styles.container]}>
+    <SafeAreaView style={styles.container}>
       {step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard}></DiscoveryScreen>}
       {step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
       {step == Step.Loading && <MnemonicScreen onPressFunc={loadMnemonic} pinRequired={pinRef.current ? false : true} onCancelFunc={cancel}></MnemonicScreen>}
@@ -180,6 +174,7 @@ const Main = () => {
 
 const styles = StyleSheet.create({
   container: {
+    backgroundColor: '#222222',
     width: '100%',
     height: '100%'
   },

src/NFCModal.tsx

@@ -1,8 +1,7 @@
-import React, {FC, useEffect, useState } from "react";
+import React, {FC} from "react";
-import {Platform, StyleSheet, Text, useColorScheme, View } from "react-native";
+import {Platform, StyleSheet, Text, 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 = {
@@ -12,11 +11,10 @@ type NFCModalProps = {
 
 const NFCModal: FC<NFCModalProps> = props => {
   const {isVisible, onChangeFunc} = props;
-  const isDarkMode = useColorScheme() === 'dark';
 
   return (
     <Modal isVisible={(Platform.OS === 'android') && isVisible} style={modalStyle.modalContainer}>
-        <View style={[modalStyle.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
+        <View style={modalStyle.container}>
           <Text style={modalStyle.header}>Ready to Scan</Text>
           <View style={modalStyle.iconContainer}>
           <Icon name="smartphone" size={40} style={modalStyle.icon}/>
@@ -30,7 +28,7 @@ const NFCModal: FC<NFCModalProps> = props => {
 const modalStyle = StyleSheet.create({
   modalContainer: {
     justifyContent: 'flex-end',
-    margin: 0
+    margin: 0,
   },
   container: {
     height: 350,
@@ -39,6 +37,7 @@ const modalStyle = StyleSheet.create({
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
     borderColor: 'rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#222222'
   },
   header: {
     paddingTop: '7%',

src/components/Dialpad.tsx

@@ -1,11 +1,10 @@
-import { SafeAreaView, StyleSheet, Text, View, Dimensions, useColorScheme } from "react-native";
+import { SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
 import React, {FC,  useState } from "react";
 import DialpadKeypad from "./DialpadKeypad";
 import Button from "./Button";
 import DialpadPin from "./DialpadPin";
-import { Colors } from "react-native/Libraries/NewAppScreen";
 
- const { width, height } = Dimensions.get("window");
+ const { width } = Dimensions.get("window");
 
  type DialpadProps = {
   prompt: string;
@@ -14,7 +13,6 @@ import { Colors } from "react-native/Libraries/NewAppScreen";
 };
 
 const Dialpad: FC<DialpadProps> = props => {
-  const isDarkMode = useColorScheme() === 'dark';
   const {prompt, onNextFunc, onCancelFunc} = props;
   const dialPadContent = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, "X"];
   const dialPadSize = width * 0.2;
@@ -42,7 +40,7 @@ const Dialpad: FC<DialpadProps> = props => {
   }
 
   return (
-    <SafeAreaView style={[styles.container, {backgroundColor: isDarkMode ? Colors.darker : Colors.lighter}]}>
+    <SafeAreaView style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.pinText}>{prompt}</Text>
        <Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
@@ -58,8 +56,8 @@ const Dialpad: FC<DialpadProps> = props => {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#4A646C55",
+    backgroundColor: "#222222",
-    height: '100%'
+    height: '100%',
   },
   textContainer: {
     justifyContent: "center",

src/components/steps/AuthenticationScreen.tsx

@@ -14,7 +14,8 @@ const  AuthenticationScreen: FC<AuthenticationScreenProps> = props => {
     <View>
       <View>
         <Text style={styles.heading}> Success</Text>
-        <Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
+        <Text style={styles.prompt}>Work in progress...</Text>
+        <Button label="Home" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
         </View>
     </View>
   )};
@@ -22,7 +23,17 @@ const  AuthenticationScreen: FC<AuthenticationScreenProps> = props => {
 const styles = StyleSheet.create({
   heading: {
     textAlign: 'center',
-    fontSize: 16
+    fontSize: 30,
+    fontFamily: 'Inconsolata Medium',
+    color: '#199515',
+    marginTop: '50%'
+  },
+  prompt: {
+    textAlign: 'center',
+    fontSize: 18,
+    fontFamily: 'Inconsolata Regular',
+    color: 'white',
+    marginTop: '5%'
   }
 });
 

src/components/steps/MnemonicScreen.tsx

@@ -18,7 +18,6 @@ type MnemonicScreenProps = {
 const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
   const {pinRequired, onPressFunc, onCancelFunc} = props;
   const [mnemonic, setMnemonic] = useState('');
-  const [pin, setPin] = useState('');
   const [errMessage, setErrMessage] = useState('');
   const [step, setStep] = useState(LoadMnemonicSteps.InsertMnemonic);
 
@@ -52,12 +51,16 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
   return (
     <View>
       { step == LoadMnemonicSteps.InsertMnemonic &&
-      <View>
+      <View style={styles.container}>
         <Text style={styles.heading}> Load mnemonic</Text>
-        <TextInput editable multiline numberOfLines={6} onChangeText={(val) => setMnemonic(val)} value={mnemonic} style={{backgroundColor: '#4A646C'}} />
+        <View style={styles.mnemonicContainer}>
-        <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={() => updateMnemonic(mnemonic)} btnJustifyContent='center'></Button>
+          <TextInput editable multiline onChangeText={(val) => setMnemonic(val)} value={mnemonic} style={styles.mnemonic} placeholder="Type your passphrase"/>
-        <Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
+        </View>
-        <Text>{errMessage}</Text>
+        <View style={styles.btnContainer}>
+          <Button label="Cancel" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='flex-start'></Button>
+          <Button label="Next" disabled={false} btnColor="white" btnBorderColor="white" btnBorderWidth={1} btnWidth="50%" onChangeFunc={() => updateMnemonic(mnemonic)} btnJustifyContent='flex-end'></Button>
+        </View>
+        <Text style={styles.errorMessage}>{errMessage}</Text>
         </View>
       }
       { step == LoadMnemonicSteps.InsertPin && <Dialpad prompt={"Enter PIN"} onCancelFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}></Dialpad>}
@@ -65,9 +68,43 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
   )};
 
 const styles = StyleSheet.create({
+  container: {
+    width: '89%',
+    marginLeft: '5.5%',
+    marginRight: '5.5%'
+  },
   heading: {
     textAlign: 'center',
+    marginTop: 30,
+    fontSize: 28,
+    fontFamily: 'Inconsolata Medium',
+    color: "white",
+    paddingBottom: 20
+  },
+  mnemonicContainer: {
+    width: '100%',
+    height: 300,
+    borderColor: '#199515',
+    borderBottomWidth: 1,
+    borderTopWidth: 1,
+    borderStyle: 'dashed'
+  },
+  mnemonic: {
+    textAlignVertical: 'bottom',
+    fontFamily: 'Inconsolata Regular',
     fontSize: 16
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    width: '90%',
+    marginLeft: '5%',
+    marginRight: '5%',
+    alignItems: 'center'
+  },
+  errorMessage: {
+    fontFamily: 'Inconsolata Regular',
+    textAlign: 'center',
+    paddingTop: '10%'
   }
 });