StepInfo tweaks

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>

src/view/com/auth/create/Policies.tsx

@@ -1,50 +1,39 @@
 import React from 'react'
-import {Linking, StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 import {ComAtprotoServerDescribeServer} from '@atproto/api'
-import {TextLink} from '../../util/Link'
+import {msg, Trans} from '@lingui/macro'
-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 {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={[a.flex_row, a.align_center, a.gap_xs]}>
-        <View
+        <CircleInfo size="md" fill={t.atoms.text_contrast_low.color} />
-          style={[
+
-            styles.errorIcon,
+        <Text style={[t.atoms.text_contrast_medium]}>
-            {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]}>
           <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
+      <InlineLink key="tos" to={tos}>
-        key="tos"
+        {_(msg`Terms of Service`)}
-        href={tos}
+      </InlineLink>,
-        text={_(msg`Terms of Service`)}
-        style={[pal.link, s.underline]}
-        onPress={() => Linking.openURL(tos)}
-      />,
     )
   }
   if (pp) {
     els.push(
-      <TextLink
+      <InlineLink key="pp" to={pp}>
-        key="pp"
+        {_(msg`Privacy Policy`)}
-        href={pp}
+      </InlineLink>,
-        text={_(msg`Privacy Policy`)}
-        style={[pal.link, s.underline]}
-        onPress={() => Linking.openURL(pp)}
-      />,
     )
   }
   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}>
+    <View style={[a.gap_sm]}>
-      <Text style={pal.textLight}>
+      <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',
-  },
-})