Changed from color inversion to brightness lowered for ko-fi pop up in dark mode, as inversion breaks QR codes

src/__tests__/appStore.test.ts

@@ -9,7 +9,12 @@ describe('appStore — CRUD', () => {
         payments: [],
         expenses: [],
         taxInputs: {},
-        dashboard: { charts: [], widgets: [] },
+        recurringExpenses: [],
+        dashboard: {
+          charts: [], widgets: [],
+          workCharts: [], paymentsCharts: [], expensesCharts: [], taxCharts: [],
+          workTiles: [], paymentsTiles: [], expensesTiles: [], taxTiles: [],
+        },
         settings: { theme: 'standard', mode: 'dark', defaultRate: 50 },
         version: 1,
       },

src/__tests__/storage.test.ts

@@ -57,8 +57,13 @@ describe('Vault', () => {
     payments: [],
     expenses: [],
     taxInputs: {},
-    dashboard: { charts: [], widgets: [] },
+    recurringExpenses: [],
-    settings: { theme: 'standard', mode: 'dark', storageMode: 'cookie', defaultRate: 50 },
+    dashboard: {
+      charts: [], widgets: [],
+      workCharts: [], paymentsCharts: [], expensesCharts: [], taxCharts: [],
+      workTiles: [], paymentsTiles: [], expensesTiles: [], taxTiles: [],
+    },
+    settings: { theme: 'standard', mode: 'dark', defaultRate: 50 },
     version: 1,
   });
 

src/lib/stats/aggregate.ts

@@ -276,7 +276,7 @@ export function buildHierarchyForRange(
         }));
         return {
           key: d,
-          level: 'day',
+          level: 'day' as const,
           label: format(new Date(d + 'T00:00:00'), 'EEE, MMM d'),
           value: itemNodes.reduce((s, n) => s + n.value, 0),
           children: itemNodes,
@@ -284,7 +284,7 @@ export function buildHierarchyForRange(
       });
       return {
         key: month,
-        level: 'month',
+        level: 'month' as const,
         label: format(new Date(month + '-01T00:00:00'), 'MMMM yyyy'),
         value: dayNodes.reduce((s, n) => s + n.value, 0),
         children: dayNodes,
@@ -292,7 +292,7 @@ export function buildHierarchyForRange(
     });
     return {
       key: year,
-      level: 'year',
+      level: 'year' as const,
       label: year,
       value: monthNodes.reduce((s, n) => s + n.value, 0),
       children: monthNodes,

src/pages/TaxPage.tsx

@@ -169,7 +169,7 @@ export function TaxPage() {
                       step="0.01"
                       className="input"
                       placeholder={isAutoFilled ? String(autoValue) : 'Enter value...'}
-                      value={inputs[p.field] ?? ''}
+                      value={(inputs[p.field] as number | undefined) ?? ''}
                       onChange={(e) =>
                         updateInput({ [p.field]: e.target.value ? Number(e.target.value) : undefined })
                       }

src/themes/global.css

@@ -781,14 +781,14 @@ select.ss-input { cursor: pointer; }
   min-height: 0;
   display: block;
   width: 100%;
-  background: #fff;
 }
 
-/* In dark mode, invert the iframe content then rotate hue back so colours
+/* In dark mode, dim the iframe to reduce glare without inverting colours.
-   stay natural while the bright white background becomes dark.
+   Full inversion would break QR codes inside the widget, so we use a gentle
-   Background is set to #fff so it inverts to near-black, matching the theme. */
+   brightness reduction instead — enough to soften the bright white background
+   without flipping black/white and making QR codes unreadable. */
 [data-mode='dark'] .kofi-modal iframe {
-  filter: invert(1) hue-rotate(180deg);
+  filter: brightness(0.65);
 }
 
 /* ─── Hamburger / mobile nav ─────────────────────────────────────────────── */

tsconfig.json

@@ -20,5 +20,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/__tests__"]
 }