Revert to blur-able button on web

1 files changed, 44 insertions, 32 deletions

diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index fdb6d35dfa..5561aba4fb 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -44,6 +44,11 @@ const styles = {
       right: 8,
       marginLeft: 8,
     },
+    iconTransparent:{
+      position: 'absolute',
+      alignSelf: 'flex-end',
+      right: 42,
+    },
     common:{
       paddingTop: 9,
       paddingLeft: 9,
@@ -78,45 +83,46 @@ class BaseButton extends Component {
   props: {
     children?: React.Node,
     disabled: boolean,
+    onPress?: ()=>{},
   };
 
   state = { hovered: false };
 
-  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}>
-        {
-          React.Children.map(children, (node) => {
-            if (React.isValidElement(node)) {
-              let updatedProps = {};
+  cloneChildren = (children) => {return React.Children.map(children, (node) => {
+    if (React.isValidElement(node)) {
+      let updatedProps = {};
 
-              if(node.type.name === 'Label') {
-                updatedProps = { style: [styles.label, this.textStyle()]};
-              }
+      if(node.type.name === 'Label') {
+        updatedProps = { style: [styles.label, this.textStyle()]};
+      }
 
-              if(node.type.name === 'Img') {
-                updatedProps = { tintColor:'currentColor', 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={[styles.label, this.textStyle()]}>{children}</Label>;
-            }
-          })
-        }
-      </Button>
-    );
+      return React.cloneElement(node, updatedProps);
+    } else {
+      return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+    }
+  });
   }
+
+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>);
+}
 }
 
 export class RedButton extends BaseButton {
@@ -132,5 +138,11 @@ export class BlueButton extends BaseButton {
 }
 
 export class TransparentButton extends BaseButton {
-  backgroundStyle = () => this.state.hovered ? styles.transparentHover : styles.transparent;
+  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>);
+  }
 }
\ No newline at end of file