Refactoring stuff, removed Icon

12 files changed, 73 insertions, 120 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index b2352369ba..afa36fe31a 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -2,7 +2,7 @@
 import moment from 'moment';
 import React from 'react';
 import { Component, Text, View } from 'reactxp';
-import { Button, RedButton, GreenButton, Label, Icon } from './styled';
+import { Button, RedButton, GreenButton, Label } from './styled';
 import { Layout, Container } from './Layout';
 import styles from './AccountStyles';
 import Img from './Img';
@@ -66,7 +66,7 @@ export default class Account extends Component {
                       icon='icon-extLink'
                       testName='account__buymore'>
                       <Label>Buy more credit</Label>
-                      <Icon source='icon-extLink' height='16' width='16' />
+                      <Img source='icon-extLink' height='16' width='16' />
                     </GreenButton>
                     <RedButton
                       onPress={ this.props.onLogout }
diff --git a/app/components/Img.android.js b/app/components/Img.android.js
index 436f805ccb..ced9d3f461 100644
--- a/app/components/Img.android.js
+++ b/app/components/Img.android.js
@@ -7,20 +7,25 @@ export default class Img extends Component {
   props: {
     source: string,
     style: Object,
-    tintColor?: string
+    tintColor?: string,
+    height?: number,
+    width?:number,
   };
 
   render(){
-    const { source, tintColor, style } = this.props;
+    const width = this.props.width || 7;
+    const height = this.props.height || 12;
+    const source = this.props.source || 'icon-chevron';
+    const tintColor = this.props.tintColor || 'currentColor';
 
-    if (tintColor === 'currentColor' && style) {
-      const { color: tint, ...otherStyles } = StyleSheet.flatten(style);
+    if (tintColor === 'currentColor' && this.props.style) {
+      const { color: tint, ...otherStyles } = StyleSheet.flatten(this.props.style);
       return(
-        <Image style={[ otherStyles, { tintColor: tint } ]} source={ source }/>
+        <Image style={[ otherStyles, { tintColor: tint, height: height, width: width } ]} source={ source }/>
       );
     } else {
       return(
-        <Image style={ style } source={ source }/>
+        <Image style={[ this.props.style, { height: height, width: width } ]} source={ source }/>
       );
     }
   }
diff --git a/app/components/Img.js b/app/components/Img.js
index 8c8244fc38..c4fb7637d5 100644
--- a/app/components/Img.js
+++ b/app/components/Img.js
@@ -9,7 +9,8 @@ export default class Img extends Component {
   };
 
   render() {
-    const { source, tintColor, ...otherProps } = this.props;
+    const { source, ...otherProps } = this.props;
+    const tintColor = this.props.tintColor;
     const url = './assets/images/' + source + '.svg';
     let image;
 
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 520e18942e..cae2503127 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -2,7 +2,7 @@
 import moment from 'moment';
 import React from 'react';
 import { Component, Text, View } from 'reactxp';
-import { Button, CellButton, RedButton, Label, Icon, SubText } from './styled';
+import { Button, CellButton, RedButton, Label, SubText} from './styled';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
@@ -82,15 +82,15 @@ export default class Settings extends Component {
           <CellButton onPress={ this.props.onViewAccount }
             testName='settings__account_paid_until_button'>
             <Label>Account</Label>
-            <SubText testName='settings__account_paid_until_subtext' style={styles.settings__account_paid_until_label__error}>OUT OF TIME</SubText>
-            <Icon height='12' width='7' source='icon-chevron' />
+            <SubText testName='settings__account_paid_until_subtext' style={styles.settings__account_paid_until_Label__error}>OUT OF TIME</SubText>
+            <Img height='12' width='7' source='icon-chevron' />
           </CellButton>
         ) : (
           <CellButton onPress={ this.props.onViewAccount }
             testName='settings__account_paid_until_button'>
             <Label>Account</Label>
             <SubText testName='settings__account_paid_until_subtext'>{ formattedExpiry }</SubText>
-            <Icon height='12' width='7' source='icon-chevron' />
+            <Img height='12' width='7' source='icon-chevron' />
           </CellButton>
         )}
       </View>
@@ -98,13 +98,13 @@ export default class Settings extends Component {
       <CellButton onPress={ this.props.onViewPreferences }
         testName='settings__preferences'>
         <Label>Preferences</Label>
-        <Icon height='12' width='7' source='icon-chevron' />
+        <Img height='12' width='7' source='icon-chevron' />
       </CellButton>
 
       <CellButton onPress={ this.props.onViewAdvancedSettings }
         testName='settings__advanced'>
         <Label>Advanced</Label>
-        <Icon height='12' width='7' source='icon-chevron' />
+        <Img height='12' width='7' source='icon-chevron' />
       </CellButton>
       <View style={styles.settings__cell_spacer}/>
     </View>;
@@ -116,7 +116,7 @@ export default class Settings extends Component {
         testName='settings__version'>
         <Label>App version</Label>
         <SubText>{this._formattedVersion()}</SubText>
-        <Icon height='16' width='16' source='icon-extLink' />
+        <Img height='16' width='16' source='icon-extLink' />
       </CellButton>
       <View style={styles.settings__cell_spacer}/>
     </View>;
@@ -136,19 +136,19 @@ export default class Settings extends Component {
       <CellButton onPress={ this.props.onExternalLink.bind(this, 'faq') }
         testName='settings__external_link'>
         <Label>FAQs</Label>
-        <Icon height='16' width='16' source='icon-extLink' />
+        <Img height='16' width='16' source='icon-extLink' />
       </CellButton>
 
       <CellButton onPress={ this.props.onExternalLink.bind(this, 'guides') }
         testName='settings__external_link'>
         <Label>Guides</Label>
-        <Icon height='16' width='16' source='icon-extLink' />
+        <Img height='16' width='16' source='icon-extLink' />
       </CellButton>
 
       <CellButton onPress={ this.props.onViewSupport }
         testName='settings__view_support'>
         <Label>Contact support</Label>
-        <Icon height='12' width='7' source='icon-chevron' />
+        <Img height='12' width='7' source='icon-chevron' />
       </CellButton>
     </View>;
   }
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 67452511e8..81d72277a3 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -40,12 +40,6 @@ export default Object.assign(createViewStyles({
     flex: 0,
     opacity: 0.6,
   },
-  settings__icon_chevron:{
-    marginLeft: 8,
-    color: colors.white80,
-    width: 7,
-    height: 12,
-  },
   settings__cell_spacer:{
     height: 24,
     flex: 0
diff --git a/app/components/Support.js b/app/components/Support.js
index bcadd63741..80116bcc1b 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { Component, Text, View, TextInput } from 'reactxp';
-import { Button, BlueButton, GreenButton, Label, Icon } from './styled';
+import { Button, BlueButton, GreenButton, Label } from './styled';
 import { Layout, Container } from './Layout';
 import styles from './SupportStyles';
 import Img from './Img';
@@ -206,7 +206,7 @@ export default class Support extends Component {
         onPress={ this.onViewLog }
         testName='support__view_logs'>
         <Label>View app logs</Label>
-        <Icon source='icon-extLink' height='16' width='16' />
+        <Img source='icon-extLink' height='16' width='16' />
       </BlueButton>,
       <GreenButton key={2}
         disabled={ !this.validate() }
diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index 1b113d36d4..60da8edb3c 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -1,11 +1,10 @@
 // @flow
 import React from 'react';
-import { Component } from 'reactxp';
+import { Text, Component } from 'reactxp';
 import { Button } from './Button';
-import { Label } from './Label';
 import { colors } from '../../config';
 
-import { createViewStyles } from '../../lib/styles';
+import { createViewStyles, createTextStyles } from '../../lib/styles';
 
 const styles = {
   ...createViewStyles({
@@ -61,8 +60,20 @@ const styles = {
       justifyContent: 'center',
     },
   }),
+  ...createTextStyles({
+    label:{
+      alignSelf: 'center',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      flex: 1,
+    },
+  }),
 };
 
+export class Label extends Text {}
+
 export default class BaseButton extends Component {
   props: {
     children: Array<React.Element<*>> | React.Element<*>,
@@ -90,16 +101,16 @@ export default class BaseButton extends Component {
               let updatedProps = {};
 
               if(node.type.name === 'Label') {
-                updatedProps = { style: this.textStyle() };
+                updatedProps = { style: [styles.label, this.textStyle()]};
               }
 
-              if(node.type.name === 'Icon') {
-                updatedProps = { style: [styles.icon, this.iconStyle()]};
+              if(node.type.name === 'Img') {
+                updatedProps = { tintColor:'currentColor', style: [styles.icon, this.iconStyle()]};
               }
 
               return React.cloneElement(node, updatedProps);
             } else {
-              return <Label style={this.textStyle()}>{children}</Label>;
+              return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
             }
           })
         }
diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index ca5b0a3739..7309180241 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -1,11 +1,10 @@
 // @flow
 import React from 'react';
-import { Component } from 'reactxp';
+import { Text, Component } from 'reactxp';
 import { Button } from './Button';
-import { Label } from './Label';
 import { colors } from '../../config';
 
-import { createViewStyles } from '../../lib/styles';
+import { createViewStyles, createTextStyles } from '../../lib/styles';
 
 const styles = {
   ...createViewStyles({
@@ -39,13 +38,32 @@ const styles = {
       color: colors.white,
     },
     icon: {
-      position: 'relative',
+      marginLeft: 8,
+    },
+  }),
+  ...createTextStyles({
+    label:{
       alignSelf: 'center',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      flex: 1,
       marginLeft: 8,
     },
+    subtext:{
+      fontFamily: 'Open Sans',
+      fontSize: 13,
+      fontWeight: '800',
+      flex: 0,
+      textAlign: 'right',
+    },
   }),
 };
 
+export class SubText extends Text {}
+export class Label extends Text {}
+
 export default class CellButton extends Component {
   props: {
     children: Array<React.Element<*>> | React.Element<*>,
@@ -75,20 +93,20 @@ export default class CellButton extends Component {
               let updatedProps = {};
 
               if(node.type.name === 'Label') {
-                updatedProps = { style: [this.textStyle(), node.props.style]};
+                updatedProps = { style: [styles.label, this.textStyle(), node.props.style]};
               }
 
-              if(node.type.name === 'Icon') {
-                updatedProps = { style: [this.iconStyle(), styles.icon, node.props.style]};
+              if(node.type.name === 'Img') {
+                updatedProps = { tintColor:'currentColor', style: [styles.icon, this.iconStyle(), node.props.style]};
               }
 
               if(node.type.name === 'SubText') {
-                updatedProps = { style: [this.subtextStyle(), node.props.style]};
+                updatedProps = { style: [styles.subtext, this.subtextStyle(), node.props.style]};
               }
 
               return React.cloneElement(node, updatedProps);
             } else {
-              return <Label style={this.textStyle()}>{children}</Label>;
+              return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
             }
           })
         }
diff --git a/app/components/styled/Icon.js b/app/components/styled/Icon.js
deleted file mode 100644
index b8450d5a10..0000000000
--- a/app/components/styled/Icon.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// @flow
-import React from 'react';
-import { Component } from 'reactxp';
-import Img from '../Img';
-
-export class Icon extends Component {
-  render() {
-    const width = this.props.width || 7;
-    const height = this.props.height || 12;
-    const source = this.props.source || 'icon-chevron';
-    return (
-      <Img style={[{width,
-        height},
-      this.props.style]}
-      source={source}
-      tintColor='currentColor'/>);
-  }
-}
\ No newline at end of file
diff --git a/app/components/styled/Label.js b/app/components/styled/Label.js
deleted file mode 100644
index 71949e7571..0000000000
--- a/app/components/styled/Label.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// @flow
-import React from 'react';
-import { Text, Component } from 'reactxp';
-import { createTextStyles } from '../../lib/styles';
-
-const styles = {
-  ...createTextStyles({
-    label:{
-      alignSelf: 'center',
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      flex: 1,
-      marginLeft: 8,
-    },
-  })
-};
-
-export class Label extends Component {
-  render() {
-    return (
-      <Text style={[ styles.label, this.props.style ]}>
-        {this.props.children}
-      </Text>
-    );
-  }
-}
\ No newline at end of file
diff --git a/app/components/styled/SubText.js b/app/components/styled/SubText.js
deleted file mode 100644
index 76b5bb87fd..0000000000
--- a/app/components/styled/SubText.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-import React from 'react';
-import { Text, Component } from 'reactxp';
-import { createTextStyles } from '../../lib/styles';
-
-const styles = {
-  ...createTextStyles({
-    subtext:{
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '800',
-      flex: 0,
-      textAlign: 'right',
-    },
-  })
-};
-
-export class SubText extends Component {
-  render() {
-    return (
-      <Text style={[ styles.subtext, this.props.style ]}>
-        {this.props.children}
-      </Text>
-    );
-  }
-}
\ No newline at end of file
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
index ac0a631df9..de18529cac 100644
--- a/app/components/styled/index.js
+++ b/app/components/styled/index.js
@@ -1,11 +1,8 @@
 // @flow
 
 import { Button } from './Button';
-import CellButton from './CellButton';
+import CellButton, { Label, SubText } from './CellButton';
 import { RedButton, GreenButton, BlueButton, TransparentButton } from './AppButton';
-import { Label } from './Label';
-import { Icon } from './Icon';
-import { SubText } from './SubText';
 
 export {
   Button,
@@ -15,6 +12,5 @@ export {
   BlueButton,
   TransparentButton,
   Label,
-  Icon,
   SubText,
 };