Alt text followups -- SLIGHTLY larger, and update gifs (#4252)

* Bump up the alt text indicator's text size just a smidge

* Update the GIF alt indicator to match images (right side, visually smaller on mobile)
zio/stable
Paul Frazee 2024-05-28 20:58:40 -07:00 committed by GitHub
parent 19ee89caf3
commit efdfb7f57a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 8 additions and 8 deletions

View File

@ -79,7 +79,7 @@ const styles = StyleSheet.create({
}, },
alt: { alt: {
color: 'white', color: 'white',
fontSize: 6, fontSize: 7,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}) })

View File

@ -5,7 +5,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {HITSLOP_10} from '#/lib/constants' import {HITSLOP_20} from '#/lib/constants'
import {parseAltFromGIFDescription} from '#/lib/gif-alt-text' import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
import {isWeb} from '#/platform/detection' import {isWeb} from '#/platform/detection'
import {EmbedPlayerParams} from 'lib/strings/embed-player' import {EmbedPlayerParams} from 'lib/strings/embed-player'
@ -166,7 +166,7 @@ function AltText({text}: {text: string}) {
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={_(msg`Show alt text`)} accessibilityLabel={_(msg`Show alt text`)}
accessibilityHint="" accessibilityHint=""
hitSlop={HITSLOP_10} hitSlop={HITSLOP_20}
onPress={control.open} onPress={control.open}
style={styles.altContainer}> style={styles.altContainer}>
<Text style={styles.alt} accessible={false}> <Text style={styles.alt} accessible={false}>
@ -195,18 +195,18 @@ const styles = StyleSheet.create({
altContainer: { altContainer: {
backgroundColor: 'rgba(0, 0, 0, 0.75)', backgroundColor: 'rgba(0, 0, 0, 0.75)',
borderRadius: 6, borderRadius: 6,
paddingHorizontal: 6, paddingHorizontal: isWeb ? 8 : 6,
paddingVertical: 3, paddingVertical: isWeb ? 6 : 3,
position: 'absolute', position: 'absolute',
// Related to margin/gap hack. This keeps the alt label in the same position // Related to margin/gap hack. This keeps the alt label in the same position
// on all platforms // on all platforms
left: isWeb ? 8 : 5, right: isWeb ? 8 : 5,
bottom: isWeb ? 8 : 5, bottom: isWeb ? 8 : 5,
zIndex: 2, zIndex: 2,
}, },
alt: { alt: {
color: 'white', color: 'white',
fontSize: 10, fontSize: isWeb ? 10 : 7,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}) })

View File

@ -183,7 +183,7 @@ const styles = StyleSheet.create({
}, },
alt: { alt: {
color: 'white', color: 'white',
fontSize: 6, fontSize: 7,
fontWeight: 'bold', fontWeight: 'bold',
}, },
customFeedOuter: { customFeedOuter: {