swap: update/fix design

apps/wallet-mobile/src/TxHistory/PairedBalance.tsx

@@ -98,7 +98,7 @@ const useStrings = () => {
 
 const styles = StyleSheet.create({
   pairedBalanceText: {
-    fontSize: 14,
+    fontSize: 12,
     lineHeight: 24,
     fontFamily: 'Rubik-Regular',
     color: COLORS.TEXT_INPUT,

apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx

@@ -120,7 +120,7 @@ const styles = StyleSheet.create({
   },
   name: {
     color: COLORS.DARK_TEXT,
-    fontSize: 14,
+    fontSize: 16,
     lineHeight: 22,
     fontWeight: '500',
     fontFamily: 'Rubik-Medium',
@@ -134,6 +134,8 @@ const styles = StyleSheet.create({
   quantity: {
     color: COLORS.DARK_TEXT,
     textAlign: 'right',
+    fontSize: 16,
+    fontFamily: 'Rubik-Regular',
   },
   row: {
     flexDirection: 'row',

apps/wallet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx

@@ -16,7 +16,7 @@ import {PoolIcon} from '../../PoolIcon/PoolIcon'
 import {useStrings} from '../../strings'
 import {useSwapForm} from '../../SwapFormProvider'
 
-const PRECISION = 14
+const PRECISION = 10
 
 type Props = {
   pools?: ReadonlyArray<Swap.Pool>
@@ -59,14 +59,15 @@ export const SelectPoolFromList = ({pools = []}: Props) => {
         const formattedTvl = Quantities.format(tvl, decimals, 0)
         const formattedBatcherFeeInPt = Quantities.format(pool.batcherFee.quantity, decimals, decimals)
         const marketPrice = getMarketPrice(pool, orderData.amounts.sell.tokenId)
+        const selectedPoolId = selectedCardIndex ?? orderData?.bestPoolCalculation?.pool?.poolId ?? null
 
         return (
           <View key={pool.poolId}>
             <Spacer height={16} />
 
             <View style={[styles.shadowProp]}>
               <LinearGradient
-                colors={pool.poolId === selectedCardIndex ? ['#E4E8F7', '#C6F7F7'] : [COLORS.WHITE, COLORS.WHITE]}
+                colors={pool.poolId === selectedPoolId ? ['#E4E8F7', '#C6F7F7'] : [COLORS.WHITE, COLORS.WHITE]}
                 style={styles.linearGradient}
               >
                 <TouchableOpacity key={pool.poolId} onPress={() => handleOnPoolSelection(pool)} style={[styles.card]}>
@@ -190,6 +191,9 @@ const styles = StyleSheet.create({
   },
   infoLabel: {
     color: '#6B7384',
+    fontSize: 16,
+  },
+  infoValue: {
+    fontSize: 16,
   },
-  infoValue: {},
 })

apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ShowSubmittedTxScreen/ShowSubmittedTxScreen.tsx

@@ -1,6 +1,7 @@
 import {createTypeGuardFromSchema, isString} from '@yoroi/common'
 import React from 'react'
 import {Linking, StyleSheet, View} from 'react-native'
+import {SafeAreaView} from 'react-native-safe-area-context'
 import {z} from 'zod'
 
 import {Button, Spacer, Text} from '../../../../../components'
@@ -30,33 +31,35 @@ export const ShowSubmittedTxScreen = () => {
   }
 
   return (
-    <View style={styles.container}>
-      <SubmittedTxImage />
+    <SafeAreaView style={{flex: 1}} edges={['left', 'right', 'bottom']}>
+      <View style={styles.container}>
+        <SubmittedTxImage />
 
-      <Text style={styles.title}>{strings.transactionSigned}</Text>
+        <Text style={styles.title}>{strings.transactionSigned}</Text>
 
-      <Text style={styles.text}>{strings.transactionDisplay}</Text>
+        <Text style={styles.text}>{strings.transactionDisplay}</Text>
 
-      <Spacer height={20} />
+        <Spacer height={20} />
 
-      {isString(params?.txId) && (
-        <Button
-          onPress={navigateToExplorer}
-          title={strings.seeOnExplorer}
-          style={styles.explorerButton}
-          outlineShelley
-        />
-      )}
+        {isString(params?.txId) && (
+          <Button
+            onPress={navigateToExplorer}
+            title={strings.seeOnExplorer}
+            style={styles.explorerButton}
+            outlineShelley
+          />
+        )}
 
-      <View style={styles.bottomFixed}>
-        <Button
-          onPress={() => navigate.swapOpenOrders()}
-          title={strings.goToOrders}
-          style={styles.button}
-          shelleyTheme
-        />
+        <View style={styles.bottomFixed}>
+          <Button
+            onPress={() => navigate.swapOpenOrders()}
+            title={strings.goToOrders}
+            style={styles.button}
+            shelleyTheme
+          />
+        </View>
       </View>
-    </View>
+    </SafeAreaView>
   )
 }
 

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditPool/SelectPoolFromListScreen/SelectPoolFromListScreen.tsx

@@ -1,6 +1,7 @@
 import {useSwap} from '@yoroi/swap'
 import React from 'react'
-import {ScrollView, StyleSheet} from 'react-native'
+import {ScrollView} from 'react-native'
+import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {Counter} from '../../../../../common/Counter/Counter'
 import {SelectPoolFromList} from '../../../../../common/SelectPool/SelectPoolFromList/SelectPoolFromList'
@@ -15,23 +16,12 @@ export const SelectPoolFromListScreen = () => {
   const poolCounter = Array.isArray(pools) ? pools.length : 0
 
   return (
-    <>
+    <SafeAreaView style={{flex: 1}} edges={['left', 'right', 'bottom']}>
       <ScrollView>
         <SelectPoolFromList pools={pools} />
       </ScrollView>
 
-      <Counter
-        counter={poolCounter}
-        unitsText={strings.pools(poolCounter)}
-        closingText={strings.available}
-        style={styles.counter}
-      />
-    </>
+      <Counter counter={poolCounter} unitsText={strings.pools(poolCounter)} closingText={strings.available} />
+    </SafeAreaView>
   )
 }
-
-const styles = StyleSheet.create({
-  counter: {
-    paddingVertical: 16,
-  },
-})

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditSlippage/EditSlippageScreen/EditSlippageScreen.tsx

@@ -140,6 +140,7 @@ export const EditSlippageScreen = () => {
               autoFocus={isInputEnabled}
               style={styles.input}
               keyboardType="numeric"
+              selectionColor="#242838"
             />
 
             <Text style={styles.percentLabel}>%</Text>

apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx

@@ -100,6 +100,7 @@ export const CompletedOrders = () => {
     <>
       <View style={styles.container}>
         <FlatList
+          contentContainerStyle={{paddingTop: 10, paddingHorizontal: 16}}
           data={completeOrders}
           renderItem={({item}: {item: MappedRawOrder}) => <ExpandableOrder order={item} />}
           keyExtractor={(item) => item.id}
@@ -300,8 +301,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: COLORS.WHITE,
-    paddingTop: 10,
-    paddingHorizontal: 16,
   },
   flex: {
     flex: 1,

apps/wallet-mobile/translations/messages/src/features/Swap/common/AmountCard/AmountCard.json

@@ -4,29 +4,29 @@
     "defaultMessage": "!!!Select token",
     "file": "src/features/Swap/common/AmountCard/AmountCard.tsx",
     "start": {
-      "line": 128,
+      "line": 129,
       "column": 15,
-      "index": 4086
+      "index": 4125
     },
     "end": {
-      "line": 131,
+      "line": 132,
       "column": 3,
-      "index": 4169
+      "index": 4208
     }
   },
   {
     "id": "swap.swapScreen.currentBalance",
     "defaultMessage": "!!!Current Balance",
     "file": "src/features/Swap/common/AmountCard/AmountCard.tsx",
     "start": {
-      "line": 132,
+      "line": 133,
       "column": 18,
-      "index": 4189
+      "index": 4228
     },
     "end": {
-      "line": 135,
+      "line": 136,
       "column": 3,
-      "index": 4278
+      "index": 4317
     }
   }
 ]