New AppButton differentiation and blur fix

1 files changed, 37 insertions, 113 deletions

diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index 5561aba4fb..a0cc2b7435 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -2,80 +2,7 @@
 import * as React from 'react';
 import { Text, Component } from 'reactxp';
 import { Button } from './Button';
-import { colors } from '../../config';
-
-import { createViewStyles, createTextStyles } from '../../lib/styles';
-
-const styles = {
-  ...createViewStyles({
-    red:{
-      backgroundColor: colors.red95,
-    },
-    redHover: {
-      backgroundColor: colors.red,
-    },
-    green:{
-      backgroundColor: colors.green,
-    },
-    greenHover:{
-      backgroundColor: colors.green90,
-    },
-    blue:{
-      backgroundColor: colors.blue80,
-    },
-    blueHover:{
-      backgroundColor: colors.blue60,
-    },
-    transparent:{
-      backgroundColor: colors.white20,
-    },
-    transparentHover:{
-      backgroundColor: colors.white40,
-    },
-    white80:{
-      color: colors.white80,
-    },
-    white: {
-      color: colors.white,
-    },
-    icon:{
-      position: 'absolute',
-      alignSelf: 'flex-end',
-      right: 8,
-      marginLeft: 8,
-    },
-    iconTransparent:{
-      position: 'absolute',
-      alignSelf: 'flex-end',
-      right: 42,
-    },
-    common:{
-      paddingTop: 9,
-      paddingLeft: 9,
-      paddingRight: 9,
-      paddingBottom: 9,
-      marginTop: 8,
-      marginBottom: 8,
-      marginLeft: 24,
-      marginRight: 24,
-      borderRadius: 4,
-      flex: 1,
-      flexDirection: 'column',
-      alignContent: 'center',
-      justifyContent: 'center',
-    },
-  }),
-  ...createTextStyles({
-    label:{
-      alignSelf: 'center',
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-      flex: 1,
-    },
-  }),
-};
+import styles from './AppButtonStyles';
 
 export class Label extends Text {}
 
@@ -83,46 +10,45 @@ class BaseButton extends Component {
   props: {
     children?: React.Node,
     disabled: boolean,
-    onPress?: ()=>{},
   };
 
   state = { hovered: false };
 
-  cloneChildren = (children) => {return React.Children.map(children, (node) => {
-    if (React.isValidElement(node)) {
-      let updatedProps = {};
+  textStyle = () => this.state.hovered ? styles.white80 : styles.white;
+  iconStyle = () => this.state.hovered ? styles.white80 : styles.white;
+  backgroundStyle = () => this.state.hovered ? styles.white80 : styles.white;
 
-      if(node.type.name === 'Label') {
-        updatedProps = { style: [styles.label, this.textStyle()]};
-      }
+  onHoverStart = () => !this.props.disabled ? this.setState({ hovered: true }) : null;
+  onHoverEnd = () => !this.props.disabled ? this.setState({ hovered: false }) : null;
+  render() {
+    const { children, ...otherProps } = this.props;
+    return (
+      <Button style={[ styles.common, this.backgroundStyle() ]}
+        onHoverStart={this.onHoverStart}
+        onHoverEnd={this.onHoverEnd}
+        {...otherProps}>
+        {
+          React.Children.map(children, (node) => {
+            if (React.isValidElement(node)) {
+              let updatedProps = {};
 
-      if(node.type.name === 'Img') {
-        updatedProps = { tintColor:'currentColor', style: [styles.icon, this.iconStyle()]};
-      }
+              if(node.type.name === 'Label') {
+                updatedProps = { style: [styles.label, this.textStyle()]};
+              }
 
-      return React.cloneElement(node, updatedProps);
-    } else {
-      return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
-    }
-  });
-  }
+              if(node.type.name === 'Img') {
+                updatedProps = { tintColor:'currentColor', style: [styles.icon, this.iconStyle()]};
+              }
 
-textStyle = () => this.state.hovered ? styles.white80 : styles.white;
-iconStyle = () => this.state.hovered ? styles.white80 : styles.white;
-backgroundStyle = () => this.state.hovered ? styles.white80 : styles.white;
-
-onHoverStart = () => !this.props.disabled ? this.setState({ hovered: true }) : null;
-onHoverEnd = () => !this.props.disabled ? this.setState({ hovered: false }) : null;
-render() {
-  const { children, ...otherProps } = this.props;
-  return (
-    <Button style={[ styles.common, this.backgroundStyle() ]}
-      onHoverStart={this.onHoverStart}
-      onHoverEnd={this.onHoverEnd}
-      {...otherProps}>
-      { this.cloneChildren(children) }
-    </Button>);
-}
+              return React.cloneElement(node, updatedProps);
+            } else {
+              return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+            }
+          })
+        }
+      </Button>
+    );
+  }
 }
 
 export class RedButton extends BaseButton {
@@ -138,11 +64,9 @@ export class BlueButton extends BaseButton {
 }
 
 export class TransparentButton extends BaseButton {
-  iconStyle = () => [styles.iconTransparent, this.state.hovered ? styles.white80 : styles.white];
-  render(){
-    const { children, onPress, ...otherProps } = this.props;
-    return (<button className="button button--neutral button--blur" onClick={ onPress } {...otherProps}>
-      { this.cloneChildren(children) }
-    </button>);
-  }
+  backgroundStyle = () => this.state.hovered ? styles.transparentHover : styles.transparent;
+}
+
+export class RedTransparentButton extends BaseButton {
+  backgroundStyle = () => this.state.hovered ? styles.redTransparentHover : styles.redTransparent;
 }
\ No newline at end of file