style info screen

src/Main.tsx

@@ -15,7 +15,7 @@ import Dialpad from './components/Dialpad';
 import { sha256 } from '@noble/hashes/sha256';
 import { bytesToHex } from '@noble/hashes/utils';
 import Styles from './Styles';
-import SuccessScreen from './components/steps/SuccessScreen';
+import InfoScreen from './components/steps/InfoScreen';
 
 enum Step {
   Discovery,
@@ -291,7 +291,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.LoadSuccess && <SuccessScreen title="Congratulations!" message="You've successfully protected your wallet. Remember to keep your seed phrase safe, it's your responsibility!" onPressFunc={toHome}></SuccessScreen>}
+      {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={cancel}></FactoryResetScreen>}

src/components/steps/InfoScreen.tsx

@@ -0,0 +1,55 @@
+import {FC } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "../Button";
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Styles from "../../Styles";
+
+type InfoScreenProps = {
+  icon: string;
+  title: string;
+  message: string;
+  onPressFunc: () => void;
+};
+
+const InfoScreen: FC<InfoScreenProps> = props => {
+  const {icon, title, message, onPressFunc} = props;
+
+  return (
+    <View style={Styles.container}>
+      <View style={styles.messageContainer}>
+        <View style={{flexDirection: "row", justifyContent: 'center', marginBottom: 15}}>
+          <View style={styles.iconBackground}></View>
+          <Icon name={icon} color="#320430" size={62} />
+        </View>
+        <View style={styles.infoTextContainer}>
+          <Text style={Styles.heading}>{title}</Text>
+          <Text style={[Styles.sublinkText, {textAlign: 'center', marginVertical: 15}]}>{message}</Text>
+        </View>
+      </View>
+      <View style={Styles.footer}>
+        <Button label="Continue" disabled={false} onChangeFunc={onPressFunc}></Button>
+      </View>
+        
+    </View>
+  )};
+
+const styles = StyleSheet.create({
+  messageContainer: {
+    marginTop: '60%'
+  },
+  infoTextContainer: {
+    width: '70%',
+    marginHorizontal: '15%',
+    alignContent: 'center'
+  },
+  iconBackground: {
+    backgroundColor: "#F29AE9", 
+    position: "absolute", 
+    width: 50, 
+    height: 50, 
+    borderRadius: 100, 
+    top: 6
+  }
+});
+
+export default InfoScreen;

src/components/steps/SuccessScreen.tsx

@@ -1,41 +0,0 @@
-import {FC } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import Button from "../Button";
-
-type SuccessScreenProps = {
-  title: string;
-  message: string;
-  onPressFunc: () => void;
-};
-
-const SuccessScreen: FC<SuccessScreenProps> = props => {
-  const {title, message, onPressFunc} = props;
-
-  return (
-    <View>
-      <View>
-        <Text style={styles.heading}>{title}</Text>
-        <Text style={styles.prompt}>{message}</Text>
-        <Button label="Next" disabled={false} onChangeFunc={onPressFunc}></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 SuccessScreen;