diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json index ffb902de6ab..b160ffc21a3 100644 --- a/packages/desktop-client/package.json +++ b/packages/desktop-client/package.json @@ -6,6 +6,7 @@ "build" ], "devDependencies": { + "@fontsource/redacted-script": "^5.0.21", "@juggle/resize-observer": "^3.4.0", "@playwright/test": "1.41.1", "@rollup/plugin-inject": "^5.0.5", diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx index 5a455dc60dd..f8d83249145 100644 --- a/packages/desktop-client/src/components/PrivacyFilter.tsx +++ b/packages/desktop-client/src/components/PrivacyFilter.tsx @@ -1,12 +1,12 @@ // @ts-strict-ignore import React, { - useState, - useCallback, Children, type ComponentPropsWithRef, type ReactNode, } from 'react'; +import { css } from 'glamor'; + import { usePrivacyMode } from '../hooks/usePrivacyMode'; import { useResponsive } from '../ResponsiveProvider'; @@ -44,11 +44,9 @@ export function ConditionalPrivacyFilter({ type PrivacyFilterProps = ComponentPropsWithRef & { activationFilters?: (boolean | (() => boolean))[]; - blurIntensity?: number; }; export function PrivacyFilter({ activationFilters, - blurIntensity, children, ...props }: PrivacyFilterProps) { @@ -63,46 +61,70 @@ export function PrivacyFilter({ typeof value === 'boolean' ? value : value(), )); - const blurAmount = blurIntensity != null ? `${blurIntensity}px` : '3px'; - return !activate ? ( <>{Children.toArray(children)} ) : ( - - {children} - + {children} ); } -function BlurredOverlay({ blurIntensity, children, ...props }) { - const [hovered, setHovered] = useState(false); - const onHover = useCallback(() => setHovered(true), [setHovered]); - const onHoverEnd = useCallback(() => setHovered(false), [setHovered]); - - const blurStyle = { - ...(!hovered && { - filter: `blur(${blurIntensity})`, - WebkitFilter: `blur(${blurIntensity})`, - // To fix blur performance issue in Safari. - // https://graffino.com/til/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari - transform: `translate3d(0, 0, 0)`, - }), - }; - +function PrivacyOverlay({ children, ...props }) { const { style, ...restProps } = props; return ( div:first-child': { + opacity: 0, + }, + ' > div:nth-child(2)': { + display: 'flex', + }, + '&:hover': { + ' > div:first-child': { + opacity: 1, + }, + ' > div:nth-child(2)': { + display: 'none', + }, + }, + }, + ], + style, + )}`} {...restProps} > - {children} +
+ {children} +
+ +
); } diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx index 68599d33ad6..449c13a4a3c 100644 --- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx +++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx @@ -169,11 +169,6 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({ valueProps={{ binding: envelopeBudget.groupBalance(id), type: 'financial', - privacyFilter: { - style: { - paddingRight: styles.monthRightPadding, - }, - }, }} /> @@ -431,11 +426,6 @@ export function IncomeGroupMonth({ month }: IncomeGroupMonthProps) { valueProps={{ binding: envelopeBudget.groupIncomeReceived, type: 'financial', - privacyFilter: { - style: { - paddingRight: styles.monthRightPadding, - }, - }, }} /> diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx index a03f2560d11..04dafd37e45 100644 --- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx +++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx @@ -64,7 +64,11 @@ export function ToBudgetAmount({ offset={3} triggerProps={{ isDisabled: isTotalsListTooltipDisabled }} > - + )} diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx index 5fdb9e1c407..dfadfa9436a 100644 --- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx +++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx @@ -85,9 +85,7 @@ export function Saved({ projected, style }: SavedProps) { }, ])}`} > - - {format(saved, 'financial')} - + {format(saved, 'financial')} diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.tsx index 88968e67a0a..137ea927095 100644 --- a/packages/desktop-client/src/components/reports/ReportSummary.tsx +++ b/packages/desktop-client/src/components/reports/ReportSummary.tsx @@ -117,9 +117,7 @@ export function ReportSummary({ fontWeight: 800, }} > - - {amountToCurrency(data[balanceTypeOp])} - + {amountToCurrency(data[balanceTypeOp])} For this time period @@ -154,7 +152,7 @@ export function ReportSummary({ fontWeight: 800, }} > - + {!isNaN(average) && integerToCurrency(Math.round(average))} diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx index 53ebf205633..346983de072 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx @@ -804,7 +804,7 @@ export function CustomReport() { left={{balanceType}:} right={ - + {amountToCurrency(data[balanceTypeOp])} diff --git a/packages/desktop-client/src/components/reports/reports/NetWorth.jsx b/packages/desktop-client/src/components/reports/reports/NetWorth.jsx index 31a0abace8c..7f58ab8d041 100644 --- a/packages/desktop-client/src/components/reports/reports/NetWorth.jsx +++ b/packages/desktop-client/src/components/reports/reports/NetWorth.jsx @@ -195,9 +195,7 @@ function NetWorthInner({ widget }) { - - {integerToCurrency(data.netWorth)} - + {integerToCurrency(data.netWorth)} diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx index f8d44b93d3f..7efc495e6b6 100644 --- a/packages/desktop-client/src/components/reports/reports/Spending.tsx +++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx @@ -474,7 +474,7 @@ function SpendingInternal({ widget }: SpendingInternalProps) { } right={ - + {amountToCurrency( Math.abs(data.intervalData[todayDay].compare), )} @@ -494,7 +494,7 @@ function SpendingInternal({ widget }: SpendingInternalProps) { } right={ - + {amountToCurrency( Math.abs(data.intervalData[todayDay].compareTo), )} @@ -515,7 +515,7 @@ function SpendingInternal({ widget }: SpendingInternalProps) { } right={ - + {amountToCurrency( Math.abs(data.intervalData[todayDay].budget), )} @@ -535,7 +535,7 @@ function SpendingInternal({ widget }: SpendingInternalProps) { } right={ - + {amountToCurrency( Math.abs(data.intervalData[todayDay].average), )} diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx index 60f38a0ee72..655c8f954e9 100644 --- a/packages/desktop-client/src/components/table.tsx +++ b/packages/desktop-client/src/components/table.tsx @@ -197,11 +197,6 @@ export function Cell({ privacyFilter={mergeConditionalPrivacyFilterProps( { activationFilters: [!focused, !exposed], - style: { - position: 'absolute', - width: '100%', - height: '100%', - }, }, privacyFilter, )} diff --git a/packages/desktop-client/src/fonts.scss b/packages/desktop-client/src/fonts.scss index dba3274d484..cd47daca1a0 100644 --- a/packages/desktop-client/src/fonts.scss +++ b/packages/desktop-client/src/fonts.scss @@ -2,3 +2,5 @@ $inter-font-path: '../../../node_modules/inter-ui/Inter (web)' ); @include variable.default; + +@import "@fontsource/redacted-script"; diff --git a/upcoming-release-notes/3377.md b/upcoming-release-notes/3377.md new file mode 100644 index 00000000000..2ebd4574f94 --- /dev/null +++ b/upcoming-release-notes/3377.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [olets] +--- + +Privacy mode: instead of blurring, use an illegible font (#3376) diff --git a/yarn.lock b/yarn.lock index 09207fbfe1d..11aae8c7785 100644 --- a/yarn.lock +++ b/yarn.lock @@ -59,6 +59,7 @@ __metadata: version: 0.0.0-use.local resolution: "@actual-app/web@workspace:packages/desktop-client" dependencies: + "@fontsource/redacted-script": "npm:^5.0.21" "@juggle/resize-observer": "npm:^3.4.0" "@playwright/test": "npm:1.41.1" "@rollup/plugin-inject": "npm:^5.0.5" @@ -1846,6 +1847,13 @@ __metadata: languageName: node linkType: hard +"@fontsource/redacted-script@npm:^5.0.21": + version: 5.0.21 + resolution: "@fontsource/redacted-script@npm:5.0.21" + checksum: 10/93f506c9e8df827ab1872d433a09079c592f3a20a1c36b9a168e68377967d3d1d282fffd51bee973c2ecb253316ff4641d244f8f05242e4aa968a1eb14d065eb + languageName: node + linkType: hard + "@formatjs/ecma402-abstract@npm:1.15.0": version: 1.15.0 resolution: "@formatjs/ecma402-abstract@npm:1.15.0"