Talenttrust · mikewheeleer · Apr 29, 2026 · Apr 27, 2026
diff --git a/jest.setup.js b/jest.setup.js
@@ -1 +1,30 @@
 require('@testing-library/jest-dom');
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store = {};
+  return {
+    getItem: (key) => store[key] || null,
+    setItem: (key, value) => { store[key] = value; },
+    clear: () => { store = {}; },
+    removeItem: (key) => { delete store[key]; }
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/contracts/page.tsx b/src/app/contracts/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import EmptyState from '../../components/EmptyState';
 

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,11 +3,55 @@
 @tailwind utilities;
 
 :root {
-  --foreground: #0a0a0a;
-  --background: #fafafa;
+  --background: #ffffff;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary: #2563eb;
+  --primary-foreground: #ffffff;
+  --secondary: #f1f5f9;
+  --secondary-foreground: #0f172a;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: #f1f5f9;
+  --accent-foreground: #0f172a;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border: #e2e8f0;
+  --input: #e2e8f0;
+  --ring: #2563eb;
+  --radius: 0.5rem;
+  --surface: #f8fafc;
+}
+
+[data-theme='dark'] {
+  --background: #020617;
+  --foreground: #f8fafc;
+  --card: #020617;
+  --card-foreground: #f8fafc;
+  --popover: #020617;
+  --popover-foreground: #f8fafc;
+  --primary: #3b82f6;
+  --primary-foreground: #020617;
+  --secondary: #1e293b;
+  --secondary-foreground: #f8fafc;
+  --muted: #1e293b;
+  --muted-foreground: #94a3b8;
+  --accent: #1e293b;
+  --accent-foreground: #f8fafc;
+  --destructive: #7f1d1d;
+  --destructive-foreground: #f8fafc;
+  --border: #1e293b;
+  --input: #1e293b;
+  --ring: #3b82f6;
+  --surface: #0f172a;
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
+  font-feature-settings: "rlig" 1, "calt" 1;
 }
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,9 @@ export const metadata: Metadata = {
   description: 'Safe, secure payments that protect both freelancers and clients throughout your project.',
 };
 
+import { PreferencesProvider } from '@/lib/preferences';
+import { SettingsTrigger } from '@/components/settings/SettingsTrigger';
+
 export default function RootLayout({
   children,
 }: {
@@ -15,7 +18,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <ToastProvider>{children}</ToastProvider>
+        <PreferencesProvider>
+          <ToastProvider>
+            {children}
+            <SettingsTrigger />
+          </ToastProvider>
+        </PreferencesProvider>
       </body>
     </html>
   );

diff --git a/src/app/milestones/page.tsx b/src/app/milestones/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import EmptyState from '../../components/EmptyState';
 

diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx
@@ -1,47 +1,32 @@
 import { render, screen } from '@testing-library/react';
 import Home from './page';
 import { ToastProvider } from '@/components/toast/toast-provider';
+import { PreferencesProvider } from '@/lib/preferences';
 
-describe('Home', () => {
-  it('renders TalentTrust heading', () => {
-    render(
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(
+    <PreferencesProvider>
       <ToastProvider>
-        <Home />
-      </ToastProvider>,
-    );
+        {ui}
+      </ToastProvider>
+    </PreferencesProvider>
+  );
+};
 
+describe('Home', () => {
+  it('renders TalentTrust heading', () => {
+    renderWithProviders(<Home />);
     expect(screen.getByRole('heading', { name: /TalentTrust/i })).toBeInTheDocument();
   });
 
   it('renders description paragraph', () => {
-    render(<Home />);
-    expect(screen.getByText(/Safe, secure payments/i)).toBeInTheDocument();
-  });
-
-  it('renders Key Terms section', () => {
-    render(<Home />);
-    expect(screen.getByRole('heading', { name: /Key Terms/i })).toBeInTheDocument();
-  });
-
-  it('renders all key terms', () => {
-    render(<Home />);
-    expect(screen.getByText('Escrow')).toBeInTheDocument();
-    expect(screen.getByText('Milestone')).toBeInTheDocument();
-    expect(screen.getByText('Release')).toBeInTheDocument();
-  });
-
-  it('renders term descriptions', () => {
-    render(<Home />);
-    expect(screen.getByText(/Money held safely/i)).toBeInTheDocument();
-    expect(screen.getByText(/project checkpoint/i)).toBeInTheDocument();
-    expect(screen.getByText(/payment goes to the freelancer/i)).toBeInTheDocument();
+    renderWithProviders(<Home />);
+    expect(screen.getByText(/Decentralized Freelancer Escrow Protocol/i)).toBeInTheDocument();
   });
 
   it('has proper semantic structure', () => {
-    const { container } = render(<Home />);
+    const { container } = renderWithProviders(<Home />);
     expect(container.querySelector('main')).toBeInTheDocument();
-    expect(container.querySelector('dl')).toBeInTheDocument();
-    expect(container.querySelectorAll('dt')).toHaveLength(3);
-    expect(container.querySelectorAll('dd')).toHaveLength(3);
+    expect(container.querySelector('h1')).toBeInTheDocument();
   });
 });
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useState } from 'react';
 import { ToastDemo } from '@/components/toast/toast-demo';
 
 export default function Home() {

diff --git a/src/components/ContractSummary.tsx b/src/components/ContractSummary.tsx
@@ -1,4 +1,5 @@
 import { truncateAddress } from '@/lib/truncateAddress';
+import { usePreferences } from '@/lib/preferences';
 
 export type ContractParty = {
   label: string;
@@ -31,11 +32,8 @@ const ContractSummary = ({
   createdAt,
   milestoneCount,
 }: ContractSummaryProps) => {
-  const formattedValue = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: 2,
-  }).format(totalValue);
+  const { formatAmount } = usePreferences();
+  const formattedValue = formatAmount(totalValue, currency);
 
   return (
     <section