diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index 3aaf84121fe7..b3f76aa21d47 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; @@ -15,23 +15,51 @@ import Text from './Text'; type ConnectionLayoutProps = { /** Used to set the testID for tests */ displayName: string; + /** Header title for the connection */ headerTitle: TranslationPaths; + /** React nodes that will be shown */ children?: React.ReactNode; + /** Title of the connection component */ title?: TranslationPaths; + /** Subtitle of the connection */ subtitle?: TranslationPaths; + /** The current policyID */ policyID: string; + /** Defines which types of access should be verified */ accessVariants?: PolicyAccessVariant[]; + /** The current feature name that the user tries to get access to */ featureName?: PolicyFeatureName; + + /** The content container style of Scrollview */ + contentContainerStyle?: StyleProp | undefined; + + /** Style of the title text */ + titleStyle?: StyleProp | undefined; + + /** Style of the subtitle text */ + subTitleStyle?: StyleProp | undefined; }; -function ConnectionLayout({displayName, headerTitle, children, title, subtitle, policyID, accessVariants, featureName}: ConnectionLayoutProps) { +function ConnectionLayout({ + displayName, + headerTitle, + children, + title, + subtitle, + policyID, + accessVariants, + featureName, + contentContainerStyle, + titleStyle, + subTitleStyle, +}: ConnectionLayoutProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -50,13 +78,9 @@ function ConnectionLayout({displayName, headerTitle, children, title, subtitle, title={translate(headerTitle)} onBackButtonPress={() => Navigation.goBack()} /> - - {title && ( - - {translate(title)} - - )} - {subtitle && {translate(subtitle)}} + + {title && {translate(title)}} + {subtitle && {translate(subtitle)}} {children} diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx index 87bede34f3cb..7c88c10fdc6c 100644 --- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx +++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx @@ -167,7 +167,8 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting interactive: false, wrapperStyle: [styles.sectionMenuItemTopDescription], shouldShowRightComponent: true, - title: integrationData?.title, + title: 'integrationData?.title', + description: isSyncInProgress ? translate('workspace.accounting.connections.syncStageName', connectionSyncProgress.stageInProgress) : translate('workspace.accounting.lastSync'), @@ -201,6 +202,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting iconRight: Expensicons.ArrowRight, title: currentXeroOrganization?.name, wrapperStyle: [styles.sectionMenuItemTopDescription], + titleStyle: styles.fontWeightNormal, shouldShowRightIcon: tenants.length > 1, shouldShowDescriptionOnTop: true, onPress: () => { diff --git a/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx index f781769adabf..87892ce60cef 100644 --- a/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx +++ b/src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx @@ -28,6 +28,7 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} policyID={policyID} featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED} + contentContainerStyle={[styles.pb2, styles.ph5]} >