fix: Dark Mode UI & UX Improvements (#45)

## Summary
This PR implements a comprehensive dark mode overhaul to fix visibility
issues, poor contrast, and hardcoded colors across the application. It
also resolves a critical SSR crash related to localStorage access.

## Key Changes
- **Theme Overhaul**: Switched from harsh pure black (`#000000`) to
professional dark slate (`#0F172A`) for better eye comfort.
- **Component Fixes**:
- `TransactionTable`: Fixed invisible retention notices and row hover
states.
- `MilestoneCard` & `StatusBadge`: Replaced hardcoded colors with
theme-aware tokens.
  - `Header` & `SearchCard`: Fixed text contrast and element visibility.
- **SSR Fixes**: Implemented `safeLocalStorage` utility to prevent
server-side crashes in `ThemeToggle` and `NetworkContext`.
- **UX Improvements**: Added semantic color tokens for
success/warning/error states that adapt to both light and dark modes.

## Testing
- Verified on Desktop and Mobile views.
- Checked all routes: Home, Escrow Details, Transaction History.
- Validated contrast ratios for accessibility.

Fixes #40

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Fixed theme toggle hydration and prevented dev-time localStorage
crashes for more reliable behavior.

* **New Features**
* Safer preference persistence for theme and network selections to
improve consistency across sessions.

* **Style**
* Broad dark-mode redesign: deeper slate tones, improved contrast,
updated colors across navigation, tables, cards, badges, buttons, and
escrow components; enhanced hover/focus visuals.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: techrebelgit

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+

package-lock.json

@@ -80,40 +80,51 @@
 }
 
 .dark {
-  --background: #000000;
-  --foreground: #E2E8F0; /* bright neutral, readable text */
+  /* Base: Professional dark slate - softer than pure black for eye comfort */
+  --background: #0F172A; /* slate-900 - professional, not harsh */
+  --foreground: #F8FAFC; /* slate-50 - bright, readable text */
 
-  --card: #070708;
-  --card-foreground: #F1F5F9; /* bright text on cards */
+  /* Cards: Elevated surfaces - clearly visible above background */
+  --card: #1E293B; /* slate-800 - clear elevation above bg */
+  --card-foreground: #F8FAFC; /* slate-50 - bright text on cards */
 
-  --popover: #080809;
-  --popover-foreground: #F1F5F9;
+  /* Popovers: Same elevation as cards */
+  --popover: #1E293B;
+  --popover-foreground: #F8FAFC;
 
+  /* Primary: Vibrant cyan-blue accent - good contrast in dark */
   --primary: #0EA5FF;
-  --primary-foreground: #001219;
+  --primary-foreground: #0F172A;
 
-  --secondary: #1E293B;
-  --secondary-foreground: #E2E8F0;
+  /* Secondary: Elevated surface for secondary actions */
+  --secondary: #334155; /* slate-700 - visible secondary surfaces */
+  --secondary-foreground: #F1F5F9;
 
-  --muted: #0f1b2d;
-  --muted-foreground: #94A3B8; /* slate-400 for softer, still legible text */
+  /* Muted: Subtle backgrounds and secondary text */
+  --muted: #334155; /* slate-700 - visible muted backgrounds */
+  --muted-foreground: #CBD5E1; /* slate-300 - readable secondary text */
 
-  --accent: #075985;
-  --accent-foreground: #F1F5F9;
+  /* Accent: Slightly brighter for visibility */
+  --accent: #0EA5E9; /* sky-500 - visible accent color */
+  --accent-foreground: #F8FAFC;
 
+  /* Destructive: Bright red for errors */
   --destructive: #EF4444;
-  --border: #1E293B;
-  --input: #1E293B;
-  --ring: rgba(14,165,255,0.25);
+  
+  /* Borders: Visible separators */
+  --border: #334155; /* slate-700 - actually visible borders */
+  --input: #334155; /* visible input borders */
+  --ring: rgba(14, 165, 255, 0.35); /* brighter focus ring */
 
-  --sidebar: #0F172A;
-  --sidebar-foreground: #E2E8F0;
-  --sidebar-primary: #1E3A8A;
-  --sidebar-primary-foreground: #E2E8F0;
-  --sidebar-accent: #075985;
-  --sidebar-accent-foreground: #F1F5F9;
-  --sidebar-border: rgba(255,255,255,0.04);
-  --sidebar-ring: rgba(14,165,255,0.18);
+  /* Sidebar: Consistent with card elevation */
+  --sidebar: #1E293B;
+  --sidebar-foreground: #F8FAFC;
+  --sidebar-primary: #0EA5FF;
+  --sidebar-primary-foreground: #0F172A;
+  --sidebar-accent: #0EA5E9;
+  --sidebar-accent-foreground: #F8FAFC;
+  --sidebar-border: #334155;
+  --sidebar-ring: rgba(14, 165, 255, 0.25);
 }
 
 @layer base {
@@ -200,6 +211,11 @@
   box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
+/* Dark mode hover shadow - more visible */
+.dark .hover-lift:hover {
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(14, 165, 255, 0.1);
+}
+
 /* Edge accent for cards: subtle inset highlight and depth that adapts to dark mode */
 .edge-accent {
   position: relative;
@@ -227,7 +243,7 @@
 }
 
 .dark .edge-accent::after {
-  background: linear-gradient(180deg, rgba(127,239,253,0.98), rgba(127,239,253,0.16));
+  background: linear-gradient(180deg, rgba(14, 165, 255, 0.6), rgba(14, 165, 255, 0.2));
   background-size: 100% 200%;
   animation: edgeMove 6s linear infinite;
   mix-blend-mode: screen; /* keep screen for a brighter sheen on dark backgrounds */

src/app/globals.css

@@ -4,6 +4,24 @@ import "./globals.css";
 import { Suspense } from 'react'
 import { NetworkProvider } from "@/contexts/NetworkContext";
 
+// Work around Node.js experimental localStorage mismatch in dev server
+// (prevents Next dev overlay from crashing when localStorage is non-standard)
+if (typeof window === 'undefined') {
+  const storage = (globalThis as { localStorage?: unknown }).localStorage;
+  if (!storage || typeof (storage as Storage).getItem !== 'function') {
+    (globalThis as { localStorage?: Storage }).localStorage = {
+      getItem: () => null,
+      setItem: () => undefined,
+      removeItem: () => undefined,
+      clear: () => undefined,
+      key: () => null,
+      get length() {
+        return 0;
+      },
+    } as Storage;
+  }
+}
+
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

src/app/layout.tsx

@@ -44,13 +44,13 @@ const Home: NextPage = () => {
 
   return (
     <TooltipProvider>
-      <div className={`min-h-screen bg-gradient-to-b from-gray-50 to-blue-50 ${inter.className}`}>
+      <div className={`min-h-screen bg-gradient-to-b from-gray-50 to-blue-50 dark:from-background dark:to-background ${inter.className}`}>
         <NavbarSimple />
 
         <main className="container mx-auto px-4 py-12">
           {/* HERO */}
           <div className="relative">
-            <div className="relative bg-white/95 dark:bg-card rounded-3xl p-8 md:p-12 shadow-2xl border border-gray-200/60 dark:border-[rgba(255,255,255,0.04)]">
+            <div className="relative bg-white/95 dark:bg-card rounded-3xl p-8 md:p-12 shadow-2xl border border-gray-200/60 dark:border-border">
               <section className="flex flex-col-reverse md:flex-row items-center gap-8 md:gap-16">
 
             {/* Left: text */}

src/app/page.tsx

@@ -11,7 +11,7 @@ const inter = Inter({ subsets: ["latin"] });
 export function NavbarSimple() {
   return (
     <header
-      className={`flex items-center justify-between gap-4 bg-white dark:bg-slate-900 rounded shadow-sm py-4 px-6 md:px-28 ${inter.className}`}
+      className={`flex items-center justify-between gap-4 bg-white dark:bg-card rounded shadow-sm py-4 px-6 md:px-28 ${inter.className}`}
     >
       <div className="flex items-center gap-3">
         <Image

src/components/Navbar.tsx

@@ -207,7 +207,9 @@ useEffect(() => {
 
   return (
     <TooltipProvider>
+
       <div className={`min-h-screen bg-linear-to-b from-gray-50 to-blue-50 ${inter.className}`}>
+ main
         <NavbarSimple />
 
         <main className="container mx-auto px-4 py-6 md:py-10 max-w-7xl">
@@ -325,7 +327,7 @@ useEffect(() => {
               </div>
 
               <div className="mb-4">
-                <p className="text-sm text-gray-600 dark:text-[#6fbfe6]">Complete blockchain activity record for this escrow contract</p>
+                <p className="text-sm text-muted-foreground">Complete blockchain activity record for this escrow contract</p>
               </div>
 
               <div>
@@ -336,11 +338,11 @@ useEffect(() => {
                   transition={{ delay: 0.05, duration: 0.4 }}
                 >
                   <motion.div
-                    className="absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-purple-50/30 rounded-3xl -z-10"
+                    className="absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-purple-50/30 dark:from-primary/5 dark:to-accent/5 rounded-3xl -z-10"
                     animate={{ backgroundPosition: ["0% 0%", "100% 100%", "0% 0%"] }}
                     transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
                   />
-                    <div className="relative bg-white/95 dark:bg-[#070708] backdrop-blur-sm rounded-3xl shadow-2xl border border-gray-200/60 dark:border-[rgba(255,255,255,0.06)] dark:text-[#BFEFFD] overflow-hidden hover:shadow-3xl transition-all duration-700">
+                    <div className="relative bg-white/95 dark:bg-card backdrop-blur-sm rounded-3xl shadow-2xl border border-gray-200/60 dark:border-border overflow-hidden hover:shadow-3xl transition-all duration-700">
                     <TransactionTable
                       transactions={transactions}
                       loading={transactionLoading}

src/components/escrow/EscrowDetails.tsx

@@ -17,23 +17,23 @@ export function LedgerBalancePanel({
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.3 }}
     >
-      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 bg-white/80 backdrop-blur-sm border border-blue-100 rounded-2xl p-4 shadow-sm">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 bg-white/80 dark:bg-card backdrop-blur-sm border border-primary/20 rounded-2xl p-4 shadow-sm">
         <div className="flex items-center gap-3">
-          <div className="w-2 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full" />
+          <div className="w-2 h-8 bg-gradient-to-b from-primary to-accent rounded-full" />
           <div>
-            <div className="text-sm text-gray-600">Ledger balance (from token contract)</div>
-            <div className="text-xl font-semibold text-gray-900">
+            <div className="text-sm text-muted-foreground">Ledger balance (from token contract)</div>
+            <div className="text-xl font-semibold text-foreground">
               {balance}
               {typeof decimals === "number" ? (
-                <span className="ml-1 text-gray-500 text-sm">(d={decimals})</span>
+                <span className="ml-1 text-muted-foreground text-sm">(d={decimals})</span>
               ) : null}
             </div>
           </div>
         </div>
 
         {mismatch && (
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-100 text-amber-800 border border-amber-200">
-            <span className="text-xs font-semibold">⚠️ Mismatch</span>
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-500/20 text-amber-800 dark:text-amber-300 border border-amber-200 dark:border-amber-500/30">
+            <span className="text-xs font-semibold">Mismatch</span>
             <span className="text-xs">Stored contract balance differs</span>
           </div>
         )}