Merge branch 'main' of https://github.com/bluesky-social/social-app

+44 -24

src/components/Admonition.tsx

··· 3 3 4 4 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 5 5 import {Button as BaseButton, type ButtonProps} from '#/components/Button' 6 - import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' 7 - import {Eye_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/Eye' 8 - import {Leaf_Stroke2_Corner0_Rounded as TipIcon} from '#/components/icons/Leaf' 6 + import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo' 7 + import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX' 9 8 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' 10 9 import {Text as BaseText, type TextProps} from '#/components/Typography' 11 10 12 11 export const colors = { 13 - warning: { 14 - light: '#DFBC00', 15 - dark: '#BFAF1F', 16 - }, 12 + warning: '#FFC404', 17 13 } 18 14 19 15 type Context = { ··· 29 25 const t = useTheme() 30 26 const {type} = useContext(Context) 31 27 const Icon = { 32 - info: InfoIcon, 33 - tip: TipIcon, 28 + info: CircleInfoIcon, 29 + tip: CircleInfoIcon, 34 30 warning: WarningIcon, 35 - error: ErrorIcon, 31 + error: CircleXIcon, 36 32 }[type] 37 33 const fill = { 38 34 info: t.atoms.text_contrast_medium.color, 39 35 tip: t.palette.primary_500, 40 - warning: colors.warning.light, 36 + warning: colors.warning, 41 37 error: t.palette.negative_500, 42 38 }[type] 43 39 return <Icon fill={fill} size="md" /> 44 40 } 45 41 42 + export function Content({ 43 + children, 44 + style, 45 + ...rest 46 + }: { 47 + children: React.ReactNode 48 + style?: StyleProp<ViewStyle> 49 + }) { 50 + return ( 51 + <View 52 + style={[a.gap_sm, a.flex_1, {minHeight: 20}, a.justify_center, style]} 53 + {...rest}> 54 + {children} 55 + </View> 56 + ) 57 + } 58 + 46 59 export function Text({ 47 60 children, 48 61 style, 49 62 ...rest 50 63 }: Pick<TextProps, 'children' | 'style'>) { 51 64 return ( 52 - <BaseText 53 - {...rest} 54 - style={[a.flex_1, a.text_sm, a.leading_snug, a.pr_md, style]}> 65 + <BaseText {...rest} style={[a.text_sm, a.leading_snug, a.pr_md, style]}> 55 66 {children} 56 67 </BaseText> 57 68 ) ··· 60 71 export function Button({ 61 72 children, 62 73 ...props 63 - }: Omit<ButtonProps, 'size' | 'variant' | 'color'>) { 74 + }: Omit<ButtonProps, 'size' | 'variant'>) { 64 75 return ( 65 - <BaseButton size="tiny" variant="outline" color="secondary" {...props}> 76 + <BaseButton size="tiny" {...props}> 66 77 {children} 67 78 </BaseButton> 68 79 ) 69 80 } 70 81 71 - export function Row({children}: {children: React.ReactNode}) { 82 + export function Row({ 83 + children, 84 + style, 85 + }: { 86 + children: React.ReactNode 87 + style?: StyleProp<ViewStyle> 88 + }) { 72 89 return ( 73 - <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}> 90 + <View style={[a.flex_1, a.flex_row, a.align_start, a.gap_sm, style]}> 74 91 {children} 75 92 </View> 76 93 ) ··· 88 105 const t = useTheme() 89 106 const {gtMobile} = useBreakpoints() 90 107 const borderColor = { 91 - info: t.atoms.border_contrast_low.borderColor, 92 - tip: t.atoms.border_contrast_low.borderColor, 93 - warning: t.atoms.border_contrast_low.borderColor, 94 - error: t.atoms.border_contrast_low.borderColor, 108 + info: t.atoms.border_contrast_high.borderColor, 109 + tip: t.palette.primary_500, 110 + warning: colors.warning, 111 + error: t.palette.negative_500, 95 112 }[type] 96 113 return ( 97 114 <Context.Provider value={{type}}> 98 115 <View 99 116 style={[ 100 117 gtMobile ? a.p_md : a.p_sm, 118 + a.p_md, 101 119 a.rounded_sm, 102 120 a.border, 103 - t.atoms.bg_contrast_25, 121 + t.atoms.bg, 104 122 {borderColor}, 105 123 style, 106 124 ]}> ··· 123 141 <Outer type={type} style={style}> 124 142 <Row> 125 143 <Icon /> 126 - <Text>{children}</Text> 144 + <Content> 145 + <Text>{children}</Text> 146 + </Content> 127 147 </Row> 128 148 </Outer> 129 149 )

+9 -41

src/components/Button.tsx

··· 274 274 } else if (color === 'primary_subtle') { 275 275 if (!disabled) { 276 276 baseStyles.push({ 277 - backgroundColor: select(t.name, { 278 - light: t.palette.primary_50, 279 - dim: t.palette.primary_100, 280 - dark: t.palette.primary_100, 281 - }), 277 + backgroundColor: t.palette.primary_50, 282 278 }) 283 279 hoverStyles.push({ 284 - backgroundColor: select(t.name, { 285 - light: t.palette.primary_100, 286 - dim: t.palette.primary_200, 287 - dark: t.palette.primary_200, 288 - }), 280 + backgroundColor: t.palette.primary_100, 289 281 }) 290 282 } else { 291 283 baseStyles.push({ ··· 295 287 } else if (color === 'negative_subtle') { 296 288 if (!disabled) { 297 289 baseStyles.push({ 298 - backgroundColor: select(t.name, { 299 - light: t.palette.negative_50, 300 - dim: t.palette.negative_100, 301 - dark: t.palette.negative_100, 302 - }), 290 + backgroundColor: t.palette.negative_50, 303 291 }) 304 292 hoverStyles.push({ 305 - backgroundColor: select(t.name, { 306 - light: t.palette.negative_100, 307 - dim: t.palette.negative_200, 308 - dark: t.palette.negative_200, 309 - }), 293 + backgroundColor: t.palette.negative_100, 310 294 }) 311 295 } else { 312 296 baseStyles.push({ ··· 618 602 } else if (color === 'primary_subtle') { 619 603 if (!disabled) { 620 604 baseStyles.push({ 621 - color: select(t.name, { 622 - light: t.palette.primary_600, 623 - dim: t.palette.primary_800, 624 - dark: t.palette.primary_800, 625 - }), 605 + color: t.palette.primary_600, 626 606 }) 627 607 } else { 628 608 baseStyles.push({ 629 - color: select(t.name, { 630 - light: t.palette.primary_200, 631 - dim: t.palette.primary_200, 632 - dark: t.palette.primary_200, 633 - }), 609 + color: t.palette.primary_200, 634 610 }) 635 611 } 636 612 } else if (color === 'negative_subtle') { 637 613 if (!disabled) { 638 614 baseStyles.push({ 639 - color: select(t.name, { 640 - light: t.palette.negative_600, 641 - dim: t.palette.negative_800, 642 - dark: t.palette.negative_800, 643 - }), 615 + color: t.palette.negative_600, 644 616 }) 645 617 } else { 646 618 baseStyles.push({ 647 - color: select(t.name, { 648 - light: t.palette.negative_200, 649 - dim: t.palette.negative_200, 650 - dark: t.palette.negative_200, 651 - }), 619 + color: t.palette.negative_200, 652 620 }) 653 621 } 654 622 } ··· 755 723 } else if (size === 'small') { 756 724 baseStyles.push(a.text_sm, a.leading_snug, a.font_medium) 757 725 } else if (size === 'tiny') { 758 - baseStyles.push(a.text_xs, a.leading_snug, a.font_medium) 726 + baseStyles.push(a.text_xs, a.leading_snug, a.font_semi_bold) 759 727 } 760 728 761 729 return StyleSheet.flatten(baseStyles)

+3 -1

src/components/moderation/LabelsOnMeDialog.tsx

··· 32 32 33 33 export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) { 34 34 return ( 35 - <Dialog.Outer control={props.control}> 35 + <Dialog.Outer 36 + control={props.control} 37 + nativeOptions={{preventExpansion: true}}> 36 38 <Dialog.Handle /> 37 39 <LabelsOnMeDialogInner {...props} /> 38 40 </Dialog.Outer>

+3 -1

src/components/moderation/ModerationDetailsDialog.tsx

··· 24 24 25 25 export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) { 26 26 return ( 27 - <Dialog.Outer control={props.control}> 27 + <Dialog.Outer 28 + control={props.control} 29 + nativeOptions={{preventExpansion: true}}> 28 30 <Dialog.Handle /> 29 31 <ModerationDetailsDialogInner {...props} /> 30 32 </Dialog.Outer>

+2 -1

src/components/moderation/ProfileHeaderAlerts.tsx

··· 6 6 7 7 export function ProfileHeaderAlerts({ 8 8 moderation, 9 + style, 9 10 }: { 10 11 moderation: ModerationDecision 11 12 style?: StyleProp<ViewStyle> ··· 16 17 } 17 18 18 19 return ( 19 - <Pills.Row size="lg"> 20 + <Pills.Row size="lg" style={style}> 20 21 {modui.alerts.filter(unique).map(cause => ( 21 22 <Pills.Label 22 23 size="lg"

+6 -3

src/components/moderation/ReportDialog/index.tsx

··· 219 219 <Admonition.Outer type="error"> 220 220 <Admonition.Row> 221 221 <Admonition.Icon /> 222 - <Admonition.Text> 223 - <Trans>Something went wrong, please try again</Trans> 224 - </Admonition.Text> 222 + <Admonition.Content> 223 + <Admonition.Text> 224 + <Trans>Something went wrong, please try again</Trans> 225 + </Admonition.Text> 226 + </Admonition.Content> 225 227 <Admonition.Button 228 + color="negative_subtle" 226 229 label={_(msg`Retry loading report options`)} 227 230 onPress={() => refetchLabelers()}> 228 231 <ButtonText>

+2 -2

src/locale/locales/en/messages.po

··· 8298 8298 msgid "Something wrong? Let us know." 8299 8299 msgstr "" 8300 8300 8301 - #: src/App.native.tsx:125 8302 - #: src/App.web.tsx:101 8301 + #: src/App.native.tsx:128 8302 + #: src/App.web.tsx:100 8303 8303 msgid "Sorry! Your session expired. Please sign in again." 8304 8304 msgstr "" 8305 8305

+1 -1

src/screens/PostThread/components/ThreadItemAnchor.tsx

··· 638 638 639 639 if (!isBackdated) return null 640 640 641 - const orange = t.name === 'light' ? colors.warning.dark : colors.warning.light 641 + const orange = colors.warning 642 642 643 643 return ( 644 644 <>

+23 -11

src/screens/Profile/Header/Shell.tsx

··· 209 209 210 210 {children} 211 211 212 - {!isPlaceholderProfile && ( 213 - <View 214 - style={[a.px_lg, a.pt_xs, a.pb_sm]} 215 - pointerEvents={isIOS ? 'auto' : 'box-none'}> 216 - {isMe ? ( 217 - <LabelsOnMe type="account" labels={profile.labels} /> 218 - ) : ( 219 - <ProfileHeaderAlerts moderation={moderation} /> 220 - )} 221 - </View> 222 - )} 212 + {!isPlaceholderProfile && 213 + (isMe ? ( 214 + <LabelsOnMe 215 + type="account" 216 + labels={profile.labels} 217 + style={[ 218 + a.px_lg, 219 + a.pt_xs, 220 + a.pb_sm, 221 + isIOS ? a.pointer_events_auto : {pointerEvents: 'box-none'}, 222 + ]} 223 + /> 224 + ) : ( 225 + <ProfileHeaderAlerts 226 + moderation={moderation} 227 + style={[ 228 + a.px_lg, 229 + a.pt_xs, 230 + a.pb_sm, 231 + isIOS ? a.pointer_events_auto : {pointerEvents: 'box-none'}, 232 + ]} 233 + /> 234 + ))} 223 235 224 236 <GrowableAvatar style={[a.absolute, {top: 104, left: 10}]}> 225 237 <TouchableWithoutFeedback

+1 -1

src/screens/Settings/AppPasswords.tsx

··· 195 195 </View> 196 196 {appPassword.privileged && ( 197 197 <View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_md]}> 198 - <WarningIcon style={[{color: colors.warning[t.scheme]}]} /> 198 + <WarningIcon style={[{color: colors.warning}]} /> 199 199 <Text style={t.atoms.text_contrast_high}> 200 200 <Trans>Allows access to direct messages</Trans> 201 201 </Text>

+2 -2

src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx

··· 134 134 <Admonition.Outer type="tip"> 135 135 <Admonition.Row> 136 136 <Admonition.Icon /> 137 - <View style={[a.flex_1, a.gap_sm]}> 137 + <Admonition.Content> 138 138 <Admonition.Text> 139 139 <Trans> 140 140 Enable notifications for an account by visiting their ··· 166 166 . 167 167 </Trans> 168 168 </Admonition.Text> 169 - </View> 169 + </Admonition.Content> 170 170 </Admonition.Row> 171 171 </Admonition.Outer> 172 172 ) : (

+2 -3

src/screens/Settings/PrivacyAndSecuritySettings.tsx

··· 1 - import {View} from 'react-native' 2 1 import {type AppBskyNotificationDeclaration} from '@atproto/api' 3 2 import {msg, Trans} from '@lingui/macro' 4 3 import {useLingui} from '@lingui/react' ··· 112 111 <Admonition.Outer type="tip" style={[a.flex_1]}> 113 112 <Admonition.Row> 114 113 <Admonition.Icon /> 115 - <View style={[a.flex_1, a.gap_sm]}> 114 + <Admonition.Content> 116 115 <Admonition.Text> 117 116 <Trans> 118 117 Note: Bluesky is an open and public network. This setting ··· 131 130 <Trans>Learn more about what is public on Bluesky.</Trans> 132 131 </InlineLinkText> 133 132 </Admonition.Text> 134 - </View> 133 + </Admonition.Content> 135 134 </Admonition.Row> 136 135 </Admonition.Outer> 137 136 </SettingsList.Item>

+74 -3

src/view/screens/Storybook/Admonitions.tsx

··· 1 - import {View} from 'react-native' 1 + import {Text as RNText, View} from 'react-native' 2 + import {msg, Trans} from '@lingui/macro' 3 + import {useLingui} from '@lingui/react' 2 4 3 - import {atoms as a} from '#/alf' 4 - import {Admonition} from '#/components/Admonition' 5 + import {atoms as a, useTheme} from '#/alf' 6 + import { 7 + Admonition, 8 + Button as AdmonitionButton, 9 + Content as AdmonitionContent, 10 + Icon as AdmonitionIcon, 11 + Outer as AdmonitionOuter, 12 + Row as AdmonitionRow, 13 + Text as AdmonitionText, 14 + } from '#/components/Admonition' 15 + import {ButtonIcon, ButtonText} from '#/components/Button' 16 + import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise' 17 + import {BellRinging_Filled_Corner0_Rounded as BellRingingFilledIcon} from '#/components/icons/BellRinging' 5 18 import {InlineLinkText} from '#/components/Link' 6 19 import {H1} from '#/components/Typography' 7 20 8 21 export function Admonitions() { 22 + const {_} = useLingui() 23 + const t = useTheme() 24 + 9 25 return ( 10 26 <View style={[a.gap_md]}> 11 27 <H1>Admonitions</H1> ··· 30 46 <Admonition type="error"> 31 47 The quick brown fox jumps over the lazy dog. 32 48 </Admonition> 49 + 50 + <AdmonitionOuter type="error"> 51 + <AdmonitionRow> 52 + <AdmonitionIcon /> 53 + <AdmonitionContent> 54 + <AdmonitionText> 55 + <Trans>Something went wrong, please try again</Trans> 56 + </AdmonitionText> 57 + </AdmonitionContent> 58 + <AdmonitionButton 59 + color="negative_subtle" 60 + label={_(msg`Retry loading report options`)} 61 + onPress={() => {}}> 62 + <ButtonText> 63 + <Trans>Retry</Trans> 64 + </ButtonText> 65 + <ButtonIcon icon={Retry} /> 66 + </AdmonitionButton> 67 + </AdmonitionRow> 68 + </AdmonitionOuter> 69 + 70 + <AdmonitionOuter type="tip"> 71 + <AdmonitionRow> 72 + <AdmonitionIcon /> 73 + <AdmonitionContent> 74 + <AdmonitionText> 75 + <Trans> 76 + Enable notifications for an account by visiting their profile 77 + and pressing the{' '} 78 + <RNText style={[a.font_bold, t.atoms.text_contrast_high]}> 79 + bell icon 80 + </RNText>{' '} 81 + <BellRingingFilledIcon 82 + size="xs" 83 + style={t.atoms.text_contrast_high} 84 + /> 85 + . 86 + </Trans> 87 + </AdmonitionText> 88 + <AdmonitionText> 89 + <Trans> 90 + If you want to restrict who can receive notifications for your 91 + account's activity, you can change this in{' '} 92 + <InlineLinkText 93 + label={_(msg`Privacy and Security settings`)} 94 + to={{screen: 'ActivityPrivacySettings'}} 95 + style={[a.font_bold]}> 96 + Settings → Privacy and Security 97 + </InlineLinkText> 98 + . 99 + </Trans> 100 + </AdmonitionText> 101 + </AdmonitionContent> 102 + </AdmonitionRow> 103 + </AdmonitionOuter> 33 104 </View> 34 105 ) 35 106 }

Configure Feed

Configure Feed