New AppButton differentiation and blur fix

6 files changed, 206 insertions, 253 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 47f28e6742..ff0a02b6e5 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Layout, Container, Header } from './Layout';
 import { Component, Text, View, Types } from 'reactxp';
 import Img from './Img';
-import { TransparentButton, GreenButton, RedButton, Label } from './styled';
+import { TransparentButton, RedTransparentButton, GreenButton, RedButton, Label } from './styled';
 import Accordion from './Accordion';
 import styles from './ConnectStyles';
 
@@ -236,7 +236,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           { isConnecting ?
             <View style={styles.footer}>
               <TransparentButton onPress={ this.props.onSelectLocation }>Switch location</TransparentButton>
-              <RedButton onPress={ this.props.onDisconnect }>Cancel</RedButton>
+              <RedTransparentButton onPress={ this.props.onDisconnect }>Cancel</RedTransparentButton>
             </View>
             : null
           }
@@ -245,7 +245,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           { isConnected ?
             <View style={styles.footer}>
               <TransparentButton onPress={ this.props.onSelectLocation }>Switch location</TransparentButton>
-              <RedButton onPress={ this.props.onDisconnect } testName='disconnect'>Disconnect</RedButton>
+              <RedTransparentButton onPress={ this.props.onDisconnect } testName='disconnect'>Disconnect</RedTransparentButton>
             </View>
             : null
           }
diff --git a/app/components/styled/AppButton.android.js b/app/components/styled/AppButton.android.js
deleted file mode 100644
index fdb6d35dfa..0000000000
--- a/app/components/styled/AppButton.android.js
+++ /dev/null
@@ -1,136 +0,0 @@
-// @flow
-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,
-    },
-    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,
-    },
-  }),
-};
-
-export class Label extends Text {}
-
-class BaseButton extends Component {
-  props: {
-    children?: React.Node,
-    disabled: boolean,
-  };
-
-  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 = {};
-
-              if(node.type.name === 'Label') {
-                updatedProps = { style: [styles.label, this.textStyle()]};
-              }
-
-              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>
-    );
-  }
-}
-
-export class RedButton extends BaseButton {
-  backgroundStyle = () => this.state.hovered ? styles.redHover : styles.red;
-}
-
-export class GreenButton extends BaseButton {
-  backgroundStyle = () => this.state.hovered ? styles.greenHover : styles.green;
-}
-
-export class BlueButton extends BaseButton {
-  backgroundStyle = () => this.state.hovered ? styles.blueHover : styles.blue;
-}
-
-export class TransparentButton extends BaseButton {
-  backgroundStyle = () => this.state.hovered ? styles.transparentHover : styles.transparent;
-}
\ No newline at end of file
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
diff --git a/app/components/styled/AppButtonStyles.android.js b/app/components/styled/AppButtonStyles.android.js
new file mode 100644
index 0000000000..847949edba
--- /dev/null
+++ b/app/components/styled/AppButtonStyles.android.js
@@ -0,0 +1,80 @@
+import { colors } from '../../config';
+
+import { createViewStyles, createTextStyles } from '../../lib/styles';
+
+export default {
+  ...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,
+    },
+    redTransparent:{
+      backgroundColor: colors.red40,
+    },
+    redTransparentHover:{
+      backgroundColor: colors.red45,
+    },
+    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,
+    },
+  }),
+};
\ No newline at end of file
diff --git a/app/components/styled/AppButtonStyles.js b/app/components/styled/AppButtonStyles.js
new file mode 100644
index 0000000000..4e37f3db0d
--- /dev/null
+++ b/app/components/styled/AppButtonStyles.js
@@ -0,0 +1,84 @@
+import { colors } from '../../config';
+
+import { createViewStyles, createTextStyles } from '../../lib/styles';
+
+export default {
+  ...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,
+      backdropFilter: "blur(4px)",
+    },
+    transparent:{
+      backgroundColor: colors.white20,
+      backdropFilter: "blur(4px)",
+    },
+    transparentHover:{
+      backgroundColor: colors.white40,
+    },
+    redTransparent:{
+      backgroundColor: colors.red40,
+      backdropFilter: "blur(4px)",
+    },
+    redTransparentHover:{
+      backgroundColor: colors.red45,
+      backdropFilter: "blur(4px)",
+    },
+    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,
+    },
+  }),
+};
\ No newline at end of file
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
index de18529cac..7efeb28389 100644
--- a/app/components/styled/index.js
+++ b/app/components/styled/index.js
@@ -2,7 +2,7 @@
 
 import { Button } from './Button';
 import CellButton, { Label, SubText } from './CellButton';
-import { RedButton, GreenButton, BlueButton, TransparentButton } from './AppButton';
+import { RedButton, GreenButton, BlueButton, TransparentButton, RedTransparentButton } from './AppButton';
 
 export {
   Button,
@@ -11,6 +11,7 @@ export {
   GreenButton,
   BlueButton,
   TransparentButton,
+  RedTransparentButton,
   Label,
   SubText,
 };