diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 924d81a2bf37..e2ad3bed1b78 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -438,9 +438,11 @@ class EmojiPickerMenu extends Component { if (header) { return ( - - {this.props.translate(`emojiPicker.headers.${code}`)} - + + + {this.props.translate(`emojiPicker.headers.${code}`)} + + ); } diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index 754ed20fd766..d70eed98800b 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -107,9 +107,11 @@ class EmojiPickerMenu extends Component { if (item.header) { return ( - - {this.props.translate(`emojiPicker.headers.${item.code}`)} - + + + {this.props.translate(`emojiPicker.headers.${item.code}`)} + + ); } diff --git a/src/styles/styles.js b/src/styles/styles.js index ff9dd1190130..c61acf2ff812 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1455,12 +1455,15 @@ const styles = { height: 240, }, - emojiHeaderStyle: { + emojiHeaderContainer: { backgroundColor: themeColors.componentBG, - width: '100%', - height: 32, display: 'flex', - alignItems: 'center', + height: CONST.EMOJI_PICKER_HEADER_HEIGHT, + justifyContent: 'center', + width: '100%', + }, + + emojiHeaderStyle: { fontFamily: fontFamily.EXP_NEUE_BOLD, fontWeight: fontWeightBold, color: themeColors.heading,