chore(suite): refactor layouts

packages/components/src/components/typography/utils.tsx

@@ -5,7 +5,7 @@ import { typography, TypographyStyle, typographyStyles } from '@trezor/theme';
 import { TransientProps, makePropsTransient } from '../../utils/transientProps';
 import { UIHorizontalAlignment, uiHorizontalAlignments } from '../../config/types';
 
-export const textWraps = ['balance', 'break-word', 'pretty'];
+export const textWraps = ['balance', 'break-word', 'pretty', 'nowrap'];
 export type TextWrap = (typeof textWraps)[number];
 
 export type TextProps = {

packages/product-components/src/components/PassphraseTypeCard/NonAsciiBanner.tsx

@@ -46,7 +46,7 @@ type NonAsciiBannerProps = {
 
 export const NonAsciiBanner = ({ variant }: NonAsciiBannerProps) => {
     return (
-        <Banner variant={variant} color="default" spacingX="xs">
+        <Banner variant={variant}>
             <Text>
                 <FormattedMessage
                     defaultMessage="We recommend using <code>ABC</code>, <code>abc</code>, <code>123</code>, <code>spaces</code> or <code>these special characters</code>"

packages/suite/src/components/dashboard/DashboardSection.tsx

@@ -15,8 +15,8 @@ export const DashboardSection = forwardRef(
         ref: Ref<HTMLDivElement>,
     ) => (
         <div ref={ref} {...rest}>
-            <Column data-testid={dataTestId}>
-                <Row as="header" justifyContent="space-between" margin={{ bottom: spacings.lg }}>
+            <Column data-testid={dataTestId} gap={spacings.md}>
+                <Row as="header" justifyContent="space-between">
                     {heading && (
                         <H3>
                             <Row as="span">{heading}</Row>

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/AddAccountModal/AccountTypeSelect/AccountTypeDescription.tsx

@@ -43,9 +43,7 @@ export const AccountTypeDescription = ({
 
     return (
         <Column alignItems="flex-start" gap={spacings.sm}>
-            <Paragraph variant="tertiary" typographyStyle="hint">
-                {renderAccountTypeDesc()}
-            </Paragraph>
+            <Paragraph>{renderAccountTypeDesc()}</Paragraph>
             {accountTypeUrl && <LearnMoreButton url={accountTypeUrl} />}
         </Column>
     );

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/AddAccountModal/AccountTypeSelect/AccountTypeSelect.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Column, Select } from '@trezor/components';
+import { Column, Paragraph, Select } from '@trezor/components';
 import { getAccountTypeName, getAccountTypeTech } from '@suite-common/wallet-utils';
 import { NetworkAccount, NetworkSymbol, NetworkType } from '@suite-common/wallet-config';
 import { spacings, typography } from '@trezor/theme';
@@ -79,12 +79,14 @@ export const AccountTypeSelect = ({
                 formatOptionLabel={formatLabel}
                 onChange={(option: Option) => onSelectAccountType(option.value)}
             />
-            <AccountTypeDescription
-                bip43Path={bip43PathToDescribe}
-                accountType={selectedAccountType?.accountType || 'normal'}
-                networkType={networkType}
-                symbol={symbol}
-            />
+            <Paragraph variant="tertiary" typographyStyle="hint">
+                <AccountTypeDescription
+                    bip43Path={bip43PathToDescribe}
+                    accountType={selectedAccountType?.accountType || 'normal'}
+                    networkType={networkType}
+                    symbol={symbol}
+                />
+            </Paragraph>
         </Column>
     );
 };

packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountBanners.tsx

@@ -1,5 +1,3 @@
-import { spacings } from '@trezor/theme';
-import { Column } from '@trezor/components';
 import { Context } from '@suite-common/message-system';
 import { isSupportedEthStakingNetworkSymbol } from '@suite-common/wallet-utils';
 
@@ -26,7 +24,7 @@ export const AccountBanners = ({ account }: AccountBannersProps) => {
     const { route } = useSelector(state => state.router);
 
     return (
-        <Column gap={spacings.xl}>
+        <>
             {account?.accountType === 'coinjoin' && <ContextMessage context={Context.coinjoin} />}
             {account?.symbol &&
                 isSupportedEthStakingNetworkSymbol(account.symbol) &&
@@ -41,6 +39,6 @@ export const AccountBanners = ({ account }: AccountBannersProps) => {
             <EvmExplanationBanner account={account} />
             <TaprootBanner account={account} />
             {account?.symbol && <StakeEthBanner account={account} />}
-        </Column>
+        </>
     );
 };

packages/suite/src/components/wallet/WalletLayout/WalletLayout.tsx

@@ -1,27 +1,19 @@
 import { ReactNode } from 'react';
 
-import styled from 'styled-components';
+import { SkeletonRectangle, Column } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
-import { SkeletonRectangle } from '@trezor/components';
-
-import { AppState, ExtendedMessageDescriptor } from 'src/types/suite';
+import { AppState } from 'src/types/suite';
 import { useTranslation, useLayout } from 'src/hooks/suite';
 import { PageHeader } from 'src/components/suite/layouts/SuiteLayout';
+import { TranslationKey } from 'src/components/suite/Translation';
 
 import { AccountBanners } from './AccountBanners/AccountBanners';
 import { AccountException } from './AccountException/AccountException';
 import { CoinjoinAccountDiscovery } from './CoinjoinAccountDiscovery/CoinjoinAccountDiscovery';
 import { AccountTopPanel } from './AccountTopPanel/AccountTopPanel';
 import { AccountNavigation } from './AccountTopPanel/AccountNavigation';
 
-// This placeholder makes the "Receive" and "Trade" tabs look aligned with other tabs in "Accounts" view,
-// which implement some kind of toolbar.
-// Height computation: 24px toolbarHeight + 20px marginBottom = 44px;
-const EmptyHeaderPlaceholder = styled.div`
-    width: 100%;
-    height: 44px;
-`;
-
 type WalletPageHeaderProps = {
     isSubpage?: boolean;
 };
@@ -37,22 +29,13 @@ const WalletPageHeader = ({ isSubpage }: WalletPageHeaderProps) => {
 };
 
 type WalletLayoutProps = {
-    title: ExtendedMessageDescriptor['id'];
+    title: TranslationKey;
     account: AppState['wallet']['selectedAccount'];
     isSubpage?: boolean;
-    showEmptyHeaderPlaceholder?: boolean;
-    className?: string;
     children?: ReactNode;
 };
 
-export const WalletLayout = ({
-    showEmptyHeaderPlaceholder = false,
-    title,
-    account,
-    isSubpage,
-    className,
-    children,
-}: WalletLayoutProps) => {
+export const WalletLayout = ({ title, account, isSubpage, children }: WalletLayoutProps) => {
     const { translationString } = useTranslation();
     const l10nTitle = translationString(title);
 
@@ -66,14 +49,12 @@ export const WalletLayout = ({
                 return (
                     <>
                         <AccountBanners account={selectedAccount} />
-                        {showEmptyHeaderPlaceholder && <EmptyHeaderPlaceholder />}
                         <CoinjoinAccountDiscovery />
                     </>
                 );
             } else {
                 return (
                     <>
-                        {showEmptyHeaderPlaceholder && <EmptyHeaderPlaceholder />}
                         <SkeletonRectangle
                             width="100%"
                             height="300px"
@@ -87,18 +68,15 @@ export const WalletLayout = ({
             return (
                 <>
                     <AccountBanners account={selectedAccount} />
-                    {showEmptyHeaderPlaceholder && <EmptyHeaderPlaceholder />}
                     {status === 'exception' ? (
                         <AccountException loader={loader} network={network} />
                     ) : (
-                        <div className={className}>{children}</div>
+                        children
                     )}
                 </>
             );
         }
     };
 
-    const pageContent = getPageContent();
-
-    return pageContent;
+    return <Column gap={spacings.xxxl}>{getPageContent()}</Column>;
 };

packages/suite/src/components/wallet/WalletLayout/WalletSubpageHeading.tsx

@@ -1,39 +1,20 @@
 import { ReactNode } from 'react';
 
-import styled from 'styled-components';
+import { H2, Row } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
-import { H2 } from '@trezor/components';
-import { spacingsPx } from '@trezor/theme';
-
-import type { ExtendedMessageDescriptor } from 'src/types/suite';
-import { Translation } from 'src/components/suite';
-
-const HeaderWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: ${spacingsPx.lg};
-`;
-
-const HeaderActions = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: ${spacingsPx.xxs};
-    flex: 1;
-`;
+import { TranslationKey, Translation } from 'src/components/suite/Translation';
 
 type WalletSubpageHeadingProps = {
-    title: ExtendedMessageDescriptor['id'];
+    title: TranslationKey;
     children?: ReactNode;
 };
 
 export const WalletSubpageHeading = ({ title, children }: WalletSubpageHeadingProps) => (
-    <HeaderWrapper>
+    <Row justifyContent="space-between">
         <H2>
             <Translation id={title} />
         </H2>
-
-        <HeaderActions>{children}</HeaderActions>
-    </HeaderWrapper>
+        <Row gap={spacings.xs}>{children}</Row>
+    </Row>
 );

packages/suite/src/views/dashboard/AssetsView/AssetCard/AssetCard.tsx

@@ -13,7 +13,7 @@ import {
     Row,
     SkeletonRectangle,
     variables,
-    Text,
+    InfoItem,
 } from '@trezor/components';
 import { AssetFiatBalance } from '@suite-common/assets';
 import { TokenInfo } from '@trezor/connect';
@@ -34,20 +34,11 @@ import { useAccountSearch, useLoadingSkeleton, useSelector } from 'src/hooks/sui
 import { goto } from 'src/actions/suite/routerActions';
 import { FiatHeader } from 'src/components/wallet/FiatHeader';
 
-import { ArrowIcon, styledHoverOnParentOfArrowIcon } from '../ArrowIcon';
 import { CoinmarketBuyButton } from '../CoinmarketBuyButton';
 import { AssetCardInfo, AssetCardInfoSkeleton } from './AssetCardInfo';
 import { AssetCardTokensAndStakingInfo } from './AssetCardTokensAndStakingInfo';
 import { handleTokensAndStakingData } from '../assetsViewUtils';
 
-// eslint-disable-next-line local-rules/no-override-ds-component
-const StyledCard = styled(Card)`
-    display: flex;
-    flex-direction: column;
-    transition: box-shadow 0.2s;
-    ${styledHoverOnParentOfArrowIcon};
-`;
-
 // eslint-disable-next-line local-rules/no-override-ds-component
 const WarningIcon = styled(Icon)`
     padding-left: ${spacingsPx.xxs};
@@ -147,28 +138,18 @@ export const AssetCard = ({
         );
 
     return (
-        <StyledCard paddingType="small" onClick={handleCardClick}>
-            <Column
-                gap={spacings.xxxl}
-                alignItems="flex-start"
-                flex="1"
-                margin={{
-                    top: spacings.xs,
-                    bottom: spacings.xs,
-                    left: spacings.xs,
-                    right: spacings.xs,
-                }}
-            >
-                <Row justifyContent="space-between" width="100%">
+        <Card paddingType="small" onClick={handleCardClick}>
+            <Column gap={spacings.xxxl} flex="1" margin={spacings.xs}>
+                <Row justifyContent="space-between">
                     <AssetCardInfo
                         network={network}
                         assetsFiatBalances={assetsFiatBalances}
                         index={index}
                     />
-                    <ArrowIcon size={16} name="arrowRightLong" color={theme.iconDisabled} />
+                    <Icon size={16} name="arrowRightLong" variant="disabled" />
                 </Row>
                 {!failed ? (
-                    <Column alignItems="flex-start">
+                    <Column>
                         <FiatAmount>
                             <FiatHeader
                                 symbol={symbol}
@@ -206,27 +187,21 @@ export const AssetCard = ({
             )}
             {!isTestnet(symbol) && (
                 <Card>
-                    <Row alignItems="center" justifyContent="space-between">
-                        <div>
-                            <Text typographyStyle="hint">
-                                <Translation id="TR_EXCHANGE_RATE" />
-                            </Text>
+                    <Row justifyContent="space-between" gap={spacings.md}>
+                        <InfoItem label={<Translation id="TR_EXCHANGE_RATE" />} flex="0">
                             <PriceTicker symbol={symbol} />
-                        </div>
-                        <div>
-                            <Text typographyStyle="hint">
-                                <Translation id="TR_7D_CHANGE" />
-                            </Text>
+                        </InfoItem>
+                        <InfoItem label={<Translation id="TR_7D_CHANGE" />} flex="0">
                             <TrendTicker symbol={symbol} />
-                        </div>
+                        </InfoItem>
                         <CoinmarketBuyButton
                             symbol={symbol}
                             data-testid={`@dashboard/assets/grid/${symbol}/buy-button`}
                         />
                     </Row>
                 </Card>
             )}
-        </StyledCard>
+        </Card>
     );
 };
 
@@ -235,33 +210,25 @@ export const AssetCardSkeleton = (props: { animate?: boolean }) => {
     const animate = props.animate ?? shouldAnimate;
 
     return (
-        <StyledCard>
-            <Column
-                gap={spacings.xxxl}
-                alignItems="flex-start"
-                flex="1"
-                margin={{
-                    top: spacings.xs,
-                    bottom: spacings.xs,
-                    left: spacings.xs,
-                    right: spacings.xs,
-                }}
-            >
-                <Row justifyContent="space-between" margin={{ bottom: spacings.xxxl }}>
+        <Card>
+            <Column gap={spacings.xxxl} flex="1" margin={spacings.xs}>
+                <Row justifyContent="space-between">
                     <AssetCardInfoSkeleton animate={animate} />
                 </Row>
-                <FiatAmount>
-                    <IntegerValue>
-                        <SkeletonRectangle animate={animate} width={95} height={32} />
-                    </IntegerValue>
-                </FiatAmount>
-                <CoinAmount>
-                    <SkeletonRectangle animate={animate} width={50} height={16} />
-                </CoinAmount>
+                <Column>
+                    <FiatAmount>
+                        <IntegerValue>
+                            <SkeletonRectangle animate={animate} width={95} height={32} />
+                        </IntegerValue>
+                    </FiatAmount>
+                    <CoinAmount>
+                        <SkeletonRectangle animate={animate} width={50} height={16} />
+                    </CoinAmount>
+                </Column>
             </Column>
             <Card>
                 <SkeletonRectangle animate={animate} width="100%" height={40} />
             </Card>
-        </StyledCard>
+        </Card>
     );
 };