diff --git a/.changelog/1640.trivial.md b/.changelog/1640.trivial.md new file mode 100644 index 000000000..cb153ab7b --- /dev/null +++ b/.changelog/1640.trivial.md @@ -0,0 +1,5 @@ +Minor styles updates: + +- remove custom styling in tokens Snapshots cards +- use new prop in Consensus Snapshot cards +- sync table header styles with Figma diff --git a/src/app/components/Snapshots/SnapshotCard.tsx b/src/app/components/Snapshots/SnapshotCard.tsx index 96bd4f512..86eded005 100644 --- a/src/app/components/Snapshots/SnapshotCard.tsx +++ b/src/app/components/Snapshots/SnapshotCard.tsx @@ -33,7 +33,7 @@ type SnapshotCardProps = PropsWithChildren & { label?: ReactNode title: ReactNode withContentPadding?: boolean - withConstantHeight?: boolean + alignWithCardsWithActions?: boolean } export const SnapshotCard: FC = ({ @@ -42,13 +42,13 @@ export const SnapshotCard: FC = ({ title, label, withContentPadding = true, - withConstantHeight = false, + alignWithCardsWithActions = false, }) => { return ( {children} - {(badge || label || withConstantHeight) && ( + {(badge || label || alignWithCardsWithActions) && ( = ({ @@ -89,10 +90,16 @@ export const SnapshotTextCard: FC = ({ label, title, withContentPadding, + alignWithCardsWithActions, }) => { return ( - - + + = ({ totalDelegators }) => { const { t } = useTranslation() - const { isMobile } = useScreenSize() return ( - - {totalDelegators && {totalDelegators.toLocaleString()}} + + {typeof totalDelegators === 'number' && totalDelegators.toLocaleString()} ) } diff --git a/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx b/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx index 12a890871..313595b39 100644 --- a/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx +++ b/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx @@ -47,6 +47,7 @@ export const SnapshotStaked: FC = ({ totalStaked, ticker }) ) } + alignWithCardsWithActions > {totalStaked && ( diff --git a/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx b/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx index df8f985d4..db6141be7 100644 --- a/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenGasUsedCard.tsx @@ -13,7 +13,7 @@ export const TokenGasUsedCard: FC<{ scope: SearchScope; address: string }> = ({ const { account, isFetched } = useAccount(scope, address) return ( - + {isFetched && ( <> diff --git a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx index 6173dc3ec..ff4c2a51c 100644 --- a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx @@ -1,12 +1,9 @@ import { FC } from 'react' import { useTranslation } from 'react-i18next' -import Box from '@mui/material/Box' -import Typography from '@mui/material/Typography' -import { SnapshotCard } from '../../components/Snapshots/SnapshotCard' -import { COLORS } from '../../../styles/theme/colors' -import { useTokenInfo } from './hook' import Skeleton from '@mui/material/Skeleton' +import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard' import { SearchScope } from '../../../types/searchScope' +import { useTokenInfo } from './hook' export const TokenHoldersCountCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => { const { t } = useTranslation() @@ -15,25 +12,12 @@ export const TokenHoldersCountCard: FC<{ scope: SearchScope; address: string }> const title = t('tokens.holders') return ( - - - {isLoading ? ( - - ) : ( - isFetched && ( - - {t('tokens.holdersValue', { value: token?.num_holders })} - - ) - )} - - + + {isLoading ? ( + + ) : ( + isFetched && <>{t('tokens.holdersValue', { value: token?.num_holders })} + )} + ) } diff --git a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx index 08fc10a91..b03536517 100644 --- a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx @@ -1,9 +1,6 @@ import { FC } from 'react' import { useTranslation } from 'react-i18next' -import Box from '@mui/material/Box' -import Typography from '@mui/material/Typography' -import { SnapshotCard } from '../../components/Snapshots/SnapshotCard' -import { COLORS } from '../../../styles/theme/colors' +import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard' import { useTokenInfo } from './hook' import Skeleton from '@mui/material/Skeleton' import { SearchScope } from '../../../types/searchScope' @@ -11,39 +8,27 @@ import { RoundedBalance } from '../../components/RoundedBalance' export const TokenSupplyCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => { const { t } = useTranslation() - const { isLoading, token, isFetched } = useTokenInfo(scope, address) return ( - : token?.symbol} > - - {isLoading ? ( - - ) : ( - isFetched && - token && ( - - {token.total_supply ? ( - - ) : ( - t('common.not_defined') - )} - - ) - )} - - + {isLoading ? ( + + ) : ( + isFetched && + token && ( + <> + {token.total_supply ? ( + + ) : ( + t('common.not_defined') + )} + + ) + )} + ) } diff --git a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx index 13003137a..b5744bc3d 100644 --- a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx @@ -1,10 +1,7 @@ import { FC } from 'react' import { useTranslation } from 'react-i18next' -import Box from '@mui/material/Box' -import Typography from '@mui/material/Typography' -import { SnapshotCard } from '../../components/Snapshots/SnapshotCard' -import { COLORS } from '../../../styles/theme/colors' import Skeleton from '@mui/material/Skeleton' +import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard' import { useTokenInfo } from './hook' import { SearchScope } from '../../../types/searchScope' @@ -16,25 +13,12 @@ export const TokenTotalTransactionsCard: FC<{ scope: SearchScope; address: strin const { isLoading, token, isFetched } = useTokenInfo(scope, address) return ( - - - {isLoading ? ( - - ) : ( - isFetched && ( - - {t('common.valuePair', { value: token?.num_transfers })} - - ) - )} - - + + {isLoading ? ( + + ) : ( + isFetched && <>{t('common.valuePair', { value: token?.num_transfers })} + )} + ) } diff --git a/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx b/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx index e0fce9977..aa8ce5d61 100644 --- a/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx @@ -15,7 +15,7 @@ export const TokenTypeCard: FC<{ scope: SearchScope; address: string }> = ({ sco const { isLoading, token, isFetched } = useTokenInfo(scope, address) return ( - + {isLoading ? ( diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts index 0e3100685..a6ac71030 100644 --- a/src/styles/theme/defaultTheme.ts +++ b/src/styles/theme/defaultTheme.ts @@ -644,7 +644,7 @@ export const defaultTheme = createTheme({ head: { border: 0, color: COLORS.grayDark, - fontWeight: 400, + fontWeight: 700, }, }, },