gas: UI alignments and tweaks (#4181)

* alignments and tweaks * IS_ANDROID
rainbow-me · Sep 21, 2022 · a69ca46 · a69ca46
1 parent ddca14d
commit a69ca46
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 23 deletions.
diff --git a/src/components/expanded-state/CustomGasState.js b/src/components/expanded-state/CustomGasState.js
@@ -1,7 +1,6 @@
 import { useIsFocused, useRoute } from '@react-navigation/native';
 import React, { useEffect, useState } from 'react';
 import { getSoftMenuBarHeight } from 'react-native-extra-dimensions-android';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import Divider from '../Divider';
 import { ExchangeHeader } from '../exchange';
 import { FloatingPanel } from '../floating-panels';
@@ -21,6 +20,7 @@ import { useNavigation } from '@/navigation';
 import styled from '@/styled-thing';
 import { margin } from '@/styles';
 import { deviceUtils } from '@/utils';
+import { IS_ANDROID } from '@/env';
 
 const FOOTER_HEIGHT = 76;
 const CONTENT_HEIGHT = 310;
@@ -56,7 +56,7 @@ export default function CustomGasState({ asset }) {
   const sheetHeightWithoutKeyboard =
     CONTENT_HEIGHT +
     FOOTER_HEIGHT +
-    (android ? 40 + getSoftMenuBarHeight() : 0);
+    (IS_ANDROID ? 20 + getSoftMenuBarHeight() : 0);
 
   const sheetHeightWithKeyboard =
     sheetHeightWithoutKeyboard +
@@ -82,7 +82,7 @@ export default function CustomGasState({ asset }) {
         removeTopPadding: true,
       })}
       backgroundColor={colors.transparent}
-      contentHeight={ios ? longFormHeight : deviceHeight - getStatusBarHeight()}
+      contentHeight={longFormHeight}
       radius={0}
       scrollEnabled={false}
     >

diff --git a/src/components/expanded-state/custom-gas/FeesGweiInput.tsx b/src/components/expanded-state/custom-gas/FeesGweiInput.tsx
@@ -7,6 +7,7 @@ import { usePrevious } from '@/hooks';
 import { TextInput } from 'react-native';
 import { Box, Inline, Text } from '@/design-system';
 import { colors } from '@/styles';
+import { IS_ANDROID } from '@/env';
 
 const PLUS_ACTION_TYPE = 'plus';
 const MINUS_ACTION_TYPE = 'minus';
@@ -56,6 +57,7 @@ const GweiStepButton = ({
       useLateHaptic={false}
       padding="4px"
       margin="-4px"
+      marginTop={IS_ANDROID ? '-2px' : undefined}
     >
       <Text
         size="icon 16px"

diff --git a/src/components/expanded-state/custom-gas/FeesPanel.tsx b/src/components/expanded-state/custom-gas/FeesPanel.tsx
@@ -37,6 +37,7 @@ import { gweiToWei, parseGasFeeParam } from '@/parsers';
 import Routes from '@/navigation/routesNames';
 import { gasUtils } from '@/utils';
 import { Box, Inline, Inset, Row, Rows, Text } from '@/design-system';
+import { IS_ANDROID } from '@/env';
 
 const { CUSTOM, GAS_TRENDS, NORMAL, URGENT, FLASHBOTS_MIN_TIP } = gasUtils;
 
@@ -212,21 +213,22 @@ export default function FeesPanel({
           marginVertical="-8px"
           // @ts-expect-error
           onPress={openHelper}
+          backgroundColor="accent"
         >
-          <Text
-            color="primary (Deprecated)"
-            size="14px / 19px (Deprecated)"
-            weight="heavy"
-          >
-            {`${label} `}
+          <Inline horizontalSpace="4px" alignVertical="center">
             <Text
-              size="14px / 19px (Deprecated)"
-              color={{ custom: color }}
-              weight="bold"
+              color="primary (Deprecated)"
+              size="16px / 22px (Deprecated)"
+              weight="heavy"
             >
-              {text}
+              {label}
             </Text>
-          </Text>
+            <Box marginBottom={IS_ANDROID ? '-4px' : undefined}>
+              <Text size="icon 16px" color={{ custom: color }} weight="bold">
+                {text}
+              </Text>
+            </Box>
+          </Inline>
         </Box>
       );
     },
@@ -411,13 +413,13 @@ export default function FeesPanel({
           <Box paddingTop="8px">
             <Text
               color={{ custom: colors.red }}
-              size="14px / 19px (Deprecated)"
+              size="16px / 22px (Deprecated)"
               weight="heavy"
             >
               {errorPrefix}
               <Text
                 color={{ custom: colors.alpha(colors.blueGreyDark, 0.5) }}
-                size="14px / 19px (Deprecated)"
+                size="16px / 22px (Deprecated)"
                 weight="bold"
               >
                 {errorSuffix}
@@ -429,13 +431,13 @@ export default function FeesPanel({
           <Box paddingTop="8px">
             <Text
               color={{ custom: colors.yellowFavorite }}
-              size="14px / 19px (Deprecated)"
+              size="16px / 22px (Deprecated)"
               weight="heavy"
             >
               {warningPrefix}
               <Text
                 color={{ custom: colors.alpha(colors.blueGreyDark, 0.5) }}
-                size="14px / 19px (Deprecated)"
+                size="16px / 22px (Deprecated)"
                 weight="heavy"
               >
                 {warningSuffix}
@@ -711,7 +713,7 @@ export default function FeesPanel({
             scaleTo={1}
           >
             <Text
-              size="14px / 19px (Deprecated)"
+              size="16px / 22px (Deprecated)"
               weight="heavy"
               color={{
                 custom: GAS_TRENDS[currentGasTrend]?.color || colors.appleBlue,
@@ -737,7 +739,7 @@ export default function FeesPanel({
               >
                 <Text
                   color="primary (Deprecated)"
-                  size="14px / 19px (Deprecated)"
+                  size="16px / 22px (Deprecated)"
                   weight="heavy"
                 >
                   {formattedBaseFee}
@@ -812,14 +814,14 @@ export default function FeesPanel({
             <Inline alignVertical="center" alignHorizontal="justify">
               <Text
                 color="primary (Deprecated)"
-                size="14px / 19px (Deprecated)"
+                size="16px / 22px (Deprecated)"
                 weight="heavy"
               >
                 {lang.t('gas.max_transaction_fee')}
               </Text>
               <Text
                 color="primary (Deprecated)"
-                size="14px / 19px (Deprecated)"
+                size="16px / 22px (Deprecated)"
                 weight="heavy"
               >
                 {maxFee}

diff --git a/src/components/expanded-state/custom-gas/FeesPanelTabs.tsx b/src/components/expanded-state/custom-gas/FeesPanelTabs.tsx
@@ -6,6 +6,7 @@ import { colors } from '@/styles';
 import { gasUtils } from '@/utils';
 import { AccentColorProvider, Box, Inline, Inset, Text } from '@/design-system';
 import { useTheme } from '@/theme';
+import { IS_ANDROID } from '@/env';
 
 const { CUSTOM, URGENT, GasSpeedOrder } = gasUtils;
 
@@ -65,7 +66,7 @@ const TabPill = ({
             elevation: 5,
           }}
         >
-          <Inset vertical={{ custom: 8 }}>
+          <Inset vertical={{ custom: IS_ANDROID ? 8 : 9 }}>
             <Text
               size="16px / 22px (Deprecated)"
               color={{

diff --git a/src/components/expanded-state/custom-gas/GweiInputPill.tsx b/src/components/expanded-state/custom-gas/GweiInputPill.tsx
@@ -9,6 +9,7 @@ import { buildTextStyles, margin, padding } from '@/styles';
 import { useTheme } from '@/theme';
 import { TextInput } from 'react-native';
 import { Box, Inline, Inset, Text } from '@/design-system';
+import { IS_ANDROID } from '@/env';
 
 const ANDROID_EXTRA_LINE_HEIGHT = 6;
 
@@ -37,6 +38,8 @@ const GweiNumberInput = styled(TextInputMask).attrs(
     weight: 'heavy',
     maxWidth: 80,
     minWidth: 12,
+    height: IS_ANDROID ? 32 : undefined,
+    top: IS_ANDROID ? 1 : undefined,
   })
 )(
   // @ts-expect-error