fixup! fix(trade): last transactions design

trezor · Nov 28, 2024 · 5138fd1 · 5138fd1
1 parent 9bdc342
commit 5138fd1
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketIcon.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketIcon.tsx
@@ -16,7 +16,8 @@ interface CoinmarketIconProps {
 
 export const CoinmarketIcon = ({ iconUrl }: CoinmarketIconProps) => {
     const currentTheme = useSelector(state => state.suite.settings.theme.variant);
-    const iconWrapperSize = iconSizes.mediumLarge + 4;
+    const SIDE_PADDING = 2;
+    const iconWrapperSize = iconSizes.mediumLarge + 2 * SIDE_PADDING;
 
     return (
         <CoinmarketIconWrapper $isDark={currentTheme === 'dark'}>

diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketProviderInfo.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketProviderInfo.tsx
@@ -30,9 +30,7 @@ export const CoinmarketProviderInfo = ({ exchange, providers }: CoinmarketProvid
                     {provider.brandName ?? provider.companyName}
                 </>
             ) : (
-                <Row margin={{ left: spacings.xl }}>
-                    <Text margin={{ left: spacings.xs }}>{exchange}</Text>
-                </Row>
+                <Text margin={{ left: spacings.xxl }}>{exchange}</Text>
             )}
         </Row>
     );

diff --git a/...et/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx b/...et/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx
@@ -18,11 +18,7 @@ export const CoinmarketTransactionContainer = ({
     return (
         <Card fillType="none" margin={{ bottom: spacings.lg }}>
             <Row flexWrap={isBelowDesktop ? 'wrap' : undefined}>
-                <Column
-                    alignItems="stretch"
-                    flex="auto"
-                    width={isBelowDesktop ? 'calc(100% - 180px)' : '100%'}
-                >
+                <Column flex="auto" width={isBelowDesktop ? 'calc(100% - 180px)' : '100%'}>
                     {TradeDetail}
                 </Column>
                 <Column

diff --git a/...nmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionInfo.tsx b/...nmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionInfo.tsx
@@ -1,4 +1,4 @@
-import { Row, Text } from '@trezor/components';
+import { InfoPair, Row, Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { FormattedDate } from 'src/components/suite';
@@ -28,8 +28,15 @@ export const CoinmarketTransactionInfo = ({ trade }: CoinmarketTransactionInfoPr
     return (
         <Text margin={{ top: spacings.xs }} variant="tertiary" typographyStyle="label" as="div">
             <Row alignItems="center" flexWrap="wrap">
-                {tradeType} • <FormattedDate value={date} date time /> •{' '}
-                <CoinmarketTransactionStatus trade={trade} />
+                <InfoPair
+                    leftContent={
+                        <InfoPair
+                            leftContent={tradeType}
+                            rightContent={<FormattedDate value={date} date time />}
+                        />
+                    }
+                    rightContent={<CoinmarketTransactionStatus trade={trade} />}
+                />
             </Row>
         </Text>
     );

diff --git a/...arket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionStatus.tsx b/...arket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionStatus.tsx
@@ -2,7 +2,6 @@ import { DefaultTheme, useTheme } from 'styled-components';
 import { BuyTradeStatus, ExchangeTradeStatus, SellTradeStatus } from 'invity-api';
 
 import { Icon, Row, Text } from '@trezor/components';
-import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite';
 import { getStatusMessage as getBuyStatusMessage } from 'src/utils/wallet/coinmarket/buyUtils';
@@ -131,7 +130,7 @@ export const CoinmarketTransactionStatus = ({ trade }: CoinmarketTransactionStat
     if (!data) return null;
 
     return (
-        <Row margin={{ left: spacings.xxs }}>
+        <Row>
             <Icon color={data.color} size={10} name={data.icon} margin={{ right: 4 }} />
             <Text color={data.color} data-testid="@coinmarket/transaction/status">
                 <Translation id={data.statusMessageId} />