diff --git a/src/components/Dialog/shared.tsx b/src/components/Dialog/shared.tsx index 32dd717048..263cef7ee8 100644 --- a/src/components/Dialog/shared.tsx +++ b/src/components/Dialog/shared.tsx @@ -67,7 +67,9 @@ export function HeaderText({ style?: StyleProp }) { return ( - + {children} ) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 3a20b76b36..8109914dce 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -191,7 +191,8 @@ export function TitleText({ style, ]} numberOfLines={2} - emoji> + emoji + maxFontSizeMultiplier={2}> {children} ) diff --git a/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx b/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx index 7a0c719d2d..1480819bee 100644 --- a/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx +++ b/src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx @@ -145,7 +145,7 @@ function PostThreadFollowBtnLoaded({ {gtMobile && ( )} - + {!isFollowing ? ( isFollowedBy ? ( Follow back diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 5bde2c1461..c736418aa3 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -1541,7 +1541,7 @@ function ComposerTopBar({ accessibilityHint={_( msg`Closes post composer and discards post draft`, )}> - + Cancel @@ -1608,7 +1608,7 @@ function ComposerTopBar({ size="small" onPress={onPublish} disabled={!canPost || isPublishQueued}> - + {isReply ? ( Reply ) : isThread ? ( diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index 0d335cdcd6..8afa7d0570 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/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({ - + + + Alt text describes images for blind and low-vision users, and helps + give context to everyone. + + maxLength ? '#e60000' : pal.colors.text - const circleColor = count > maxLength ? '#e60000' : pal.colors.link + const t = useTheme() + const textColor = count > maxLength ? '#e60000' : t.atoms.text.color + const circleColor = count > maxLength ? '#e60000' : t.palette.primary_500 return ( @@ -40,7 +39,8 @@ export function CharProgress({ a.flex_grow, a.text_right, textStyle, - ]}> + ]} + maxFontSizeMultiplier={1}> {maxLength - count} {count > maxLength ? ( @@ -55,7 +55,7 @@ export function CharProgress({ diff --git a/src/view/com/composer/drafts/DraftsButton.tsx b/src/view/com/composer/drafts/DraftsButton.tsx index ac075223df..11628544b6 100644 --- a/src/view/com/composer/drafts/DraftsButton.tsx +++ b/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}> - + Drafts diff --git a/src/view/com/composer/labels/LabelsBtn.tsx b/src/view/com/composer/labels/LabelsBtn.tsx index 0387315c9c..9471dc0d2e 100644 --- a/src/view/com/composer/labels/LabelsBtn.tsx +++ b/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`, )}> - + {labels.length > 0 ? ( Labels added ) : ( diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 118e6c2bde..a22d8b53cf 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/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 {tokens, useTheme} from '#/alf' +import {atoms as a, 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) => { ) })} - + + + Alt text describes images for blind and low-vision users, and helps + give context to everyone. + + ) : null } @@ -263,23 +269,6 @@ const GalleryItem = ({ ) } -export function AltTextReminder() { - const t = useTheme() - return ( - - - - - - - Alt text describes images for blind and low-vision users, and helps - give context to everyone. - - - - ) -} - 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', - }, }) diff --git a/src/view/com/composer/select-language/PostLanguageSelect.tsx b/src/view/com/composer/select-language/PostLanguageSelect.tsx index 66e8c6ea0d..1ea8219fa6 100644 --- a/src/view/com/composer/select-language/PostLanguageSelect.tsx +++ b/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(', ')} diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx index ed22befcd9..745e9d5d2e 100644 --- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx +++ b/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`, )}> - {label} + + {label} +