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.

Sign up for GitHub

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 menu item padding #14855

Merged
merged 10 commits into from
Feb 27, 2023
Merged

Fix menu item padding #14855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
94b5782
Add left margin in MenuItem only when an icon is set
cristipaval Feb 6, 2023
c9af9f9
Fix left margin in Preferences page.
cristipaval Feb 6, 2023
c009652
Fix left margin in TimezoneInitialPage
cristipaval Feb 6, 2023
87d593f
Fix back button in header bar.
cristipaval Feb 8, 2023
ac0745d
Fix toggle positioning in TimezoneInitialPage
cristipaval Feb 8, 2023
e2864b2
Merge remote-tracking branch 'origin/main' into cristi_fix-menu-item-…
cristipaval Feb 8, 2023
e2c7371
Merge remote-tracking branch 'origin/main' into cristi_fix-menu-item-…
cristipaval Feb 17, 2023
51e2015
Render back button in a 40px size square to be easy pressable
cristipaval Feb 17, 2023
b7093ee
Merge remote-tracking branch 'origin/main' into cristi_fix-menu-item-…
cristipaval Feb 27, 2023
0ef7be4
Fix regression in PersonalDetailsInitialPage
cristipaval Feb 27, 2023
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
4 changes: 1 addition & 3 deletions src/components/HeaderWithCloseButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ class HeaderWithCloseButton extends Component {

render() {
return (
<View style={[styles.headerBar, this.props.shouldShowBorderBottom && styles.borderBottom]}>
<View style={[styles.headerBar, this.props.shouldShowBorderBottom && styles.borderBottom, this.props.shouldShowBackButton && styles.pl2]}>
<View style={[
styles.dFlex,
styles.flexRow,
Expand All @@ -139,7 +139,6 @@ class HeaderWithCloseButton extends Component {
]}
>
{this.props.shouldShowBackButton && (
<View style={[styles.mr2]}>
<Tooltip text={this.props.translate('common.back')}>
<Pressable
onPress={() => {
Expand All @@ -153,7 +152,6 @@ class HeaderWithCloseButton extends Component {
<Icon src={Expensicons.BackArrow} />
</Pressable>
</Tooltip>
</View>
)}
<Header
title={this.props.title}
Expand Down
9 changes: 7 additions & 2 deletions src/components/MenuItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,16 @@ const defaultProps = {
const MenuItem = (props) => {
const titleTextStyle = StyleUtils.combineStyles([
styles.popoverMenuText,
styles.ml3,
(props.icon ? styles.ml3 : undefined),
(props.shouldShowBasicTitle ? undefined : styles.textStrong),
(props.interactive && props.disabled ? {...styles.disabledText, ...styles.userSelectNone} : undefined),
], props.style);
const descriptionTextStyle = StyleUtils.combineStyles([styles.textLabelSupporting, styles.ml3, styles.breakAll, styles.lineHeightNormal], props.style);
const descriptionTextStyle = StyleUtils.combineStyles([
styles.textLabelSupporting,
(props.icon ? styles.ml3 : undefined),
styles.breakAll,
styles.lineHeightNormal,
], props.style);

return (
<Pressable
Expand Down
6 changes: 3 additions & 3 deletions src/pages/settings/Preferences/PreferencesPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ const PreferencesPage = (props) => {
/>
<ScrollView style={[styles.flex1, styles.mt3]}>
<View style={styles.mb6}>
<Text style={[styles.textLabelSupporting, styles.mb2, styles.ml8, styles.mr8]} numberOfLines={1}>
<Text style={[styles.textLabelSupporting, styles.mb2, styles.ml5, styles.mr8]} numberOfLines={1}>
{props.translate('common.notifications')}
</Text>
<View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.mh8]}>
<View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.ml5, styles.mr8]}>
<View style={styles.flex4}>
<Text>
{props.translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
Expand All @@ -87,7 +87,7 @@ const PreferencesPage = (props) => {
description={props.translate('languagePage.language')}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
/>
{shouldShowTestToolMenu && <View style={[styles.mh8, styles.mt6]}><TestToolMenu /></View>}
{shouldShowTestToolMenu && <View style={[styles.ml5, styles.mr8, styles.mt6]}><TestToolMenu /></View>}
</View>
</ScrollView>
</ScreenWrapper>
Expand Down
3 changes: 0 additions & 3 deletions src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,21 +104,18 @@ const PersonalDetailsInitialPage = (props) => {
title={legalName}
description={props.translate('privatePersonalDetails.legalName')}
shouldShowRightIcon
wrapperStyle={[styles.ph2]}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME)}
/>
<MenuItemWithTopDescription
title={privateDetails.dob || ''}
description={props.translate('common.dob')}
shouldShowRightIcon
wrapperStyle={[styles.ph2]}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH)}
/>
<MenuItemWithTopDescription
title={getFormattedAddress()}
description={props.translate('privatePersonalDetails.homeAddress')}
shouldShowRightIcon
wrapperStyle={[styles.ph2]}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
/>
</View>
Expand Down
3 changes: 1 addition & 2 deletions src/pages/settings/Profile/TimezoneInitialPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const TimezoneInitialPage = (props) => {
<Text style={[styles.mb5]}>
{props.translate('timezonePage.isShownOnProfile')}
</Text>
<View style={[styles.flexRow, styles.mb5, styles.alignItemsCenter, styles.justifyContentBetween]}>
<View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
<Text>
{props.translate('timezonePage.getLocationAutomatically')}
</Text>
Expand All @@ -68,7 +68,6 @@ const TimezoneInitialPage = (props) => {
title={timezone.selected}
description={props.translate('timezonePage.timezone')}
shouldShowRightIcon
wrapperStyle={[styles.ph2, styles.mb3]}
disabled={timezone.automatic}
onPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_SELECT)}
/>
Expand Down