Merge pull request #3854 from Expensify/vit-updateEditPhotoButton

Update the height of Edit profile button
Expensify · Jul 2, 2021 · 5653309 · 5653309
2 parents 039b671 + 3fad24e
commit 5653309
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -12,6 +12,9 @@ const propTypes = {
     /** The text for the button label */
     text: PropTypes.string,
 
+    /** Small sized button */
+    small: PropTypes.bool,
+
     /** Large sized button */
     large: PropTypes.bool,
 
@@ -53,6 +56,7 @@ const defaultProps = {
     text: '',
     isLoading: false,
     isDisabled: false,
+    small: false,
     large: false,
     onPress: () => {},
     style: [],
@@ -81,6 +85,7 @@ const Button = (props) => {
                     selectable={false}
                     style={[
                         styles.buttonText,
+                        props.small && styles.buttonSmallText,
                         props.large && styles.buttonLargeText,
                         props.success && styles.buttonSuccessText,
                         props.danger && styles.buttonDangerText,
@@ -105,6 +110,7 @@ const Button = (props) => {
                     shouldDim={pressed}
                     style={[
                         styles.button,
+                        props.small ? styles.buttonSmall : undefined,
                         props.large ? styles.buttonLarge : undefined,
                         props.success ? styles.buttonSuccess : undefined,
                         props.danger ? styles.buttonDanger : undefined,

diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
@@ -279,13 +279,20 @@ class ProfilePage extends Component {
                             {({openPicker}) => (
                                 <>
                                     <Button
+                                        small
                                         style={[styles.alignSelfCenter, styles.mt3]}
                                         onPress={() => this.setState({isEditPhotoMenuVisible: true})}
                                         ContentComponent={() => (
                                             <View style={[styles.flexRow]}>
                                                 <Icon src={DownArrow} />
                                                 <View style={styles.justifyContentCenter}>
-                                                    <Text style={[styles.headerText, styles.ml2]}>
+                                                    <Text
+                                                        style={[
+                                                            styles.headerText,
+                                                            styles.buttonSmallText,
+                                                            styles.ml2,
+                                                        ]}
+                                                    >
                                                         {this.props.translate('profilePage.editPhoto')}
                                                     </Text>
                                                 </View>

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -170,17 +170,17 @@ const styles = {
         paddingLeft: 12,
     },
 
-    buttonLargeText: {
-        fontSize: variables.fontSizeLarge,
-        lineHeight: 18,
+    buttonSmallText: {
+        fontSize: variables.fontSizeSmall,
+        lineHeight: 16,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         textAlign: 'center',
     },
 
-    buttonSmallText: {
-        fontSize: variables.fontSizeSmall,
-        lineHeight: 16,
+    buttonLargeText: {
+        fontSize: variables.fontSizeLarge,
+        lineHeight: 18,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         textAlign: 'center',