fix layout

software-mansion-labs · Dec 19, 2023 · 7877b58 · 7877b58
1 parent 7827568
commit 7877b58
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 10 deletions.
diff --git 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 (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -28,10 +32,10 @@ function WorkspaceBillsPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
         >
             {(hasVBA, policyID) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceBillsNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceBillsVBAView policyID={policyID} />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );

diff --git 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 (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -29,13 +32,13 @@ function WorkspaceCardPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
         >
             {(hasVBA, policyID, isUsingECard) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID} />}
 
                     {hasVBA && !isUsingECard && <WorkspaceCardVBANoECardView />}
 
                     {hasVBA && isUsingECard && <WorkspaceCardVBAWithECardView />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );

diff --git 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 (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -28,10 +32,10 @@ function WorkspaceInvoicesPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
         >
             {(hasVBA, policyID) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceInvoicesVBAView policyID={policyID} />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );

diff --git 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 (
-        <>
+        <View style={[styles.workspaceSection, styles.mt6]}>
             <Section
                 title={translate('workspace.reimburse.captureReceipts')}
                 icon={Illustrations.MoneyReceipts}
@@ -159,7 +159,7 @@ function WorkspaceReimburseView(props) {
                 network={props.network}
                 translate={translate}
             />
-        </>
+        </View>
     );
 }
 

diff --git 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 (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -28,10 +32,10 @@ function WorkspaceTravelPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
         >
             {(hasVBA, policyID) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceTravelNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceTravelVBAView />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );

diff --git 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
@@ -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