diff --git a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx b/src/components/ageAssurance/AgeAssuranceAccountCard.tsx index d17a6dfc82..80dc965120 100644 --- a/src/components/ageAssurance/AgeAssuranceAccountCard.tsx +++ b/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 & {}) { + style={[ + a.justify_between, + a.align_start, + gtPhone ? [a.flex_row, a.gap_xl] : [a.gap_md], + ]}> You're using Bluesky from a location that legally requires you diff --git a/src/components/ageAssurance/AgeAssurancePrompt.tsx b/src/components/ageAssurance/AgeAssurancePrompt.tsx index a9f27d48e0..87216fe270 100644 --- a/src/components/ageAssurance/AgeAssurancePrompt.tsx +++ b/src/components/ageAssurance/AgeAssurancePrompt.tsx @@ -83,13 +83,17 @@ function Inner({style}: ViewStyleProp & {}) { a.gap_lg, ]}> + 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, + }), + }, + ]}> Verification takes only a few minutes diff --git a/src/screens/Settings/AboutSettings.tsx b/src/screens/Settings/AboutSettings.tsx index 0ce127ff3f..c28daac193 100644 --- a/src/screens/Settings/AboutSettings.tsx +++ b/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) { )} + + { + device.set(['geolocation'], { + countryCode: undefined, + isAgeRestrictedGeo: true, + }) + }} + label="Simulate age restriction"> + + + Simulate age restriction + + )} diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index f95e619b1a..86652d2779 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/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) { - - - - Birthday - - birthdayControl.open()} - /> - - - - - - + + + + Birthday + + birthdayControl.open()} + /> + +