Merge pull request #24358 from hungvu193/fix-22766

Update hover color for lounge access icon

src/components/Icon/Expensicons.js

@@ -64,7 +64,7 @@ import Link from '../../../assets/images/link.svg';
 import LinkCopy from '../../../assets/images/link-copy.svg';
 import Location from '../../../assets/images/location.svg';
 import Lock from '../../../assets/images/lock.svg';
-import LoungeAccess from '../../../assets/images/lounge-access.svg';
+import LoungeAccess from './svgs/LoungeAccessIcon';
 import Luggage from '../../../assets/images/luggage.svg';
 import MagnifyingGlass from '../../../assets/images/magnifying-glass.svg';
 import Mail from '../../../assets/images/mail.svg';

src/components/Icon/index.js

@@ -1,9 +1,9 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import variables from '../../styles/variables';
+import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import IconWrapperStyles from './IconWrapperStyles';
 
@@ -26,6 +26,12 @@ const propTypes = {
     /** Is inline icon */
     inline: PropTypes.bool,
 
+    /** Is icon hovered */
+    hovered: PropTypes.bool,
+
+    /** Is icon pressed */
+    pressed: PropTypes.bool,
+
     // eslint-disable-next-line react/forbid-prop-types
     additionalStyles: PropTypes.arrayOf(PropTypes.object),
 };
@@ -37,6 +43,8 @@ const defaultProps = {
     small: false,
     inline: false,
     additionalStyles: [],
+    hovered: false,
+    pressed: false,
 };
 
 // We must use a class component to create an animatable component with the Animated API
@@ -58,6 +66,8 @@ class Icon extends PureComponent {
                             width={width}
                             height={height}
                             fill={this.props.fill}
+                            hovered={this.props.hovered.toString()}
+                            pressed={this.props.pressed.toString()}
                         />
                     </View>
                 </View>
@@ -73,6 +83,8 @@ class Icon extends PureComponent {
                     width={width}
                     height={height}
                     fill={this.props.fill}
+                    hovered={this.props.hovered.toString()}
+                    pressed={this.props.pressed.toString()}
                 />
             </View>
         );

src/components/Icon/svgs/LoungeAccessIcon.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Svg, {G, Path, Polygon} from 'react-native-svg';
+import PropTypes from 'prop-types';
+import themeColors from '../../../styles/themes/default';
+
+const propTypes = {
+    /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */
+    fill: PropTypes.string,
+
+    /** Is icon hovered */
+    hovered: PropTypes.string,
+
+    /** Is icon pressed */
+    pressed: PropTypes.string,
+};
+
+const defaultProps = {
+    fill: themeColors.icon,
+    hovered: 'false',
+    pressed: 'false',
+};
+
+function LoungeAccessIcon(props) {
+    return (
+        <Svg
+            id="Layer_1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            x="0px"
+            y="0px"
+            viewBox="0 0 40 40"
+            style={{
+                enableBackground: 'new 0 0 40 40',
+            }}
+            xmlSpace="preserve"
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        >
+            <G>
+                <Path
+                    className="st0"
+                    d="M11,24v-2c0-1.1,0.9-2,2-2s2,0.9,2,2c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1c0-1.1,0.9-2,2-2s2,0.9,2,2v2 c0,0.4-0.1,0.8-0.3,1.1C28.1,26,27,26.9,27,28h-2v-2H15v2h-2c0-1.1-1.1-2-1.7-2.9C11.1,24.8,11,24.4,11,24z"
+                />
+            </G>
+            <G>
+                <Path
+                    fill={props.hovered === 'true' || props.pressed === 'true' ? props.fill : themeColors.starDefaultBG}
+                    className="st1"
+                    d="M31,9.8c-0.1-0.2-0.2-0.4-0.5-0.4h-2.1l-0.8-2C27.4,7,27.1,7,27,7c-0.1,0-0.4,0-0.6,0.4l-0.8,1.9h-2.1 c-0.4,0-0.5,0.4-0.5,0.4c0,0.1-0.1,0.4,0.1,0.6l1.6,1.8l-0.6,1.9c-0.1,0.3,0.1,0.5,0.2,0.7c0.1,0,0.3,0.2,0.7,0.1l2-1.1l2,1.2 c0.3,0.2,0.6,0,0.7-0.1c0.1-0.1,0.3-0.3,0.2-0.7l-0.6-2l1.5-1.7C31,10.3,31,10,31,9.8z"
+                />
+                <Polygon
+                    className="st1"
+                    points="28.5,7 28.5,7 28.5,7  "
+                />
+            </G>
+            <G>
+                <Path
+                    className="st0"
+                    d="M23.1,16.3c-0.8-0.6-1.2-1.7-1-2.7l0-0.1l0.2-0.5H16c-1.1,0-2,0.9-2,2v3h0.6c1.3,0,2.4,1.1,2.4,2.4 c0,0.3,0.3,0.6,0.6,0.6h4.8c0.3,0,0.6-0.3,0.6-0.6c0-1.3,1.1-2.4,2.4-2.4H26v-1.4C25.1,17.1,24,17,23.1,16.3z"
+                />
+            </G>
+        </Svg>
+    );
+}
+
+LoungeAccessIcon.displayName = 'LoungeAccessIcon';
+LoungeAccessIcon.propTypes = propTypes;
+LoungeAccessIcon.defaultProps = defaultProps;
+
+export default LoungeAccessIcon;

src/components/MenuItem.js

@@ -163,6 +163,8 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize)]}>
                                             {props.iconType === CONST.ICON_TYPE_ICON && (
                                                 <Icon
+                                                    hovered={isHovered}
+                                                    pressed={pressed}
                                                     src={props.icon}
                                                     width={props.iconWidth}
                                                     height={props.iconHeight}

src/styles/themes/default.js

@@ -78,6 +78,7 @@ const darkTheme = {
     mentionBG: colors.blue600,
     ourMentionText: colors.green100,
     ourMentionBG: colors.green600,
+    starDefaultBG: 'rgb(254, 228, 94)',
 };
 
 darkTheme.PAGE_BACKGROUND_COLORS = {