3 files changed, 51 insertions, 15 deletions
diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx
index bf07c6ac..67fd0f62 100644
--- a/src/components/onboarding/ArrowButton.tsx
+++ b/src/components/onboarding/ArrowButton.tsx
@@ -1,23 +1,51 @@
 import React from 'react';
-import {Image, TouchableOpacity, TouchableOpacityProps} from 'react-native';
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+import {normalize} from '../../utils';
 
 interface ArrowButtonProps extends TouchableOpacityProps {
   direction: 'forward' | 'backward';
   disabled?: boolean;
+  onboarding?: boolean;
 }
-const ArrowButton: React.FC<ArrowButtonProps> = (props: ArrowButtonProps) => {
-  const arrow =
-    props.direction === 'forward'
-      ? props.disabled
-        ? require('../../assets/images/arrow-forward-disabled.png')
-        : require('../../assets/images/arrow-forward-enabled.png')
-      : require('../../assets/images/arrow-backward.png');
+const ArrowButton: React.FC<ArrowButtonProps> = (props) => {
+  const {direction, disabled, onboarding} = props;
+  let uri;
+
+  if (direction === 'forward') {
+    if (disabled) {
+      uri = require('../../assets/images/arrow-forward-disabled.png');
+    } else {
+      uri = require('../../assets/images/arrow-forward-enabled.png');
+    }
+  } else {
+    if (onboarding) {
+      uri = require('../../assets/images/onboarding-backarrow.png');
+    } else {
+      uri = require('../../assets/images/arrow-backward.png');
+    }
+  }
 
   return (
-    <TouchableOpacity {...props}>
-      <Image source={arrow} />
+    <TouchableOpacity style={[styles.defautSize, props.style]} {...props}>
+      <Image style={styles.image} source={uri} />
     </TouchableOpacity>
   );
 };
 
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  defautSize: {
+    width: normalize(29),
+    height: normalize(25),
+  },
+});
+
 export default ArrowButton;
diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx
index 405564ab..297392e5 100644
--- a/src/components/onboarding/TaggInput.tsx
+++ b/src/components/onboarding/TaggInput.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TextInputProps,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {TAGG_LIGHT_PURPLE} from '../../constants';
 
@@ -7,6 +14,7 @@ interface TaggInputProps extends TextInputProps {
   valid?: boolean;
   invalidWarning?: string;
   attemptedSubmit?: boolean;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
 }
 /**
  * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
@@ -15,7 +23,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
   return (
     <View style={styles.container}>
       <TextInput
-        style={styles.input}
+        style={[styles.input, props.externalStyles?.inputWarning]}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}
@@ -25,7 +33,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
         <Animatable.Text
           animation="shake"
           duration={500}
-          style={styles.warning}>
+          style={[styles.warning, props.externalStyles?.warning]}>
           {props.invalidWarning}
         </Animatable.Text>
       )}
diff --git a/src/components/onboarding/TermsConditions.tsx b/src/components/onboarding/TermsConditions.tsx
index 08cd8228..9bd0ee3b 100644
--- a/src/components/onboarding/TermsConditions.tsx
+++ b/src/components/onboarding/TermsConditions.tsx
@@ -49,11 +49,11 @@ const TermsConditions: React.FC<TermsConditionsProps> = (props) => {
       <View style={styles.body}>
         <RadioCheckbox checked={accepted} onPress={toggleAccepted} />
         <View style={styles.bodyPrompt}>
-          <Text style={styles.bodyPromptText}>I accept the </Text>
+          <Text style={styles.bodyPromptText}>Accept </Text>
           <TouchableOpacity onPress={() => setModalVisible(true)}>
             <Text
               style={[styles.bodyPromptText, styles.bodyPromptTextUnderline]}>
-              EULA & Terms of Service
+              Terms and Conditions
             </Text>
           </TouchableOpacity>
         </View>