diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx index 2238cda905b..20028cf2743 100644 --- a/packages/desktop-client/src/components/PrivacyFilter.tsx +++ b/packages/desktop-client/src/components/PrivacyFilter.tsx @@ -7,6 +7,8 @@ import React, { type ReactNode, } from 'react'; +import { css } from 'glamor'; + import { usePrivacyMode } from '../hooks/usePrivacyMode'; import { useResponsive } from '../ResponsiveProvider'; @@ -44,11 +46,9 @@ export function ConditionalPrivacyFilter({ type PrivacyFilterProps = ComponentPropsWithRef & { activationFilters?: (boolean | (() => boolean))[]; - lineHeight?: number; }; export function PrivacyFilter({ activationFilters, - lineHeight, children, ...props }: PrivacyFilterProps) { @@ -63,43 +63,58 @@ export function PrivacyFilter({ typeof value === 'boolean' ? value : value(), )); - const privacyLineHeight = lineHeight != null ? lineHeight : 'inherit'; - return !activate ? ( <>{Children.toArray(children)} ) : ( - - {children} - + {children} ); } -function PrivacyOverlay({ lineHeight, children, ...props }) { +function PrivacyOverlay({ children, ...props }) { const [hovered, setHovered] = useState(false); const onHover = useCallback(() => setHovered(true), [setHovered]); const onHoverEnd = useCallback(() => setHovered(false), [setHovered]); - const privacyStyle = { - ...(!hovered && { - fontFamily: 'Redacted Script', - lineHeight, - }), - }; - const { style, ...restProps } = props; return ( div:first-child': { + opacity: hovered ? 1 : 0, + }, + ' > div:nth-child(2)': { + display: hovered ? 'none' : 'block', + }, + }, + ], + style, + )}`} onPointerEnter={onHover} onPointerLeave={onHoverEnd} {...restProps} > - {children} +
+ {children} +
+ +
); } diff --git a/packages/desktop-client/src/components/accounts/Balance.jsx b/packages/desktop-client/src/components/accounts/Balance.jsx index a58678ef150..999f37ce56c 100644 --- a/packages/desktop-client/src/components/accounts/Balance.jsx +++ b/packages/desktop-client/src/components/accounts/Balance.jsx @@ -184,9 +184,7 @@ export function Balances({ ? theme.noticeTextLight : theme.pageTextSubdued, })} - privacyFilter={{ - lineHeight: 1.22, - }} + privacyFilter /> @@ -422,11 +417,6 @@ export function IncomeGroupMonth({ month }: IncomeGroupMonthProps) { valueProps={{ binding: rolloverBudget.groupIncomeReceived, type: 'financial', - privacyFilter: { - style: { - paddingRight: styles.monthRightPadding, - }, - }, }} /> diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx index 9812e89c45c..ae85080afd7 100644 --- a/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx +++ b/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx @@ -64,7 +64,11 @@ export function ToBudgetAmount({ offset={3} triggerProps={{ isDisabled: isTotalsListTooltipDisabled }} > - +