Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix settings page / status bugs #27482

Merged
merged 14 commits into from
Nov 9, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions src/pages/settings/Profile/CustomStatus/StatusPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import Text from '@components/Text';
import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
import withLocalize from '@components/withLocalize';
import useLocalize from '@hooks/useLocalize';
import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
Expand All @@ -26,7 +25,7 @@ const propTypes = {
};

function StatusPage({draftStatus, currentUserPersonalDetails}) {
const localize = useLocalize();
const {translate} = useLocalize();
const currentUserEmojiCode = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
const currentUserStatusText = lodashGet(currentUserPersonalDetails, 'status.text', '');
const draftEmojiCode = lodashGet(draftStatus, 'emojiCode');
Expand Down Expand Up @@ -62,18 +61,18 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
hasDraftStatus ? (
<Button
success
text={localize.translate('statusPage.save')}
text={translate('statusPage.save')}
onPress={updateStatus}
/>
) : null,
[hasDraftStatus, localize, updateStatus],
[hasDraftStatus, translate, updateStatus],
);

useEffect(() => () => User.clearDraftCustomStatus(), []);

return (
<HeaderPageLayout
title={localize.translate('statusPage.status')}
title={translate('statusPage.status')}
onBackButtonPress={navigateBackToSettingsPage}
headerContent={
<MobileBackgroundImage
Expand All @@ -86,20 +85,20 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
footer={footerComponent}
>
<View style={[styles.mh5, styles.mb5]}>
<Text style={[styles.textHeadline]}>{localize.translate('statusPage.setStatusTitle')}</Text>
<Text style={[styles.textNormal, styles.mt2]}>{localize.translate('statusPage.statusExplanation')}</Text>
<Text style={[styles.textHeadline]}>{translate('statusPage.setStatusTitle')}</Text>
<Text style={[styles.textNormal, styles.mt2]}>{translate('statusPage.statusExplanation')}</Text>
</View>
<MenuItemWithTopDescription
title={customStatus}
description={localize.translate('statusPage.status')}
description={translate('statusPage.status')}
shouldShowRightIcon
inputID="test"
onPress={() => Navigation.navigate(ROUTES.SETTINGS_STATUS_SET)}
/>

{(!!currentUserEmojiCode || !!currentUserStatusText) && (
<MenuItem
title={localize.translate('statusPage.clearStatus')}
title={translate('statusPage.clearStatus')}
titleStyle={styles.ml0}
icon={Expensicons.Close}
onPress={clearStatus}
Expand All @@ -115,7 +114,6 @@ StatusPage.displayName = 'StatusPage';
StatusPage.propTypes = propTypes;

export default compose(
withLocalize,
withCurrentUserPersonalDetails,
withOnyx({
draftStatus: {
Expand Down
4 changes: 4 additions & 0 deletions src/styles/themes/default.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ const darkTheme = {
mapAttributionText: colors.black,
white: colors.white,

// Adding a color here will animate the status bar to the right color when the screen is opened.
// Note that it needs to be a screen name, not a route url.
// The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
// The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
PAGE_BACKGROUND_COLORS: {
[SCREENS.HOME]: colors.darkHighlightBackground,
[SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
Expand Down
4 changes: 4 additions & 0 deletions src/styles/themes/light.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ const lightTheme = {
mapAttributionText: colors.black,
white: colors.white,

// Adding a color here will animate the status bar to the right color when the screen is opened.
// Note that it needs to be a screen name, not a route url.
// The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
// The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
PAGE_BACKGROUND_COLORS: {
[SCREENS.HOME]: colors.lightHighlightBackground,
[SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
Expand Down
Loading