From 3f9eba9960b72d56c22bd701297225859c5ce6eb Mon Sep 17 00:00:00 2001
From: kwoktung <onlyif2009@gmail.com>
Date: Tue, 27 Dec 2022 19:38:10 +0800
Subject: [PATCH] style: tweak TokenInfo styles (#2318)

---
 .../Components/MarketList/MarketTopHeader.tsx |   2 +-
 .../Swap/components/TransactionRate/index.tsx |   4 +-
 .../src/views/TokenDetail/TokenInfo/index.tsx | 135 +++++++++---------
 3 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/packages/kit/src/views/Market/Components/MarketList/MarketTopHeader.tsx b/packages/kit/src/views/Market/Components/MarketList/MarketTopHeader.tsx
index b44a940c7be..b38bf63b46b 100644
--- a/packages/kit/src/views/Market/Components/MarketList/MarketTopHeader.tsx
+++ b/packages/kit/src/views/Market/Components/MarketList/MarketTopHeader.tsx
@@ -136,7 +136,7 @@ const HeaderSmall: FC = () => {
             size="base"
             name="MagnifyingGlassMini"
             type="plain"
-            iconSize={16}
+            // iconSize={16}
             onPress={() => {
               showMarketSearch({
                 modalProps: {
diff --git a/packages/kit/src/views/Swap/components/TransactionRate/index.tsx b/packages/kit/src/views/Swap/components/TransactionRate/index.tsx
index 9a9e0f1279a..db1592aae6d 100644
--- a/packages/kit/src/views/Swap/components/TransactionRate/index.tsx
+++ b/packages/kit/src/views/Swap/components/TransactionRate/index.tsx
@@ -44,9 +44,9 @@ const TransactionRate: FC<TransactionRateProps> = ({
   const symbolB = tokenB.symbol;
   let title = '';
   if (!isSwitched) {
-    title = `1${symbolA} ≈ ${formatRateAmount(rate)}${symbolB}`;
+    title = `1 ${symbolA} ≈ ${formatRateAmount(rate)} ${symbolB}`;
   } else {
-    title = `1${symbolB} ≈ ${formatRateAmount(1 / Number(rate))}${symbolA}`;
+    title = `1 ${symbolB} ≈ ${formatRateAmount(1 / Number(rate))} ${symbolA}`;
   }
 
   return (
diff --git a/packages/kit/src/views/TokenDetail/TokenInfo/index.tsx b/packages/kit/src/views/TokenDetail/TokenInfo/index.tsx
index 04ab63b531c..6f5c0886a0a 100644
--- a/packages/kit/src/views/TokenDetail/TokenInfo/index.tsx
+++ b/packages/kit/src/views/TokenDetail/TokenInfo/index.tsx
@@ -244,70 +244,77 @@ const TokenInfo: FC<TokenInfoProps> = ({ token, priceReady }) => {
             {intl.formatMessage({ id: 'title__swap' })}
           </Typography.CaptionStrong>
         </Box>
-
-        {cryptoCurrency && (
-          <Box flex={1} mx={3} minW="56px" alignItems="center">
-            <IconButton
-              circle
-              size={isVertical ? 'xl' : 'lg'}
-              name="PlusOutline"
-              type="basic"
-              isDisabled={wallet?.type === 'watching'}
-              onPress={() => {
-                navigation.navigate(RootRoutes.Modal, {
-                  screen: ModalRoutes.FiatPay,
-                  params: {
-                    screen: FiatPayRoutes.AmountInputModal,
-                    params: {
-                      token: cryptoCurrency as CurrencyType,
-                      type: 'Buy',
-                    },
-                  },
-                });
-              }}
-            />
-            <Typography.CaptionStrong
-              textAlign="center"
-              mt="8px"
-              color={
-                wallet?.type === 'watching' ? 'text-disabled' : 'text-default'
-              }
-            >
-              {intl.formatMessage({ id: 'action__buy' })}
-            </Typography.CaptionStrong>
-          </Box>
-        )}
-        {sellEnable && (
-          <Box flex={1} mx={3} minW="56px" alignItems="center">
-            <IconButton
-              circle
-              size={isVertical ? 'xl' : 'lg'}
-              name="CurrencyDollarOutline"
-              type="basic"
-              isDisabled={wallet?.type === 'watching'}
-              onPress={() => {
-                navigation.navigate(RootRoutes.Modal, {
-                  screen: ModalRoutes.FiatPay,
-                  params: {
-                    screen: FiatPayRoutes.AmountInputModal,
-                    params: {
-                      token: cryptoCurrency as CurrencyType,
-                      type: 'Sell',
-                    },
-                  },
-                });
-              }}
-            />
-            <Typography.CaptionStrong
-              textAlign="center"
-              mt="8px"
-              color={
-                wallet?.type === 'watching' ? 'text-disabled' : 'text-default'
-              }
-            >
-              {intl.formatMessage({ id: 'action__sell' })}
-            </Typography.CaptionStrong>
-          </Box>
+        {isVertical ? null : (
+          <>
+            {cryptoCurrency && (
+              <Box flex={1} mx={3} minW="56px" alignItems="center">
+                <IconButton
+                  circle
+                  size={isVertical ? 'xl' : 'lg'}
+                  name="PlusOutline"
+                  type="basic"
+                  isDisabled={wallet?.type === 'watching'}
+                  onPress={() => {
+                    navigation.navigate(RootRoutes.Modal, {
+                      screen: ModalRoutes.FiatPay,
+                      params: {
+                        screen: FiatPayRoutes.AmountInputModal,
+                        params: {
+                          token: cryptoCurrency as CurrencyType,
+                          type: 'Buy',
+                        },
+                      },
+                    });
+                  }}
+                />
+                <Typography.CaptionStrong
+                  textAlign="center"
+                  mt="8px"
+                  color={
+                    wallet?.type === 'watching'
+                      ? 'text-disabled'
+                      : 'text-default'
+                  }
+                >
+                  {intl.formatMessage({ id: 'action__buy' })}
+                </Typography.CaptionStrong>
+              </Box>
+            )}
+            {sellEnable && (
+              <Box flex={1} mx={3} minW="56px" alignItems="center">
+                <IconButton
+                  circle
+                  size={isVertical ? 'xl' : 'lg'}
+                  name="CurrencyDollarOutline"
+                  type="basic"
+                  isDisabled={wallet?.type === 'watching'}
+                  onPress={() => {
+                    navigation.navigate(RootRoutes.Modal, {
+                      screen: ModalRoutes.FiatPay,
+                      params: {
+                        screen: FiatPayRoutes.AmountInputModal,
+                        params: {
+                          token: cryptoCurrency as CurrencyType,
+                          type: 'Sell',
+                        },
+                      },
+                    });
+                  }}
+                />
+                <Typography.CaptionStrong
+                  textAlign="center"
+                  mt="8px"
+                  color={
+                    wallet?.type === 'watching'
+                      ? 'text-disabled'
+                      : 'text-default'
+                  }
+                >
+                  {intl.formatMessage({ id: 'action__sell' })}
+                </Typography.CaptionStrong>
+              </Box>
+            )}
+          </>
         )}
         {priceReady && !isVertical && (
           <Box flex={1} mx={3} minW="56px" alignItems="center">