Refactoring stuff, removed Icon

6 files changed, 46 insertions, 93 deletions

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,
 };