Merge pull request #5253 from mananjadhav/feat/emoji-skintone

Skintone Emoji Border Radius and Size
Expensify · Oct 4, 2021 · 625665a · 625665a
2 parents 817240d + 6edfce8
commit 625665a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 29 deletions.
diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js
@@ -18,11 +18,6 @@ const propTypes = {
 
     /** Whether this menu item is currently highlighted or not */
     isHighlighted: PropTypes.bool,
-
-    /** Override default emojiItem style */
-    // eslint-disable-next-line react/forbid-prop-types
-    emojiItemStyle: PropTypes.any,
-
 };
 
 const EmojiPickerMenuItem = props => (
@@ -34,7 +29,7 @@ const EmojiPickerMenuItem = props => (
             styles.pv1,
             getButtonBackgroundColorStyle(getButtonState(false, pressed)),
             props.isHighlighted ? styles.emojiItemHighlighted : {},
-            props.emojiItemStyle ? props.emojiItemStyle : styles.emojiItem,
+            styles.emojiItem,
         ])}
     >
         <Hoverable onHoverIn={props.onHover}>
@@ -50,7 +45,6 @@ EmojiPickerMenuItem.displayName = 'EmojiPickerMenuItem';
 EmojiPickerMenuItem.defaultProps = {
     isHighlighted: false,
     onHover: () => {},
-    emojiItemStyle: undefined,
 };
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList

diff --git a/src/pages/home/report/EmojiSkinToneList.js b/src/pages/home/report/EmojiSkinToneList.js
@@ -45,14 +45,14 @@ class EmojiSkinToneList extends Component {
      * @param {object} skinToneEmoji
      */
     updateSelectedSkinTone(skinToneEmoji) {
-        this.setState(prev => ({isSkinToneListVisible: !prev.isSkinToneListVisible}));
+        this.setState(prev => ({isSkinToneListVisible: !prev.isSkinToneListVisible, highlightedIndex: skinToneEmoji.skinTone}));
         this.props.updatePreferredSkinTone(skinToneEmoji.skinTone);
     }
 
     render() {
         const selectedEmoji = getSkinToneEmojiFromIndex(this.props.preferredSkinTone);
         return (
-            <View style={[styles.flexRow, styles.p1, styles.ph3]}>
+            <View style={[styles.flexRow, styles.p1, styles.ph4]}>
                 {
                     !this.state.isSkinToneListVisible && (
                         <Pressable
@@ -68,7 +68,7 @@ class EmojiSkinToneList extends Component {
                                 styles.alignItemsCenter,
                             ]}
                         >
-                            <Text style={[styles.emojiText, styles.ph1]}>
+                            <Text style={[styles.emojiText, styles.ph2, styles.emojiItem]}>
                                 {selectedEmoji.code}
                             </Text>
                             <Text style={[styles.emojiSkinToneTitle]}>
@@ -79,21 +79,19 @@ class EmojiSkinToneList extends Component {
                 }
                 {
                     this.state.isSkinToneListVisible && (
-                        <View>
-                            <View style={[styles.flexRow]}>
-                                {
-                                    skinTones.map(skinToneEmoji => (
-                                        <EmojiPickerMenuItem
-                                            onPress={() => this.updateSelectedSkinTone(skinToneEmoji)}
-                                            onHover={() => this.setState({highlightedIndex: skinToneEmoji.skinTone})}
-                                            key={skinToneEmoji.code}
-                                            emojiItemStyle={styles.emojiSkinToneItem}
-                                            emoji={skinToneEmoji.code}
-                                            isHighlighted={skinToneEmoji.skinTone === this.state.highlightedIndex}
-                                        />
-                                    ))
+
+                        <View style={[styles.flexRow, styles.flex1]}>
+                            {
+                                skinTones.map(skinToneEmoji => (
+                                    <EmojiPickerMenuItem
+                                        onPress={() => this.updateSelectedSkinTone(skinToneEmoji)}
+                                        onHover={() => this.setState({highlightedIndex: skinToneEmoji.skinTone})}
+                                        key={skinToneEmoji.code}
+                                        emoji={skinToneEmoji.code}
+                                        isHighlighted={skinToneEmoji.skinTone === this.state.highlightedIndex}
+                                    />
+                                ))
                                 }
-                            </View>
                         </View>
                     )
                 }

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1192,11 +1192,6 @@ const styles = {
         borderRadius: 8,
     },
 
-    emojiSkinToneItem: {
-        width: 'auto',
-        ...spacing.ph1,
-    },
-
     emojiItemHighlighted: {
         transition: '0.2s ease',
         backgroundColor: themeColors.buttonDefaultBG,