From 58681b641727508e4ddb9fbd07b985d723000b4c Mon Sep 17 00:00:00 2001 From: Jiri Zbytovsky Date: Mon, 9 Dec 2024 16:25:01 +0100 Subject: [PATCH] fix(suite): remove SubpageNavigation bgcolor --- .../layouts/SuiteLayout/SubpageNavigation.tsx | 1 - .../AccountItem/AccountItemContent.tsx | 32 ++++++++++++------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/SubpageNavigation.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/SubpageNavigation.tsx index beef218d6f43..b952c200887c 100644 --- a/packages/suite/src/components/suite/layouts/SuiteLayout/SubpageNavigation.tsx +++ b/packages/suite/src/components/suite/layouts/SuiteLayout/SubpageNavigation.tsx @@ -13,7 +13,6 @@ import { AppNavigationTooltip } from '../../AppNavigation/AppNavigationTooltip'; const Container = styled.div` position: sticky; top: ${HEADER_HEIGHT}; - background: ${({ theme }) => theme.backgroundSurfaceElevation0}; border-bottom: 1px solid ${({ theme }) => theme.borderElevation1}; z-index: ${zIndices.pageHeader}; width: 100%; diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountItemContent.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountItemContent.tsx index f53852d1a60a..c66d56b7cba8 100644 --- a/packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountItemContent.tsx +++ b/packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountItemContent.tsx @@ -13,16 +13,19 @@ import { } from '@trezor/components'; import { isTestnet } from '@suite-common/wallet-utils'; -import { useLoadingSkeleton, useSelector } from '../../../../../hooks/suite'; -import { selectLocalCurrency } from '../../../../../reducers/wallet/settingsReducer'; +import { useLoadingSkeleton, useSelector } from 'src/hooks/suite'; +import { + selectIsDiscreteModeActive, + selectLocalCurrency, +} from 'src/reducers/wallet/settingsReducer'; import { AccountLabel, CoinBalance, FiatValue, HiddenPlaceholder, Translation, -} from '../../../../suite'; -import { AccountItemType } from '../../../../../types/wallet'; +} from 'src/components/suite'; +import { AccountItemType } from 'src/types/wallet'; const AccountLabelContainer = styled.div` flex: 1; @@ -32,6 +35,7 @@ const AccountLabelContainer = styled.div` text-overflow: ellipsis; white-space: nowrap; `; + type ItemContentProps = { customFiatValue?: string; account: Account; @@ -43,6 +47,14 @@ type ItemContentProps = { formattedBalance: string; dataTestKey?: string; }; + +const FiatValueRenderComponent = ({ value }: { value: JSX.Element | null }) => { + const discreetMode = useSelector(selectIsDiscreteModeActive); + if (discreetMode || value === null) return value; + + return {value}; +}; + export const AccountItemContent = ({ customFiatValue, account, @@ -56,12 +68,14 @@ export const AccountItemContent = ({ }: ItemContentProps) => { const { FiatAmountFormatter } = useFormatters(); const localCurrency = useSelector(selectLocalCurrency); + const discreetMode = useSelector(selectIsDiscreteModeActive); const { shouldAnimate } = useLoadingSkeleton(); const isBalanceShown = account.backendType !== 'coinjoin' || account.status !== 'initial'; return ( - + // content is constant size in discreet mode, so overflow: hidden is unnecessary. Though it would cut off CSS blur effect, so we may turn it off + {type === 'coin' && ( @@ -93,13 +107,7 @@ export const AccountItemContent = ({ maximumFractionDigits: 0, }} > - {({ value }) => - value ? ( - - {value} - - ) : null - } + {FiatValueRenderComponent} )}