Blur-button-style remake

5 files changed, 47 insertions, 98 deletions

diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index a0cc2b7435..59cba4eefb 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Text, Component } from 'reactxp';
 import { Button } from './Button';
 import styles from './AppButtonStyles';
+import blurStyles from './BlurAppButtonStyles';
 
 export class Label extends Text {}
 
@@ -64,9 +65,9 @@ export class BlueButton extends BaseButton {
 }
 
 export class TransparentButton extends BaseButton {
-  backgroundStyle = () => this.state.hovered ? styles.transparentHover : styles.transparent;
+  backgroundStyle = () => this.state.hovered ? blurStyles.transparentHover : blurStyles.transparent;
 }
 
 export class RedTransparentButton extends BaseButton {
-  backgroundStyle = () => this.state.hovered ? styles.redTransparentHover : styles.redTransparent;
+  backgroundStyle = () => this.state.hovered ? blurStyles.redTransparentHover : blurStyles.redTransparent;
 }
\ No newline at end of file
diff --git a/app/components/styled/AppButtonStyles.android.js b/app/components/styled/AppButtonStyles.android.js
deleted file mode 100644
index 847949edba..0000000000
--- a/app/components/styled/AppButtonStyles.android.js
+++ /dev/null
@@ -1,80 +0,0 @@
-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
index d71ede3702..477a0cc54a 100644
--- a/app/components/styled/AppButtonStyles.js
+++ b/app/components/styled/AppButtonStyles.js
@@ -22,22 +22,6 @@ export default {
     blueHover:{
       backgroundColor: colors.blue60,
     },
-    transparent:{
-      backgroundColor: colors.white20,
-      backdropFilter: "blur(4px)",
-    },
-    transparentHover:{
-      backgroundColor: colors.white40,
-      backdropFilter: "blur(4px)",
-    },
-    redTransparent:{
-      backgroundColor: colors.red40,
-      backdropFilter: "blur(4px)",
-    },
-    redTransparentHover:{
-      backgroundColor: colors.red45,
-      backdropFilter: "blur(4px)",
-    },
     white80:{
       color: colors.white80,
     },
diff --git a/app/components/styled/BlurAppButtonStyles.android.js b/app/components/styled/BlurAppButtonStyles.android.js
new file mode 100644
index 0000000000..5e9dd57ac3
--- /dev/null
+++ b/app/components/styled/BlurAppButtonStyles.android.js
@@ -0,0 +1,20 @@
+import { colors } from '../../config';
+
+import { createViewStyles } from '../../lib/styles';
+
+export default {
+  ...createViewStyles({
+    transparent:{
+      backgroundColor: colors.white20,
+    },
+    transparentHover:{
+      backgroundColor: colors.white40,
+    },
+    redTransparent:{
+      backgroundColor: colors.red40,
+    },
+    redTransparentHover:{
+      backgroundColor: colors.red45,
+    },
+  })
+}
\ No newline at end of file
diff --git a/app/components/styled/BlurAppButtonStyles.js b/app/components/styled/BlurAppButtonStyles.js
new file mode 100644
index 0000000000..916925ad36
--- /dev/null
+++ b/app/components/styled/BlurAppButtonStyles.js
@@ -0,0 +1,24 @@
+import { colors } from '../../config';
+
+import { createViewStyles } from '../../lib/styles';
+
+export default {
+  ...createViewStyles({
+    transparent:{
+      backgroundColor: colors.white20,
+      backdropFilter: "blur(4px)",
+    },
+    transparentHover:{
+      backgroundColor: colors.white40,
+      backdropFilter: "blur(4px)",
+    },
+    redTransparent:{
+      backgroundColor: colors.red40,
+      backdropFilter: "blur(4px)",
+    },
+    redTransparentHover:{
+      backgroundColor: colors.red45,
+      backdropFilter: "blur(4px)",
+    },
+  })
+}
\ No newline at end of file