Merge pull request #6271 from sidferreira/sidferreira/issue_5873

 Improve inline icons - Address 5873

Author: iwiznia

src/components/CopyTextToClipboard.js

@@ -5,6 +5,8 @@ import * as Expensicons from './Icon/Expensicons';
 import Clipboard from '../libs/Clipboard';
 import Icon from './Icon';
 import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import variables from '../styles/variables';
 
 const propTypes = {
     /** The text to display and copy to the clipboard */
@@ -51,9 +53,13 @@ class CopyTextToClipboard extends React.Component {
                 style={[styles.flexRow, styles.cursorPointer]}
             >
                 <Text style={this.props.textStyles}>{this.props.text}</Text>
-                {this.state.showCheckmark
-                    ? <Icon src={Expensicons.Checkmark} height={14} width={14} />
-                    : <Icon src={Expensicons.Clipboard} height={14} width={14} />}
+                <Icon
+                    src={this.state.showCheckmark ? Expensicons.Checkmark : Expensicons.Clipboard}
+                    fill={this.state.showCheckmark ? themeColors.iconSuccessFill : themeColors.icon}
+                    width={variables.iconSizeSmall}
+                    height={variables.iconSizeSmall}
+                    inline
+                />
             </Text>
         );
     }

src/components/Icon/IconWrapperStyles/index.ios.js

@@ -0,0 +1 @@
+export default {top: 1};

src/components/Icon/IconWrapperStyles/index.js

@@ -0,0 +1 @@
+export default {top: 2};

src/components/Icon/index.js

@@ -1,7 +1,11 @@
 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 * as StyleUtils from '../../styles/StyleUtils';
+import IconWrapperStyles from './IconWrapperStyles';
 
 const propTypes = {
     /** The asset to render. */
@@ -18,13 +22,17 @@ const propTypes = {
 
     /** Is small icon */
     small: PropTypes.bool,
+
+    /** Is inline icon */
+    inline: PropTypes.bool,
 };
 
 const defaultProps = {
     width: variables.iconSizeNormal,
     height: variables.iconSizeNormal,
     fill: themeColors.icon,
     small: false,
+    inline: false,
 };
 
 // We must use a class component to create an animatable component with the Animated API
@@ -34,13 +42,26 @@ class Icon extends PureComponent {
         const width = this.props.small ? variables.iconSizeSmall : this.props.width;
         const height = this.props.small ? variables.iconSizeSmall : this.props.height;
         const IconToRender = this.props.src;
-        return (
+
+        const icon = (
             <IconToRender
                 width={width}
                 height={height}
                 fill={this.props.fill}
             />
         );
+
+        if (this.props.inline) {
+            return (
+                <View style={[StyleUtils.getWidthAndHeightStyle(width, height), styles.bgTransparent, styles.overflowVisible]}>
+                    <View style={[StyleUtils.getWidthAndHeightStyle(width, height), IconWrapperStyles, styles.pAbsolute]}>
+                        {icon}
+                    </View>
+                </View>
+            );
+        }
+
+        return icon;
     }
 }