+6 -4

src/components/Post/Embed/ExternalEmbed/Gif.tsx

··· 198 198 </Text> 199 199 </TouchableOpacity> 200 200 <Prompt.Outer control={control}> 201 201 - <Prompt.TitleText> 202 202 - <Trans>Alt Text</Trans> 203 203 - </Prompt.TitleText> 204 204 - <Prompt.DescriptionText selectable>{text}</Prompt.DescriptionText> 201 201 + <Prompt.Content> 202 202 + <Prompt.TitleText> 203 203 + <Trans>Alt Text</Trans> 204 204 + </Prompt.TitleText> 205 205 + <Prompt.DescriptionText selectable>{text}</Prompt.DescriptionText> 206 206 + </Prompt.Content> 205 207 <Prompt.Actions> 206 208 <Prompt.Action 207 209 onPress={() => control.close()}

+26 -40

src/components/Prompt.tsx

··· 1 1 - import React from 'react' 1 1 + import {createContext, useCallback, useContext, useId, useMemo} from 'react' 2 2 import {type GestureResponderEvent, View} from 'react-native' 3 3 import {msg} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 6 6 - import { 7 7 - atoms as a, 8 8 - useBreakpoints, 9 9 - useTheme, 10 10 - type ViewStyleProp, 11 11 - web, 12 12 - } from '#/alf' 6 6 + import {atoms as a, useTheme, type ViewStyleProp, web} from '#/alf' 13 7 import {Button, type ButtonColor, ButtonText} from '#/components/Button' 14 8 import * as Dialog from '#/components/Dialog' 15 9 import {Text} from '#/components/Typography' ··· 20 14 useDialogControl as usePromptControl, 21 15 } from '#/components/Dialog' 22 16 23 23 - const Context = React.createContext<{ 17 17 + const Context = createContext<{ 24 18 titleId: string 25 19 descriptionId: string 26 20 }>({ ··· 37 31 }: React.PropsWithChildren<{ 38 32 control: Dialog.DialogControlProps 39 33 testID?: string 34 34 + /** 35 35 + * Native-specific options for the prompt. Extends `BottomSheetViewProps` 36 36 + */ 40 37 nativeOptions?: Omit<BottomSheetViewProps, 'children'> 41 38 }>) { 42 42 - const titleId = React.useId() 43 43 - const descriptionId = React.useId() 39 39 + const titleId = useId() 40 40 + const descriptionId = useId() 44 41 45 45 - const context = React.useMemo( 42 42 + const context = useMemo( 46 43 () => ({titleId, descriptionId}), 47 44 [titleId, descriptionId], 48 45 ) ··· 58 55 <Dialog.ScrollableInner 59 56 accessibilityLabelledBy={titleId} 60 57 accessibilityDescribedBy={descriptionId} 61 61 - style={web({maxWidth: 400})}> 58 58 + style={web([{maxWidth: 320, borderRadius: 36}])}> 62 59 {children} 63 60 </Dialog.ScrollableInner> 64 61 </Context.Provider> ··· 70 67 children, 71 68 style, 72 69 }: React.PropsWithChildren<ViewStyleProp>) { 73 73 - const {titleId} = React.useContext(Context) 70 70 + const {titleId} = useContext(Context) 74 71 return ( 75 72 <Text 76 73 nativeID={titleId} ··· 78 75 a.flex_1, 79 76 a.text_2xl, 80 77 a.font_semi_bold, 81 81 - a.pb_sm, 78 78 + a.pb_xs, 82 79 a.leading_snug, 83 80 style, 84 81 ]}> ··· 92 89 selectable, 93 90 }: React.PropsWithChildren<{selectable?: boolean}>) { 94 91 const t = useTheme() 95 95 - const {descriptionId} = React.useContext(Context) 92 92 + const {descriptionId} = useContext(Context) 96 93 return ( 97 94 <Text 98 95 nativeID={descriptionId} ··· 103 100 ) 104 101 } 105 102 106 106 - export function Actions({children}: React.PropsWithChildren<{}>) { 107 107 - const {gtMobile} = useBreakpoints() 103 103 + export function Actions({children}: {children: React.ReactNode}) { 104 104 + return <View style={[a.w_full, a.gap_sm, a.justify_end]}>{children}</View> 105 105 + } 108 106 109 109 - return ( 110 110 - <View 111 111 - style={[ 112 112 - a.w_full, 113 113 - a.gap_md, 114 114 - a.justify_end, 115 115 - gtMobile 116 116 - ? [a.flex_row, a.flex_row_reverse, a.justify_start] 117 117 - : [a.flex_col], 118 118 - ]}> 119 119 - {children} 120 120 - </View> 121 121 - ) 107 107 + export function Content({children}: {children: React.ReactNode}) { 108 108 + return <View style={[a.pb_sm]}>{children}</View> 122 109 } 123 110 124 111 export function Cancel({ ··· 130 117 cta?: string 131 118 }) { 132 119 const {_} = useLingui() 133 133 - const {gtMobile} = useBreakpoints() 134 120 const {close} = Dialog.useDialogContext() 135 135 - const onPress = React.useCallback(() => { 121 121 + const onPress = useCallback(() => { 136 122 close() 137 123 }, [close]) 138 124 ··· 140 126 <Button 141 127 variant="solid" 142 128 color="secondary" 143 143 - size={gtMobile ? 'small' : 'large'} 129 129 + size={'large'} 144 130 label={cta || _(msg`Cancel`)} 145 131 onPress={onPress}> 146 132 <ButtonText>{cta || _(msg`Cancel`)}</ButtonText> ··· 170 156 testID?: string 171 157 }) { 172 158 const {_} = useLingui() 173 173 - const {gtMobile} = useBreakpoints() 174 159 const {close} = Dialog.useDialogContext() 175 175 - const handleOnPress = React.useCallback( 160 160 + const handleOnPress = useCallback( 176 161 (e: GestureResponderEvent) => { 177 162 close(() => onPress?.(e)) 178 163 }, ··· 181 166 182 167 return ( 183 168 <Button 184 184 - variant="solid" 185 169 color={color} 186 186 - size={gtMobile ? 'small' : 'large'} 170 170 + size={'large'} 187 171 label={cta || _(msg`Confirm`)} 188 172 onPress={handleOnPress} 189 173 testID={testID}> ··· 220 204 }>) { 221 205 return ( 222 206 <Outer control={control} testID="confirmModal"> 223 223 - <TitleText>{title}</TitleText> 224 224 - {description && <DescriptionText>{description}</DescriptionText>} 207 207 + <Content> 208 208 + <TitleText>{title}</TitleText> 209 209 + {description && <DescriptionText>{description}</DescriptionText>} 210 210 + </Content> 225 211 <Actions> 226 212 <Action 227 213 cta={confirmButtonCta}

+11 -9

src/components/StarterPack/ProfileStarterPacks.tsx

··· 331 331 </View> 332 332 333 333 <Prompt.Outer control={confirmDialogControl}> 334 334 - <Prompt.TitleText> 335 335 - <Trans>Generate a starter pack</Trans> 336 336 - </Prompt.TitleText> 337 337 - <Prompt.DescriptionText> 338 338 - <Trans> 339 339 - Bluesky will choose a set of recommended accounts from people in 340 340 - your network. 341 341 - </Trans> 342 342 - </Prompt.DescriptionText> 334 334 + <Prompt.Content> 335 335 + <Prompt.TitleText> 336 336 + <Trans>Generate a starter pack</Trans> 337 337 + </Prompt.TitleText> 338 338 + <Prompt.DescriptionText> 339 339 + <Trans> 340 340 + Bluesky will choose a set of recommended accounts from people in 341 341 + your network. 342 342 + </Trans> 343 343 + </Prompt.DescriptionText> 344 344 + </Prompt.Content> 343 345 <Prompt.Actions> 344 346 <Prompt.Action 345 347 color="primary"

+23 -27

src/screens/PostThread/components/ThreadItemAnchor.tsx

··· 677 677 </Button> 678 678 679 679 <Prompt.Outer control={control}> 680 680 - <Prompt.TitleText> 681 681 - <Trans>Archived post</Trans> 682 682 - </Prompt.TitleText> 683 683 - <Prompt.DescriptionText> 684 684 - <Trans> 685 685 - This post claims to have been created on{' '} 686 686 - <RNText style={[a.font_semi_bold]}> 687 687 - {niceDate(i18n, createdAt)} 688 688 - </RNText> 689 689 - , but was first seen by Bluesky on{' '} 690 690 - <RNText style={[a.font_semi_bold]}> 691 691 - {niceDate(i18n, indexedAt)} 692 692 - </RNText> 693 693 - . 694 694 - </Trans> 695 695 - </Prompt.DescriptionText> 696 696 - <Text 697 697 - style={[ 698 698 - a.text_md, 699 699 - a.leading_snug, 700 700 - t.atoms.text_contrast_high, 701 701 - a.pb_xl, 702 702 - ]}> 703 703 - <Trans> 704 704 - Bluesky cannot confirm the authenticity of the claimed date. 705 705 - </Trans> 706 706 - </Text> 680 680 + <Prompt.Content> 681 681 + <Prompt.TitleText> 682 682 + <Trans>Archived post</Trans> 683 683 + </Prompt.TitleText> 684 684 + <Prompt.DescriptionText> 685 685 + <Trans> 686 686 + This post claims to have been created on{' '} 687 687 + <RNText style={[a.font_semi_bold]}> 688 688 + {niceDate(i18n, createdAt)} 689 689 + </RNText> 690 690 + , but was first seen by Bluesky on{' '} 691 691 + <RNText style={[a.font_semi_bold]}> 692 692 + {niceDate(i18n, indexedAt)} 693 693 + </RNText> 694 694 + . 695 695 + </Trans> 696 696 + </Prompt.DescriptionText> 697 697 + <Prompt.DescriptionText> 698 698 + <Trans> 699 699 + Bluesky cannot confirm the authenticity of the claimed date. 700 700 + </Trans> 701 701 + </Prompt.DescriptionText> 702 702 + </Prompt.Content> 707 703 <Prompt.Actions> 708 704 <Prompt.Action cta={_(msg`Okay`)} onPress={() => {}} /> 709 705 </Prompt.Actions>

+9 -7

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

··· 212 212 const {_} = useLingui() 213 213 return ( 214 214 <Prompt.Outer control={control}> 215 215 - <Prompt.TitleText>Unable to subscribe</Prompt.TitleText> 216 216 - <Prompt.DescriptionText> 217 217 - <Trans> 218 218 - We're sorry! You can only subscribe to twenty labelers, and you've 219 219 - reached your limit of twenty. 220 220 - </Trans> 221 221 - </Prompt.DescriptionText> 215 215 + <Prompt.Content> 216 216 + <Prompt.TitleText>Unable to subscribe</Prompt.TitleText> 217 217 + <Prompt.DescriptionText> 218 218 + <Trans> 219 219 + We're sorry! You can only subscribe to twenty labelers, and you've 220 220 + reached your limit of twenty. 221 221 + </Trans> 222 222 + </Prompt.DescriptionText> 223 223 + </Prompt.Content> 222 224 <Prompt.Actions> 223 225 <Prompt.Action onPress={() => control.close()} cta={_(msg`OK`)} /> 224 226 </Prompt.Actions>

+2 -4

src/screens/Settings/components/DeactivateAccountDialog.tsx

··· 5 5 6 6 import {logger} from '#/logger' 7 7 import {useAgent, useSessionApi} from '#/state/session' 8 8 - import {atoms as a, useBreakpoints, useTheme} from '#/alf' 8 8 + import {atoms as a, useTheme} from '#/alf' 9 9 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 10 10 import {type DialogOuterProps} from '#/components/Dialog' 11 11 import {Divider} from '#/components/Divider' ··· 32 32 control: DialogOuterProps['control'] 33 33 }) { 34 34 const t = useTheme() 35 35 - const {gtMobile} = useBreakpoints() 36 35 const {_} = useLingui() 37 36 const agent = useAgent() 38 37 const {logoutCurrentAccount} = useSessionApi() ··· 100 99 </View> 101 100 <Prompt.Actions> 102 101 <Button 103 103 - variant="solid" 104 102 color="negative" 105 105 - size={gtMobile ? 'small' : 'large'} 103 103 + size="large" 106 104 label={_(msg`Yes, deactivate`)} 107 105 onPress={handleDeactivate}> 108 106 <ButtonText>{_(msg`Yes, deactivate`)}</ButtonText>

+11 -9

src/screens/StarterPack/StarterPackLandingScreen.tsx

··· 326 326 setIsVisible={setAppClipOverlayVisible} 327 327 /> 328 328 <Prompt.Outer control={androidDialogControl}> 329 329 - <Prompt.TitleText> 330 330 - <Trans>Download Bluesky</Trans> 331 331 - </Prompt.TitleText> 332 332 - <Prompt.DescriptionText> 333 333 - <Trans> 334 334 - The experience is better in the app. Download Bluesky now and we'll 335 335 - pick back up where you left off. 336 336 - </Trans> 337 337 - </Prompt.DescriptionText> 329 329 + <Prompt.Content> 330 330 + <Prompt.TitleText> 331 331 + <Trans>Download Bluesky</Trans> 332 332 + </Prompt.TitleText> 333 333 + <Prompt.DescriptionText> 334 334 + <Trans> 335 335 + The experience is better in the app. Download Bluesky now and 336 336 + we'll pick back up where you left off. 337 337 + </Trans> 338 338 + </Prompt.DescriptionText> 339 339 + </Prompt.Content> 338 340 <Prompt.Actions> 339 341 <Prompt.Action 340 342 cta="Download on Google Play"