From 7845e2a040363f0dfe900f19a443a2b9b192357c Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 8 Jan 2024 12:34:46 +0100 Subject: [PATCH] Adjusted padding; max width; alignment left --- src/components/Section/index.js | 4 ++- src/components/WalletSection.tsx | 36 ------------------- src/hooks/useWindowDimensions/index.native.ts | 2 ++ src/hooks/useWindowDimensions/index.ts | 2 ++ src/hooks/useWindowDimensions/types.ts | 1 + .../settings/Wallet/WalletPage/WalletPage.js | 18 +++++----- .../bills/WorkspaceBillsNoVBAView.js | 1 - .../workspace/bills/WorkspaceBillsPage.js | 5 ++- src/pages/workspace/card/WorkspaceCardPage.js | 5 ++- .../invoices/WorkspaceInvoicesNoVBAView.js | 1 - .../invoices/WorkspaceInvoicesPage.js | 5 ++- .../reimburse/WorkspaceReimburseView.js | 4 ++- .../workspace/travel/WorkspaceTravelPage.js | 5 ++- src/styles/index.ts | 5 ++- src/styles/utils/spacing.ts | 4 +++ 15 files changed, 44 insertions(+), 54 deletions(-) delete mode 100644 src/components/WalletSection.tsx diff --git a/src/components/Section/index.js b/src/components/Section/index.js index 50576abef025..412ccdfd6542 100644 --- 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 ( <> - + {cardLayout === CARD_LAYOUT.ICON_ON_TOP && ( - {children} - - ); -} - -WalletSection.displayName = 'WalletSection'; - -export default WalletSection; diff --git a/src/hooks/useWindowDimensions/index.native.ts b/src/hooks/useWindowDimensions/index.native.ts index 5d556234aeb9..3bb361ec5dc3 100644 --- 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 index b0a29e9f901b..e4c261e59f18 100644 --- 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 index 9b59d4968935..7411c845c70a 100644 --- 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 index 437aabc291ab..8e3fb262e4f2 100644 --- 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} /> - + {hasWallet && ( - - + )} {hasAssignedCard ? ( - {}} /> - + ) : null} - - + diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js index 8211f70163d5..99e95620df15 100644 --- a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js +++ b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js @@ -25,7 +25,6 @@ function WorkspaceBillsNoVBAView(props) {
{props.translate('workspace.bills.unlockNoVBACopy')} diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js index a3cb9ad18ea8..a8dd5f850d27 100644 --- 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 ( {(hasVBA, policyID) => ( - + {!hasVBA && } {hasVBA && } diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js index 2e2b6be80699..3285d1a69770 100644 --- 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 ( {(hasVBA, policyID, isUsingECard) => ( - + {!hasVBA && } {hasVBA && !isUsingECard && } diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js index 25a97ac93442..2e5408ce8031 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js +++ b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js @@ -25,7 +25,6 @@ function WorkspaceInvoicesNoVBAView(props) {
{props.translate('workspace.invoices.unlockNoVBACopy')} diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js index c63ce185fd48..753a49a4d6e8 100644 --- 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 ( {(hasVBA, policyID) => ( - + {!hasVBA && } {hasVBA && } diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 678d03665b62..718cc5bebdfb 100644 --- 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 ( - +
{(hasVBA, policyID) => ( - + {!hasVBA && } {hasVBA && } diff --git a/src/styles/index.ts b/src/styles/index.ts index 83e268073f73..d51d99e995a9 100644 --- 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 index 27d70529dd8a..3575292561e2 100644 --- 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, },