Using new text component

Need to use global accessibility checks rather than per text component which is not efficient

src/components/Timeline/Empty.tsx

@@ -1,12 +1,13 @@
 import analytics from '@components/analytics'
 import Button from '@components/Button'
 import Icon from '@components/Icon'
+import CustomText from '@components/Text'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
@@ -40,9 +41,16 @@ const TimelineEmpty = React.memo(
                 size={StyleConstants.Font.Size.L}
                 color={colors.primaryDefault}
               />
-              <Text style={[styles.error, { color: colors.primaryDefault }]}>
+              <CustomText
+                fontStyle='M'
+                style={{
+                  marginTop: StyleConstants.Spacing.S,
+                  marginBottom: StyleConstants.Spacing.L,
+                  color: colors.primaryDefault
+                }}
+              >
                 {t('empty.error.message')}
-              </Text>
+              </CustomText>
               <Button
                 type='text'
                 content={t('empty.error.button')}
@@ -61,9 +69,16 @@ const TimelineEmpty = React.memo(
                 size={StyleConstants.Font.Size.L}
                 color={colors.primaryDefault}
               />
-              <Text style={[styles.error, { color: colors.primaryDefault }]}>
+              <CustomText
+                fontStyle='M'
+                style={{
+                  marginTop: StyleConstants.Spacing.S,
+                  marginBottom: StyleConstants.Spacing.L,
+                  color: colors.primaryDefault
+                }}
+              >
                 {t('empty.success.message')}
-              </Text>
+              </CustomText>
             </>
           )
       }
@@ -85,12 +100,4 @@ const TimelineEmpty = React.memo(
   () => true
 )
 
-const styles = StyleSheet.create({
-  error: {
-    ...StyleConstants.FontStyle.M,
-    marginTop: StyleConstants.Spacing.S,
-    marginBottom: StyleConstants.Spacing.L
-  }
-})
-
 export default TimelineEmpty