diff --git a/native/account/registration/registration-terms.react.js b/native/account/registration/registration-terms.react.js --- a/native/account/registration/registration-terms.react.js +++ b/native/account/registration/registration-terms.react.js @@ -2,7 +2,7 @@ import invariant from 'invariant'; import * as React from 'react'; -import { Text } from 'react-native'; +import { Text, View, Image, Linking } from 'react-native'; import RegistrationButtonContainer from './registration-button-container.react.js'; import RegistrationButton from './registration-button.react.js'; @@ -15,6 +15,7 @@ AccountSelection, AvatarData, } from './registration-types.js'; +import commSwooshSource from '../../img/comm-swoosh.png'; import type { NavigationRoute } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; @@ -27,6 +28,14 @@ }, }; +const onTermsOfUsePressed = () => { + Linking.openURL('https://comm.app/terms'); +}; + +const onPrivacyPolicyPressed = () => { + Linking.openURL('https://comm.app/privacy'); +}; + type Props = { +navigation: RegistrationNavigationProp<'RegistrationTerms'>, +route: NavigationRoute<'RegistrationTerms'>, @@ -50,10 +59,31 @@ }, [register, userSelections]); const styles = useStyles(unboundStyles); + + /* eslint-disable react-native/no-raw-text */ + const termsNotice = ( + <Text style={styles.body}> + By registering, you are agreeing to our{' '} + <Text style={styles.hyperlinkText} onPress={onTermsOfUsePressed}> + Terms of Use + </Text> + {' and '} + <Text style={styles.hyperlinkText} onPress={onPrivacyPolicyPressed}> + Privacy Policy + </Text> + . + </Text> + ); + /* eslint-enable react-native/no-raw-text */ + return ( <RegistrationContainer> - <RegistrationContentContainer> + <RegistrationContentContainer style={styles.scrollViewContentContainer}> <Text style={styles.header}>Finish registration</Text> + {termsNotice} + <View style={styles.commSwooshContainer}> + <Image source={commSwooshSource} style={styles.commSwoosh} /> + </View> </RegistrationContentContainer> <RegistrationButtonContainer> <RegistrationButton @@ -67,11 +97,35 @@ } const unboundStyles = { + scrollViewContentContainer: { + flexGrow: 1, + }, header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, + body: { + fontFamily: 'Arial', + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + paddingBottom: 16, + }, + commSwooshContainer: { + flexGrow: 1, + flexShrink: 1, + alignItems: 'center', + justifyContent: 'center', + }, + commSwoosh: { + resizeMode: 'center', + width: '100%', + height: '100%', + }, + hyperlinkText: { + color: 'purpleLink', + }, }; export default RegistrationTerms; diff --git a/native/img/comm-swoosh.png b/native/img/comm-swoosh.png new file mode 100644 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@<O00001 literal 0 Hc$@<O00001