added pin screen style

src/Main.tsx

@@ -282,7 +282,7 @@ const Main = () => {
       {step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard}></DiscoveryScreen>}
       {step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
       {step == Step.Loading && <MnemonicScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} onPressFunc={loadMnemonic} onCancelFunc={cancel}></MnemonicScreen>}
-      {step == Step.Authentication && <Dialpad pinRetryCounter={pinDisplayCounter()} prompt={"Choose PIN"} onCancelFunc={cancel} onNextFunc={authenticate}></Dialpad>}
+      {step == Step.Authentication && <Dialpad pinRetryCounter={pinDisplayCounter()} prompt={"Enter PIN"} onCancelFunc={cancel} onNextFunc={authenticate}></Dialpad>}
       {step == Step.Home && <HomeScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} walletKey={walletKey.current} onPressFunc={login} onCancelFunc={cancel}></HomeScreen>}
       {step == Step.FactoryReset && <FactoryResetScreen pinRetryCounter={pinDisplayCounter()} onPressFunc={connectCard} onCancelFunc={cancel}></FactoryResetScreen>}
       <NFCModal isVisible={isModalVisible} onChangeFunc={stopNFC}></NFCModal>

src/NFCModal.tsx

@@ -21,7 +21,9 @@ const NFCModal: FC<NFCModalProps> = props => {
           <Icon name="smartphone" size={40} style={Styles.modalIcon}/>
           </View>
           <Text style={Styles.modalPrompt}>Tap your Keycard</Text>
-          <Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
+          <View style={Styles.navContainer}>
+            <Button label="Cancel" disabled={false} onChangeFunc={() => onChangeFunc()}></Button>
+          </View>
         </View>
     </Modal>
   )};

src/Styles.tsx

@@ -95,6 +95,12 @@ const Styles = StyleSheet.create({
       },
       modalIcon: {
         color: '#F29AE9'
+      },
+      navContainer: {
+        flexDirection: 'row',
+        width: '95%',
+        marginLeft: '2.5%',
+        marginRight: '2.55%'
       }
 });
 

src/components/Button.tsx

@@ -1,42 +1,77 @@
 import {FC } from "react";
-import { DimensionValue, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import Icon from 'react-native-vector-icons/Feather';
 
 type ButtonProps = {
-  label: string;
+  label?: string;
   disabled: boolean;
+  type?: string;
   onChangeFunc: () => void;
 };
 
 const  Button: FC<ButtonProps> = props => {
-  const {label, disabled, onChangeFunc} = props;
+  const {label, disabled, type = "primary", onChangeFunc} = props;
+
+  const textContainer = () => {
+    if(type == 'cancel') {
+      return style.cancelBtnContainer;
+    } else {
+      return style.primarytBtnContainer;
+    }
+  }
 
   return (
-    <View style={buttonStyle.textBtnContainer}>
+    <View style={textContainer()}>
-      <TouchableOpacity key={label} disabled={disabled} style={buttonStyle.button} onPress={onChangeFunc}>
+      <TouchableOpacity key={label} disabled={disabled} style={style.button} onPress={onChangeFunc}>
-        <Text style={buttonStyle.title}>{label}</Text>
+        {type == "cancel" && <Icon name="chevron-left" size={16} style={style.cancelIcon}/>}
+        {type == "primary" && <Text style={style.primaryText}>{label}</Text>}
+        {type == "secondary" && <Text style={style.secondaryText}>{label}</Text>}
       </TouchableOpacity>
     </View>
   )};
 
-const buttonStyle = StyleSheet.create({
+const style = StyleSheet.create({
-    textBtnContainer: {
+    primarytBtnContainer: {
       flexDirection: 'row',
       textAlign: 'center',
       justifyContent: 'center',
       backgroundColor: 'white',
-      width: '90%',
       marginLeft: '5%',
       marginRight: '5%',
+      height: 62,
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 'auto'
+    },
+    cancelBtnContainer: {
+      textAlign: 'center',
+      justifyContent: 'center',
       paddingTop: 15,
-      paddingBottom: 15
+      paddingBottom: 15,
+      borderWidth: 1,
+      borderColor: 'white',
+      width: 62,
+      height: 62,
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 62
     },
     button: {
+      justifyContent: 'center'
     },
-    title: {
+    primaryText: {
       color: "black",
       fontFamily: 'Inter',
+      fontSize: 14,
+    },
+    secondaryText: {
+      color: 'white',
+      fontFamily: 'Inter',
       fontSize: 14
     },
+    cancelIcon: {
+      textAlign: 'center'
+    }
   });
 
 export default Button;

src/components/Dialpad.tsx

@@ -3,6 +3,7 @@ import React, {FC,  useState } from "react";
 import DialpadKeypad from "./DialpadKeypad";
 import Button from "./Button";
 import DialpadPin from "./DialpadPin";
+import Styles from "../Styles";
 
  const { width } = Dimensions.get("window");
 
@@ -21,8 +22,7 @@ const Dialpad: FC<DialpadProps> = props => {
   const [code, setCode] = useState([]);
   const [wrongRepeat, setWrongRepeat] = useState(false);
   const pinLength = 6;
-  const pinContainerSize = width / 2;
+  const pinSize = 14;
-  const pinSize = (pinContainerSize / pinLength) + 8;
 
   const updateCode = (item: never) => {
     if (item === "X") {
@@ -41,59 +41,36 @@ const Dialpad: FC<DialpadProps> = props => {
   }
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={Styles.container}>
      <View style={styles.textContainer}>
-       <Text style={styles.pinText}>{prompt}</Text>
+       <Text style={Styles.heading}>{prompt}</Text>
-       <Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
        {pinRetryCounter >= 0 && <Text style={styles.pinAttempts}>Remaining attempts: {pinRetryCounter}</Text>}
        {wrongRepeat && <Text style={styles.pinAttempts}>The PINs do not match</Text>}
        <DialpadPin pinLength={pinLength} pinSize={pinSize} code={code} dialPadContent={dialPadContent} />
-       <DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
+       <DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode}/>
      </View>
-     <View style={styles.btnContainer}>
+     <View style={Styles.footer}>
-     <Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
+      <View style={Styles.navContainer}>
-     <Button label="Next" disabled={false} onChangeFunc={onNext}></Button>
+        <Button disabled={false} onChangeFunc={onCancelFunc} type="cancel"></Button>
+        <Button label="Continue" disabled={false} onChangeFunc={onNext}></Button>
+      </View>
      </View>
    </SafeAreaView>
   )};
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: "#222222",
-    height: '100%',
-  },
   textContainer: {
     justifyContent: "center",
     alignItems: "center",
-    marginTop: 30,
+    marginTop: 60,
     position: "relative",
   },
-  pinText: {
-    fontSize: 28,
-    fontFamily: 'Inter',
-    color: "white",
-  },
-  pinSubText: {
-    fontSize: 18,
-    fontFamily: 'Inter',
-    color: "white",
-    marginVertical: 30,
-  },
-
   pinAttempts: {
-    fontSize: 18,
+    fontSize: 14,
     fontFamily: 'Inter',
     color: "white",
-    marginTop: -10,
+    marginTop: 10
-    marginBottom: 30
-  },  
-  btnContainer: {
-    flexDirection: 'row',
-    width: '74%',
-    marginLeft: '13%',
-    marginRight: '13%',
-    alignItems: 'center'
   }
-  });
+});
 
 export default Dialpad;

src/components/DialpadKeypad.tsx

@@ -6,12 +6,11 @@ type DialpadKeypadProps = {
   dialPadContent: any[];
   dialPadSize: number;
   dialPadTextSize: number;
-  code: number[];
   updateCodeFunc: (item: never) => void;
 };
 
 const  DialpadKeypad: FC<DialpadKeypadProps> = props => {
-  const {dialPadContent, dialPadSize, dialPadTextSize, code, updateCodeFunc} = props;
+  const {dialPadContent, dialPadSize, dialPadTextSize, updateCodeFunc} = props;
 
   return (
     <FlatList data={dialPadContent} numColumns={3} keyExtractor={(_, index) => index.toString()} renderItem={({ item }) => {
@@ -19,7 +18,7 @@ const  DialpadKeypad: FC<DialpadKeypadProps> = props => {
          <TouchableOpacity  disabled={item === ""} onPress={() => updateCodeFunc(item as never)}>
            <View style={[
                {
-                 borderWidth: item === "" ? 0 : 1,
+                 borderWidth: item === "" || item === "X" ? 0 : 1,
                  width: dialPadSize,
                  height: dialPadSize,
                },
@@ -46,10 +45,9 @@ const styles = StyleSheet.create({
   dialPadContainer: {
     justifyContent: "center",
     alignItems: "center",
-    margin: 15,
+    margin: 8,
-    borderRadius: 45,
     padding: 0,
-    borderColor: "#199515",
+    borderColor: "white",
   },
   dialPadText: {
     color: "white",

src/components/DialpadPin.tsx

@@ -47,23 +47,24 @@ const  DialpadPin: FC<DialpadPinProps> = props => {
                height: pinSize,
                borderRadius: pinSize / 2,
                overflow: "hidden",
-               margin: 5,
+               margin: 8,
              }}
            >
              <View
                style={[
                  {
-                   borderColor: 'transparent',
+                   borderColor: 'white',
-                   borderRadius: pinSize / 2
+                   borderRadius: pinSize,
+                   borderWidth: 1
                  },
                  styles.pinContentContainer,
                ]}
              >
               {isSelected && (<Animated.View style={[
             {
-           width: pinSize * 0.28,
+           width: pinSize,
-           height: pinSize * 0.28,
+           height: pinSize,
-           borderRadius: pinSize * 0.35,
+           borderRadius: pinSize,
             },
             animatedStyle,
           styles.pinContent,
@@ -81,18 +82,18 @@ const  DialpadPin: FC<DialpadPinProps> = props => {
 const styles = StyleSheet.create({
   dialPadPinContainer: {
     flexDirection: "row",
-    marginBottom: 25,
+    marginTop: 30,
+    marginBottom: 50,
     alignItems: "flex-end",
   },
   pinContentContainer: {
     flex: 1,
-    backgroundColor: "#ffffff11",
     borderWidth: 1,
     justifyContent: "center",
     alignItems: "center",
   },
   pinContent: {
-    backgroundColor: "#199515",
+    backgroundColor: "white",
   }
   });
 

src/components/steps/InitializationScreen.tsx

@@ -35,8 +35,8 @@ const  InitializationScreen: FC<InitializationScreenProps> = props => {
 
   return (
     <View>
-      { step == PinSteps.InsertPin && <Dialpad pinRetryCounter={-1} prompt={"Choose PIN"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
+      { step == PinSteps.InsertPin && <Dialpad pinRetryCounter={-1} prompt={"Create PIN"} onCancelFunc={onCancelFunc} onNextFunc={insertPin}></Dialpad> }
-      { step == PinSteps.RepeatPin && <Dialpad pinRetryCounter={-1} prompt={"Repeat PIN"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
+      { step == PinSteps.RepeatPin && <Dialpad pinRetryCounter={-1} prompt={"Confirm PIN"} onCancelFunc={() => setStep(PinSteps.InsertPin)} onNextFunc={submitPin}></Dialpad> }
     </View>
   )};