Revert to blur-able button on web

3 files changed, 187 insertions, 138 deletions

diff --git a/app/assets/css/buttons.css b/app/assets/css/buttons.css
index 805d9e9a74..c745ff7d33 100644
--- a/app/assets/css/buttons.css
+++ b/app/assets/css/buttons.css
@@ -1,129 +1,30 @@
 .button {
   display: flex;
-  width: 100%;
-  padding: 7px 12px 9px;
+  padding: 9px 9px 9px;
   border-radius: 4px;
   border: 0;
-  font-family: DINPro;
-  font-size: 20px;
-  font-weight: 900;
-  line-height: 26px;
   justify-content: center;
   align-items: center;
   transition: 0.25s opacity;
-}
-
-.button:disabled {
-  opacity: 0.5;
-}
-
-.button-label {
-  margin: 0 auto;
-}
-
-/* make negative margin to center label within button */
-.button-label + .button-icon--16 {
-  margin-left: -16px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-right: 24px;
+  margin-left: 24px;
+  flex: 1;
+  flex-direction: column;
 }
 
 .button--blur {
   backdrop-filter: blur(4px);
 }
 
-.button--primary {
-  background-color: rgba(41,71,115,1);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--primary .button-icon path {
-  fill: rgba(255,255,255,0.8);
-}
-
-.button--primary:not(:disabled):hover {
-  background-color: rgba(41,71,115,0.9);
-  color: rgba(255,255,255,1);
-}
-
-.button--primary:not(:disabled):hover .button-icon path {
-  fill: rgba(255,255,255,1);
-}
-
-.button--primary:active {
-  background-color: rgba(41,71,115,1);
-}
-
-.button--secondary {
-  background-color: rgba(41,71,115,0.4);
-  color: rgba(255,255,255,0.6);
-}
-
-.button--secondary:not(:disabled):hover {
-  background-color: rgba(41,71,115,0.5);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--secondary:active {
-  background-color: rgba(41,71,115,0.4);
-}
-
-.button--negative {
-  background-color: rgba(208,2,27,1);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--negative:not(:disabled):hover {
-  background-color: rgba(208,2,27,0.95);
-  color: rgba(255,255,255,1);
-}
-
-.button--negative:active {
-  background-color: rgba(208,2,27,1);
-}
-
-.button--negative-light {
-  background-color: rgba(208,2,27,0.4);
-  color: rgba(255,255,255,0.6);
-}
-
-.button--negative-light:not(:disabled):hover {
-  background-color: rgba(208,2,27,0.45);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--negative-light:active {
-  background-color: rgba(208,2,27,0.4);
-}
-
-.button--positive {
-  background-color: rgba(63,173,77,1);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--positive .button-icon path {
-  fill: rgba(255,255,255,0.8);
-}
-
-.button--positive:not(:disabled):hover {
-  background-color: rgba(63,173,77,0.9);
-  color: rgba(255,255,255,1);
-}
-
-.button--positive:not(:disabled):hover .button-icon path {
-  fill: rgba(255,255,255,1);
-}
-
-.button--positive:active {
-  background-color: rgba(63,173,77,1);
-}
 
 .button--neutral {
   background-color: rgba(255,255,255,0.2);
-  color: rgba(255,255,255,0.8);
 }
 
 .button--neutral:not(:disabled):hover {
   background-color: rgba(255,255,255,0.25);
-  color: rgba(255,255,255,1);
 }
 
 .button--neutral:active {
diff --git a/app/components/styled/AppButton.android.js b/app/components/styled/AppButton.android.js
new file mode 100644
index 0000000000..fdb6d35dfa
--- /dev/null
+++ b/app/components/styled/AppButton.android.js
@@ -0,0 +1,136 @@
+// @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 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