diff --git a/packages/components/src/components/Table/Table.tsx b/packages/components/src/components/Table/Table.tsx index 1bf4303411af..55091617be7c 100644 --- a/packages/components/src/components/Table/Table.tsx +++ b/packages/components/src/components/Table/Table.tsx @@ -52,6 +52,9 @@ export const Table = ({ children, margin, colWidths }: TableProps) => { ); diff --git a/packages/components/src/components/Table/TableCell.tsx b/packages/components/src/components/Table/TableCell.tsx index 1022b7a5c970..7f47f04c5bb2 100644 --- a/packages/components/src/components/Table/TableCell.tsx +++ b/packages/components/src/components/Table/TableCell.tsx @@ -36,6 +36,7 @@ const Cell = styled.td<{ $isHeader: boolean; $elevation: Elevation }>` left: 0; z-index: 2; background: linear-gradient(to right, ${mapElevationToBackground} 90%, rgba(0 0 0 / 0%)); + border-radius: 16px; } `; diff --git a/packages/components/src/components/Table/TableRow.tsx b/packages/components/src/components/Table/TableRow.tsx index 8e547eb80a98..a51f2e1e2bab 100644 --- a/packages/components/src/components/Table/TableRow.tsx +++ b/packages/components/src/components/Table/TableRow.tsx @@ -24,13 +24,14 @@ export const Row = styled.tr<{ $elevation: Elevation; $isCollapsed: boolean }>` export interface TableRowProps { children: ReactNode; isCollapsed?: boolean; + onClick?: () => void; } -export const TableRow = ({ children, isCollapsed = false }: TableRowProps) => { +export const TableRow = ({ children, isCollapsed = false, onClick }: TableRowProps) => { const { elevation } = useElevation(); return ( - + {children} ); diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx index a4a32706f6ab..dfcf32fe33ef 100644 --- a/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx +++ b/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx @@ -5,16 +5,18 @@ import { } from '@suite-common/assets'; import { SkeletonCircle, Tooltip } from '@trezor/components'; import { NetworkSymbol } from '@suite-common/wallet-config'; -import { spacingsPx } from '@trezor/theme'; import styled from 'styled-components'; import { localizePercentage } from '@suite-common/wallet-utils'; import { selectLanguage } from 'src/reducers/suite/suiteReducer'; import { useSelector } from 'src/hooks/suite'; import { AssetShareIndicator } from '@trezor/product-components'; +import { spacingsPx } from '@trezor/theme'; const LogoWrapper = styled.div` - padding-right: ${spacingsPx.sm}; + display: flex; + padding-right: ${spacingsPx.md}; align-items: center; + justify-content: center; `; type AssetCoinLogoProps = { diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx index 9cf0617f2d02..9bdbaea129bc 100644 --- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx +++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx @@ -1,7 +1,7 @@ import { memo } from 'react'; import styled, { useTheme } from 'styled-components'; import { Network } from '@suite-common/wallet-config'; -import { Icon, variables, SkeletonRectangle } from '@trezor/components'; +import { Icon, variables, SkeletonRectangle, Table, Row } from '@trezor/components'; import { AmountUnitSwitchWrapper, CoinBalance, @@ -15,7 +15,6 @@ import { goto } from 'src/actions/suite/routerActions'; import { useAccountSearch, useDispatch, useLoadingSkeleton } from 'src/hooks/suite'; import { spacingsPx, typography } from '@trezor/theme'; import { AssetFiatBalance } from '@suite-common/assets'; -import { AssetTableRowGrid } from './AssetTableRowGrid'; import { ArrowIcon } from '../ArrowIcon'; import { AssetCoinLogo, AssetCoinLogoSkeleton } from '../AssetCoinLogo'; import { AssetCoinName } from '../AssetCoinName'; @@ -27,43 +26,7 @@ const Coin = styled.div` overflow: hidden; `; -const StyledCol = styled.div<{ $isLastRow?: boolean }>` - display: flex; - align-items: center; - padding: 16px 0; - border-bottom: ${({ $isLastRow, theme }) => - $isLastRow ? 'none' : `1px solid ${theme.borderElevation2}`}; -`; - -const CoinLogoWrapper = styled(StyledCol)` - padding-left: 18px; - text-overflow: ellipsis; - border: none; - - ${variables.SCREEN_QUERY.MOBILE} { - grid-column: 1 / 2; - padding-left: 20px; - border-bottom: none; - } - - &:hover { - ${Coin} { - text-decoration: underline; - } - } -`; - -const CoinNameWrapper = styled(StyledCol)` - ${typography.highlight} - overflow: hidden; - text-overflow: ellipsis; - - ${variables.SCREEN_QUERY.MOBILE} { - grid-column: 1 / 4; - padding-left: 20px; - border-bottom: none; - } -`; +const StyledCol = styled.div<{ $isLastRow?: boolean }>``; const CoinBalanceContainer = styled.div` ${typography.hint} @@ -107,12 +70,9 @@ const ExchangeRateWrapper7Days = styled(StyledCol)` padding-right: 0; `; -const BuyButtonWrapper = styled(StyledCol)` - justify-content: right; -`; - const StyledArrowIcon = styled(ArrowIcon)` margin: 0 ${spacingsPx.md}; + align-self: center; `; // eslint-disable-next-line local-rules/no-override-ds-component @@ -157,51 +117,54 @@ export const AssetRow = memo( }; return ( - - - - - - - - - - {!failed ? ( - - - - - - - - - - - - ) : ( - - - - + + + - - )} - - {!isTestnet(symbol) && } - - - {!isTestnet(symbol) && } - - + + + + + + {!failed ? ( + + + + + + + + + + + + ) : ( + + + + + + )} + + + + {!isTestnet(symbol) && } + + + + + + {!isTestnet(symbol) && } + + + {!isTestnet(symbol) && ( )} - - + + ); }, ); @@ -221,28 +184,28 @@ export const AssetRowSkeleton = (props: { animate?: boolean }) => { const animate = props.animate ?? shouldAnimate; return ( - - - - - - - - - - + + + + + + + + + + - - - + + - - + + - - + + - - + + {/* Arrow */} + ); }; diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx index cc7d228fc12a..93e08ac6b1a0 100644 --- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx +++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx @@ -3,15 +3,9 @@ import { AssetRow, AssetRowSkeleton } from './AssetRow'; import { AssetTableHeader } from './AssetTableHeader'; import { Network } from '@suite-common/wallet-config'; import { BigNumber } from '@trezor/utils/src/bigNumber'; -import styled from 'styled-components'; -import { spacingsPx } from '@trezor/theme'; -const Table = styled.div` - padding-left: ${spacingsPx.xxs}; - padding-right: ${spacingsPx.xxs}; - padding-bottom: ${spacingsPx.xxs}; - width: 100%; -`; +import { Table } from '@trezor/components'; +import { spacings } from '@trezor/theme'; export interface AssetTableRowType { symbol: string; @@ -31,18 +25,20 @@ export const AssetTable = ({ assetsData, assetsFiatBalances, }: AssetTableProps) => ( - +
- {assetsData.map((asset, i) => ( - - ))} - {discoveryInProgress && } + + {assetsData.map((asset, i) => ( + + ))} + {discoveryInProgress && } +
); diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx index 2fc928a4edd1..684fd56cbd18 100644 --- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx +++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx @@ -1,43 +1,22 @@ -import styled from 'styled-components'; - -import { spacingsPx, typography } from '@trezor/theme'; - import { Translation } from 'src/components/suite'; -import { AssetTableRowGrid } from './AssetTableRowGrid'; - -const Header = styled.div` - display: flex; - ${typography.hint} - color: ${({ theme }) => theme.textSubdued}; - align-items: center; - padding: ${spacingsPx.sm} 0; - border-bottom: 1px solid ${({ theme }) => theme.borderElevation2}; - - &:last-child { - padding-right: ${spacingsPx.md}; - } -`; -const HeaderRight = styled(Header)` - justify-content: right; - padding-right: ${spacingsPx.xxxl}; -`; +import { Table } from '@trezor/components'; export const AssetTableHeader = () => ( - -
{/* Logo */} -
- -
-
- -
- - - -
- -
-
{/* Buy Button */} - + + + + + + + + + + + + + + + + ); diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx index 0e5dfc4c0458..91e036164889 100644 --- a/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx +++ b/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx @@ -1,7 +1,7 @@ import styled, { useTheme } from 'styled-components'; import { BigNumber } from '@trezor/utils/src/bigNumber'; -import { Icon, Button, LoadingContent, Card, Column } from '@trezor/components'; +import { Icon, Button, LoadingContent, Card } from '@trezor/components'; import { selectCurrentFiatRates, selectDeviceSupportedNetworks } from '@suite-common/wallet-core'; import { DashboardSection } from 'src/components/dashboard'; @@ -203,19 +203,17 @@ export const AssetsView = () => { ) : ( - - - {isError && ( - - - - - )} - + + {isError && ( + + + + + )} )}