diff options
| -rw-r--r-- | app/components/Img.android.js | 24 | ||||
| -rw-r--r-- | app/components/Img.js | 33 | ||||
| -rw-r--r-- | app/components/Settings.js | 24 |
3 files changed, 67 insertions, 14 deletions
diff --git a/app/components/Img.android.js b/app/components/Img.android.js index 303fe4e5cb..436f805ccb 100644 --- a/app/components/Img.android.js +++ b/app/components/Img.android.js @@ -1,9 +1,27 @@ // @flow -import React from 'react'; -import { Image, Component } from 'reactxp'; +import React, { Component } from 'react'; +import { StyleSheet } from 'react-native'; +import { Image } from 'reactxp'; export default class Img extends Component { + props: { + source: string, + style: Object, + tintColor?: string + }; + render(){ - return (<Image style={ this.props.style } source={ this.props.source }/>); + const { source, tintColor, style } = this.props; + + if (tintColor === 'currentColor' && style) { + const { color: tint, ...otherStyles } = StyleSheet.flatten(style); + return( + <Image style={[ otherStyles, { tintColor: tint } ]} source={ source }/> + ); + } else { + return( + <Image style={ style } source={ source }/> + ); + } } } diff --git a/app/components/Img.js b/app/components/Img.js index 0c687ff654..8c8244fc38 100644 --- a/app/components/Img.js +++ b/app/components/Img.js @@ -3,11 +3,38 @@ import React from 'react'; import { View, Component } from 'reactxp'; export default class Img extends Component { + props: { + source: string, + tintColor?: string + }; + render() { - const url = './assets/images/' + this.props.source + '.svg'; + const { source, tintColor, ...otherProps } = this.props; + const url = './assets/images/' + source + '.svg'; + let image; - const style = this.props.style; + if(tintColor) { + image = ( + <div style={{ + WebkitMaskImage: `url('${url}')`, + WebkitMaskRepeat: 'no-repeat', + backgroundColor: tintColor, + lineHeight: 0, + }}> + <img src={ url } style={{ + visibility: 'hidden', + }} /> + </div> + ); + } else { + image = ( + <img src={ url } /> + ); + } - return (<View style={ style }> <img src={ url } /> </View>); + return ( + <View { ...otherProps }> + { image } + </View>); } } diff --git a/app/components/Settings.js b/app/components/Settings.js index 492b2bd403..25a3e6df47 100644 --- a/app/components/Settings.js +++ b/app/components/Settings.js @@ -4,9 +4,7 @@ import React, { Component } from 'react'; import { If, Then, Else } from 'react-if'; import { Layout, Container, Header } from './Layout'; import CustomScrollbars from './CustomScrollbars'; - -import ChevronRightSVG from '../assets/images/icon-chevron.svg'; -import ExternalLinkSVG from '../assets/images/icon-extLink.svg'; +import Img from './Img'; import type { AccountReduxState } from '../redux/account/reducers'; import type { SettingsReduxState } from '../redux/settings/reducers'; @@ -68,7 +66,9 @@ export default class Settings extends Component { </Else> </If> </div> - <div className="settings__cell-disclosure"><ChevronRightSVG /></div> + <div className="settings__cell-disclosure"> + <Img source="icon-chevron" tintColor="currentColor" /> + </div> </div> <div className="settings__cell-spacer"></div> </div> @@ -81,7 +81,9 @@ export default class Settings extends Component { <div className="settings__cell settings__cell--active" onClick={ this.props.onViewAdvancedSettings }> <div className="settings__cell-label">Advanced</div> <div className="settings__cell-value"> - <div className="settings__cell-disclosure"><ChevronRightSVG /></div> + <div className="settings__cell-disclosure"> + <Img source="icon-chevron" tintColor="currentColor" /> + </div> </div> </div> <div className="settings__cell-spacer"></div> @@ -92,15 +94,21 @@ export default class Settings extends Component { <div className="settings__external"> <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'faq') }> <div className="settings__cell-label">FAQs</div> - <div className="settings__cell-icon"><ExternalLinkSVG /></div> + <div className="settings__cell-icon"> + <Img source="icon-extLink" tintColor="currentColor" /> + </div> </div> <div className="settings__cell settings__cell--active" onClick={ this.props.onExternalLink.bind(this, 'guides') }> <div className="settings__cell-label">Guides</div> - <div className="settings__cell-icon"><ExternalLinkSVG /></div> + <div className="settings__cell-icon"> + <Img source="icon-extLink" tintColor="currentColor" /> + </div> </div> <div className="settings__view-support settings__cell settings__cell--active" onClick={ this.props.onViewSupport }> <div className="settings__cell-label">Report a problem</div> - <div className="settings__cell-disclosure"><ChevronRightSVG /></div> + <div className="settings__cell-disclosure"> + <Img source="icon-extLink" tintColor="currentColor" /> + </div> </div> </div> </div> |