diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js index c607071a4365..01c6cf03fe97 100644 --- a/src/pages/workspace/bills/WorkspaceBillsPage.js +++ b/src/pages/workspace/bills/WorkspaceBillsPage.js @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; +import {View} from 'react-native'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; import CONST from '@src/CONST'; import WorkspaceBillsNoVBAView from './WorkspaceBillsNoVBAView'; @@ -20,6 +22,8 @@ const propTypes = { }; function WorkspaceBillsPage(props) { + const styles = useThemeStyles(); + return ( {(hasVBA, policyID) => ( - <> + {!hasVBA && } {hasVBA && } - + )} ); diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js index 55220b85ce63..2e2b6be80699 100644 --- a/src/pages/workspace/card/WorkspaceCardPage.js +++ b/src/pages/workspace/card/WorkspaceCardPage.js @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; +import {View} from 'react-native'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; import CONST from '@src/CONST'; import WorkspaceCardNoVBAView from './WorkspaceCardNoVBAView'; @@ -21,6 +23,7 @@ const propTypes = { }; function WorkspaceCardPage(props) { + const styles = useThemeStyles(); return ( {(hasVBA, policyID, isUsingECard) => ( - <> + {!hasVBA && } {hasVBA && !isUsingECard && } {hasVBA && isUsingECard && } - + )} ); diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js index 8bc0c4484100..9de83981a00a 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js +++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; +import {View} from 'react-native'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; import CONST from '@src/CONST'; import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView'; @@ -20,6 +22,8 @@ const propTypes = { }; function WorkspaceInvoicesPage(props) { + const styles = useThemeStyles(); + return ( {(hasVBA, policyID) => ( - <> + {!hasVBA && } {hasVBA && } - + )} ); diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 23136064fc2b..678d03665b62 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -103,7 +103,7 @@ function WorkspaceReimburseView(props) { }, [props.policy.customUnits, getCurrentRatePerUnitLabel]); return ( - <> +
- + ); } diff --git a/src/pages/workspace/travel/WorkspaceTravelPage.js b/src/pages/workspace/travel/WorkspaceTravelPage.js index a88e180cc7b6..c0633b51ac38 100644 --- a/src/pages/workspace/travel/WorkspaceTravelPage.js +++ b/src/pages/workspace/travel/WorkspaceTravelPage.js @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; +import {View} from 'react-native'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; import CONST from '@src/CONST'; import WorkspaceTravelNoVBAView from './WorkspaceTravelNoVBAView'; @@ -20,6 +22,8 @@ const propTypes = { }; function WorkspaceTravelPage(props) { + const styles = useThemeStyles(); + return ( {(hasVBA, policyID) => ( - <> + {!hasVBA && } {hasVBA && } - + )} ); diff --git a/src/styles/index.ts b/src/styles/index.ts index 442d7942a9ec..9da606e1d975 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4139,6 +4139,11 @@ const styles = (theme: ThemeColors) => lineHeight: variables.lineHeightXLarge, }, + workspaceSection: { + maxWidth: variables.workspaceSectionMaxWidth, + alignSelf: 'center', + }, + aspectRatioLottie: (animation: DotLottieAnimation) => ({aspectRatio: animation.w / animation.h}), receiptDropHeaderGap: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 4e4d70dd3a07..b7fb0e7fbad8 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -179,6 +179,7 @@ export default { reportActionItemImagesMoreCornerTriangleWidth: 40, bankCardWidth: 40, bankCardHeight: 26, + workspaceSectionMaxWidth: 560, // The height of the empty list is 14px (2px for borders and 12px for vertical padding) // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility