fix(suite): trade box alignment

trezor · May 6, 2024 · cec6c7d · cec6c7d
1 parent 452d3ab
commit cec6c7d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 35 deletions.
diff --git a/packages/suite/src/components/suite/Ticker/PriceTicker.tsx b/packages/suite/src/components/suite/Ticker/PriceTicker.tsx
@@ -6,15 +6,16 @@ import { typography } from '@trezor/theme';
 import { LastUpdateTooltip } from './LastUpdateTooltip';
 
 const FiatRateWrapper = styled.span`
-    ${typography.hint}
+    ${typography.callout}
     display: flex;
     align-items: center;
-    color: ${({ theme }) => theme.TYPE_DARK_GREY};
+    color: ${({ theme }) => theme.textDefault};
 `;
 
 interface PriceTickerProps {
     symbol: string;
 }
+
 export const PriceTicker = ({ symbol }: PriceTickerProps) => (
     <FiatValue amount="1" symbol={symbol} showLoadingSkeleton>
         {({ rate, timestamp }) =>

diff --git a/packages/suite/src/components/suite/Ticker/TrendTicker.tsx b/packages/suite/src/components/suite/Ticker/TrendTicker.tsx
@@ -11,7 +11,7 @@ import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
 import { selectLanguage } from 'src/reducers/suite/suiteReducer';
 
 const PercentageWrapper = styled.div<{ $isRateGoingUp: boolean }>`
-    ${typography.hint}
+    ${typography.callout}
     gap: ${spacingsPx.xxs};
     display: flex;
     align-items: center;

diff --git a/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx b/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx
@@ -41,24 +41,23 @@ const Right = styled.div`
 
 const CoinWrapper = styled.div`
     display: flex;
-    flex-direction: column;
-    gap: ${spacingsPx.xxxs};
+    gap: ${spacingsPx.xs};
 `;
 
 const Coin = styled.div`
     display: flex;
-    align-items: center;
+    flex-direction: column;
 `;
 
 const CoinName = styled.div`
     ${typography.highlight}
-    margin-left: 6px;
+    margin-left: ${spacingsPx.xxxs};
 `;
 
 const CoinSymbol = styled.div`
     ${typography.hint}
     color: ${({ theme }) => theme.textSubdued};
-    margin-left: 8px;
+    margin-left: ${spacingsPx.xxxs};
 `;
 
 interface TradeBoxProps {
@@ -78,8 +77,8 @@ export const TradeBox = ({ account }: TradeBoxProps) => {
             <StyledCard>
                 <Left>
                     <CoinWrapper>
+                        <CoinLogo size={24} symbol={network.symbol} />
                         <Coin>
-                            <CoinLogo size={20} symbol={network.symbol} />
                             <CoinName>{network.name}</CoinName>
                             <CoinSymbol>{network.symbol.toUpperCase()}</CoinSymbol>
                         </Coin>

diff --git a/packages/suite/src/views/wallet/transactions/TradeBox/TradeBoxPrices.tsx b/packages/suite/src/views/wallet/transactions/TradeBox/TradeBoxPrices.tsx
@@ -2,14 +2,13 @@ import styled from 'styled-components';
 import { variables } from '@trezor/components';
 import { spacingsPx, typography } from '@trezor/theme';
 import { PropsWithChildren, ReactNode } from 'react';
-import { FiatValue, Translation, TrendTicker } from 'src/components/suite';
+import { PriceTicker, Translation, TrendTicker } from 'src/components/suite';
 import { Account } from 'src/types/wallet';
-import { NoRatesTooltip } from 'src/components/suite/Ticker/NoRatesTooltip';
-import { LastUpdateTooltip } from 'src/components/suite/Ticker/LastUpdateTooltip';
 
 const Wrapper = styled.div`
     display: flex;
     gap: 42px;
+    margin-top: 3px;
 
     ${variables.SCREEN_QUERY.BELOW_LAPTOP} {
         gap: 28px;
@@ -24,16 +23,7 @@ const CardContainer = styled.div`
 
 const Name = styled.div`
     color: ${({ theme }) => theme.textSubdued};
-    ${typography.label}
-    margin-bottom: 3px;
-`;
-
-const FiatRateWrapper = styled.span`
-    display: flex;
-    align-items: center;
-    color: ${({ theme }) => theme.TYPE_DARK_GREY};
-    font-size: ${variables.FONT_SIZE.SMALL};
-    font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
+    ${typography.hint}
 `;
 
 interface TradeBoxHeadCardProps extends PropsWithChildren {
@@ -43,7 +33,7 @@ interface TradeBoxHeadCardProps extends PropsWithChildren {
 const TradeBoxHeadCard = ({ name, children }: TradeBoxHeadCardProps) => (
     <CardContainer>
         <Name>{name}</Name>
-        <div>{children}</div>
+        {children}
     </CardContainer>
 );
 
@@ -54,19 +44,8 @@ interface TradeBoxPricesProps {
 export const TradeBoxPrices = ({ account }: TradeBoxPricesProps) => (
     <Wrapper>
         <TradeBoxHeadCard name={<Translation id="TR_EXCHANGE_RATE" />}>
-            <FiatValue amount="1" symbol={account.symbol} showLoadingSkeleton>
-                {({ rate, timestamp }) =>
-                    rate && timestamp ? (
-                        <LastUpdateTooltip timestamp={timestamp}>
-                            <FiatRateWrapper>{rate}</FiatRateWrapper>
-                        </LastUpdateTooltip>
-                    ) : (
-                        <NoRatesTooltip />
-                    )
-                }
-            </FiatValue>
+            <PriceTicker symbol={account.symbol} />
         </TradeBoxHeadCard>
-
         <TradeBoxHeadCard name={<Translation id="TR_7D_CHANGE" />}>
             <TrendTicker symbol={account.symbol} />
         </TradeBoxHeadCard>