acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Align copy, add notice to chat screens

Browse Source
This commit is contained in:
Eric Bailey
2025-07-14 14:01:38 -05:00
parent 711f020779
commit d79113e672
8 changed files with 58 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ageAssurance/AgeAssuranceAccountCard.tsx
+3 -7
View File
@@ -13,6 +13,7 @@ import {
useDialogControl,
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {createStaticClick, InlineLinkText} from '#/components/Link'
@@ -35,6 +36,7 @@ function Inner({style}: ViewStyleProp & {}) {
const appealControl = Dialog.useDialogControl()
const getTimeAgo = useGetTimeAgo()
const {gtPhone} = useBreakpoints()
const copy = useAgeAssuranceCopy()
const isBlocked = status === 'blocked'
const timeAgo = lastInitiatedAt
@@ -105,13 +107,7 @@ function Inner({style}: ViewStyleProp & {}) {
a.align_start,
gtPhone ? [a.flex_row, a.gap_xl] : [a.gap_md],
]}>
<Text style={[a.text_sm, a.leading_snug]}>
<Trans>
The laws in your location require that you verify your age
before accessing certain features on Bluesky like adult content
and direct messaging.
</Trans>
</Text>
<Text style={[a.text_sm, a.leading_snug]}>{copy.notice}</Text>
{!isBlocked && (
<Button
src/components/ageAssurance/AgeAssurancePrompt.tsx
+4 -8
View File
@@ -11,6 +11,7 @@ import {
useDialogControl,
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import type * as Dialog from '#/components/Dialog'
import {Divider} from '#/components/Divider'
@@ -40,6 +41,7 @@ function Inner({
}: ViewStyleProp & {control: Dialog.DialogControlProps}) {
const t = useTheme()
const {_} = useLingui()
const copy = useAgeAssuranceCopy()
const {mutate: save} = useSaveNux()
return (
@@ -66,13 +68,7 @@ function Inner({
<View style={[a.align_start, a.pb_md]}>
<AgeAssuranceBadge />
</View>
<Text style={[a.text_md, a.leading_snug]}>
<Trans>
The laws in your location require that you verify your age before
accessing certain features on Bluesky like adult content and
direct messaging.
</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>{copy.notice}</Text>
<Divider
style={[
@@ -107,7 +103,7 @@ function Inner({
}),
},
]}>
<Trans>Age verification takes only a few minutes</Trans>
{copy.noticeSub}
</Text>
<Button
src/components/ageAssurance/AgeRestrictedScreen.tsx
+10 -7
View File
@@ -4,12 +4,14 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {atoms as a, select, useTheme} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
import {
AgeAssuranceInitDialog,
useDialogControl,
} from '#/components/ageAssurance/AgeAssuranceInitDialog'
import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Button, ButtonText} from '#/components/Button'
import {Divider} from '#/components/Divider'
import * as Layout from '#/components/Layout'
@@ -19,13 +21,16 @@ export function AgeRestrictedScreen({
children,
fallback,
screenTitle,
infoText,
}: {
children: React.ReactNode
fallback?: React.ReactNode
screenTitle?: string
infoText?: string
}) {
const t = useTheme()
const {_} = useLingui()
const copy = useAgeAssuranceCopy()
const control = useDialogControl()
const screenFallback = useMemo(() => {
return (
@@ -57,7 +62,7 @@ export function AgeRestrictedScreen({
<Layout.Header.Slot />
</Layout.Header.Outer>
<Layout.Content>
<View style={[a.p_lg]}>
<View style={[a.p_lg, a.gap_lg]}>
<View
style={[
a.p_lg,
@@ -83,11 +88,7 @@ export function AgeRestrictedScreen({
</View>
<Text style={[a.text_md, a.leading_snug, a.pb_sm]}>
<Trans>
The laws in your location require that you verify your age
before accessing certain features on Bluesky like adult
content and direct messaging.
</Trans>
<Trans>{copy.notice}</Trans>
</Text>
<Text style={[a.text_md, a.leading_snug]}>
@@ -116,7 +117,7 @@ export function AgeRestrictedScreen({
}),
},
]}>
<Trans>Age verification takes only a few minutes</Trans>
{copy.noticeSub}
</Text>
<Button
@@ -131,6 +132,8 @@ export function AgeRestrictedScreen({
</Button>
</View>
</View>
{infoText && <Admonition type="info">{infoText}</Admonition>}
</View>
</Layout.Content>
</Layout.Screen>
src/components/ageAssurance/useAgeAssuranceCopy.ts
+19
View File
@@ -0,0 +1,19 @@
import {useMemo} from 'react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
export function useAgeAssuranceCopy() {
const {_} = useLingui()
return useMemo(() => {
return {
notice: _(
msg`The laws in your location require that you verify your age before accessing certain features on Bluesky like adult content and direct messaging.`,
),
noticeSub: _(msg`Age verification takes only a few minutes`),
chatsInfoText: _(
msg`Don't worry! All existing messages and settings are saved and will be available after you complete age verification.`,
),
}
}, [_])
}
src/screens/Messages/ChatList.tsx
+6 -1
View File
@@ -24,6 +24,7 @@ import {List, type ListRef} from '#/view/com/util/List'
import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {type DialogControlProps, useDialogControl} from '#/components/Dialog'
import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
@@ -68,8 +69,12 @@ type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
export function MessagesScreen(props: Props) {
const {_} = useLingui()
const aaCopy = useAgeAssuranceCopy()
return (
<AgeRestrictedScreen screenTitle={_(msg`Chats`)}>
<AgeRestrictedScreen
screenTitle={_(msg`Chats`)}
infoText={aaCopy.chatsInfoText}>
<MessagesScreenInner {...props} />
</AgeRestrictedScreen>
)
src/screens/Messages/Conversation.tsx
+5 -1
View File
@@ -33,6 +33,7 @@ import {useSetMinimalShellMode} from '#/state/shell'
import {MessagesList} from '#/screens/Messages/components/MessagesList'
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {
EmailDialogScreenID,
useEmailDialogControl,
@@ -50,8 +51,11 @@ type Props = NativeStackScreenProps<
export function MessagesConversationScreen(props: Props) {
const {_} = useLingui()
const aaCopy = useAgeAssuranceCopy()
return (
<AgeRestrictedScreen screenTitle={_(msg`Conversation`)}>
<AgeRestrictedScreen
screenTitle={_(msg`Conversation`)}
infoText={aaCopy.chatsInfoText}>
<MessagesConversationScreenInner {...props} />
</AgeRestrictedScreen>
)
src/screens/Messages/Inbox.tsx
+5 -1
View File
@@ -33,6 +33,7 @@ import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
@@ -49,8 +50,11 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesInbox'>
export function MessagesInboxScreen(props: Props) {
const {_} = useLingui()
const aaCopy = useAgeAssuranceCopy()
return (
<AgeRestrictedScreen screenTitle={_(msg`Chat requests`)}>
<AgeRestrictedScreen
screenTitle={_(msg`Chat requests`)}
infoText={aaCopy.chatsInfoText}>
<MessagesInboxScreenInner {...props} />
</AgeRestrictedScreen>
)
src/screens/Messages/Settings.tsx
+6 -1
View File
@@ -13,6 +13,7 @@ import * as Toast from '#/view/com/util/Toast'
import {atoms as a} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Divider} from '#/components/Divider'
import * as Toggle from '#/components/forms/Toggle'
import * as Layout from '#/components/Layout'
@@ -25,8 +26,12 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesSettings'>
export function MessagesSettingsScreen(props: Props) {
const {_} = useLingui()
const aaCopy = useAgeAssuranceCopy()
return (
<AgeRestrictedScreen screenTitle={_(msg`Chat Settings`)}>
<AgeRestrictedScreen
screenTitle={_(msg`Chat Settings`)}
infoText={aaCopy.chatsInfoText}>
<MessagesSettingsScreenInner {...props} />
</AgeRestrictedScreen>
)