diff --git a/src/screens/Signup/StepInfo.tsx b/src/screens/Signup/StepInfo.tsx index 30a31884..784d9e01 100644 --- a/src/screens/Signup/StepInfo.tsx +++ b/src/screens/Signup/StepInfo.tsx @@ -2,19 +2,20 @@ import React from 'react' import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' + +import {logger} from '#/logger' +import {Policies} from 'view/com/auth/create/Policies' +import {ScreenTransition} from '#/screens/Login/ScreenTransition' +import {is13, is18, useSignupContext} from '#/screens/Signup/state' import {atoms as a} from '#/alf' +import * as DateField from '#/components/forms/DateField' +import {FormError} from '#/components/forms/FormError' +import {HostingProvider} from '#/components/forms/HostingProvider' import * as TextField from '#/components/forms/TextField' import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket' -import {is13, is18, useSignupContext} from '#/screens/Signup/state' -import * as DateField from '#/components/forms/DateField' -import {logger} from '#/logger' import {Loader} from '#/components/Loader' -import {Policies} from 'view/com/auth/create/Policies' -import {HostingProvider} from '#/components/forms/HostingProvider' -import {FormError} from '#/components/forms/FormError' -import {ScreenTransition} from '#/screens/Login/ScreenTransition' function sanitizeDate(date: Date): Date { if (!date || date.toString() === 'Invalid Date') { @@ -32,7 +33,7 @@ export function StepInfo() { return ( <ScreenTransition> - <View style={[a.gap_lg]}> + <View style={[a.gap_md]}> <FormError error={state.error} /> <View> <TextField.Label> diff --git a/src/view/com/auth/create/Policies.tsx b/src/view/com/auth/create/Policies.tsx index f69b4bdb..8a656203 100644 --- a/src/view/com/auth/create/Policies.tsx +++ b/src/view/com/auth/create/Policies.tsx @@ -1,50 +1,39 @@ import React from 'react' -import {Linking, StyleSheet, View} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' +import {View} from 'react-native' import {ComAtprotoServerDescribeServer} from '@atproto/api' -import {TextLink} from '../../util/Link' -import {Text} from '../../util/text/Text' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema +import {atoms as a, useTheme} from '#/alf' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {InlineLink} from '#/components/Link' +import {Text} from '#/components/Typography' export const Policies = ({ serviceDescription, needsGuardian, under13, }: { - serviceDescription: ServiceDescription + serviceDescription: ComAtprotoServerDescribeServer.OutputSchema needsGuardian: boolean under13: boolean }) => { - const pal = usePalette('default') + const t = useTheme() const {_} = useLingui() + if (!serviceDescription) { return <View /> } + const tos = validWebLink(serviceDescription.links?.termsOfService) const pp = validWebLink(serviceDescription.links?.privacyPolicy) + if (!tos && !pp) { return ( - <View style={[styles.policies, {flexDirection: 'row'}]}> - <View - style={[ - styles.errorIcon, - {borderColor: pal.colors.text, marginTop: 1}, - ]}> - <FontAwesomeIcon - icon="exclamation" - style={pal.textLight as FontAwesomeIconStyle} - size={10} - /> - </View> - <Text style={[pal.textLight, s.pl5, s.flex1]}> + <View style={[a.flex_row, a.align_center, a.gap_xs]}> + <CircleInfo size="md" fill={t.atoms.text_contrast_low.color} /> + + <Text style={[t.atoms.text_contrast_medium]}> <Trans> This service has not provided terms of service or a privacy policy. </Trans> @@ -52,50 +41,45 @@ export const Policies = ({ </View> ) } + const els = [] if (tos) { els.push( - <TextLink - key="tos" - href={tos} - text={_(msg`Terms of Service`)} - style={[pal.link, s.underline]} - onPress={() => Linking.openURL(tos)} - />, + <InlineLink key="tos" to={tos}> + {_(msg`Terms of Service`)} + </InlineLink>, ) } if (pp) { els.push( - <TextLink - key="pp" - href={pp} - text={_(msg`Privacy Policy`)} - style={[pal.link, s.underline]} - onPress={() => Linking.openURL(pp)} - />, + <InlineLink key="pp" to={pp}> + {_(msg`Privacy Policy`)} + </InlineLink>, ) } if (els.length === 2) { els.splice( 1, 0, - <Text key="and" style={pal.textLight}> + <Text key="and" style={[t.atoms.text_contrast_medium]}> {' '} and{' '} </Text>, ) } + return ( - <View style={styles.policies}> - <Text style={pal.textLight}> + <View style={[a.gap_sm]}> + <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}> <Trans>By creating an account you agree to the {els}.</Trans> </Text> + {under13 ? ( - <Text style={[pal.textLight, s.bold]}> + <Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}> You must be 13 years of age or older to sign up. </Text> ) : needsGuardian ? ( - <Text style={[pal.textLight, s.bold]}> + <Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}> <Trans> If you are not yet an adult according to the laws of your country, your parent or legal guardian must read these Terms on your behalf. @@ -111,19 +95,3 @@ function validWebLink(url?: string): string | undefined { ? url : undefined } - -const styles = StyleSheet.create({ - policies: { - flexDirection: 'column', - gap: 8, - }, - errorIcon: { - borderWidth: 1, - borderColor: colors.white, - borderRadius: 30, - width: 16, - height: 16, - alignItems: 'center', - justifyContent: 'center', - }, -})