fix(send): tx details styles (#3063)

Emurgo · Jan 30, 2024 · 498a8b2 · 498a8b2
1 parent 5ea8dec
commit 498a8b2
Showing 1 changed file with 34 additions and 9 deletions.
diff --git a/apps/wallet-mobile/src/features/Send/useCases/ConfirmTx/Summary/ReceiverInfo.tsx b/apps/wallet-mobile/src/features/Send/useCases/ConfirmTx/Summary/ReceiverInfo.tsx
@@ -1,6 +1,7 @@
 import {nameServerName} from '@yoroi/resolver'
+import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 
 import {Spacer} from '../../../../../components/Spacer'
 import {Text} from '../../../../../components/Text'
@@ -13,34 +14,58 @@ type Props = {
 export const ReceiverInfo = ({target}: Props) => {
   const strings = useStrings()
   const {receiver, entry} = target
+  const styles = useStyles()
 
   return (
     <View>
-      <Text>{strings.receiver}:</Text>
+      <Text style={styles.label}>{strings.receiver}</Text>
 
-      <Spacer height={12} />
+      <Spacer height={2} />
 
       {target.receiver.as === 'domain' ? (
         <>
           <View style={{flexDirection: 'row'}}>
-            <Text>{receiver.selectedNameServer ? nameServerName[receiver.selectedNameServer] : ''}:</Text>
+            <Text style={styles.value}>
+              {receiver.selectedNameServer ? nameServerName[receiver.selectedNameServer] : ''}:
+            </Text>
 
             <Spacer width={5} />
 
-            <Text>{receiver.resolve}</Text>
+            <Text style={styles.value}>{receiver.resolve}</Text>
           </View>
 
           <Spacer height={12} />
 
-          <Text>{strings.walletAddress}:</Text>
+          <Text style={styles.label}>{strings.walletAddress}:</Text>
 
-          <Spacer height={12} />
+          <Spacer height={2} />
 
-          <Text testID="receiverAddressText">{entry.address}</Text>
+          <Text testID="receiverAddressText" style={styles.value}>
+            {entry.address}
+          </Text>
         </>
       ) : (
-        <Text testID="receiverAddressText">{entry.address}</Text>
+        <Text testID="receiverAddressText" style={styles.value}>
+          {entry.address}
+        </Text>
       )}
     </View>
   )
 }
+
+const useStyles = () => {
+  const {theme} = useTheme()
+  const {typography, color} = theme
+  const styles = StyleSheet.create({
+    label: {
+      ...typography['body-2-regular'],
+      color: color.gray[900],
+    },
+    value: {
+      ...typography['body-1-regular'],
+      color: color.gray[900],
+    },
+  })
+
+  return styles
+}