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