FIX: broadcast wasn't dark mode friendly

loc/en.json

@@ -277,6 +277,7 @@
     "network_electrum": "Electrum Server",
     "not_a_valid_uri": "Not a valid URI",
     "notifications": "Notifications",
+    "open_link_in_explorer" : "Open link in explorer",
     "password": "Password",
     "password_explain": "Create the password you will use to decrypt the storage",
     "passwords_do_not_match": "Passwords do not match",
@@ -291,7 +292,8 @@
     "push_notifications": "Push Notifications",
     "retype_password": "Re-type password",
     "save": "Save",
-    "saved": "Saved"
+    "saved": "Saved",
+    "success_transaction_broadcasted" : "Success! You transaction has been broadcasted!"
   },
   "notifications": {
     "would_you_like_to_receive_notifications": "Would you like to receive notifications when you get incoming payments?",

screen/send/broadcast.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { ActivityIndicator, Linking, StyleSheet, View, KeyboardAvoidingView, Platform, Text, TextInput } from 'react-native';
+import { ActivityIndicator, Linking, StyleSheet, View, KeyboardAvoidingView, Platform, TextInput } from 'react-native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import loc from '../../loc';
 import { HDSegwitBech32Wallet } from '../../class';
@@ -14,10 +14,11 @@ import {
   BlueTextCentered,
   BlueBigCheckmark,
   BlueNavigationStyle,
+  BlueButtonLink,
 } from '../../BlueComponents';
-import { BlueCurrentTheme } from '../../components/themes';
 import BlueElectrum from '../../blue_modules/BlueElectrum';
 import Notifications from '../../blue_modules/notifications';
+import { useTheme } from '@react-navigation/native';
 const bitcoin = require('bitcoinjs-lib');
 
 const BROADCAST_RESULT = Object.freeze({
@@ -28,9 +29,23 @@ const BROADCAST_RESULT = Object.freeze({
 });
 
 const Broadcast = () => {
-  const [tx, setTx] = useState('');
-  const [txHex, setTxHex] = useState('');
+  const [tx, setTx] = useState();
+  const [txHex, setTxHex] = useState();
+  const { colors } = useTheme();
   const [broadcastResult, setBroadcastResult] = useState(BROADCAST_RESULT.none);
+  const stylesHooks = StyleSheet.create({
+    blueArea: {
+      backgroundColor: colors.background,
+    },
+    text: {
+      color: colors.foregroundColor,
+    },
+    input: {
+      borderColor: colors.formBorder,
+      borderBottomColor: colors.formBorder,
+      backgroundColor: colors.inputBackgroundColor,
+    },
+  });
   const handleUpdateTxHex = nextValue => setTxHex(nextValue.trim());
   const handleBroadcast = async () => {
     setBroadcastResult(BROADCAST_RESULT.pending);
@@ -43,7 +58,9 @@ const Broadcast = () => {
         const tx = bitcoin.Transaction.fromHex(txHex);
         const txid = tx.getId();
         setTx(txid);
+
         setBroadcastResult(BROADCAST_RESULT.success);
+        ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
         Notifications.majorTomToGroundControl([], [], [txid]);
       } else {
         setBroadcastResult(BROADCAST_RESULT.error);
@@ -82,6 +99,8 @@ const Broadcast = () => {
                 <BlueFormLabel>{status}</BlueFormLabel>
                 {BROADCAST_RESULT.pending === broadcastResult && <ActivityIndicator size="small" />}
               </View>
+
+              <View style={[styles.input, stylesHooks.input]}>
                 <TextInput
                   style={styles.text}
                   maxHeight={100}
@@ -90,9 +109,11 @@ const Broadcast = () => {
                   minWidth="100%"
                   multiline
                   editable
+                  placeholderTextColor="#81868e"
                   value={txHex}
                   onChangeText={handleUpdateTxHex}
                 />
+              </View>
 
               <BlueSpacing10 />
               <BlueButton
@@ -133,9 +154,6 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
   },
-  link: {
-    color: BlueCurrentTheme.colors.foregroundColor,
-  },
   mainCard: {
     padding: 0,
     display: 'flex',
@@ -155,41 +173,39 @@ const styles = StyleSheet.create({
     height: 30,
     maxHeight: 30,
   },
-  text: {
-    flex: 1,
-    borderColor: '#ebebeb',
-    backgroundColor: '#d2f8d6',
+  input: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderBottomWidth: 0.5,
+    alignItems: 'center',
     borderRadius: 4,
-    marginTop: 20,
-    color: BlueCurrentTheme.colors.foregroundColor,
-    fontWeight: '500',
-    fontSize: 14,
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    paddingTop: 16,
+  },
+  text: {
+    padding: 8,
+    minHeight: 33,
+    color: '#81868e',
   },
 });
 
-function SuccessScreen({ tx }) {
+const SuccessScreen = ({ tx }) => {
   if (!tx) {
     return null;
   }
+
   return (
     <View style={styles.wrapper}>
       <BlueCard>
         <View style={styles.broadcastResultWrapper}>
           <BlueBigCheckmark />
           <BlueSpacing20 />
-          <BlueTextCentered>Success! You transaction has been broadcasted!</BlueTextCentered>
+          <BlueTextCentered>{loc.settings.success_transaction_broadcasted}</BlueTextCentered>
           <BlueSpacing10 />
-          <Text style={styles.link} onPress={() => Linking.openURL(`https://blockstream.info/tx/${tx}`)}>
-            Open link in explorer
-          </Text>
+          <BlueButtonLink title={loc.settings.open_link_in_explorer} onPress={() => Linking.openURL(`https://blockstream.info/tx/${tx}`)} />
         </View>
       </BlueCard>
     </View>
   );
-}
+};
 
 SuccessScreen.propTypes = {
   tx: PropTypes.string.isRequired,