Open IuliiaHerets opened 17 hours ago
github-actions[bot]
commented
17 hours ago :wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:
IuliiaHerets
commented
17 hours ago 
melvin-bot[bot]
commented
11 hours ago Triggered auto assignment to @MarioExpensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.
melvin-bot[bot]
commented
11 hours ago 💬 A slack conversation has been started in #expensify-open-source
github-actions[bot]
commented
11 hours ago :wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:
MarioExpensify
commented
11 hours ago Hardly a deploy blocker. Demoting it.
mohammedmatar
commented
10 hours ago The problem we're addressing is that the navigation bar color on the ReferralDetailsPage changes unexpectedly when the device goes offline. This creates an inconsistent user experience and doesn't align with the intended design of the page.
The root cause is that the navigation bar color is not being set explicitly for offline scenarios. When the device goes offline, it seems that a default or fallback styling is applied to the navigation bar, causing the unexpected color change.
To solve this issue, I've made the following changes:
// ReferralDetailsPage.tsx
headerContainerStyles={[
styles.staticHeaderImage,
styles.justifyContentEnd,
StyleUtils.getBackgroundColorStyle(colors.pink800)
]}.// themes/light.ts
backgroundColor: colors.productLight100
}// themes/dark.ts
backgroundColor: colors.productDark100
}These changes ensure that the header background color is explicitly set to pink800, while the overall page background is set to productLight100[light theme] & colors.productDark100[dark theme]. This should maintain the correct color scheme even when the device goes offline.
To prevent reintroducing this issue in the future, we should implement the following automated tests:
I considered using the StatusBar component and useNavBarSettings hook to manage the navigation bar color independently. However, the current solution using headerContainerStyles and updating the theme configuration is more in line with the existing codebase structure and doesn't require additional hooks or components.
The implemented solution maintains consistency with how other pages in the app handle background colors and should resolve the issue of unexpected color changes when offline.
melvin-bot[bot]
commented
10 hours ago Job added to Upwork: https://www.upwork.com/jobs/~021864014658060063799
melvin-bot[bot]
commented
10 hours ago Triggered auto assignment to Contributor-plus team member for initial proposal review - @dominictb (External)
Krishna2323
commented
4 hours ago Edited by proposal-police: This proposal was edited at 2024-12-03 23:56:41 UTC.
Android-Navigation bar shows purple color on "Submit an expense,get $250" page in offline mode
CustomStatusBarAndBackground we have a logic to change the status bar color if the page has a theme color.
https://github.com/Expensify/App/blob/acf418ced84cc7066476d8b7cce7fd52b8397f01/src/components/CustomStatusBarAndBackground/index.tsx#L82-L85
backgroundColor & statusBarStyle to the default value as most of the pages.
https://github.com/Expensify/App/blob/acf418ced84cc7066476d8b7cce7fd52b8397f01/src/styles/theme/themes/light.ts#L144-L147
https://github.com/Expensify/App/blob/acf418ced84cc7066476d8b7cce7fd52b8397f01/src/styles/theme/themes/dark.ts#L144-L147ReferralDetailsPage to use Section instead of creating custom headers and styles for icon, title and subtitle. This will make it consistent will other similar pages like troubleshoot page.
https://github.com/Expensify/App/blob/acf418ced84cc7066476d8b7cce7fd52b8397f01/src/pages/ReferralDetailsPage.tsx#L53-L100
<HeaderPageLayout
title={translate('common.referral')}
backgroundColor={theme.PAGE_THEMES[SCREENS.REFERRAL_DETAILS].backgroundColor}
testID={ReferralDetailsPage.displayName}
onBackButtonPress={() => {
if (backTo) {
Navigation.goBack(backTo as Route);
return;
}
Navigation.goBack();
}}
>
<Section
icon={PaymentHands}
title={contentHeader}
subtitle={contentBody}
iconHeight={232}
iconWidth={589}
isCentralPane
titleStyles={[styles.textHeadline, styles.mv2]}
iconContainerStyles={[styles.staticHeaderImage, styles.justifyContentCenter, {backgroundColor: colors.pink800}, styles.flex1, styles.alignItemsEnd]}
containerStyles={[styles.pt0, styles.overflowHidden]}
cardLayout={CARD_LAYOUT.ICON_ON_TOP}
subtitleStyles={styles.mb6}
>
{!shouldShowClipboard && (
<View style={[styles.sectionMenuItemTopDescription, styles.ph3]}>
<ContextMenuItem
isAnonymousAction
text={translate('referralProgram.copyReferralLink')}
icon={Expensicons.Copy}
successIcon={Expensicons.Checkmark}
successText={translate('qrCodes.copied')}
onPress={() => Clipboard.setString(referralLink)}
/>
</View>
)}
<MenuItem
wrapperStyle={[styles.mb4, styles.sectionMenuItemTopDescription]}
ref={popoverAnchor}
title={translate('requestorStep.learnMore')}
icon={Expensicons.QuestionMark}
shouldShowRightIcon
iconRight={Expensicons.NewWindow}
disabled={isExecuting}
shouldBlockSelection
onPress={singleExecution(() => Link.openExternalLink(CONST.REFERRAL_PROGRAM.LEARN_MORE_LINK))}
onSecondaryInteraction={(e) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, CONST.REFERRAL_PROGRAM.LEARN_MORE_LINK, popoverAnchor.current)}
/>
</Section>
</HeaderPageLayout>@Expensify/design, could you please help confirm the expected behavior? Thanks!
| Current | If we only fix status bar | Using section component |
|---|---|---|
Krishna2323
commented
4 hours ago Sorry for comments above, I misunderstood the issue.
nkdengineer
commented
47 minutes ago Edited by proposal-police: This proposal was edited at 2024-12-04 04:03:37 UTC.
Navigation bar shows purple color on "Submit an expense,get $250" page in offline mode
When the user is offline, isSafeAreaBottomPaddingApplied becomes true
Which makes the wrap view have a padding-bottom is the safe area padding-bottom https://github.com/Expensify/App/blob/0eec30d00c131d3f9caacf1de6afd33c83bc351e/src/components/ScreenWrapper.tsx#L273
Then purple color is displayed at the bottom because the wrap view's background color
We should not apply the padding-bottom to the wrap view here of includeSafeAreaPaddingBottom is false
isSafeAreaBottomPaddingApplied and replace this with includeSafeAreaPaddingBottomincludeSafeAreaPaddingBottom we need to add the safeAreaPaddingBottomStyle to the container of the offline indicator<OfflineIndicator
style={[offlineIndicatorStyle]}
containerStyles={
includeSafeAreaPaddingBottom
? []
: [styles.offlineIndicatorMobile, {paddingBottom: paddingBottom + 30}]
}
/>NA
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Version Number: 9.0.70-0 Reproducible in staging?: Y Reproducible in production?: N If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y Email or phone of affected tester (no customers): applausetester+kh1311020@applause.expensifail.com Issue reported by: Applause Internal Team
Action Performed:
Precondition:
Expected Result:
The device navigation bar will not have purple color.
Actual Result:
The device navigation bar shows purple color on "Submit an expense, get $250" page.
Workaround:
Unknown
Platforms:
Screenshots/Videos
https://github.com/user-attachments/assets/66b944f1-4b26-49d1-a820-bfbf9ba1ca36
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @dominictb