REF: SecondButton to TSX and new design

BlueComponents.js

@@ -36,42 +36,6 @@ if (aspectRatio > 1.6) {
   isIpad = true;
 }
 
-export const SecondButton = forwardRef((props, ref) => {
-  const { colors } = useTheme();
-  let backgroundColor = props.backgroundColor ? props.backgroundColor : colors.buttonBlueBackgroundColor;
-  let fontColor = colors.buttonTextColor;
-  if (props.disabled === true) {
-    backgroundColor = colors.buttonDisabledBackgroundColor;
-    fontColor = colors.buttonDisabledTextColor;
-  }
-
-  return (
-    <TouchableOpacity
-      accessibilityRole="button"
-      style={{
-        borderWidth: 0.7,
-        borderColor: 'transparent',
-        backgroundColor,
-        minHeight: 45,
-        height: 45,
-        maxHeight: 45,
-        borderRadius: 25,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        flexGrow: 1,
-      }}
-      {...props}
-      ref={ref}
-    >
-      <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
-        {props.icon && <Icon name={props.icon.name} type={props.icon.type} color={props.icon.color} />}
-        {props.title && <Text style={{ marginHorizontal: 8, fontSize: 16, color: fontColor }}>{props.title}</Text>}
-      </View>
-    </TouchableOpacity>
-  );
-});
-
 export const BitcoinButton = props => {
   const { colors } = useTheme();
   return (

components/Button.tsx

@@ -60,8 +60,8 @@ const styles = StyleSheet.create({
   button: {
     borderWidth: 0.7,
     minHeight: 45,
-    height: 45,
-    maxHeight: 45,
+    height: 48,
+    maxHeight: 48,
     borderRadius: 25,
     justifyContent: 'center',
     alignItems: 'center',
@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
   text: {
     marginHorizontal: 8,
     fontSize: 16,
-    fontWeight: '500',
+    fontWeight: '600',
   },
 });
 

components/SecondButton.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import { useTheme } from './themes';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Icon } from 'react-native-elements';
+
+type IconProps = {
+  name: string;
+  type: string;
+  color: string;
+};
+
+type SecondButtonProps = {
+  backgroundColor?: string;
+  disabled?: boolean;
+  icon?: IconProps;
+  title?: string;
+};
+
+export const SecondButton = forwardRef<TouchableOpacity, SecondButtonProps>((props, ref) => {
+  const { colors } = useTheme();
+  let backgroundColor = props.backgroundColor ? props.backgroundColor : colors.buttonGrayBackgroundColor;
+  let fontColor = colors.secondButtonTextColor;
+  if (props.disabled === true) {
+    backgroundColor = colors.buttonDisabledBackgroundColor;
+    fontColor = colors.buttonDisabledTextColor;
+  }
+
+  return (
+    <TouchableOpacity accessibilityRole="button" style={[styles.button, { backgroundColor }]} {...props} ref={ref}>
+      <View style={styles.view}>
+        {props.icon && <Icon name={props.icon.name} type={props.icon.type} color={props.icon.color} />}
+        {props.title && <Text style={[styles.text, { color: fontColor }]}>{props.title}</Text>}
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+const styles = StyleSheet.create({
+  button: {
+    minHeight: 45,
+    height: 48,
+    maxHeight: 48,
+    borderRadius: 7,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    flexGrow: 1,
+  },
+  content: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    marginHorizontal: 8,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  view: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

components/themes.ts

@@ -14,6 +14,7 @@ export const BlueDefaultTheme = {
     borderTopColor: 'rgba(0, 0, 0, 0.1)',
     buttonBackgroundColor: '#ccddf9',
     buttonTextColor: '#0c2550',
+    secondButtonTextColor: '#50555C',
     buttonAlternativeTextColor: '#2f5fb3',
     buttonDisabledBackgroundColor: '#eef0f4',
     buttonDisabledTextColor: '#9aa0aa',
@@ -22,6 +23,7 @@ export const BlueDefaultTheme = {
     alternativeTextColor: '#9aa0aa',
     alternativeTextColor2: '#0f5cc0',
     buttonBlueBackgroundColor: '#ccddf9',
+    buttonGrayBackgroundColor: '#EEEEEE',
     incomingBackgroundColor: '#d2f8d6',
     incomingForegroundColor: '#37c0a1',
     outgoingBackgroundColor: '#f8d2d2',

screen/send/psbtWithHardwareWallet.js

@@ -6,7 +6,7 @@ import { useNavigation, useRoute, useIsFocused } from '@react-navigation/native'
 import RNFS from 'react-native-fs';
 import Biometric from '../../class/biometrics';
 
-import { SecondButton, BlueText, BlueCard, BlueSpacing20, BlueCopyToClipboardButton } from '../../BlueComponents';
+import { BlueText, BlueCard, BlueSpacing20, BlueCopyToClipboardButton } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -17,6 +17,7 @@ import { requestCameraAuthorization } from '../../helpers/scan-qr';
 import { useTheme } from '../../components/themes';
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 import SafeArea from '../../components/SafeArea';
+import { SecondButton } from '../../components/SecondButton';
 const BlueElectrum = require('../../blue_modules/BlueElectrum');
 const bitcoin = require('bitcoinjs-lib');
 const fs = require('../../blue_modules/fs');

screen/wallets/details.js

@@ -17,7 +17,7 @@ import {
   ActivityIndicator,
   I18nManager,
 } from 'react-native';
-import { BlueCard, BlueLoading, BlueSpacing10, BlueSpacing20, BlueText, SecondButton } from '../../BlueComponents';
+import { BlueCard, BlueLoading, BlueSpacing10, BlueSpacing20, BlueText } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { LightningCustodianWallet } from '../../class/wallets/lightning-custodian-wallet';
 import Biometric from '../../class/biometrics';
@@ -46,6 +46,8 @@ import { PERMISSIONS, RESULTS, request } from 'react-native-permissions';
 import { useTheme } from '../../components/themes';
 import ListItem from '../../components/ListItem';
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
+import Button from '../../components/Button';
+import { SecondButton } from '../../components/SecondButton';
 
 const prompt = require('../../helpers/prompt');
 
@@ -653,7 +655,7 @@ const WalletDetails = () => {
             <BlueCard style={styles.address}>
               <View>
                 <BlueSpacing20 />
-                <SecondButton onPress={navigateToWalletExport} testID="WalletExport" title={loc.wallets.details_export_backup} />
+                <Button onPress={navigateToWalletExport} testID="WalletExport" title={loc.wallets.details_export_backup} />
                 {walletTransactionsLength > 0 && (
                   <>
                     <BlueSpacing20 />