this repo has no description
First pass at fixing large type by adding `maxFontSizeMultiplier` (#10037)
authored by
Samuel Newman
and committed by
GitHub
8b67a3ec
6187e79b
+41
-56
+2
-1
src/components/Layout/Header/index.tsx
+2
-1
src/components/Layout/Header/index.tsx
+1
-1
src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx
+1
-1
src/screens/PostThread/components/ThreadItemAnchorFollowButton.tsx
+2
-2
src/view/com/composer/Composer.tsx
+2
-2
src/view/com/composer/Composer.tsx
···
1541
1541
accessibilityHint={_(
1542
1542
msg`Closes post composer and discards post draft`,
1543
1543
)}>
1544
-
<ButtonText style={[a.text_md]}>
1544
+
<ButtonText style={[a.text_md]} maxFontSizeMultiplier={2}>
1545
1545
<Trans>Cancel</Trans>
1546
1546
</ButtonText>
1547
1547
</Button>
···
1608
1608
size="small"
1609
1609
onPress={onPublish}
1610
1610
disabled={!canPost || isPublishQueued}>
1611
-
<ButtonText style={[a.text_md]}>
1611
+
<ButtonText style={[a.text_md]} maxFontSizeMultiplier={2}>
1612
1612
{isReply ? (
1613
1613
<Trans context="action">Reply</Trans>
1614
1614
) : isThread ? (
+7
-2
src/view/com/composer/GifAltText.tsx
+7
-2
src/view/com/composer/GifAltText.tsx
···
14
14
import {type Gif} from '#/state/queries/tenor'
15
15
import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
16
16
import {atoms as a, useTheme} from '#/alf'
17
+
import {Admonition} from '#/components/Admonition'
17
18
import {Button, ButtonText} from '#/components/Button'
18
19
import * as Dialog from '#/components/Dialog'
19
20
import {type DialogControlProps} from '#/components/Dialog'
···
23
24
import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
24
25
import {GifEmbed} from '#/components/Post/Embed/ExternalEmbed/Gif'
25
26
import {Text} from '#/components/Typography'
26
-
import {AltTextReminder} from './photos/Gallery'
27
27
28
28
export function GifAltTextDialog({
29
29
gif,
···
101
101
</Text>
102
102
</TouchableOpacity>
103
103
104
-
<AltTextReminder />
104
+
<Admonition type="tip" style={[a.mt_sm]}>
105
+
<Trans>
106
+
Alt text describes images for blind and low-vision users, and helps
107
+
give context to everyone.
108
+
</Trans>
109
+
</Admonition>
105
110
106
111
<Dialog.Outer
107
112
control={control}
+8
-8
src/view/com/composer/char-progress/CharProgress.tsx
+8
-8
src/view/com/composer/char-progress/CharProgress.tsx
···
10
10
import ProgressPie from 'react-native-progress/Pie'
11
11
12
12
import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
13
-
import {usePalette} from '#/lib/hooks/usePalette'
14
-
import {atoms as a} from '#/alf'
15
-
import {Text} from '../../util/text/Text'
13
+
import {atoms as a, useTheme} from '#/alf'
14
+
import {Text} from '#/components/Typography'
16
15
17
16
export function CharProgress({
18
17
count,
···
28
27
size?: number
29
28
}) {
30
29
const maxLength = max || MAX_GRAPHEME_LENGTH
31
-
const pal = usePalette('default')
32
-
const textColor = count > maxLength ? '#e60000' : pal.colors.text
33
-
const circleColor = count > maxLength ? '#e60000' : pal.colors.link
30
+
const t = useTheme()
31
+
const textColor = count > maxLength ? '#e60000' : t.atoms.text.color
32
+
const circleColor = count > maxLength ? '#e60000' : t.palette.primary_500
34
33
return (
35
34
<View
36
35
style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm, style]}>
···
40
39
a.flex_grow,
41
40
a.text_right,
42
41
textStyle,
43
-
]}>
42
+
]}
43
+
maxFontSizeMultiplier={1}>
44
44
{maxLength - count}
45
45
</Text>
46
46
{count > maxLength ? (
···
55
55
<ProgressCircle
56
56
size={size ?? 30}
57
57
borderWidth={1}
58
-
borderColor={pal.colors.border}
58
+
borderColor={t.atoms.border_contrast_low.borderColor}
59
59
color={circleColor}
60
60
progress={count / maxLength}
61
61
/>
+2
-2
src/view/com/composer/drafts/DraftsButton.tsx
+2
-2
src/view/com/composer/drafts/DraftsButton.tsx
···
72
72
color="primary"
73
73
shape="default"
74
74
size="small"
75
-
style={[a.rounded_full, a.py_sm, a.px_md, a.mx_xs]}
75
+
style={[a.py_sm, a.px_md, a.mx_xs]}
76
76
disabled={isSaving}
77
77
onPress={handlePress}>
78
-
<ButtonText style={[a.text_md]}>
78
+
<ButtonText style={[a.text_md]} maxFontSizeMultiplier={2}>
79
79
<Trans>Drafts</Trans>
80
80
</ButtonText>
81
81
</Button>
+1
-1
src/view/com/composer/labels/LabelsBtn.tsx
+1
-1
src/view/com/composer/labels/LabelsBtn.tsx
···
63
63
msg`Opens a dialog to add a content warning to your post`,
64
64
)}>
65
65
<ButtonIcon icon={hasLabel ? Check : Shield_Stroke2_Corner0_Rounded} />
66
-
<ButtonText numberOfLines={1}>
66
+
<ButtonText numberOfLines={1} maxFontSizeMultiplier={2}>
67
67
{labels.length > 0 ? (
68
68
<Trans>Labels added</Trans>
69
69
) : (
+10
-36
src/view/com/composer/photos/Gallery.tsx
+10
-36
src/view/com/composer/photos/Gallery.tsx
···
17
17
18
18
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
19
19
import {type Dimensions} from '#/lib/media/types'
20
-
import {colors, s} from '#/lib/styles'
20
+
import {colors} from '#/lib/styles'
21
21
import {type ComposerImage, cropImage} from '#/state/gallery'
22
-
import {Text} from '#/view/com/util/text/Text'
23
-
import {tokens, useTheme} from '#/alf'
22
+
import {atoms as a, tokens, useTheme} from '#/alf'
23
+
import {Admonition} from '#/components/Admonition'
24
24
import * as Dialog from '#/components/Dialog'
25
25
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
26
+
import {Text} from '#/components/Typography'
26
27
import {IS_IOS, IS_NATIVE} from '#/env'
27
28
import {type PostAction} from '../state/composer'
28
29
import {EditImageDialog} from './EditImageDialog'
···
118
119
)
119
120
})}
120
121
</View>
121
-
<AltTextReminder />
122
+
<Admonition type="tip" style={[a.mt_sm]}>
123
+
<Trans>
124
+
Alt text describes images for blind and low-vision users, and helps
125
+
give context to everyone.
126
+
</Trans>
127
+
</Admonition>
122
128
</>
123
129
) : null
124
130
}
···
263
269
)
264
270
}
265
271
266
-
export function AltTextReminder() {
267
-
const t = useTheme()
268
-
return (
269
-
<View style={[styles.reminder]}>
270
-
<View style={[styles.infoIcon, t.atoms.bg_contrast_25]}>
271
-
<FontAwesomeIcon icon="info" size={12} color={t.atoms.text.color} />
272
-
</View>
273
-
<Text type="sm" style={[t.atoms.text_contrast_medium, s.flex1]}>
274
-
<Trans>
275
-
Alt text describes images for blind and low-vision users, and helps
276
-
give context to everyone.
277
-
</Trans>
278
-
</Text>
279
-
</View>
280
-
)
281
-
}
282
-
283
272
const styles = StyleSheet.create({
284
273
gallery: {
285
274
flex: 1,
···
322
311
bottom: 4,
323
312
top: 30,
324
313
zIndex: 1,
325
-
},
326
-
327
-
reminder: {
328
-
flexDirection: 'row',
329
-
alignItems: 'center',
330
-
gap: 8,
331
-
borderRadius: 8,
332
-
paddingVertical: 14,
333
-
},
334
-
infoIcon: {
335
-
width: 22,
336
-
height: 22,
337
-
borderRadius: 12,
338
-
alignItems: 'center',
339
-
justifyContent: 'center',
340
314
},
341
315
})
+2
-1
src/view/com/composer/select-language/PostLanguageSelect.tsx
+2
-1
src/view/com/composer/select-language/PostLanguageSelect.tsx
+3
-1
src/view/com/composer/threadgate/ThreadgateBtn.tsx
+3
-1
src/view/com/composer/threadgate/ThreadgateBtn.tsx
···
154
154
msg`Opens a dialog to choose who can interact with this post`,
155
155
)}>
156
156
<ButtonIcon icon={anyoneCanInteract ? EarthIcon : GroupIcon} />
157
-
<ButtonText numberOfLines={1}>{label}</ButtonText>
157
+
<ButtonText numberOfLines={1} maxFontSizeMultiplier={2}>
158
+
{label}
159
+
</ButtonText>
158
160
<ButtonIcon icon={TinyChevronIcon} size="2xs" />
159
161
</Button>
160
162
</Tooltip.Target>