Inset in blue well

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
 import {
   AgeAssuranceInitDialog,
@@ -58,6 +58,24 @@ export function AgeRestrictedScreen({
           </Layout.Header.Outer>
           <Layout.Content>
             <View style={[a.p_lg]}>
+              <View
+                style={[
+                  a.p_lg,
+                  a.rounded_md,
+                  a.border,
+                  {
+                    backgroundColor: select(t.name, {
+                      light: t.palette.primary_25,
+                      dark: t.palette.primary_25,
+                      dim: t.palette.primary_25,
+                    }),
+                    borderColor: select(t.name, {
+                      light: t.palette.primary_100,
+                      dark: t.palette.primary_100,
+                      dim: t.palette.primary_100,
+                    }),
+                  },
+                ]}>
                 <AgeAssuranceInitDialog control={control} />
 
                 <View style={[a.align_start, a.pb_md]}>
@@ -66,9 +84,9 @@ export function AgeRestrictedScreen({
 
                 <Text style={[a.text_md, a.leading_snug, a.pb_sm]}>
                   <Trans>
-                  You're using Bluesky from a location that legally requires you
-                  to verify your age prior to accessing certain features, like
-                  adult content and direct messaging.
+                    You're using Bluesky from a location that legally requires
+                    you to verify your age prior to accessing certain features,
+                    like adult content and direct messaging.
                   </Trans>
                 </Text>
 
@@ -88,7 +106,16 @@ export function AgeRestrictedScreen({
                     a.pt_md,
                     a.gap_lg,
                   ]}>
-                <Text style={[t.atoms.text_contrast_medium]}>
+                  <Text
+                    style={[
+                      {
+                        color: select(t.name, {
+                          light: t.palette.primary_800,
+                          dark: t.palette.primary_800,
+                          dim: t.palette.primary_800,
+                        }),
+                      },
+                    ]}>
                     <Trans>Age verification takes only a few minutes</Trans>
                   </Text>
 
@@ -104,6 +131,7 @@ export function AgeRestrictedScreen({
                   </Button>
                 </View>
               </View>
+            </View>
           </Layout.Content>
         </Layout.Screen>
       </IsAgeRestricted.True>