Replace our legacy buttons by Button component

LedgerHQ · Sep 26, 2018 · 4d4c6c8 · 4d4c6c8
1 parent fbc804b
commit 4d4c6c8
Show file tree

Hide file tree

Showing 30 changed files with 132 additions and 589 deletions.
diff --git a/src/components/AuthFailedApp.js b/src/components/AuthFailedApp.js
@@ -7,8 +7,7 @@ import LText from "./LText";
 import type { T } from "../types/common";
 import colors from "../colors";
 import BottomModal from "./BottomModal";
-import GreyButton from "./GreyButton";
-import BlueButton from "./BlueButton";
+import Button from "./Button";
 import LedgerLiveLogo from "./LedgerLiveLogo";
 import LiveLogo from "../icons/LiveLogo";
 import HardResetModal from "./HardResetModal";
@@ -50,21 +49,17 @@ class AuthFailedApp extends Component<Props, State> {
             {t("auth.failed.title")}
           </LText>
         </View>
-        <BlueButton
+        <Button
+          type="primary"
           title={t("auth.failed.buttons.tryAgain")}
           onPress={this.onSoftReset}
-          containerStyle={{ height: 48, marginBottom: 10 }}
-          titleStyle={styles.buttonTitle}
+          containerStyle={{ marginBottom: 10 }}
         />
-        <GreyButton
+        <Button
+          type="secondary"
           title={t("auth.failed.buttons.reset")}
           onPress={this.onPress}
-          containerStyle={{
-            marginTop: 10,
-            height: 48,
-            backgroundColor: colors.lightGrey,
-          }}
-          titleStyle={styles.buttonTitle}
+          containerStyle={{ marginTop: 10 }}
         />
         <BottomModal isOpened={isModalOpened} onClose={this.onRequestClose}>
           <HardResetModal
@@ -84,9 +79,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: colors.lightGrey,
   },
-  buttonTitle: {
-    fontSize: 16,
-  },
   descriptionContainer: {
     marginHorizontal: 16,
     marginVertical: 24,

diff --git a/src/components/BlueButton.js b/src/components/BlueButton.js
diff --git a/src/components/BottomModal.js b/src/components/BottomModal.js
@@ -6,6 +6,7 @@ import ReactNativeModal from "react-native-modal";
 
 import StyledStatusBar from "./StyledStatusBar";
 import colors from "../colors";
+import ButtonUseTouchable from "../context/ButtonUseTouchable";
 
 export type Props = {
   isOpened: boolean,
@@ -18,25 +19,27 @@ class BottomModal extends Component<Props> {
   render() {
     const { isOpened, onClose, children, style } = this.props;
     return (
-      <ReactNativeModal
-        isVisible={isOpened}
-        onBackdropPress={onClose}
-        useNativeDriver
-        style={{
-          justifyContent: "flex-end",
-          margin: 0,
-        }}
-      >
-        <View style={[styles.modal, style]}>
-          <StyledStatusBar
-            backgroundColor={
-              Platform.OS === "android" ? "rgba(0,0,0,0.7)" : "transparent"
-            }
-            barStyle="light-content"
-          />
-          {children}
-        </View>
-      </ReactNativeModal>
+      <ButtonUseTouchable.Provider value={true}>
+        <ReactNativeModal
+          isVisible={isOpened}
+          onBackdropPress={onClose}
+          useNativeDriver
+          style={{
+            justifyContent: "flex-end",
+            margin: 0,
+          }}
+        >
+          <View style={[styles.modal, style]}>
+            <StyledStatusBar
+              backgroundColor={
+                Platform.OS === "android" ? "rgba(0,0,0,0.7)" : "transparent"
+              }
+              barStyle="light-content"
+            />
+            {children}
+          </View>
+        </ReactNativeModal>
+      </ButtonUseTouchable.Provider>
     );
   }
 }

diff --git a/src/components/GenerateMockAccountsButton.js b/src/components/GenerateMockAccountsButton.js
@@ -2,7 +2,7 @@
 import React from "react";
 import sample from "lodash/sample";
 import { genAccount } from "@ledgerhq/live-common/lib/mock/account";
-import GreyButton from "./GreyButton";
+import Button from "./Button";
 import { accountModel } from "../reducers/accounts";
 import db from "../db";
 import { withReboot } from "../context/Reboot";
@@ -23,7 +23,6 @@ async function injectMockAccountsInDB(count) {
 }
 
 const GenerateMockAccountsButton = ({
-  title,
   reboot,
   count,
   ...rest
@@ -32,9 +31,9 @@ const GenerateMockAccountsButton = ({
   count: number,
   reboot: *,
 }) => (
-  <GreyButton
+  <Button
     {...rest}
-    title={title}
+    type="secondary"
     onPress={async () => {
       await injectMockAccountsInDB(count);
       reboot();

diff --git a/src/components/GenericButton.js b/src/components/GenericButton.js
diff --git a/src/components/GreyButton.js b/src/components/GreyButton.js
diff --git a/src/components/HardResetModal.js b/src/components/HardResetModal.js
@@ -7,8 +7,7 @@ import type { T } from "../types/common";
 import colors from "../colors";
 import ModalBottomAction from "./ModalBottomAction";
 import Trash from "../icons/Trash";
-import RedButton from "./RedButton";
-import GreyButton from "./GreyButton";
+import Button from "./Button";
 import Circle from "./Circle";
 
 type Props = {
@@ -30,17 +29,17 @@ class HardResetModal extends PureComponent<Props> {
         description={t("reset.description")}
         footer={
           <View style={styles.footerContainer}>
-            <GreyButton
+            <Button
+              type="secondary"
               title={t("common.cancel")}
               onPress={onRequestClose}
               containerStyle={styles.buttonContainer}
-              titleStyle={styles.buttonTitle}
             />
-            <RedButton
+            <Button
+              type="alert"
               title={t("reset.button")}
               onPress={onHardReset}
-              containerStyle={[styles.buttonContainer, styles.resetButtonBg]}
-              titleStyle={[styles.buttonTitle, styles.resetButtonTitle]}
+              containerStyle={styles.buttonContainer}
             />
           </View>
         }
@@ -57,16 +56,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-around",
   },
   buttonContainer: {
-    height: 48,
     width: 136,
   },
-  resetButtonBg: {
-    backgroundColor: colors.alert,
-  },
-  buttonTitle: {
-    fontSize: 16,
-  },
-  resetButtonTitle: {
-    color: colors.white,
-  },
 });
diff --git a/src/components/ImportAccountsButton.js b/src/components/ImportAccountsButton.js
@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { withNavigation } from "react-navigation";
-import BlueButton from "./BlueButton";
+import Button from "./Button";
 
 const ImportAccountsButton = ({
   title,
@@ -10,7 +10,8 @@ const ImportAccountsButton = ({
   title: string,
   navigation: *,
 }) => (
-  <BlueButton
+  <Button
+    type="primary"
     title={title}
     onPress={() => navigation.navigate("ImportAccounts")}
   />

diff --git a/src/components/ImportBridgeStreamData.js b/src/components/ImportBridgeStreamData.js
@@ -3,7 +3,7 @@ import React from "react";
 // $FlowFixMe
 import { Buffer } from "buffer";
 import { withNavigation } from "react-navigation";
-import GreyButton from "./GreyButton";
+import Button from "./Button";
 
 const ImportBridgeStreamData = ({
   title,
@@ -17,8 +17,9 @@ const ImportBridgeStreamData = ({
   reboot: *,
   dataStr: *,
 }) => (
-  <GreyButton
+  <Button
     {...rest}
+    type="secondary"
     title={title}
     onPress={() => {
       const data = JSON.parse(Buffer.from(dataStr, "base64").toString("utf8"));