1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00

Using new text component

Need to use global accessibility checks rather than per text component which is not efficient
This commit is contained in:
Zhiyuan Zheng
2022-05-07 00:52:32 +02:00
parent 8caf315894
commit 7c48c61c99
60 changed files with 1302 additions and 1494 deletions

View File

@ -1,7 +1,8 @@
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { View } from 'react-native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import CustomText from '@components/Text'
export interface Props {
heading: string
@ -11,20 +12,16 @@ const MenuHeader: React.FC<Props> = ({ heading }) => {
const { colors } = useTheme()
return (
<View style={styles.base}>
<Text style={[styles.text, { color: colors.secondary }]}>{heading}</Text>
<View style={{ paddingBottom: StyleConstants.Spacing.S }}>
<CustomText
fontStyle='S'
fontWeight='Bold'
style={{ color: colors.secondary }}
>
{heading}
</CustomText>
</View>
)
}
const styles = StyleSheet.create({
base: {
paddingBottom: StyleConstants.Spacing.S
},
text: {
...StyleConstants.FontStyle.S,
fontWeight: StyleConstants.Font.Weight.Bold
}
})
export default MenuHeader

View File

@ -1,4 +1,5 @@
import Icon from '@components/Icon'
import CustomText from '@components/Text'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -99,12 +100,13 @@ const MenuRow: React.FC<Props> = ({
/>
) : null}
<View style={styles.main}>
<Text
style={[styles.title, { color: colors.primaryDefault }]}
<CustomText
fontStyle='M'
style={{ color: colors.primaryDefault }}
numberOfLines={1}
>
{title}
</Text>
</CustomText>
</View>
</View>
@ -112,18 +114,15 @@ const MenuRow: React.FC<Props> = ({
<View style={styles.back}>
{content ? (
typeof content === 'string' ? (
<Text
style={[
styles.content,
{
color: colors.secondary,
opacity: !iconBack && loading ? 0 : 1
}
]}
<CustomText
style={{
color: colors.secondary,
opacity: !iconBack && loading ? 0 : 1
}}
numberOfLines={1}
>
{content}
</Text>
</CustomText>
) : (
content
)
@ -150,9 +149,9 @@ const MenuRow: React.FC<Props> = ({
) : null}
</View>
{description ? (
<Text style={[styles.description, { color: colors.secondary }]}>
<CustomText fontStyle='S' style={{ color: colors.secondary }}>
{description}
</Text>
</CustomText>
) : null}
</View>
</TapGestureHandler>
@ -187,9 +186,6 @@ const styles = StyleSheet.create({
main: {
flex: 1
},
title: {
...StyleConstants.FontStyle.M
},
description: {
...StyleConstants.FontStyle.S
},