diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js index 9082f8ad396b..8e3d5a904a14 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js @@ -1,5 +1,6 @@ import React from 'react'; -import {StyleSheet, Text} from 'react-native'; +import {StyleSheet} from 'react-native'; +import Text from '../../Text'; import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes'; /* diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js index 9a63b54b1804..1fcc7b181700 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js @@ -1,7 +1,8 @@ import React from 'react'; -import {Linking, StyleSheet, Text} from 'react-native'; +import {Linking, StyleSheet} from 'react-native'; import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes'; import fileDownload from '../../../libs/fileDownload'; +import Text from '../../Text'; /* * This is a default anchor component for regular links. diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js index 41d41425abcc..6e2d7c03225f 100755 --- a/src/components/AttachmentView.js +++ b/src/components/AttachmentView.js @@ -1,5 +1,5 @@ import React, {memo} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; import styles from '../styles/styles'; @@ -9,6 +9,7 @@ import Icon from './Icon'; import {Paperclip} from './Icon/Expensicons'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import compose from '../libs/compose'; +import Text from './Text'; const propTypes = { /** URL to full-sized attachment */ @@ -56,7 +57,7 @@ const AttachmentView = (props) => { - {props.file && props.file.name} + {props.file && props.file.name} ); }; diff --git a/src/components/Button.js b/src/components/Button.js index d5fc7d3807f6..1b26159706ad 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -2,11 +2,12 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; import { - Text, Pressable, ActivityIndicator, + Pressable, ActivityIndicator, } from 'react-native'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; import OpacityView from './OpacityView'; +import Text from './Text'; const propTypes = { /** The text for the button label */ diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 8285d7c41c89..3d5c40ecfc22 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -58,7 +58,7 @@ const CheckboxWithLabel = ({ ]} > {label && ( - + {label} )} diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 7e13a2ed68ec..c7529f974c86 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import Header from './Header'; import Modal from './Modal'; @@ -9,6 +9,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen import withLocalize, {withLocalizePropTypes} from './withLocalize'; import compose from '../libs/compose'; import Button from './Button'; +import Text from './Text'; const propTypes = { /** Title of the modal */ @@ -61,7 +62,7 @@ const ConfirmModal = props => (
- + {props.prompt} diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 007408324f79..05c2481c0faf 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -1,9 +1,10 @@ import _ from 'underscore'; import React, {Fragment, PureComponent} from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import {propTypes, defaultProps} from './displayNamesPropTypes'; import styles from '../../styles/styles'; import Tooltip from '../Tooltip'; +import Text from '../Text'; class DisplayNames extends PureComponent { constructor(props) { @@ -83,7 +84,7 @@ class DisplayNames extends PureComponent { // Tokenization of string only support 1 numberOfLines on Web this.containerRef = el} diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js index 8a882f8eb576..a3862e5eb147 100644 --- a/src/components/DisplayNames/index.native.js +++ b/src/components/DisplayNames/index.native.js @@ -1,6 +1,6 @@ import React from 'react'; -import {Text} from 'react-native'; import {propTypes, defaultProps} from './displayNamesPropTypes'; +import Text from '../Text'; // As we don't have to show tooltips of the Native platform so we simply render the full display names list. const DisplayNames = ({ diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js index d46e08ae2090..f7bde09733a5 100644 --- a/src/components/EnvironmentBadge.js +++ b/src/components/EnvironmentBadge.js @@ -1,7 +1,8 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import styles from '../styles/styles'; import CONST from '../CONST'; +import Text from './Text'; import withEnvironment, {environmentPropTypes} from './withEnvironment'; const EnvironmentBadge = (props) => { diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index c15ed036e5cf..49675a10e3c6 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -1,11 +1,12 @@ import React, {Component} from 'react'; import { - Text, View, Animated, + View, Animated, } from 'react-native'; import { Directions, FlingGestureHandler, State, TouchableWithoutFeedback, } from 'react-native-gesture-handler'; import colors from '../../styles/colors'; +import Text from '../Text'; import Icon from '../Icon'; import {Checkmark, Exclamation} from '../Icon/Expensicons'; import styles from '../../styles/styles'; diff --git a/src/components/IOUBadge.js b/src/components/IOUBadge.js index 7d46e6050b11..ebc9852d5401 100644 --- a/src/components/IOUBadge.js +++ b/src/components/IOUBadge.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Text, Pressable} from 'react-native'; +import {Pressable} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '../ONYXKEYS'; import styles, {getBadgeColorStyle} from '../styles/styles'; @@ -9,6 +9,7 @@ import ROUTES from '../ROUTES'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import CONST from '../CONST'; +import Text from './Text'; const propTypes = { /** IOU Report data object */ diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js index df0957f1e344..ddd49fb1330b 100644 --- a/src/components/InlineCodeBlock/WrappedText.js +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -1,8 +1,9 @@ import _ from 'underscore'; import React, {Fragment} from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; +import Text from '../Text'; /** * Breaks the text into matrix diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index e2108ef60824..1a28310396ed 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -1,8 +1,9 @@ import React from 'react'; import { - View, Text, Pressable, + View, Pressable, } from 'react-native'; import PropTypes from 'prop-types'; +import Text from './Text'; import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../styles/styles'; import Icon from './Icon'; import {ArrowRight} from './Icon/Expensicons'; diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js index 9f21639d82bd..dbb6e968da42 100644 --- a/src/components/OptionsList.js +++ b/src/components/OptionsList.js @@ -1,11 +1,12 @@ import _ from 'underscore'; import React, {forwardRef, Component} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; import OptionRow from '../pages/home/sidebar/OptionRow'; import optionPropTypes from './optionPropTypes'; import SectionList from './SectionList'; +import Text from './Text'; const propTypes = { /** option Background Color */ diff --git a/src/components/PopoverMenu/BasePopoverMenu.js b/src/components/PopoverMenu/BasePopoverMenu.js index 22dc315b1c6d..18570bda302e 100644 --- a/src/components/PopoverMenu/BasePopoverMenu.js +++ b/src/components/PopoverMenu/BasePopoverMenu.js @@ -1,5 +1,5 @@ import React, {PureComponent} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import Popover from '../Popover'; import styles from '../../styles/styles'; @@ -9,6 +9,7 @@ import { propTypes as createMenuPropTypes, defaultProps as defaultCreateMenuPropTypes, } from './PopoverMenuPropTypes'; +import Text from '../Text'; const propTypes = { /** Callback fired when the menu is completely closed */ diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js index 6449c25ab4fa..30b62e7447dc 100644 --- a/src/components/ReportActionItem/IOUPreview.js +++ b/src/components/ReportActionItem/IOUPreview.js @@ -3,7 +3,6 @@ import { View, ActivityIndicator, TouchableOpacity, - Text, TouchableWithoutFeedback, } from 'react-native'; import PropTypes from 'prop-types'; @@ -21,6 +20,7 @@ import themeColors from '../../styles/themes/default'; import Icon from '../Icon'; import CONST from '../../CONST'; import {Checkmark} from '../Icon/Expensicons'; +import Text from '../Text'; const propTypes = { /** Additional logic for displaying the pay button */ diff --git a/src/components/ReportActionItem/IOUQuote.js b/src/components/ReportActionItem/IOUQuote.js index 671238cdea41..c7e091d2dc71 100644 --- a/src/components/ReportActionItem/IOUQuote.js +++ b/src/components/ReportActionItem/IOUQuote.js @@ -1,7 +1,8 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; +import Text from '../Text'; import styles from '../../styles/styles'; import ReportActionPropTypes from '../../pages/home/report/ReportActionPropTypes'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; diff --git a/src/components/ReportTransaction.js b/src/components/ReportTransaction.js index cec3b823cd1d..197e2fedb812 100644 --- a/src/components/ReportTransaction.js +++ b/src/components/ReportTransaction.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import { - Text, View, Pressable, ActivityIndicator, + View, Pressable, ActivityIndicator, } from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -12,6 +12,7 @@ import themeColors from '../styles/themes/default'; import {rejectTransaction} from '../libs/actions/IOU'; import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes'; import ReportActionItemSingle from '../pages/home/report/ReportActionItemSingle'; +import Text from './Text'; const propTypes = { /** The chatReport which the transaction is associated with */ diff --git a/src/components/Text.js b/src/components/Text.js index c50f754010d0..f2c1c62b7d78 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -4,6 +4,7 @@ import _ from 'underscore'; import {Text as RNText} from 'react-native'; import fontFamily from '../styles/fontFamily'; import themeColors from '../styles/themes/default'; +import variables from '../styles/variables'; const propTypes = { /** The color of the text */ @@ -28,14 +29,14 @@ const propTypes = { }; const defaultProps = { color: themeColors.text, - fontSize: 15, + fontSize: variables.fontSizeNormal, family: 'GTA', textAlign: null, children: null, style: {}, }; -const Text = ({ +const Text = React.forwardRef(({ color, fontSize, textAlign, @@ -43,7 +44,7 @@ const Text = ({ family, style, ...props -}) => { +}, ref) => { // If the style prop is an array of styles, we need to mix them all together const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({ ...finalStyles, @@ -61,9 +62,9 @@ const Text = ({ return ( // eslint-disable-next-line react/jsx-props-no-spreading - {children} + {children} ); -}; +}); Text.propTypes = propTypes; Text.defaultProps = defaultProps; diff --git a/src/components/TextInputAutoWidth.js b/src/components/TextInputAutoWidth.js index 4ece1b42f62f..9dbc83537cd6 100644 --- a/src/components/TextInputAutoWidth.js +++ b/src/components/TextInputAutoWidth.js @@ -1,8 +1,9 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import styles, {getAutoGrowTextInputStyle} from '../styles/styles'; +import Text from './Text'; import TextInputFocusable from './TextInputFocusable'; const propTypes = { diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js index 47203372cf03..3ed7c472883b 100644 --- a/src/components/Tooltip/TooltipRenderedOnPageBody.js +++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js @@ -1,8 +1,9 @@ import React, {memo} from 'react'; import PropTypes from 'prop-types'; -import {Animated, Text, View} from 'react-native'; +import {Animated, View} from 'react-native'; import ReactDOM from 'react-dom'; import getTooltipStyles from '../../styles/getTooltipStyles'; +import Text from '../Text'; const propTypes = { /** Window width */ diff --git a/src/components/WelcomeText.js b/src/components/WelcomeText.js index 08afbd0b8a8d..1180b5df2e3a 100755 --- a/src/components/WelcomeText.js +++ b/src/components/WelcomeText.js @@ -1,33 +1,36 @@ import React from 'react'; -import {Text} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import Text from './Text'; const propTypes = { /** Fontsize */ - textSize: PropTypes.oneOf(['default', 'large']), + smallFontSize: PropTypes.bool, ...withLocalizePropTypes, }; const defaultProps = { - textSize: 'default', + smallFontSize: false, }; -const WelcomeText = props => ( - <> - - {props.translate('welcomeText.phrase1')} - - - {props.translate('welcomeText.phrase2')} - {' '} - {props.translate('welcomeText.phrase3')} - - -); +const WelcomeText = (props) => { + const textSize = props.smallFontSize ? styles.textLabel : undefined; + return ( + <> + + {props.translate('welcomeText.phrase1')} + + + {props.translate('welcomeText.phrase2')} + {' '} + {props.translate('welcomeText.phrase3')} + + + ); +}; WelcomeText.displayName = 'WelcomeText'; WelcomeText.propTypes = propTypes; diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 937e8f0dbc93..548bf136a921 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -103,7 +103,7 @@ const DetailsPage = ({ ? 'common.phoneNumber' : 'common.email')} - + {isSMSLogin ? toLocalPhone(getPhoneNumber(details)) : details.login} @@ -115,7 +115,7 @@ const DetailsPage = ({ {translate('profilePage.preferredPronouns')} - + {details.pronouns} @@ -125,7 +125,7 @@ const DetailsPage = ({ {translate('detailsPage.localTime')} - + {timezone.format('LT')} {' '} {currentTime} diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js index e6ab3b805547..e57a44f66bb7 100644 --- a/src/pages/EnablePayments/ActivateStep.js +++ b/src/pages/EnablePayments/ActivateStep.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import ScreenWrapper from '../../components/ScreenWrapper'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import Navigation from '../../libs/Navigation/Navigation'; @@ -7,6 +7,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import styles from '../../styles/styles'; import userWalletPropTypes from './userWalletPropTypes'; import CONST from '../../CONST'; +import Text from '../../components/Text'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index ae761852eb0a..e647bb1f3d80 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import { - View, Text, ScrollView, KeyboardAvoidingView, + View, ScrollView, KeyboardAvoidingView, } from 'react-native'; import ScreenWrapper from '../../components/ScreenWrapper'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; @@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import Navigation from '../../libs/Navigation/Navigation'; import styles from '../../styles/styles'; import Button from '../../components/Button'; +import Text from '../../components/Text'; import TextInputWithLabel from '../../components/TextInputWithLabel'; import {activateWallet} from '../../libs/actions/BankAccounts'; import CONST from '../../CONST'; diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js index 49c9000a807d..a1b7cb6f697a 100644 --- a/src/pages/EnablePayments/OnfidoStep.js +++ b/src/pages/EnablePayments/OnfidoStep.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import Onfido from '../../components/Onfido'; @@ -14,6 +14,7 @@ import styles from '../../styles/styles'; import TextLink from '../../components/TextLink'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import compose from '../../libs/compose'; +import Text from '../../components/Text'; const propTypes = { /** Stores various information used to build the UI and call any APIs */ diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js index 9372506327c6..b0d6406e07ba 100755 --- a/src/pages/NotFound.js +++ b/src/pages/NotFound.js @@ -1,7 +1,6 @@ import React from 'react'; import { View, - Text, Image, TouchableOpacity, SafeAreaView, @@ -11,6 +10,7 @@ import logo from '../../assets/images/expensify-logo_reversed.png'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; +import Text from '../components/Text'; const NotFound = ({translations: {translate}}) => ( <> diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index cd75738be7c8..58190c6e4832 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import _ from 'underscore'; -import {Image, Text, View} from 'react-native'; +import {Image, View} from 'react-native'; import lodashGet from 'lodash/get'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; @@ -21,6 +21,7 @@ import {updateNotificationPreference} from '../libs/actions/Report'; import {Users} from '../components/Icon/Expensicons'; import ROUTES from '../ROUTES'; import MenuItem from '../components/MenuItem'; +import Text from '../components/Text'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js index fe52c29fd32f..3b491d6f4821 100644 --- a/src/pages/RequestCallPage.js +++ b/src/pages/RequestCallPage.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {View, Text, TextInput} from 'react-native'; +import {View, TextInput} from 'react-native'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -19,6 +19,7 @@ import Growl from '../libs/Growl'; import {requestConciergeDMCall} from '../libs/actions/Inbox'; import {fetchOrCreateChatReport} from '../libs/actions/Report'; import personalDetailsPropType from './personalDetailsPropType'; +import Text from '../components/Text'; const propTypes = { ...withLocalizePropTypes, @@ -152,10 +153,10 @@ class RequestCallPage extends Component { onCloseButtonPress={() => Navigation.dismissModal(true)} /> - + {this.props.translate('requestCallPage.description')} - + {this.props.translate('requestCallPage.instructions')} - + {this.props.translate('reportActionsView.beFirstPersonToComment')} diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 530b590238f8..65d70e39b8b9 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; @@ -8,6 +8,7 @@ import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import {getDisplayName} from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import Text from '../../../components/Text'; const propTypes = { /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */ diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index 3b7c25565ca2..9d0f5be92802 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/src/pages/home/sidebar/OptionRow.js @@ -3,7 +3,6 @@ import lodashGet from 'lodash/get'; import React, {memo} from 'react'; import PropTypes from 'prop-types'; import { - Text, TouchableOpacity, View, StyleSheet, @@ -20,6 +19,7 @@ import DisplayNames from '../../../components/DisplayNames'; import IOUBadge from '../../../components/IOUBadge'; import colors from '../../../styles/colors'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import Text from '../../../components/Text'; const propTypes = { /** Background Color of the Option Row */ @@ -102,8 +102,8 @@ const OptionRow = ({ const textUnreadStyle = (option.isUnread || forceTextUnreadStyle) ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle]; const displayNameStyle = mode === 'compact' - ? [styles.optionDisplayName, textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2] - : [styles.optionDisplayName, textUnreadStyle]; + ? [styles.optionDisplayName, ...textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2] + : [styles.optionDisplayName, ...textUnreadStyle]; const alternateTextStyle = mode === 'compact' ? [textStyle, styles.optionAlternateText, styles.optionAlternateTextCompact] : [textStyle, styles.optionAlternateText, styles.mt1]; diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js index 748517b9e505..9cdb9c414abd 100755 --- a/src/pages/iou/steps/IOUAmountPage.js +++ b/src/pages/iou/steps/IOUAmountPage.js @@ -1,7 +1,6 @@ import React from 'react'; import { View, - Text, TouchableOpacity, InteractionManager, } from 'react-native'; @@ -17,6 +16,7 @@ import ROUTES from '../../../ROUTES'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; import Button from '../../../components/Button'; +import Text from '../../../components/Text'; import KeyboardShortcut from '../../../libs/KeyboardShortcut'; const propTypes = { diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js index 42a100d00e5c..b2a312a7a000 100755 --- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js +++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; @@ -11,6 +11,7 @@ import CONST from '../../../../CONST'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import compose from '../../../../libs/compose'; import Button from '../../../../components/Button'; +import Text from '../../../../components/Text'; import FixedFooter from '../../../../components/FixedFooter'; const personalDetailsPropTypes = PropTypes.shape({ diff --git a/src/pages/settings/AboutPage.js b/src/pages/settings/AboutPage.js index f337c2bae552..6b5e35a1730d 100644 --- a/src/pages/settings/AboutPage.js +++ b/src/pages/settings/AboutPage.js @@ -101,7 +101,7 @@ const AboutPage = ({translate, session}) => { v {version} - + {translate('initialSettingsPage.aboutPage.description')} diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js index cf65b4b4ad65..3731aa043e3c 100755 --- a/src/pages/settings/AddSecondaryLoginPage.js +++ b/src/pages/settings/AddSecondaryLoginPage.js @@ -120,7 +120,7 @@ class AddSecondaryLoginPage extends Component { onCloseButtonPress={() => Navigation.dismissModal()} /> - + {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink' : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')} diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js index c63b832a080f..a10c43c9d877 100755 --- a/src/pages/settings/PasswordPage.js +++ b/src/pages/settings/PasswordPage.js @@ -84,7 +84,7 @@ class PasswordPage extends Component { onCloseButtonPress={() => Navigation.dismissModal(true)} /> - + {this.props.translate('passwordPage.changingYourPasswordPrompt')} diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js index 70437936f971..e6601581b0bc 100644 --- a/src/pages/settings/Payments/AddPayPalMePage.js +++ b/src/pages/settings/Payments/AddPayPalMePage.js @@ -78,7 +78,7 @@ class AddPayPalMePage extends React.Component { /> - + {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')} diff --git a/src/pages/settings/Profile/LoginField.js b/src/pages/settings/Profile/LoginField.js index a5f83debc8ad..bd2d336cf529 100755 --- a/src/pages/settings/Profile/LoginField.js +++ b/src/pages/settings/Profile/LoginField.js @@ -102,7 +102,7 @@ class LoginField extends Component { ) : ( - + {this.props.type === CONST.LOGIN_TYPE.PHONE ? this.props.toLocalPhone(this.props.login.partnerUserID) : this.props.login.partnerUserID} diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 64126c350b1d..df883255c03a 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -217,7 +217,7 @@ class ProfilePage extends Component { isUsingDefaultAvatar={this.props.myPersonalDetails.avatar.includes('/images/avatars/avatar')} anchorPosition={styles.createMenuPositionProfile} /> - + {this.props.translate('profilePage.tellUsAboutYourself')} - + {this.props.translate('resendValidationForm.weSentYouMagicSignInLink')} diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index def61d34414d..bab1ccdd3564 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -1,10 +1,11 @@ import React, {Component} from 'react'; import { - SafeAreaView, Text, View, + SafeAreaView, View, } from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import Text from '../../components/Text'; import ONYXKEYS from '../../ONYXKEYS'; import styles from '../../styles/styles'; import updateUnread from '../../libs/UnreadIndicatorUpdater/updateUnread/index'; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index f00a85ca5ed7..0a6bfc9bd82b 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -1,7 +1,8 @@ import React from 'react'; import { Image, - ScrollView, Text, View, + ScrollView, + View, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -10,6 +11,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png'; import TermsAndLicenses from '../TermsAndLicenses'; import WelcomeText from '../../../components/WelcomeText'; +import Text from '../../../components/Text'; import TextLink from '../../../components/TextLink'; import CONST from '../../../CONST'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index a4aba8457ced..69b818826611 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -1,6 +1,6 @@ import React from 'react'; import { - Image, Text, View, + Image, View, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -8,6 +8,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import welcomeScreenshot from '../../../../assets/images/welcome-screenshot-wide.png'; import variables from '../../../styles/variables'; import TermsAndLicenses from '../TermsAndLicenses'; +import Text from '../../../components/Text'; import WelcomeText from '../../../components/WelcomeText'; import TextLink from '../../../components/TextLink'; import CONST from '../../../CONST'; diff --git a/src/pages/signin/TermsAndLicenses/TermsOnly.js b/src/pages/signin/TermsAndLicenses/TermsOnly.js index d39bd81c6ff1..877768bbf449 100755 --- a/src/pages/signin/TermsAndLicenses/TermsOnly.js +++ b/src/pages/signin/TermsAndLicenses/TermsOnly.js @@ -1,7 +1,8 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import styles from '../../../styles/styles'; import CONST from '../../../CONST'; +import Text from '../../../components/Text'; import TextLink from '../../../components/TextLink'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js index 03f447154b8d..69ddbc246cd0 100755 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js @@ -1,9 +1,10 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import styles from '../../../styles/styles'; import CONST from '../../../CONST'; import TextLink from '../../../components/TextLink'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import Text from '../../../components/Text'; const TermsWithLicenses = ({translate}) => ( diff --git a/src/pages/workspace/NewWorkspacePage.js b/src/pages/workspace/NewWorkspacePage.js index 194002c8472d..8515edea97a6 100644 --- a/src/pages/workspace/NewWorkspacePage.js +++ b/src/pages/workspace/NewWorkspacePage.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import ONYXKEYS from '../../ONYXKEYS'; @@ -12,6 +12,7 @@ import styles from '../../styles/styles'; import WorkspaceDefaultAvatar from '../../../assets/images/workspace-default-avatar.svg'; import TextInputWithLabel from '../../components/TextInputWithLabel'; import Button from '../../components/Button'; +import Text from '../../components/Text'; import compose from '../../libs/compose'; import {create} from '../../libs/actions/Policy'; import defaultTheme from '../../styles/themes/default'; @@ -65,7 +66,7 @@ class NewWorkspacePage extends React.Component { value={this.state.name} onChangeText={name => this.setState({name})} /> - {this.props.translate('workspace.new.helpText')} + {this.props.translate('workspace.new.helpText')}