Some mobile styles, add dev mode option

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -4,7 +4,7 @@ import {useLingui} from '@lingui/react'
 
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
 import {useAgeAssuranceContext} from '#/state/age-assurance'
-import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
 import {
   AgeAssuranceInitDialog,
@@ -32,6 +32,7 @@ function Inner({style}: ViewStyleProp & {}) {
   const timeAgo = lastInitiatedAt
     ? getTimeAgo(lastInitiatedAt, new Date())
     : null
+  const {gtPhone} = useBreakpoints()
 
   if (!isAgeRestricted) return null
 
@@ -72,7 +73,11 @@ function Inner({style}: ViewStyleProp & {}) {
           </View>
 
           <View
-            style={[a.flex_row, a.justify_between, a.align_start, a.gap_xl]}>
+            style={[
+              a.justify_between,
+              a.align_start,
+              gtPhone ? [a.flex_row, a.gap_xl] : [a.gap_md],
+            ]}>
             <Text style={[a.text_sm, a.leading_snug]}>
               <Trans>
                 You're using Bluesky from a location that legally requires you

src/components/ageAssurance/AgeAssurancePrompt.tsx

@@ -83,13 +83,17 @@ function Inner({style}: ViewStyleProp & {}) {
               a.gap_lg,
             ]}>
             <Text
-              style={{
-                color: select(t.name, {
-                  light: t.palette.primary_800,
-                  dark: t.palette.primary_800,
-                  dim: t.palette.primary_800,
-                }),
-              }}>
+              style={[
+                a.leading_snug,
+                a.flex_1,
+                {
+                  color: select(t.name, {
+                    light: t.palette.primary_800,
+                    dark: t.palette.primary_800,
+                    dim: t.palette.primary_800,
+                  }),
+                },
+              ]}>
               <Trans>Verification takes only a few minutes</Trans>
             </Text>
 

src/screens/Settings/AboutSettings.tsx

@@ -20,9 +20,11 @@ import {BroomSparkle_Stroke2_Corner2_Rounded as BroomSparkleIcon} from '#/compon
 import {CodeLines_Stroke2_Corner2_Rounded as CodeLinesIcon} from '#/components/icons/CodeLines'
 import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
 import {Newspaper_Stroke2_Corner2_Rounded as NewspaperIcon} from '#/components/icons/Newspaper'
+import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
 import {Wrench_Stroke2_Corner2_Rounded as WrenchIcon} from '#/components/icons/Wrench'
 import * as Layout from '#/components/Layout'
 import {Loader} from '#/components/Loader'
+import {device} from '#/storage'
 import {useDemoMode} from '#/storage/hooks/demo-mode'
 import {useDevMode} from '#/storage/hooks/dev-mode'
 import {OTAInfo} from './components/OTAInfo'
@@ -179,6 +181,20 @@ export function AboutSettingsScreen({}: Props) {
                   </SettingsList.ItemText>
                 </SettingsList.PressableItem>
               )}
+
+              <SettingsList.PressableItem
+                onPress={() => {
+                  device.set(['geolocation'], {
+                    countryCode: undefined,
+                    isAgeRestrictedGeo: true,
+                  })
+                }}
+                label="Simulate age restriction">
+                <SettingsList.ItemIcon icon={Shield} />
+                <SettingsList.ItemText>
+                  Simulate age restriction
+                </SettingsList.ItemText>
+              </SettingsList.PressableItem>
             </>
           )}
         </SettingsList.Container>

src/screens/Settings/AccountSettings.tsx

@@ -1,4 +1,3 @@
-import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {type NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -115,21 +114,6 @@ export function AccountSettingsScreen({}: Props) {
             </SettingsList.ItemText>
             <SettingsList.Chevron />
           </SettingsList.PressableItem>
-          <SettingsList.Item>
-            <SettingsList.ItemIcon icon={BirthdayCakeIcon} />
-            <SettingsList.ItemText>
-              <Trans>Birthday</Trans>
-            </SettingsList.ItemText>
-            <SettingsList.BadgeButton
-              label={_(msg`Edit`)}
-              onPress={() => birthdayControl.open()}
-            />
-          </SettingsList.Item>
-
-          <View style={[a.px_xl, a.pt_xs, a.pb_md]}>
-            <AgeAssuranceAccountCard />
-          </View>
-
           <SettingsList.Divider />
           <SettingsList.PressableItem
             label={_(msg`Password`)}
@@ -150,6 +134,17 @@ export function AccountSettingsScreen({}: Props) {
             </SettingsList.ItemText>
             <SettingsList.Chevron />
           </SettingsList.PressableItem>
+          <SettingsList.Item>
+            <SettingsList.ItemIcon icon={BirthdayCakeIcon} />
+            <SettingsList.ItemText>
+              <Trans>Birthday</Trans>
+            </SettingsList.ItemText>
+            <SettingsList.BadgeButton
+              label={_(msg`Edit`)}
+              onPress={() => birthdayControl.open()}
+            />
+          </SettingsList.Item>
+          <AgeAssuranceAccountCard style={[a.px_xl, a.pt_xs, a.pb_md]} />
           <SettingsList.Divider />
           <SettingsList.PressableItem
             label={_(msg`Export my data`)}