style for factory reset

src/Main.tsx

@@ -301,6 +301,14 @@ const Main = () => {
     setStep(Step.Home);
   }
 
+  const factoryResetMessage = () => {
+    if (pinCounter) {
+      return "This will remove all keys from this card and completely reset it. Do you want to proceed?";
+    } else {
+      return "This card is blocked. You can only continue using it by performing a factory reset. Factory reset will remove all keys and reset the card.";
+    }
+  }
+
   return (
     <ImageBackground source={require("./images/gradient.png")} resizeMode='stretch' style={Styles.mainContainer}>
       {step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard}></DiscoveryScreen>}
@@ -309,9 +317,9 @@ const Main = () => {
       {step == Step.LoadSuccess && <InfoScreen icon="check-circle" title="Congratulations!" message="You've successfully protected your wallet. Remember to keep your seed phrase safe, it's your responsibility!" onPressFunc={toHome}></InfoScreen>}
       {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} onFactoryResetFunc={startFactoryReset}></HomeScreen>}
-      {step == Step.FactoryReset && <FactoryResetScreen pinRetryCounter={pinDisplayCounter()} onPressFunc={connectCard} onCancelFunc={cancelFactoryReset}></FactoryResetScreen>}
+      {step == Step.FactoryReset && <InfoScreen icon="alert-circle" title="Factory Reset" message={factoryResetMessage()} onPressFunc={connectCard} onCancelFunc={cancelFactoryReset}></InfoScreen>}
       {step == Step.LoginSuccess && <InfoScreen icon="check-circle" title="Success!" message="Login successful. You can now proceed to the Operator Dashboard in your browser" onPressFunc={toHome}></InfoScreen>}
-      {step == Step.LoginError && <InfoScreen icon="alert-circle" title="Error" message={errorMessage} onPressFunc={toHome}></InfoScreen>}
+      {step == Step.LoginError && <InfoScreen icon="close-circle" title="Error" message={errorMessage} onPressFunc={toHome}></InfoScreen>}
       <NFCModal isVisible={isModalVisible} onChangeFunc={stopNFC}></NFCModal>
     </ImageBackground>
   );

src/components/steps/FactoryResetScreen.tsx

@@ -1,42 +0,0 @@
-import {FC } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import Button from "../Button";
-
-type FactoryResetScreenProps = {
-  pinRetryCounter: number;
-  onPressFunc: () => void;
-  onCancelFunc: () => void;
-};
-
-const  FactoryResetScreen: FC<FactoryResetScreenProps> = props => {
-  const {pinRetryCounter, onPressFunc, onCancelFunc} = props;
-
-  return (
-    <View>
-      <View>
-        <Text style={styles.heading}>Factory reset</Text>
-        <Text style={styles.prompt}>This will remove the keys from your card. Are you sure?</Text>
-        <Button label="Next" disabled={false} onChangeFunc={onPressFunc}></Button>
-        <Button label="Cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>
-        </View>
-    </View>
-  )};
-
-const styles = StyleSheet.create({
-  heading: {
-    textAlign: 'center',
-    fontSize: 30,
-    fontFamily: 'Inter',
-    color: '#199515',
-    marginTop: '50%'
-  },
-  prompt: {
-    textAlign: 'center',
-    fontSize: 18,
-    fontFamily: 'Inter',
-    color: 'white',
-    marginTop: '5%'
-  }
-});
-
-export default FactoryResetScreen;

src/components/steps/InfoScreen.tsx

@@ -9,10 +9,11 @@ type InfoScreenProps = {
   title: string;
   message: string;
   onPressFunc: () => void;
+  onCancelFunc?: () => void;
 };
 
 const InfoScreen: FC<InfoScreenProps> = props => {
-  const {icon, title, message, onPressFunc} = props;
+  const {icon, title, message, onPressFunc, onCancelFunc} = props;
 
   return (
     <View style={Styles.container}>
@@ -27,7 +28,10 @@ const InfoScreen: FC<InfoScreenProps> = props => {
         </View>
       </View>
       <View style={Styles.footer}>
-        <Button label="Continue" disabled={false} onChangeFunc={onPressFunc}></Button>
+        <View style={onCancelFunc ? Styles.navContainer : {}}>
+          {onCancelFunc && <Button type="cancel" disabled={false} onChangeFunc={onCancelFunc}></Button>}
+          <Button label="Continue" disabled={false} onChangeFunc={onPressFunc}></Button>
+        </View>
       </View>
         
     </View>