Use isSelf to better align with codebase, adjust dialog styles
This commit is contained in:
@@ -3,7 +3,7 @@ import {msg} from '@lingui/core/macro'
|
|||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
import {Trans} from '@lingui/react/macro'
|
import {Trans} from '@lingui/react/macro'
|
||||||
|
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme, web} from '#/alf'
|
||||||
import {Button, ButtonText} from '#/components/Button'
|
import {Button, ButtonText} from '#/components/Button'
|
||||||
import * as Dialog from '#/components/Dialog'
|
import * as Dialog from '#/components/Dialog'
|
||||||
import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robot'
|
import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robot'
|
||||||
@@ -12,21 +12,23 @@ import {navigate} from '#/Navigation'
|
|||||||
|
|
||||||
export function BotAccountAlert({
|
export function BotAccountAlert({
|
||||||
control,
|
control,
|
||||||
isOwn,
|
isSelf,
|
||||||
}: {
|
}: {
|
||||||
control: Dialog.DialogControlProps
|
control: Dialog.DialogControlProps
|
||||||
isOwn: boolean
|
isSelf: boolean
|
||||||
}) {
|
}) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
|
|
||||||
const description = isOwn
|
const description = isSelf
|
||||||
? 'You have marked this account as automated. You can remove it at any time from your account settings.'
|
? 'You have marked this account as automated. You can remove it at any time from your account settings.'
|
||||||
: 'This account has been marked as automated by its owner'
|
: 'This account has been marked as automated by its owner'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
|
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
|
||||||
<Dialog.ScrollableInner label={_(msg`Automated account`)}>
|
<Dialog.ScrollableInner
|
||||||
|
label={_(msg`Automated account`)}
|
||||||
|
style={[web({maxWidth: 320})]}>
|
||||||
<View style={[a.align_center, a.pb_md, a.shadow_sm]}>
|
<View style={[a.align_center, a.pb_md, a.shadow_sm]}>
|
||||||
<RobotIcon width={48} fill={t.atoms.text_contrast_medium.color} />
|
<RobotIcon width={48} fill={t.atoms.text_contrast_medium.color} />
|
||||||
</View>
|
</View>
|
||||||
@@ -35,9 +37,8 @@ export function BotAccountAlert({
|
|||||||
a.leading_snug,
|
a.leading_snug,
|
||||||
a.text_center,
|
a.text_center,
|
||||||
a.pb_xl,
|
a.pb_xl,
|
||||||
|
a.text_md,
|
||||||
t.atoms.text_contrast_high,
|
t.atoms.text_contrast_high,
|
||||||
...(isOwn ? [a.text_md] : [a.text_lg]),
|
|
||||||
...(!isOwn ? [a.font_semi_bold] : []),
|
|
||||||
]}>
|
]}>
|
||||||
<Trans>{description}</Trans>
|
<Trans>{description}</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
@@ -51,7 +52,7 @@ export function BotAccountAlert({
|
|||||||
<Trans>Okay</Trans>
|
<Trans>Okay</Trans>
|
||||||
</ButtonText>
|
</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
{isOwn ? (
|
{isSelf ? (
|
||||||
<Button
|
<Button
|
||||||
label={_(msg`Open settings`)}
|
label={_(msg`Open settings`)}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
|
|||||||
@@ -36,11 +36,11 @@ export function BotBadge({
|
|||||||
export function BotBadgeButton({
|
export function BotBadgeButton({
|
||||||
profile,
|
profile,
|
||||||
size,
|
size,
|
||||||
isMe,
|
isSelf = false,
|
||||||
}: {
|
}: {
|
||||||
profile: {did: string; labels?: ComAtprotoLabelDefs.Label[]}
|
profile: {did: string; labels?: ComAtprotoLabelDefs.Label[]}
|
||||||
size: 'lg' | 'md' | 'sm'
|
size: 'lg' | 'md' | 'sm'
|
||||||
isMe?: boolean
|
isSelf?: boolean
|
||||||
}) {
|
}) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
const ax = useAnalytics()
|
const ax = useAnalytics()
|
||||||
@@ -88,7 +88,7 @@ export function BotBadgeButton({
|
|||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
<BotAccountAlert control={control} isOwn={isMe} />
|
<BotAccountAlert control={control} isSelf={isSelf} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export function VerificationCheckButton({
|
|||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Badge({
|
function Badge({
|
||||||
profile,
|
profile,
|
||||||
verificationState: state,
|
verificationState: state,
|
||||||
size,
|
size,
|
||||||
|
|||||||
@@ -147,7 +147,7 @@ let ProfileHeaderStandard = ({
|
|||||||
<VerificationCheckButton profile={profile} size="lg" />
|
<VerificationCheckButton profile={profile} size="lg" />
|
||||||
</View>
|
</View>
|
||||||
<View style={[a.pl_xs, {marginTop: platform({ios: 2})}]}>
|
<View style={[a.pl_xs, {marginTop: platform({ios: 2})}]}>
|
||||||
<BotBadgeButton profile={profile} size="lg" isMe={isMe} />
|
<BotBadgeButton profile={profile} size="lg" isSelf={isMe} />
|
||||||
</View>
|
</View>
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -381,7 +381,7 @@ function ProfilePreview({
|
|||||||
marginTop: platform({web: 8, ios: 8, android: 10}),
|
marginTop: platform({web: 8, ios: 8, android: 10}),
|
||||||
},
|
},
|
||||||
]}>
|
]}>
|
||||||
<BotBadgeButton profile={shadow} size="lg" isMe />
|
<BotBadgeButton profile={shadow} size="lg" isSelf />
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
|
<Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
|
||||||
|
|||||||
Reference in New Issue
Block a user