Update blocked screens UI

src/components/ageAssurance/AgeAssurancePrompt.tsx

@@ -55,9 +55,11 @@ function Inner({style}: ViewStyleProp & {}) {
             <AgeAssuranceBadge />
           </View>
           <Text style={[a.text_md, a.leading_snug]}>
-            You're currently accessing Bluesky from a location that by law
-            requires you to verify your age prior to accessing certain content
-            and features.
+            <Trans>
+              You're currently accessing Bluesky from a location that by law
+              requires you to verify your age prior to accessing certain content
+              and features.
+            </Trans>
           </Text>
 
           <Divider

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -1,19 +1,32 @@
 import {useMemo} from 'react'
 import {View} from 'react-native'
-import {Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
+import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {
+  AgeAssuranceInitDialog,
+  useDialogControl,
+} from '#/components/ageAssurance/AgeAssuranceInitDialog'
 import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
+import {Button, ButtonText} from '#/components/Button'
+import {Divider} from '#/components/Divider'
 import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
 
 export function AgeRestrictedScreen({
   children,
   fallback,
+  screenTitle,
 }: {
   children: React.ReactNode
   fallback?: React.ReactNode
+  screenTitle?: string
 }) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const control = useDialogControl()
   const screenFallback = useMemo(() => {
     return (
       fallback || (
@@ -38,16 +51,58 @@ export function AgeRestrictedScreen({
             <Layout.Header.BackButton />
             <Layout.Header.Content>
               <Layout.Header.TitleText>
-                <Trans>Not allowed</Trans>
+                {screenTitle ?? <Trans>Unavailable</Trans>}
               </Layout.Header.TitleText>
             </Layout.Header.Content>
             <Layout.Header.Slot />
           </Layout.Header.Outer>
           <Layout.Content>
-            <View style={[a.p_lg, a.gap_md]}>
-              <Text style={[a.text_lg, a.font_bold]}>
-                <Trans>We're sorry, but this content is unavailable.</Trans>
+            <View style={[a.p_lg]}>
+              <AgeAssuranceInitDialog control={control} />
+
+              <View style={[a.align_start, a.pb_md]}>
+                <AgeAssuranceBadge />
+              </View>
+
+              <Text style={[a.text_md, a.leading_snug, a.pb_sm]}>
+                <Trans>
+                  You're currently accessing Bluesky from a location that by law
+                  requires you to verify your age prior to accessing certain
+                  content and features.
+                </Trans>
               </Text>
+
+              <Text style={[a.text_md, a.leading_snug]}>
+                <Trans>
+                  👉 You must complete age verification to access this screen.
+                </Trans>
+              </Text>
+
+              <Divider style={[a.mt_lg]} />
+
+              <View
+                style={[
+                  a.flex_row,
+                  a.justify_between,
+                  a.align_center,
+                  a.pt_md,
+                  a.gap_lg,
+                ]}>
+                <Text style={[t.atoms.text_contrast_medium]}>
+                  <Trans>Verification takes only a few minutes</Trans>
+                </Text>
+
+                <Button
+                  label={_(msg`Verify now`)}
+                  size="small"
+                  variant="solid"
+                  color="primary"
+                  onPress={() => control.open()}>
+                  <ButtonText>
+                    <Trans>Verify now</Trans>
+                  </ButtonText>
+                </Button>
+              </View>
             </View>
           </Layout.Content>
         </Layout.Screen>

src/screens/Messages/ChatList.tsx

@@ -67,8 +67,9 @@ function keyExtractor(item: ListItem) {
 type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
 
 export function MessagesScreen(props: Props) {
+  const {_} = useLingui()
   return (
-    <AgeRestrictedScreen>
+    <AgeRestrictedScreen screenTitle={_(msg`Chats`)}>
       <MessagesScreenInner {...props} />
     </AgeRestrictedScreen>
   )

src/screens/Messages/Conversation.tsx

@@ -49,8 +49,9 @@ type Props = NativeStackScreenProps<
 >
 
 export function MessagesConversationScreen(props: Props) {
+  const {_} = useLingui()
   return (
-    <AgeRestrictedScreen>
+    <AgeRestrictedScreen screenTitle={_(msg`Conversation`)}>
       <MessagesConversationScreenInner {...props} />
     </AgeRestrictedScreen>
   )

src/screens/Messages/Inbox.tsx

@@ -48,8 +48,9 @@ import {RequestListItem} from './components/RequestListItem'
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesInbox'>
 
 export function MessagesInboxScreen(props: Props) {
+  const {_} = useLingui()
   return (
-    <AgeRestrictedScreen>
+    <AgeRestrictedScreen screenTitle={_(msg`Chat requests`)}>
       <MessagesInboxScreenInner {...props} />
     </AgeRestrictedScreen>
   )

src/screens/Messages/Settings.tsx

@@ -24,8 +24,9 @@ type AllowIncoming = 'all' | 'none' | 'following'
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesSettings'>
 
 export function MessagesSettingsScreen(props: Props) {
+  const {_} = useLingui()
   return (
-    <AgeRestrictedScreen>
+    <AgeRestrictedScreen screenTitle={_(msg`Chat Settings`)}>
       <MessagesSettingsScreenInner {...props} />
     </AgeRestrictedScreen>
   )