From 72b7516d9bcd23b1587d4fdf732c25c1b63bd78e Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 27 Jan 2026 20:02:55 -0600
Subject: [PATCH] Prompts refresh (#9781)

* Round boi

* Wrap a few things in Prompt.Content

* Couple tweaks
---
 .../Post/Embed/ExternalEmbed/Gif.tsx          | 10 +--
 src/components/Prompt.tsx                     | 66 ++++++++-----------
 .../StarterPack/ProfileStarterPacks.tsx       | 20 +++---
 .../components/ThreadItemAnchor.tsx           | 50 +++++++-------
 .../Profile/Header/ProfileHeaderLabeler.tsx   | 16 +++--
 .../components/DeactivateAccountDialog.tsx    |  6 +-
 .../StarterPack/StarterPackLandingScreen.tsx  | 20 +++---
 7 files changed, 88 insertions(+), 100 deletions(-)

diff --git a/src/components/Post/Embed/ExternalEmbed/Gif.tsx b/src/components/Post/Embed/ExternalEmbed/Gif.tsx
index 28310dba86..cbfafcf3a2 100644
--- a/src/components/Post/Embed/ExternalEmbed/Gif.tsx
+++ b/src/components/Post/Embed/ExternalEmbed/Gif.tsx
@@ -198,10 +198,12 @@ function AltText({text}: {text: string}) {
         </Text>
       </TouchableOpacity>
       <Prompt.Outer control={control}>
-        <Prompt.TitleText>
-          <Trans>Alt Text</Trans>
-        </Prompt.TitleText>
-        <Prompt.DescriptionText selectable>{text}</Prompt.DescriptionText>
+        <Prompt.Content>
+          <Prompt.TitleText>
+            <Trans>Alt Text</Trans>
+          </Prompt.TitleText>
+          <Prompt.DescriptionText selectable>{text}</Prompt.DescriptionText>
+        </Prompt.Content>
         <Prompt.Actions>
           <Prompt.Action
             onPress={() => control.close()}
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index a7bd895219..cdafa85c7e 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -1,15 +1,9 @@
-import React from 'react'
+import {createContext, useCallback, useContext, useId, useMemo} from 'react'
 import {type GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {
-  atoms as a,
-  useBreakpoints,
-  useTheme,
-  type ViewStyleProp,
-  web,
-} from '#/alf'
+import {atoms as a, useTheme, type ViewStyleProp, web} from '#/alf'
 import {Button, type ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
@@ -20,7 +14,7 @@ export {
   useDialogControl as usePromptControl,
 } from '#/components/Dialog'
 
-const Context = React.createContext<{
+const Context = createContext<{
   titleId: string
   descriptionId: string
 }>({
@@ -37,12 +31,15 @@ export function Outer({
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
+  /**
+   * Native-specific options for the prompt. Extends `BottomSheetViewProps`
+   */
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
 }>) {
-  const titleId = React.useId()
-  const descriptionId = React.useId()
+  const titleId = useId()
+  const descriptionId = useId()
 
-  const context = React.useMemo(
+  const context = useMemo(
     () => ({titleId, descriptionId}),
     [titleId, descriptionId],
   )
@@ -58,7 +55,7 @@ export function Outer({
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
-          style={web({maxWidth: 400})}>
+          style={web([{maxWidth: 320, borderRadius: 36}])}>
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
@@ -70,7 +67,7 @@ export function TitleText({
   children,
   style,
 }: React.PropsWithChildren<ViewStyleProp>) {
-  const {titleId} = React.useContext(Context)
+  const {titleId} = useContext(Context)
   return (
     <Text
       nativeID={titleId}
@@ -78,7 +75,7 @@ export function TitleText({
         a.flex_1,
         a.text_2xl,
         a.font_semi_bold,
-        a.pb_sm,
+        a.pb_xs,
         a.leading_snug,
         style,
       ]}>
@@ -92,7 +89,7 @@ export function DescriptionText({
   selectable,
 }: React.PropsWithChildren<{selectable?: boolean}>) {
   const t = useTheme()
-  const {descriptionId} = React.useContext(Context)
+  const {descriptionId} = useContext(Context)
   return (
     <Text
       nativeID={descriptionId}
@@ -103,22 +100,12 @@ export function DescriptionText({
   )
 }
 
-export function Actions({children}: React.PropsWithChildren<{}>) {
-  const {gtMobile} = useBreakpoints()
+export function Actions({children}: {children: React.ReactNode}) {
+  return <View style={[a.w_full, a.gap_sm, a.justify_end]}>{children}</View>
+}
 
-  return (
-    <View
-      style={[
-        a.w_full,
-        a.gap_md,
-        a.justify_end,
-        gtMobile
-          ? [a.flex_row, a.flex_row_reverse, a.justify_start]
-          : [a.flex_col],
-      ]}>
-      {children}
-    </View>
-  )
+export function Content({children}: {children: React.ReactNode}) {
+  return <View style={[a.pb_sm]}>{children}</View>
 }
 
 export function Cancel({
@@ -130,9 +117,8 @@ export function Cancel({
   cta?: string
 }) {
   const {_} = useLingui()
-  const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     close()
   }, [close])
 
@@ -140,7 +126,7 @@ export function Cancel({
     <Button
       variant="solid"
       color="secondary"
-      size={gtMobile ? 'small' : 'large'}
+      size={'large'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
       <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
@@ -170,9 +156,8 @@ export function Action({
   testID?: string
 }) {
   const {_} = useLingui()
-  const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
-  const handleOnPress = React.useCallback(
+  const handleOnPress = useCallback(
     (e: GestureResponderEvent) => {
       close(() => onPress?.(e))
     },
@@ -181,9 +166,8 @@ export function Action({
 
   return (
     <Button
-      variant="solid"
       color={color}
-      size={gtMobile ? 'small' : 'large'}
+      size={'large'}
       label={cta || _(msg`Confirm`)}
       onPress={handleOnPress}
       testID={testID}>
@@ -220,8 +204,10 @@ export function Basic({
 }>) {
   return (
     <Outer control={control} testID="confirmModal">
-      <TitleText>{title}</TitleText>
-      {description && <DescriptionText>{description}</DescriptionText>}
+      <Content>
+        <TitleText>{title}</TitleText>
+        {description && <DescriptionText>{description}</DescriptionText>}
+      </Content>
       <Actions>
         <Action
           cta={confirmButtonCta}
diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx
index 4d80c58e93..981a850a97 100644
--- a/src/components/StarterPack/ProfileStarterPacks.tsx
+++ b/src/components/StarterPack/ProfileStarterPacks.tsx
@@ -331,15 +331,17 @@ function Empty() {
       </View>
 
       <Prompt.Outer control={confirmDialogControl}>
-        <Prompt.TitleText>
-          <Trans>Generate a starter pack</Trans>
-        </Prompt.TitleText>
-        <Prompt.DescriptionText>
-          <Trans>
-            Bluesky will choose a set of recommended accounts from people in
-            your network.
-          </Trans>
-        </Prompt.DescriptionText>
+        <Prompt.Content>
+          <Prompt.TitleText>
+            <Trans>Generate a starter pack</Trans>
+          </Prompt.TitleText>
+          <Prompt.DescriptionText>
+            <Trans>
+              Bluesky will choose a set of recommended accounts from people in
+              your network.
+            </Trans>
+          </Prompt.DescriptionText>
+        </Prompt.Content>
         <Prompt.Actions>
           <Prompt.Action
             color="primary"
diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx
index 5ef7c5954d..888c05271e 100644
--- a/src/screens/PostThread/components/ThreadItemAnchor.tsx
+++ b/src/screens/PostThread/components/ThreadItemAnchor.tsx
@@ -677,33 +677,29 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
       </Button>
 
       <Prompt.Outer control={control}>
-        <Prompt.TitleText>
-          <Trans>Archived post</Trans>
-        </Prompt.TitleText>
-        <Prompt.DescriptionText>
-          <Trans>
-            This post claims to have been created on{' '}
-            <RNText style={[a.font_semi_bold]}>
-              {niceDate(i18n, createdAt)}
-            </RNText>
-            , but was first seen by Bluesky on{' '}
-            <RNText style={[a.font_semi_bold]}>
-              {niceDate(i18n, indexedAt)}
-            </RNText>
-            .
-          </Trans>
-        </Prompt.DescriptionText>
-        <Text
-          style={[
-            a.text_md,
-            a.leading_snug,
-            t.atoms.text_contrast_high,
-            a.pb_xl,
-          ]}>
-          <Trans>
-            Bluesky cannot confirm the authenticity of the claimed date.
-          </Trans>
-        </Text>
+        <Prompt.Content>
+          <Prompt.TitleText>
+            <Trans>Archived post</Trans>
+          </Prompt.TitleText>
+          <Prompt.DescriptionText>
+            <Trans>
+              This post claims to have been created on{' '}
+              <RNText style={[a.font_semi_bold]}>
+                {niceDate(i18n, createdAt)}
+              </RNText>
+              , but was first seen by Bluesky on{' '}
+              <RNText style={[a.font_semi_bold]}>
+                {niceDate(i18n, indexedAt)}
+              </RNText>
+              .
+            </Trans>
+          </Prompt.DescriptionText>
+          <Prompt.DescriptionText>
+            <Trans>
+              Bluesky cannot confirm the authenticity of the claimed date.
+            </Trans>
+          </Prompt.DescriptionText>
+        </Prompt.Content>
         <Prompt.Actions>
           <Prompt.Action cta={_(msg`Okay`)} onPress={() => {}} />
         </Prompt.Actions>
diff --git a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
index 6230e5a33d..c82a347c1c 100644
--- a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+++ b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
@@ -212,13 +212,15 @@ function CantSubscribePrompt({
   const {_} = useLingui()
   return (
     <Prompt.Outer control={control}>
-      <Prompt.TitleText>Unable to subscribe</Prompt.TitleText>
-      <Prompt.DescriptionText>
-        <Trans>
-          We're sorry! You can only subscribe to twenty labelers, and you've
-          reached your limit of twenty.
-        </Trans>
-      </Prompt.DescriptionText>
+      <Prompt.Content>
+        <Prompt.TitleText>Unable to subscribe</Prompt.TitleText>
+        <Prompt.DescriptionText>
+          <Trans>
+            We're sorry! You can only subscribe to twenty labelers, and you've
+            reached your limit of twenty.
+          </Trans>
+        </Prompt.DescriptionText>
+      </Prompt.Content>
       <Prompt.Actions>
         <Prompt.Action onPress={() => control.close()} cta={_(msg`OK`)} />
       </Prompt.Actions>
diff --git a/src/screens/Settings/components/DeactivateAccountDialog.tsx b/src/screens/Settings/components/DeactivateAccountDialog.tsx
index 4570062ce9..3a4e173ab7 100644
--- a/src/screens/Settings/components/DeactivateAccountDialog.tsx
+++ b/src/screens/Settings/components/DeactivateAccountDialog.tsx
@@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
 import {useAgent, useSessionApi} from '#/state/session'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {type DialogOuterProps} from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
@@ -32,7 +32,6 @@ function DeactivateAccountDialogInner({
   control: DialogOuterProps['control']
 }) {
   const t = useTheme()
-  const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const agent = useAgent()
   const {logoutCurrentAccount} = useSessionApi()
@@ -100,9 +99,8 @@ function DeactivateAccountDialogInner({
       </View>
       <Prompt.Actions>
         <Button
-          variant="solid"
           color="negative"
-          size={gtMobile ? 'small' : 'large'}
+          size="large"
           label={_(msg`Yes, deactivate`)}
           onPress={handleDeactivate}>
           <ButtonText>{_(msg`Yes, deactivate`)}</ButtonText>
diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx
index 8ae924c828..a16eaf3515 100644
--- a/src/screens/StarterPack/StarterPackLandingScreen.tsx
+++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx
@@ -326,15 +326,17 @@ function LandingScreenLoaded({
         setIsVisible={setAppClipOverlayVisible}
       />
       <Prompt.Outer control={androidDialogControl}>
-        <Prompt.TitleText>
-          <Trans>Download Bluesky</Trans>
-        </Prompt.TitleText>
-        <Prompt.DescriptionText>
-          <Trans>
-            The experience is better in the app. Download Bluesky now and we'll
-            pick back up where you left off.
-          </Trans>
-        </Prompt.DescriptionText>
+        <Prompt.Content>
+          <Prompt.TitleText>
+            <Trans>Download Bluesky</Trans>
+          </Prompt.TitleText>
+          <Prompt.DescriptionText>
+            <Trans>
+              The experience is better in the app. Download Bluesky now and
+              we'll pick back up where you left off.
+            </Trans>
+          </Prompt.DescriptionText>
+        </Prompt.Content>
         <Prompt.Actions>
           <Prompt.Action
             cta="Download on Google Play"