Privacy mode: instead of blurring, use an illegible font (#3376)

actualbudget · Sep 6, 2024 · 49b25c0 · 49b25c0
1 parent fca1bcc
commit 49b25c0
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 23 deletions.
diff --git 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",
     "@react-aria/focus": "^3.16.0",

diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx
@@ -44,11 +44,11 @@ export function ConditionalPrivacyFilter({
 
 type PrivacyFilterProps = ComponentPropsWithRef<typeof View> & {
   activationFilters?: (boolean | (() => boolean))[];
-  blurIntensity?: number;
+  lineHeight?: number;
 };
 export function PrivacyFilter({
   activationFilters,
-  blurIntensity,
+  lineHeight,
   children,
   ...props
 }: PrivacyFilterProps) {
@@ -63,29 +63,26 @@ export function PrivacyFilter({
         typeof value === 'boolean' ? value : value(),
       ));
 
-  const blurAmount = blurIntensity != null ? `${blurIntensity}px` : '3px';
+  const privacyLineHeight = lineHeight != null ? lineHeight : 'inherit';
 
   return !activate ? (
     <>{Children.toArray(children)}</>
   ) : (
-    <BlurredOverlay blurIntensity={blurAmount} {...props}>
+    <PrivacyOverlay lineHeight={privacyLineHeight} {...props}>
       {children}
-    </BlurredOverlay>
+    </PrivacyOverlay>
   );
 }
 
-function BlurredOverlay({ blurIntensity, children, ...props }) {
+function PrivacyOverlay({ lineHeight, children, ...props }) {
   const [hovered, setHovered] = useState(false);
   const onHover = useCallback(() => setHovered(true), [setHovered]);
   const onHoverEnd = useCallback(() => setHovered(false), [setHovered]);
 
-  const blurStyle = {
+  const privacyStyle = {
     ...(!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)`,
+      fontFamily: 'Redacted Script',
+      lineHeight: lineHeight
     }),
   };
 
@@ -95,7 +92,7 @@ function BlurredOverlay({ blurIntensity, children, ...props }) {
     <View
       style={{
         display: style?.display ? style.display : 'inline-flex',
-        ...blurStyle,
+        ...privacyStyle,
         ...style,
       }}
       onPointerEnter={onHover}

diff --git a/packages/desktop-client/src/components/accounts/Balance.jsx b/packages/desktop-client/src/components/accounts/Balance.jsx
@@ -185,7 +185,7 @@ export function Balances({
                   : theme.pageTextSubdued,
           })}
           privacyFilter={{
-            blurIntensity: 5,
+            lineHeight: 1.22,
           }}
         />
 

diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/Saved.tsx
@@ -85,7 +85,7 @@ export function Saved({ projected, style }: SavedProps) {
             },
           ])}`}
         >
-          <PrivacyFilter blurIntensity={7}>
+          <PrivacyFilter>
             {format(saved, 'financial')}
           </PrivacyFilter>
         </View>

diff --git 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,7 @@ export function ToBudgetAmount({
           offset={3}
           triggerProps={{ isDisabled: isTotalsListTooltipDisabled }}
         >
-          <PrivacyFilter blurIntensity={7}>
+          <PrivacyFilter lineHeight={1.2}>
             <Block
               onClick={onClick}
               data-cellname={sheetName}

diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.tsx
@@ -117,7 +117,7 @@ export function ReportSummary({
             fontWeight: 800,
           }}
         >
-          <PrivacyFilter blurIntensity={7}>
+          <PrivacyFilter>
             {amountToCurrency(data[balanceTypeOp])}
           </PrivacyFilter>
         </Text>
@@ -154,7 +154,7 @@ export function ReportSummary({
             fontWeight: 800,
           }}
         >
-          <PrivacyFilter blurIntensity={7}>
+          <PrivacyFilter>
             {!isNaN(average) && integerToCurrency(Math.round(average))}
           </PrivacyFilter>
         </Text>

diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
@@ -799,7 +799,7 @@ export function CustomReport() {
                       left={<Block>{balanceType}:</Block>}
                       right={
                         <Text>
-                          <PrivacyFilter blurIntensity={5}>
+                          <PrivacyFilter>
                             {amountToCurrency(data[balanceTypeOp])}
                           </PrivacyFilter>
                         </Text>

diff --git a/packages/desktop-client/src/components/reports/reports/NetWorth.jsx b/packages/desktop-client/src/components/reports/reports/NetWorth.jsx
@@ -135,7 +135,7 @@ export function NetWorth() {
           <View
             style={{ ...styles.largeText, fontWeight: 400, marginBottom: 5 }}
           >
-            <PrivacyFilter blurIntensity={5}>
+            <PrivacyFilter>
               {integerToCurrency(data.netWorth)}
             </PrivacyFilter>
           </View>

diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -347,7 +347,7 @@ export function Spending() {
                         }
                         right={
                           <Text style={{ fontWeight: 600 }}>
-                            <PrivacyFilter blurIntensity={5}>
+                            <PrivacyFilter>
                               {amountToCurrency(
                                 Math.abs(
                                   data.intervalData[todayDay][
@@ -374,7 +374,7 @@ export function Spending() {
                         }
                         right={
                           <Text style={{ fontWeight: 600 }}>
-                            <PrivacyFilter blurIntensity={5}>
+                            <PrivacyFilter>
                               {amountToCurrency(
                                 Math.abs(
                                   data.intervalData[todayDay][
@@ -400,7 +400,7 @@ export function Spending() {
                       }
                       right={
                         <Text style={{ fontWeight: 600 }}>
-                          <PrivacyFilter blurIntensity={5}>
+                          <PrivacyFilter>
                             {amountToCurrency(
                               Math.abs(data.intervalData[todayDay].average),
                             )}

diff --git 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
@@ -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
@@ -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"
     "@react-aria/focus": "npm:^3.16.0"
@@ -1857,6 +1858,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"