Adjusted padding; max width; alignment left

software-mansion-labs · Jan 8, 2024 · 7845e2a · 7845e2a
1 parent e20938a
commit 7845e2a
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 54 deletions.
diff --git a/src/components/Section/index.js b/src/components/Section/index.js
@@ -6,6 +6,7 @@ import MenuItemList from '@components/MenuItemList';
 import menuItemPropTypes from '@components/menuItemPropTypes';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import IconSection from './IconSection';
 
 const CARD_LAYOUT = {
@@ -77,10 +78,11 @@ const defaultProps = {
 
 function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
     const styles = useThemeStyles();
+    const {isMobileScreenWidth} = useWindowDimensions();
 
     return (
         <>
-            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
+            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles, isMobileScreenWidth ? styles.p5 : styles.p8]}>
                 {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
                     <IconSection
                         icon={icon}

diff --git a/src/components/WalletSection.tsx b/src/components/WalletSection.tsx
diff --git a/src/hooks/useWindowDimensions/index.native.ts b/src/hooks/useWindowDimensions/index.native.ts
@@ -12,6 +12,7 @@ export default function (): WindowDimensions {
     const isSmallScreenWidth = true;
     const isMediumScreenWidth = false;
     const isLargeScreenWidth = false;
+    const isMobileScreenWidth = true;
 
     return {
         windowWidth,
@@ -20,5 +21,6 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isMobileScreenWidth,
     };
 }
diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts
@@ -14,6 +14,7 @@ export default function (): WindowDimensions {
     const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
+    const isMobileScreenWidth = isExtraSmallScreenHeight || isSmallScreenWidth;
 
     return {
         windowWidth,
@@ -22,5 +23,6 @@ export default function (): WindowDimensions {
         isSmallScreenWidth,
         isMediumScreenWidth,
         isLargeScreenWidth,
+        isMobileScreenWidth,
     };
 }
diff --git a/src/hooks/useWindowDimensions/types.ts b/src/hooks/useWindowDimensions/types.ts
@@ -5,6 +5,7 @@ type WindowDimensions = {
     isSmallScreenWidth: boolean;
     isMediumScreenWidth: boolean;
     isLargeScreenWidth: boolean;
+    isMobileScreenWidth: boolean;
 };
 
 export default WindowDimensions;
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -17,8 +17,8 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {withNetwork} from '@components/OnyxProvider';
 import Popover from '@components/Popover';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import Text from '@components/Text';
-import WalletSection from '@components/WalletSection';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -41,7 +41,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {isSmallScreenWidth, windowWidth, isMobileScreenWidth} = useWindowDimensions();
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
     const [shouldShowDefaultDeleteMenu, setShouldShowDefaultDeleteMenu] = useState(false);
     const [shouldShowLoadingSpinner, setShouldShowLoadingSpinner] = useState(false);
@@ -339,7 +339,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS.ROOT)}
                         shouldShowBackButton={isSmallScreenWidth}
                     />
-                    <View style={[styles.flex1, styles.mb4]}>
+                    <View style={[styles.flex1, isMobileScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                         <ScrollView>
                             <OfflineWithFeedback
                                 style={styles.flex1}
@@ -349,7 +349,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                 errorRowStyles={[styles.ph6]}
                             >
                                 {hasWallet && (
-                                    <WalletSection
+                                    <Section
                                         icon={Illustrations.MoneyIntoWallet}
                                         subtitle={translate(`walletPage.${hasActivatedWallet ? 'sendAndReceiveMoney' : 'enableWalletToSendAndReceiveMoney'}`)}
                                         title={translate('walletPage.expensifyWallet')}
@@ -448,10 +448,10 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                                 }}
                                             </KYCWall>
                                         </>
-                                    </WalletSection>
+                                    </Section>
                                 )}
                                 {hasAssignedCard ? (
-                                    <WalletSection
+                                    <Section
                                         icon={Illustrations.CreditCardsNew}
                                         subtitle={translate('walletPage.assignedCardsDescription')}
                                         title={translate('walletPage.assignedCards')}
@@ -470,9 +470,9 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                             buttonRef={addPaymentMethodAnchorRef}
                                             onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}}
                                         />
-                                    </WalletSection>
+                                    </Section>
                                 ) : null}
-                                <WalletSection
+                                <Section
                                     icon={Illustrations.BankArrow}
                                     subtitle={translate('walletPage.addBankAccountToSendAndReceive')}
                                     title={translate('walletPage.bankAccounts')}
@@ -489,7 +489,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                         shouldEnableScroll={false}
                                         style={styles.mt5}
                                     />
-                                </WalletSection>
+                                </Section>
                             </OfflineWithFeedback>
                         </ScrollView>
                     </View>

diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -25,7 +25,6 @@ function WorkspaceBillsNoVBAView(props) {
             <Section
                 title={props.translate('workspace.bills.unlockOnlineBillPayment')}
                 icon={Illustrations.LockOpen}
-                containerStyles={[styles.cardSection]}
             >
                 <View style={[styles.mv3]}>
                     <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>

diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceBillsNoVBAView from './WorkspaceBillsNoVBAView';
@@ -23,6 +24,8 @@ const propTypes = {
 
 function WorkspaceBillsPage(props) {
     const styles = useThemeStyles();
+    const {isMobileScreenWidth} = useWindowDimensions();
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -31,7 +34,7 @@ function WorkspaceBillsPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
         >
             {(hasVBA, policyID) => (
-                <View style={[styles.workspaceSection, styles.mt6]}>
+                <View style={[styles.mt6, isMobileScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     {!hasVBA && <WorkspaceBillsNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceBillsVBAView policyID={policyID} />}
                 </View>

diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceCardNoVBAView from './WorkspaceCardNoVBAView';
@@ -24,6 +25,8 @@ const propTypes = {
 
 function WorkspaceCardPage(props) {
     const styles = useThemeStyles();
+    const {isMobileScreenWidth} = useWindowDimensions();
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -32,7 +35,7 @@ function WorkspaceCardPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
         >
             {(hasVBA, policyID, isUsingECard) => (
-                <View style={[styles.workspaceSection, styles.mt6]}>
+                <View style={[styles.mt6, isMobileScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID} />}
 
                     {hasVBA && !isUsingECard && <WorkspaceCardVBANoECardView />}

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -25,7 +25,6 @@ function WorkspaceInvoicesNoVBAView(props) {
             <Section
                 title={props.translate('workspace.invoices.unlockOnlineInvoiceCollection')}
                 icon={Illustrations.MoneyIntoWallet}
-                containerStyles={[styles.cardSection]}
             >
                 <View style={[styles.mv3]}>
                     <Text>{props.translate('workspace.invoices.unlockNoVBACopy')}</Text>

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView';
@@ -23,6 +24,8 @@ const propTypes = {
 
 function WorkspaceInvoicesPage(props) {
     const styles = useThemeStyles();
+    const {isMobileScreenWidth} = useWindowDimensions();
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -31,7 +34,7 @@ function WorkspaceInvoicesPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
         >
             {(hasVBA, policyID) => (
-                <View style={[styles.workspaceSection, styles.mt6]}>
+                <View style={[styles.mt6, isMobileScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     {!hasVBA && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceInvoicesVBAView policyID={policyID} />}
                 </View>

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -15,6 +15,7 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -68,6 +69,7 @@ const defaultProps = {
 function WorkspaceReimburseView(props) {
     const styles = useThemeStyles();
     const [currentRatePerUnit, setCurrentRatePerUnit] = useState('');
+    const {isMobileScreenWidth} = useWindowDimensions();
     const viewAllReceiptsUrl = `expenses?policyIDList=${props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`;
     const distanceCustomUnit = _.find(lodashGet(props.policy, 'customUnits', {}), (unit) => unit.name === CONST.CUSTOM_UNITS.NAME_DISTANCE);
     const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === CONST.CUSTOM_UNITS.DEFAULT_RATE);
@@ -103,7 +105,7 @@ function WorkspaceReimburseView(props) {
     }, [props.policy.customUnits, getCurrentRatePerUnitLabel]);
 
     return (
-        <View style={[styles.workspaceSection, styles.mt6]}>
+        <View style={[styles.mt6, isMobileScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
             <Section
                 title={translate('workspace.reimburse.captureReceipts')}
                 icon={Illustrations.MoneyReceipts}

diff --git a/src/pages/workspace/travel/WorkspaceTravelPage.js b/src/pages/workspace/travel/WorkspaceTravelPage.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceTravelNoVBAView from './WorkspaceTravelNoVBAView';
@@ -23,6 +24,8 @@ const propTypes = {
 
 function WorkspaceTravelPage(props) {
     const styles = useThemeStyles();
+    const {isMobileScreenWidth} = useWindowDimensions();
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -31,7 +34,7 @@ function WorkspaceTravelPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
         >
             {(hasVBA, policyID) => (
-                <View style={[styles.workspaceSection, styles.mt6]}>
+                <View style={[styles.mt6, isMobileScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     {!hasVBA && <WorkspaceTravelNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceTravelVBAView />}
                 </View>

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3305,7 +3305,6 @@ const styles = (theme: ThemeColors) =>
             borderRadius: variables.componentBorderRadiusCard,
             marginBottom: 20,
             marginHorizontal: 16,
-            padding: 20,
             width: 'auto',
             textAlign: 'left',
         },
@@ -4196,6 +4195,10 @@ const styles = (theme: ThemeColors) =>
 
         workspaceSection: {
             maxWidth: variables.workspaceSectionMaxWidth,
+        },
+
+        workspaceSectionMobile: {
+            width: '100%',
             alignSelf: 'center',
         },
 

diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
@@ -309,6 +309,10 @@ export default {
         padding: 20,
     },
 
+    p8: {
+        padding: 32,
+    },
+
     p9: {
         padding: 36,
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -309,6 +309,10 @@ export default { @@
             padding: 20,
         },
+        p8: {
+            padding: 32,
+        },
         p9: {
             padding: 36,
         },
@@ Expand Down @@