From 073e8f947281e053004d668d40e21bcc5f4fea08 Mon Sep 17 00:00:00 2001
From: Paul Puey <paul@edge.app>
Date: Tue, 16 Jan 2024 17:22:43 -0800
Subject: [PATCH] Fix spacing and text size of Enter Amount Scene

---
 .../CryptoExchangeQuoteScene.test.tsx.snap    |   9 +-
 src/components/cards/PoweredByCard.tsx        |   5 +-
 .../gui/scenes/FiatPluginEnterAmountScene.tsx | 149 +++++++++---------
 3 files changed, 84 insertions(+), 79 deletions(-)

diff --git a/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap
index 2bad404e2e9..28737912f7e 100644
--- a/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap
+++ b/src/__tests__/scenes/__snapshots__/CryptoExchangeQuoteScene.test.tsx.snap
@@ -1312,7 +1312,6 @@ exports[`CryptoExchangeQuoteScreenComponent should render with loading props 1`]
               "alignItems": "center",
               "flexDirection": "row",
               "justifyContent": "center",
-              "marginVertical": 11,
             }
           }
         >
@@ -1353,10 +1352,10 @@ exports[`CryptoExchangeQuoteScreenComponent should render with loading props 1`]
                 "marginRight": 11,
                 "marginTop": 11,
                 "opacity": 1,
-                "paddingBottom": 22,
-                "paddingLeft": 22,
-                "paddingRight": 22,
-                "paddingTop": 22,
+                "paddingBottom": 11,
+                "paddingLeft": 11,
+                "paddingRight": 11,
+                "paddingTop": 11,
               }
             }
           >
diff --git a/src/components/cards/PoweredByCard.tsx b/src/components/cards/PoweredByCard.tsx
index bd9d01a8765..dcc2bd3cd9d 100644
--- a/src/components/cards/PoweredByCard.tsx
+++ b/src/components/cards/PoweredByCard.tsx
@@ -21,7 +21,7 @@ export const PoweredByCard = (props: Props) => {
 
   return (
     <View style={styles.cardContainer}>
-      <CardUi4 paddingRem={1} onPress={onPress}>
+      <CardUi4 paddingRem={0.5} onPress={onPress}>
         <View style={styles.poweredByContainer}>
           <FastImage style={styles.poweredByIcon} source={iconSrc} resizeMode="contain" />
           <View style={styles.poweredByContainerColumn}>
@@ -44,8 +44,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
   cardContainer: {
     alignItems: 'center',
     flexDirection: 'row', // Make the card shrink
-    justifyContent: 'center',
-    marginVertical: theme.rem(0.5)
+    justifyContent: 'center'
   },
   poweredByContainerRow: {
     flexDirection: 'row'
diff --git a/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx b/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx
index 769bb970dc8..17ac26c3d51 100644
--- a/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx
+++ b/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useEffect } from 'react'
-import { Image, Text, View } from 'react-native'
+import { Image, Text, TextStyle, View } from 'react-native'
 
 import { PoweredByCard } from '../../../components/cards/PoweredByCard'
 import { SceneWrapper } from '../../../components/common/SceneWrapper'
@@ -9,6 +9,7 @@ import { cacheStyles, Theme, useTheme } from '../../../components/services/Theme
 import { FilledTextInput } from '../../../components/themed/FilledTextInput'
 import { MainButton } from '../../../components/themed/MainButton'
 import { SceneHeader } from '../../../components/themed/SceneHeader'
+import { SectionView } from '../../../components/ui4/SectionView'
 import { useHandler } from '../../../hooks/useHandler'
 import { lstrings } from '../../../locales/strings'
 import { EdgeSceneProps } from '../../../types/routerTypes'
@@ -133,82 +134,88 @@ export const FiatPluginEnterAmountScene = React.memo((props: Props) => {
       <SceneHeader style={styles.sceneHeader} title={headerTitle} underline withTopMargin>
         {headerIcon}
       </SceneHeader>
-      <View style={styles.container}>
-        <View style={styles.textFields}>
-          <FilledTextInput
-            numeric
-            maxDecimals={2}
-            autoCorrect={false}
-            autoFocus
-            autoCapitalize="none"
-            keyboardType="decimal-pad"
-            placeholder={label1}
-            onChangeText={handleChangeText1}
-            onSubmitEditing={handleSubmit}
-            showSpinner={spinner1}
-            value={value1 ?? '0'}
-          />
-          <FilledTextInput
-            numeric
-            maxDecimals={6}
-            autoCorrect={false}
-            autoFocus={false}
-            autoCapitalize="none"
-            keyboardType="decimal-pad"
-            placeholder={label2}
-            onChangeText={handleChangeText2}
-            onSubmitEditing={handleSubmit}
-            showSpinner={spinner2}
-            value={value2 ?? '0'}
-          />
+      <SectionView>
+        <View style={styles.container}>
+          <View style={styles.textFields}>
+            <FilledTextInput
+              numeric
+              maxDecimals={2}
+              autoCorrect={false}
+              autoFocus
+              autoCapitalize="none"
+              keyboardType="decimal-pad"
+              placeholder={label1}
+              onChangeText={handleChangeText1}
+              onSubmitEditing={handleSubmit}
+              showSpinner={spinner1}
+              textsizeRem={1.5}
+              value={value1 ?? '0'}
+              vertical={0.5}
+            />
+            <FilledTextInput
+              numeric
+              maxDecimals={6}
+              autoCorrect={false}
+              autoFocus={false}
+              autoCapitalize="none"
+              keyboardType="decimal-pad"
+              placeholder={label2}
+              onChangeText={handleChangeText2}
+              onSubmitEditing={handleSubmit}
+              showSpinner={spinner2}
+              textsizeRem={1.5}
+              value={value2 ?? '0'}
+              vertical={0.5}
+            />
+          </View>
+          {statusText != null ? <Text style={statusTextStyle}>{statusText.content}</Text> : null}
+          {poweredBy != null ? <PoweredByCard iconUri={poweredByIconPath} poweredByText={poweredBy.poweredByText} onPress={handlePoweredByPress} /> : null}
+          <MainButton disabled={spinner1 || spinner2} label={lstrings.string_next_capitalized} marginRem={[0.25, 0]} onPress={handleSubmit} />
         </View>
-        {statusText != null ? <Text style={statusTextStyle}>{statusText.content}</Text> : null}
-        {poweredBy != null ? <PoweredByCard iconUri={poweredByIconPath} poweredByText={poweredBy.poweredByText} onPress={handlePoweredByPress} /> : null}
-        <MainButton disabled={spinner1 || spinner2} label={lstrings.string_next_capitalized} marginRem={[1, 0]} type="secondary" onPress={handleSubmit} />
-      </View>
+      </SectionView>
     </SceneWrapper>
   )
 })
 
-const getStyles = cacheStyles((theme: Theme) => ({
-  sceneHeader: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center'
-  },
-  container: {
-    alignItems: 'center',
-    paddingTop: theme.rem(0.5),
-    width: '100%'
-  },
-  textFields: {
-    flexDirection: 'column',
-    minWidth: theme.rem(15),
-    maxWidth: theme.rem(20)
-  },
-  text: {
-    color: theme.primaryText,
-    fontFamily: theme.fontFaceMedium,
-    fontSize: theme.rem(1),
-    includeFontPadding: false
-  },
-  textWarning: {
-    color: theme.warningText,
+const getStyles = cacheStyles((theme: Theme) => {
+  const textCommon: TextStyle = {
     fontFamily: theme.fontFaceMedium,
     fontSize: theme.rem(1),
     includeFontPadding: false
-  },
-  textError: {
-    color: theme.dangerText,
-    fontFamily: theme.fontFaceMedium,
-    fontSize: theme.rem(1),
-    includeFontPadding: false
-  },
-  icon: {
-    height: theme.rem(1.5),
-    width: theme.rem(1.5),
-    marginRight: theme.rem(0.5),
-    marginLeft: theme.rem(0.5),
-    resizeMode: 'contain'
   }
-}))
+  return {
+    sceneHeader: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    },
+    container: {
+      alignItems: 'center',
+      paddingTop: theme.rem(0.5),
+      width: '100%'
+    },
+    textFields: {
+      flexDirection: 'column',
+      width: theme.rem(15)
+    },
+    text: {
+      ...textCommon,
+      color: theme.primaryText
+    },
+    textWarning: {
+      ...textCommon,
+      color: theme.warningText
+    },
+    textError: {
+      ...textCommon,
+      color: theme.dangerText
+    },
+    icon: {
+      height: theme.rem(1.5),
+      width: theme.rem(1.5),
+      marginRight: theme.rem(0.5),
+      marginLeft: theme.rem(0.5),
+      resizeMode: 'contain'
+    }
+  }
+})