First pass at fixing large type by adding maxFontSizeMultiplier (#10037)

src/components/Dialog/shared.tsx

@@ -67,7 +67,9 @@ export function HeaderText({
   style?: StyleProp<TextStyle>
 }) {
   return (
-    <Text style={[a.text_lg, a.text_center, a.font_semi_bold, style]}>
+    <Text
+      style={[a.text_lg, a.text_center, a.font_semi_bold, style]}
+      maxFontSizeMultiplier={2}>
       {children}
     </Text>
   )

src/components/Layout/Header/index.tsx

@@ -191,7 +191,8 @@ export function TitleText({
         style,
       ]}
       numberOfLines={2}
-      emoji>
+      emoji
+      maxFontSizeMultiplier={2}>
       {children}
     </Text>
   )

src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx

@@ -145,7 +145,7 @@ function PostThreadFollowBtnLoaded({
       {gtMobile && (
         <ButtonIcon icon={isFollowing ? CheckIcon : PlusIcon} size="sm" />
       )}
-      <ButtonText>
+      <ButtonText maxFontSizeMultiplier={2}>
         {!isFollowing ? (
           isFollowedBy ? (
             <Trans>Follow back</Trans>

src/view/com/composer/Composer.tsx

@@ -1541,7 +1541,7 @@ function ComposerTopBar({
           accessibilityHint={_(
             msg`Closes post composer and discards post draft`,
           )}>
-          <ButtonText style={[a.text_md]}>
+          <ButtonText style={[a.text_md]} maxFontSizeMultiplier={2}>
             <Trans>Cancel</Trans>
           </ButtonText>
         </Button>
@@ -1608,7 +1608,7 @@ function ComposerTopBar({
               size="small"
               onPress={onPublish}
               disabled={!canPost || isPublishQueued}>
-              <ButtonText style={[a.text_md]}>
+              <ButtonText style={[a.text_md]} maxFontSizeMultiplier={2}>
                 {isReply ? (
                   <Trans context="action">Reply</Trans>
                 ) : isThread ? (

src/view/com/composer/GifAltText.tsx

@@ -14,6 +14,7 @@ import {useResolveGifQuery} from '#/state/queries/resolve-link'
 import {type Gif} from '#/state/queries/tenor'
 import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {type DialogControlProps} from '#/components/Dialog'
@@ -23,7 +24,6 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico
 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {GifEmbed} from '#/components/Post/Embed/ExternalEmbed/Gif'
 import {Text} from '#/components/Typography'
-import {AltTextReminder} from './photos/Gallery'
 
 export function GifAltTextDialog({
   gif,
@@ -101,7 +101,12 @@ export function GifAltTextDialogLoaded({
         </Text>
       </TouchableOpacity>
 
-      <AltTextReminder />
+      <Admonition type="tip" style={[a.mt_sm]}>
+        <Trans>
+          Alt text describes images for blind and low-vision users, and helps
+          give context to everyone.
+        </Trans>
+      </Admonition>
 
       <Dialog.Outer
         control={control}

src/view/com/composer/char-progress/CharProgress.tsx

@@ -10,9 +10,8 @@ import ProgressCircle from 'react-native-progress/Circle'
 import ProgressPie from 'react-native-progress/Pie'
 
 import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
-import {usePalette} from '#/lib/hooks/usePalette'
+import {atoms as a, useTheme} from '#/alf'
-import {atoms as a} from '#/alf'
+import {Text} from '#/components/Typography'
-import {Text} from '../../util/text/Text'
 
 export function CharProgress({
   count,
@@ -28,9 +27,9 @@ export function CharProgress({
   size?: number
 }) {
   const maxLength = max || MAX_GRAPHEME_LENGTH
-  const pal = usePalette('default')
+  const t = useTheme()
-  const textColor = count > maxLength ? '#e60000' : pal.colors.text
+  const textColor = count > maxLength ? '#e60000' : t.atoms.text.color
-  const circleColor = count > maxLength ? '#e60000' : pal.colors.link
+  const circleColor = count > maxLength ? '#e60000' : t.palette.primary_500
   return (
     <View
       style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm, style]}>
@@ -40,7 +39,8 @@ export function CharProgress({
           a.flex_grow,
           a.text_right,
           textStyle,
-        ]}>
+        ]}
+        maxFontSizeMultiplier={1}>
         {maxLength - count}
       </Text>
       {count > maxLength ? (
@@ -55,7 +55,7 @@ export function CharProgress({
         <ProgressCircle
           size={size ?? 30}
           borderWidth={1}
-          borderColor={pal.colors.border}
+          borderColor={t.atoms.border_contrast_low.borderColor}
           color={circleColor}
           progress={count / maxLength}
         />

src/view/com/composer/drafts/DraftsButton.tsx

@@ -72,10 +72,10 @@ export function DraftsButton({
         color="primary"
         shape="default"
         size="small"
-        style={[a.rounded_full, a.py_sm, a.px_md, a.mx_xs]}
+        style={[a.py_sm, a.px_md, a.mx_xs]}
         disabled={isSaving}
         onPress={handlePress}>
-        <ButtonText style={[a.text_md]}>
+        <ButtonText style={[a.text_md]} maxFontSizeMultiplier={2}>
           <Trans>Drafts</Trans>
         </ButtonText>
       </Button>

src/view/com/composer/labels/LabelsBtn.tsx

@@ -63,7 +63,7 @@ export function LabelsBtn({
           msg`Opens a dialog to add a content warning to your post`,
         )}>
         <ButtonIcon icon={hasLabel ? Check : Shield_Stroke2_Corner0_Rounded} />
-        <ButtonText numberOfLines={1}>
+        <ButtonText numberOfLines={1} maxFontSizeMultiplier={2}>
           {labels.length > 0 ? (
             <Trans>Labels added</Trans>
           ) : (

src/view/com/composer/photos/Gallery.tsx

@@ -17,12 +17,13 @@ import {Trans} from '@lingui/react/macro'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {type Dimensions} from '#/lib/media/types'
-import {colors, s} from '#/lib/styles'
+import {colors} from '#/lib/styles'
 import {type ComposerImage, cropImage} from '#/state/gallery'
-import {Text} from '#/view/com/util/text/Text'
+import {atoms as a, tokens, useTheme} from '#/alf'
-import {tokens, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
 import * as Dialog from '#/components/Dialog'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
+import {Text} from '#/components/Typography'
 import {IS_IOS, IS_NATIVE} from '#/env'
 import {type PostAction} from '../state/composer'
 import {EditImageDialog} from './EditImageDialog'
@@ -118,7 +119,12 @@ const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
           )
         })}
       </View>
-      <AltTextReminder />
+      <Admonition type="tip" style={[a.mt_sm]}>
+        <Trans>
+          Alt text describes images for blind and low-vision users, and helps
+          give context to everyone.
+        </Trans>
+      </Admonition>
     </>
   ) : null
 }
@@ -263,23 +269,6 @@ const GalleryItem = ({
   )
 }
 
-export function AltTextReminder() {
-  const t = useTheme()
-  return (
-    <View style={[styles.reminder]}>
-      <View style={[styles.infoIcon, t.atoms.bg_contrast_25]}>
-        <FontAwesomeIcon icon="info" size={12} color={t.atoms.text.color} />
-      </View>
-      <Text type="sm" style={[t.atoms.text_contrast_medium, s.flex1]}>
-        <Trans>
-          Alt text describes images for blind and low-vision users, and helps
-          give context to everyone.
-        </Trans>
-      </Text>
-    </View>
-  )
-}
-
 const styles = StyleSheet.create({
   gallery: {
     flex: 1,
@@ -323,19 +312,4 @@ const styles = StyleSheet.create({
     top: 30,
     zIndex: 1,
   },
-
-  reminder: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    borderRadius: 8,
-    paddingVertical: 14,
-  },
-  infoIcon: {
-    width: 22,
-    height: 22,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
 })

src/view/com/composer/select-language/PostLanguageSelect.tsx

@@ -161,7 +161,8 @@ function LanguageBtn(
                 a.leading_snug,
                 {maxWidth: 100},
               ]}
-              numberOfLines={1}>
+              numberOfLines={1}
+              maxFontSizeMultiplier={1.5}>
               {currentLanguages
                 .map(lang => codeToLanguageName(lang, langPrefs.appLanguage))
                 .join(', ')}

src/view/com/composer/threadgate/ThreadgateBtn.tsx

@@ -154,7 +154,9 @@ export function ThreadgateBtn({
               msg`Opens a dialog to choose who can interact with this post`,
             )}>
             <ButtonIcon icon={anyoneCanInteract ? EarthIcon : GroupIcon} />
-            <ButtonText numberOfLines={1}>{label}</ButtonText>
+            <ButtonText numberOfLines={1} maxFontSizeMultiplier={2}>
+              {label}
+            </ButtonText>
             <ButtonIcon icon={TinyChevronIcon} size="2xs" />
           </Button>
         </Tooltip.Target>