From 9c01d0621211b54e23832c808b8d3b550a59a23d Mon Sep 17 00:00:00 2001
From: Ivan Vershigora <ivan.vershigora@gmail.com>
Date: Fri, 15 Nov 2024 22:32:50 +0000
Subject: [PATCH] fix: some styles

---
 components/AddressInput.tsx    |  8 ++++----
 components/QRCodeComponent.tsx | 16 ++++++++++++----
 components/SelectFeeModal.tsx  |  3 +--
 screen/lnd/scanLndInvoice.js   |  6 +++++-
 screen/send/SendDetails.tsx    | 11 +++++++----
 5 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/components/AddressInput.tsx b/components/AddressInput.tsx
index 81f745efa..ae8b3b43d 100644
--- a/components/AddressInput.tsx
+++ b/components/AddressInput.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Keyboard, StyleSheet, TextInput, View } from 'react-native';
+import { Keyboard, StyleProp, StyleSheet, TextInput, View, ViewStyle } from 'react-native';
 import loc from '../loc';
 import { AddressInputScanButton } from './AddressInputScanButton';
 import { useTheme } from './themes';
@@ -19,6 +19,7 @@ interface AddressInputProps {
   onBlur?: () => void;
   onFocus?: () => void;
   testID?: string;
+  style?: StyleProp<ViewStyle>;
   keyboardType?:
     | 'default'
     | 'numeric'
@@ -49,6 +50,7 @@ const AddressInput = ({
   onBlur = () => {},
   onFocus = () => {},
   keyboardType = 'default',
+  style,
 }: AddressInputProps) => {
   const { colors } = useTheme();
   const stylesHook = StyleSheet.create({
@@ -81,7 +83,7 @@ const AddressInput = ({
   };
 
   return (
-    <View style={[styles.root, stylesHook.root]}>
+    <View style={[styles.root, stylesHook.root, style]}>
       <TextInput
         testID={testID}
         onChangeText={onChangeText}
@@ -120,8 +122,6 @@ const styles = StyleSheet.create({
     minHeight: 44,
     height: 44,
     alignItems: 'center',
-    marginVertical: 8,
-    marginHorizontal: 18,
     borderRadius: 4,
   },
   input: {
diff --git a/components/QRCodeComponent.tsx b/components/QRCodeComponent.tsx
index 6de2f6d34..7ce950770 100644
--- a/components/QRCodeComponent.tsx
+++ b/components/QRCodeComponent.tsx
@@ -20,6 +20,8 @@ interface QRCodeComponentProps {
   onError?: () => void;
 }
 
+const BORDER_WIDTH = 6;
+
 const actionIcons: { [key: string]: ActionIcons } = {
   Share: {
     iconValue: 'square.and.arrow.up',
@@ -62,7 +64,7 @@ const QRCodeComponent: React.FC<QRCodeComponentProps> = ({
   onError = () => {},
 }) => {
   const qrCode = useRef<any>();
-  const { colors } = useTheme();
+  const { colors, dark } = useTheme();
 
   const handleShareQRCode = () => {
     qrCode.current.toDataURL((data: string) => {
@@ -82,11 +84,17 @@ const QRCodeComponent: React.FC<QRCodeComponentProps> = ({
     }
   }, []);
 
+  // Adjust the size of the QR code to account for the border width
+  const newSize = dark ? size - BORDER_WIDTH * 2 : size;
+  const stylesHook = StyleSheet.create({
+    container: { borderWidth: dark ? BORDER_WIDTH : 0 },
+  });
+
   const renderQRCode = (
     <QRCode
       value={value}
       {...(isLogoRendered ? { logo: require('../img/qr-code.png') } : {})}
-      size={size}
+      size={newSize}
       logoSize={logoSize}
       color="#000000"
       logoBackgroundColor={colors.brandingColor}
@@ -99,7 +107,7 @@ const QRCodeComponent: React.FC<QRCodeComponentProps> = ({
 
   return (
     <View
-      style={styles.qrCodeContainer}
+      style={[styles.container, stylesHook.container]}
       testID="BitcoinAddressQRCodeContainer"
       accessibilityIgnoresInvertColors
       importantForAccessibility="no-hide-descendants"
@@ -120,5 +128,5 @@ const QRCodeComponent: React.FC<QRCodeComponentProps> = ({
 export default QRCodeComponent;
 
 const styles = StyleSheet.create({
-  qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
+  container: { borderRadius: 8, borderColor: '#FFFFFF' },
 });
diff --git a/components/SelectFeeModal.tsx b/components/SelectFeeModal.tsx
index db14a4c91..e46d24151 100644
--- a/components/SelectFeeModal.tsx
+++ b/components/SelectFeeModal.tsx
@@ -340,14 +340,13 @@ const styles = StyleSheet.create({
   feeModalFooter: {
     paddingVertical: 46,
     flexDirection: 'row',
-
     justifyContent: 'center',
     alignContent: 'center',
     alignItems: 'center',
     minHeight: 80,
   },
   feeModalFooterSpacing: {
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
   },
   memo: {
     flexDirection: 'row',
diff --git a/screen/lnd/scanLndInvoice.js b/screen/lnd/scanLndInvoice.js
index aa80c3e6d..02f2da8e5 100644
--- a/screen/lnd/scanLndInvoice.js
+++ b/screen/lnd/scanLndInvoice.js
@@ -326,6 +326,7 @@ const ScanLndInvoice = () => {
               launchedBy={name}
               onBlur={onBlur}
               keyboardType="email-address"
+              style={styles.addressInput}
             />
             <View style={styles.description}>
               <Text numberOfLines={0} style={styles.descriptionText}>
@@ -418,7 +419,7 @@ const styles = StyleSheet.create({
   },
   description: {
     flexDirection: 'row',
-    marginHorizontal: 20,
+    marginHorizontal: 16,
     alignItems: 'center',
     marginVertical: 0,
     borderRadius: 4,
@@ -435,4 +436,7 @@ const styles = StyleSheet.create({
     left: 20,
     top: 10,
   },
+  addressInput: {
+    marginHorizontal: 16,
+  },
 });
diff --git a/screen/send/SendDetails.tsx b/screen/send/SendDetails.tsx
index 14497bf43..cf8b14a5f 100644
--- a/screen/send/SendDetails.tsx
+++ b/screen/send/SendDetails.tsx
@@ -1264,10 +1264,10 @@ const SendDetails = () => {
           onBarScanned={processAddressData}
           address={item.address}
           isLoading={isLoading}
-          /* @ts-ignore marcos fixme */
           inputAccessoryViewID={DismissKeyboardInputAccessoryViewID}
           launchedBy={name}
           editable={isEditable}
+          style={styles.addressInput}
         />
         {addresses.length > 1 && (
           <Text style={[styles.of, stylesHook.of]}>{loc.formatString(loc._.of, { number: index + 1, total: addresses.length })}</Text>
@@ -1312,7 +1312,6 @@ const SendDetails = () => {
             style={styles.memoText}
             editable={!isLoading}
             onSubmitEditing={Keyboard.dismiss}
-            /* @ts-ignore marcos fixme */
             inputAccessoryViewID={DismissKeyboardInputAccessoryViewID}
           />
         </View>
@@ -1415,7 +1414,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 0.5,
     minHeight: 44,
     height: 44,
-    marginHorizontal: 20,
+    marginHorizontal: 16,
     alignItems: 'center',
     marginVertical: 8,
     borderRadius: 4,
@@ -1428,7 +1427,7 @@ const styles = StyleSheet.create({
   },
   fee: {
     flexDirection: 'row',
-    marginHorizontal: 20,
+    marginHorizontal: 16,
     justifyContent: 'space-between',
     alignItems: 'center',
   },
@@ -1450,4 +1449,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginVertical: 8,
   },
+  addressInput: {
+    marginHorizontal: 16,
+    marginVertical: 8,
+  },
 });