Apply style changes

Expensify · May 8, 2023 · 50ed3e6 · 50ed3e6
1 parent feeb2b0
commit 50ed3e6
Show file tree

Hide file tree

Showing 83 changed files with 5,345 additions and 5,261 deletions.
diff --git a/src/ROUTES.js b/src/ROUTES.js
@@ -43,7 +43,7 @@ export default {
     SETTINGS_ADD_DEBIT_CARD: 'settings/payments/add-debit-card',
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/payments/add-bank-account',
     SETTINGS_ENABLE_PAYMENTS: 'settings/payments/enable-payments',
-    getSettingsAddLoginRoute: type => `settings/addlogin/${type}`,
+    getSettingsAddLoginRoute: (type) => `settings/addlogin/${type}`,
     SETTINGS_PAYMENTS_TRANSFER_BALANCE: 'settings/payments/transfer-balance',
     SETTINGS_PAYMENTS_CHOOSE_TRANSFER_ACCOUNT: 'settings/payments/choose-transfer-account',
     SETTINGS_PERSONAL_DETAILS,
@@ -52,14 +52,14 @@ export default {
     SETTINGS_PERSONAL_DETAILS_ADDRESS: `${SETTINGS_PERSONAL_DETAILS}/address`,
     SETTINGS_CONTACT_METHODS,
     SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`,
-    getEditContactMethodRoute: contactMethod => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,
+    getEditContactMethodRoute: (contactMethod) => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,
     SETTINGS_NEW_CONTACT_METHOD: `${SETTINGS_CONTACT_METHODS}/new`,
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
     NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID',
-    getReportRoute: reportID => `r/${reportID}`,
+    getReportRoute: (reportID) => `r/${reportID}`,
     SELECT_YEAR: 'select-year',
     getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`,
 
@@ -72,60 +72,60 @@ export default {
     IOU_REQUEST_WITH_REPORT_ID: `${IOU_REQUEST}/:reportID?`,
     IOU_BILL_WITH_REPORT_ID: `${IOU_BILL}/:reportID?`,
     IOU_SEND_WITH_REPORT_ID: `${IOU_SEND}/:reportID?`,
-    getIouRequestRoute: reportID => `${IOU_REQUEST}/${reportID}`,
-    getIouSplitRoute: reportID => `${IOU_BILL}/${reportID}`,
-    getIOUSendRoute: reportID => `${IOU_SEND}/${reportID}`,
+    getIouRequestRoute: (reportID) => `${IOU_REQUEST}/${reportID}`,
+    getIouSplitRoute: (reportID) => `${IOU_BILL}/${reportID}`,
+    getIOUSendRoute: (reportID) => `${IOU_SEND}/${reportID}`,
     IOU_BILL_CURRENCY: `${IOU_BILL_CURRENCY}/:reportID?`,
     IOU_REQUEST_CURRENCY: `${IOU_REQUEST_CURRENCY}/:reportID?`,
     MONEY_REQUEST_DESCRIPTION: `${IOU_REQUEST}/description`,
     IOU_SEND_CURRENCY: `${IOU_SEND_CURRENCY}/:reportID?`,
     IOU_SEND_ADD_BANK_ACCOUNT: `${IOU_SEND}/add-bank-account`,
     IOU_SEND_ADD_DEBIT_CARD: `${IOU_SEND}/add-debit-card`,
     IOU_SEND_ENABLE_PAYMENTS: `${IOU_SEND}/enable-payments`,
-    getIouRequestCurrencyRoute: reportID => `${IOU_REQUEST_CURRENCY}/${reportID}`,
-    getIouBillCurrencyRoute: reportID => `${IOU_BILL_CURRENCY}/${reportID}`,
-    getIouSendCurrencyRoute: reportID => `${IOU_SEND_CURRENCY}/${reportID}`,
+    getIouRequestCurrencyRoute: (reportID) => `${IOU_REQUEST_CURRENCY}/${reportID}`,
+    getIouBillCurrencyRoute: (reportID) => `${IOU_BILL_CURRENCY}/${reportID}`,
+    getIouSendCurrencyRoute: (reportID) => `${IOU_SEND_CURRENCY}/${reportID}`,
     IOU_DETAILS,
     IOU_DETAILS_ADD_BANK_ACCOUNT: `${IOU_DETAILS}/add-bank-account`,
     IOU_DETAILS_ADD_DEBIT_CARD: `${IOU_DETAILS}/add-debit-card`,
     IOU_DETAILS_ENABLE_PAYMENTS: `${IOU_DETAILS}/enable-payments`,
     IOU_DETAILS_WITH_IOU_REPORT_ID: `${IOU_DETAILS}/:chatReportID/:iouReportID/`,
     getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`,
-    getNewTaskRoute: reportID => `${NEW_TASK}/${reportID}`,
+    getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`,
     NEW_TASK_WITH_REPORT_ID: `${NEW_TASK}/:reportID?`,
     TASK_TITLE: 'r/:reportID/title',
     TASK_DESCRIPTION: 'r/:reportID/description',
-    getTaskReportTitleRoute: reportID => `r/${reportID}/title`,
-    getTaskReportDescriptionRoute: reportID => `r/${reportID}/description`,
+    getTaskReportTitleRoute: (reportID) => `r/${reportID}/title`,
+    getTaskReportDescriptionRoute: (reportID) => `r/${reportID}/description`,
     NEW_TASK_ASSIGNEE: `${NEW_TASK}/assignee`,
     NEW_TASK_SHARE_DESTINATION: `${NEW_TASK}/share-destination`,
     NEW_TASK_DETAILS: `${NEW_TASK}/details`,
     NEW_TASK_TITLE: `${NEW_TASK}/title`,
     NEW_TASK_DESCRIPTION: `${NEW_TASK}/description`,
-    getTaskDetailsRoute: taskID => `task/details/${taskID}`,
+    getTaskDetailsRoute: (taskID) => `task/details/${taskID}`,
     SEARCH: 'search',
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',
-    getDetailsRoute: login => `details?login=${encodeURIComponent(login)}`,
+    getDetailsRoute: (login) => `details?login=${encodeURIComponent(login)}`,
     REPORT_PARTICIPANTS: 'r/:reportID/participants',
-    getReportParticipantsRoute: reportID => `r/${reportID}/participants`,
+    getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`,
     REPORT_PARTICIPANT: 'r/:reportID/participants/details',
     getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/details?login=${encodeURIComponent(login)}`,
     REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
-    getReportDetailsRoute: reportID => `r/${reportID}/details`,
+    getReportDetailsRoute: (reportID) => `r/${reportID}/details`,
     REPORT_SETTINGS: 'r/:reportID/settings',
-    getReportSettingsRoute: reportID => `r/${reportID}/settings`,
+    getReportSettingsRoute: (reportID) => `r/${reportID}/settings`,
     TRANSITION_FROM_OLD_DOT: 'transition',
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',
     GET_ASSISTANCE: 'get-assistance/:taskID',
-    getGetAssistanceRoute: taskID => `get-assistance/${taskID}`,
+    getGetAssistanceRoute: (taskID) => `get-assistance/${taskID}`,
     UNLINK_LOGIN: 'u/:accountID/:validateCode',
 
     // This is a special validation URL that will take the user to /workspace/new after validation. This is used
     // when linking users from e.com in order to share a session in this app.
     ENABLE_PAYMENTS: 'enable-payments',
     WALLET_STATEMENT_WITH_DATE: 'statements/:yearMonth',
-    getWalletStatementWithDateRoute: yearMonth => `statements/${yearMonth}`,
+    getWalletStatementWithDateRoute: (yearMonth) => `statements/${yearMonth}`,
     WORKSPACE_NEW: 'workspace/new',
     WORKSPACE_INITIAL: 'workspace/:policyID',
     WORKSPACE_INVITE: 'workspace/:policyID/invite',
@@ -138,16 +138,16 @@ export default {
     WORKSPACE_TRAVEL: 'workspace/:policyID/travel',
     WORKSPACE_MEMBERS: 'workspace/:policyID/members',
     WORKSPACE_NEW_ROOM: 'workspace/new-room',
-    getWorkspaceInitialRoute: policyID => `workspace/${policyID}`,
-    getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
-    getWorkspaceInviteMessageRoute: policyID => `workspace/${policyID}/invite-message`,
-    getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`,
-    getWorkspaceCardRoute: policyID => `workspace/${policyID}/card`,
-    getWorkspaceReimburseRoute: policyID => `workspace/${policyID}/reimburse`,
-    getWorkspaceBillsRoute: policyID => `workspace/${policyID}/bills`,
-    getWorkspaceInvoicesRoute: policyID => `workspace/${policyID}/invoices`,
-    getWorkspaceTravelRoute: policyID => `workspace/${policyID}/travel`,
-    getWorkspaceMembersRoute: policyID => `workspace/${policyID}/members`,
+    getWorkspaceInitialRoute: (policyID) => `workspace/${policyID}`,
+    getWorkspaceInviteRoute: (policyID) => `workspace/${policyID}/invite`,
+    getWorkspaceInviteMessageRoute: (policyID) => `workspace/${policyID}/invite-message`,
+    getWorkspaceSettingsRoute: (policyID) => `workspace/${policyID}/settings`,
+    getWorkspaceCardRoute: (policyID) => `workspace/${policyID}/card`,
+    getWorkspaceReimburseRoute: (policyID) => `workspace/${policyID}/reimburse`,
+    getWorkspaceBillsRoute: (policyID) => `workspace/${policyID}/bills`,
+    getWorkspaceInvoicesRoute: (policyID) => `workspace/${policyID}/invoices`,
+    getWorkspaceTravelRoute: (policyID) => `workspace/${policyID}/travel`,
+    getWorkspaceMembersRoute: (policyID) => `workspace/${policyID}/members`,
 
     /**
      * @param {String} route

diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
@@ -34,35 +34,21 @@ const BaseAutoCompleteSuggestions = (props) => {
      */
     const renderSuggestionMenuItem = ({item, index}) => (
         <Pressable
-            style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(
-                props.highlightedSuggestionIndex,
-                CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT,
-                hovered,
-                index,
-            )}
-            onMouseDown={e => e.preventDefault()}
+            style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(props.highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT, hovered, index)}
+            onMouseDown={(e) => e.preventDefault()}
             onPress={() => props.onSelect(index)}
             onLongPress={() => {}}
         >
             {props.renderSuggestionMenuItem(item, index)}
         </Pressable>
     );
 
-    const rowHeight = measureHeightOfSuggestionRows(
-        props.suggestions.length,
-        props.isSuggestionPickerLarge,
-    );
+    const rowHeight = measureHeightOfSuggestionRows(props.suggestions.length, props.isSuggestionPickerLarge);
 
     return (
         <View
             ref={props.forwardedRef}
-            style={[
-                styles.autoCompleteSuggestionsContainer,
-                StyleUtils.getAutoCompleteSuggestionContainerStyle(
-                    rowHeight,
-                    props.shouldIncludeReportRecipientLocalTimeHeight,
-                ),
-            ]}
+            style={[styles.autoCompleteSuggestionsContainer, StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight, props.shouldIncludeReportRecipientLocalTimeHeight)]}
         >
             <FlatList
                 keyboardShouldPersistTaps="handled"
@@ -81,5 +67,8 @@ BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
 
 export default React.forwardRef((props, ref) => (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <BaseAutoCompleteSuggestions {...props} forwardedRef={ref} />
+    <BaseAutoCompleteSuggestions
+        {...props}
+        forwardedRef={ref}
+    />
 ));
diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.js
@@ -23,12 +23,15 @@ const AutoCompleteSuggestions = (props) => {
             }
             e.preventDefault();
         };
-        return () => container.onpointerdown = null;
+        return () => (container.onpointerdown = null);
     }, []);
 
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
-        <BaseAutoCompleteSuggestions {...props} ref={containerRef} />
+        <BaseAutoCompleteSuggestions
+            {...props}
+            ref={containerRef}
+        />
     );
 };
 

diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.js
@@ -2,7 +2,7 @@ import React from 'react';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import {propTypes} from './autoCompleteSuggestionsPropTypes';
 
-const AutoCompleteSuggestions = props => (
+const AutoCompleteSuggestions = (props) => (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <BaseAutoCompleteSuggestions {...props} />
 );

diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
@@ -53,54 +53,43 @@ const AvatarWithDisplayName = (props) => {
     return (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
             {Boolean(props.report && title) && (
-            <View
-                style={[
-                    styles.flexRow,
-                    styles.alignItemsCenter,
-                    styles.justifyContentBetween,
-                ]}
-            >
-                {isExpenseReport ? (
-                    <SubscriptAvatar
-                        mainAvatar={icons[0]}
-                        secondaryAvatar={icons[1]}
-                        mainTooltip={props.report.ownerEmail}
-                        secondaryTooltip={subtitle}
-                        size={props.size}
-                    />
-                ) : (
-                    <Avatar
-                        size={props.size}
-                        source={icons[0].source}
-                        type={icons[0].type}
-                        name={icons[0].name}
-                        containerStyles={props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar}
-                    />
-                )}
-                <View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
-                    <DisplayNames
-                        fullTitle={title}
-                        displayNamesWithTooltips={displayNamesWithTooltips}
-                        tooltipEnabled
-                        numberOfLines={1}
-                        textStyles={[styles.headerText, styles.pre]}
-                        shouldUseFullTitle={isExpenseReport}
-                    />
-                    {!_.isEmpty(subtitle) && (
-                    <Text
-                        style={[
-                            styles.sidebarLinkText,
-                            styles.optionAlternateText,
-                            styles.textLabelSupporting,
-                            styles.pre,
-                        ]}
-                        numberOfLines={1}
-                    >
-                        {subtitle}
-                    </Text>
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                    {isExpenseReport ? (
+                        <SubscriptAvatar
+                            mainAvatar={icons[0]}
+                            secondaryAvatar={icons[1]}
+                            mainTooltip={props.report.ownerEmail}
+                            secondaryTooltip={subtitle}
+                            size={props.size}
+                        />
+                    ) : (
+                        <Avatar
+                            size={props.size}
+                            source={icons[0].source}
+                            type={icons[0].type}
+                            name={icons[0].name}
+                            containerStyles={props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar}
+                        />
                     )}
+                    <View style={[styles.flex1, styles.flexColumn, styles.ml3]}>
+                        <DisplayNames
+                            fullTitle={title}
+                            displayNamesWithTooltips={displayNamesWithTooltips}
+                            tooltipEnabled
+                            numberOfLines={1}
+                            textStyles={[styles.headerText, styles.pre]}
+                            shouldUseFullTitle={isExpenseReport}
+                        />
+                        {!_.isEmpty(subtitle) && (
+                            <Text
+                                style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre]}
+                                numberOfLines={1}
+                            >
+                                {subtitle}
+                            </Text>
+                        )}
+                    </View>
                 </View>
-            </View>
             )}
         </View>
     );
@@ -109,7 +98,4 @@ AvatarWithDisplayName.propTypes = propTypes;
 AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
 AvatarWithDisplayName.defaultProps = defaultProps;
 
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-)(AvatarWithDisplayName);
+export default compose(withWindowDimensions, withLocalize)(AvatarWithDisplayName);
diff --git a/src/components/CurrentWalletBalance.js b/src/components/CurrentWalletBalance.js
@@ -24,7 +24,6 @@ const propTypes = {
 
 const defaultProps = {
     userWallet: {
-
         // Default to zero if userWallet and currentBalance is not set yet to avoid NaN
         currentBalance: 0,
     },
@@ -33,13 +32,7 @@ const defaultProps = {
 
 const CurrentWalletBalance = (props) => {
     const formattedBalance = CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance);
-    return (
-        <Text
-            style={[styles.pv5, styles.alignSelfCenter, styles.textHeadline, styles.textXXXLarge, ...props.balanceStyles]}
-        >
-            {`${formattedBalance}`}
-        </Text>
-    );
+    return <Text style={[styles.pv5, styles.alignSelfCenter, styles.textHeadline, styles.textXXXLarge, ...props.balanceStyles]}>{`${formattedBalance}`}</Text>;
 };
 
 CurrentWalletBalance.propTypes = propTypes;

diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js
@@ -7,25 +7,26 @@ import * as StyleUtils from '../styles/StyleUtils';
 import * as EmojiUtils from '../libs/EmojiUtils';
 import Text from './Text';
 import getStyledTextArray from '../libs/GetStyledTextArray';
-import AutoCompleteSuggestions from
-'./AutoCompleteSuggestions';
+import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 
 const propTypes = {
     /** The index of the highlighted emoji */
     highlightedEmojiIndex: PropTypes.number,
 
     /** Array of suggested emoji */
-    emojis: PropTypes.arrayOf(PropTypes.shape({
-        /** The emoji code */
-        code: PropTypes.string.isRequired,
+    emojis: PropTypes.arrayOf(
+        PropTypes.shape({
+            /** The emoji code */
+            code: PropTypes.string.isRequired,
 
-        /** The name of the emoji */
-        name: PropTypes.string.isRequired,
+            /** The name of the emoji */
+            name: PropTypes.string.isRequired,
 
-        /** Array of different skin tone variants.
-         * If provided, it will be indexed with props.preferredSkinToneIndex */
-        types: PropTypes.arrayOf(PropTypes.string.isRequired),
-    })).isRequired,
+            /** Array of different skin tone variants.
+             * If provided, it will be indexed with props.preferredSkinToneIndex */
+            types: PropTypes.arrayOf(PropTypes.string.isRequired),
+        }),
+    ).isRequired,
 
     /** Fired when the user selects an emoji */
     onSelect: PropTypes.func.isRequired,
@@ -34,9 +35,9 @@ const propTypes = {
     prefix: PropTypes.string.isRequired,
 
     /** Show that we can use large emoji picker. Depending on available space
-    * and whether the input is expanded, we can have a small or large emoji
-    * suggester. When this value is false, the suggester will have a height of
-    * 2.5 items. When this value is true, the height can be up to 5 items.  */
+     * and whether the input is expanded, we can have a small or large emoji
+     * suggester. When this value is false, the suggester will have a height of
+     * 2.5 items. When this value is true, the height can be up to 5 items.  */
     isEmojiPickerLarge: PropTypes.bool.isRequired,
 
     /** Show that we should include ReportRecipientLocalTime view height */
@@ -71,7 +72,10 @@ const EmojiSuggestions = (props) => {
                 <Text style={styles.emojiSuggestionsText}>
                     :
                     {_.map(styledTextArray, ({text, isColored}, i) => (
-                        <Text key={`${text}+${i}`} style={StyleUtils.getColoredBackgroundStyle(isColored)}>
+                        <Text
+                            key={`${text}+${i}`}
+                            style={StyleUtils.getColoredBackgroundStyle(isColored)}
+                        >
                             {text}
                         </Text>
                     ))}