AppIcon props update

components/common/app-icon.js

@@ -3,30 +3,25 @@ import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
 import Icon from 'react-native-vector-icons/Entypo'
 
-import { Colors, Sizes } from '../../styles/redesign'
+import { Sizes } from '../../styles/redesign'
 
-const AppIcon = ({ isCTA, name }) => {
+const AppIcon = ({ color, name }) => {
-  const style = isCTA ? styles.iconCTA : styles.icon
+  const style = [styles.icon, { color }]
 
   return <Icon name={name} style={style}/>
 }
 
 AppIcon.propTypes = {
-  isCTA: PropTypes.bool,
+  color: PropTypes.string,
   name: PropTypes.string.isRequired
 }
 
 AppIcon.defaultProps = {
-  isCTA: true
+  isCTA: 'black'
 }
 
 const styles = StyleSheet.create({
   icon: {
-    color: 'black',
-    fontSize: Sizes.subtitle
-  },
-  iconCTA: {
-    color: Colors.orange,
     fontSize: Sizes.subtitle
   }
 })

components/header/side-menu.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import AppIcon from '../common/app-icon'
 import MenuItem from './menu-item'
 
-import { Sizes } from '../../styles/redesign'
+import { Colors, Sizes } from '../../styles/redesign'
 import settingsLabels from '../../i18n/en/settings'
 
 const { menuItems } = settingsLabels
@@ -21,7 +21,7 @@ const SideMenu = ({ shouldShowMenu, toggleMenu }) => {
     <React.Fragment>
       {!shouldShowMenu &&
         <TouchableOpacity onPress={toggleMenu}>
-          <AppIcon name={'dots-three-vertical'} isCTA/>
+          <AppIcon name={'dots-three-vertical'} color={Colors.orange}/>
         </TouchableOpacity>
       }
       {shouldShowMenu &&
@@ -34,7 +34,7 @@ const SideMenu = ({ shouldShowMenu, toggleMenu }) => {
           <View style={styles.blackBackground}></View>
           <View style={styles.menu}>
             <TouchableOpacity onPress={toggleMenu} style={styles.iconContainer}>
-              <AppIcon name={'cross'} isCTA={false}/>
+              <AppIcon name={'cross'} color={'black'}/>
             </TouchableOpacity>
             {settingsMenuItems.map(item =>
               <MenuItem

components/settings/menu-item.js

@@ -23,7 +23,7 @@ const MenuItem = ({ item, last, navigate }) => {
           <AppText style={styles.title}>{item.name}</AppText>
           {item.text.length > 0 && <AppText>{item.text}</AppText>}
         </View>
-        <AppIcon name={'chevron-right'} isCTA/>
+        <AppIcon name={'chevron-right'} color={Colors.orange}/>
       </TouchableOpacity>
     </Segment>
   )