fix: improve chart theme consistency by explicitly handling dark mode colors and opacities

[Nursca]

Closes #59

Here's exactly what was done across RevenueChart, FxRateChart, PlatformVolumeChart, and ClicksChart:

Imported and Installed useTheme Hook: Imported the useTheme hook from next-themes inside all chart components to determine if the active mode is dark.

Dynamic Tooltip Styles: Updated your custom Tooltip components (and Recharts' default tooltip inside PlatformVolumeChart) to dynamically set inline background and text colors via useTheme tracking instead of relying entirely on standard Tailwind mapping. This resolves edge cases where the chart layer isolates styles improperly.

Dynamic Gradient Area Opacities: For RevenueChart and ClicksChart, the references were adjusted dynamically:

In Light mode: We use a 0.25 → 0 opacity profile for subtlety.
In Dark mode: It bumps up to 0.4 → 0.05 for improved visibility and pop against the dark background.

Closes #60

Here is the summary of what was completed:

Created Missing Semantic Tokens To fully support dynamic theme swapping for all states without hardcoded values, I added the following missing UI state colors to both globals.css (:root and .dark blocks) and tailwind.config.ts:

--success and --success-foreground (mapped to Emerald/Green equivalents)
--warning and --warning-foreground (mapped to Yellow equivalents)
--info and --info-foreground (mapped to Blue equivalents)
Executed Widespread Token Replacement I ran a regex-based replacement script across all .tsx components and pages matching your requested target classes. This mapped instances of:

slate-900/800/700 → foreground
slate-600/500/400 → muted-foreground
slate-200/100/50 → muted & border
amber-500 through 50 → primary & opacities (primary/10, primary/20, etc.)
red-* → destructive mappings
emerald-* & green-* → our newly created success token
Replaced inline style hex strings (#1E293B, #E2E8F0, #F0A500, etc.) found in Recharts configurations to correctly reference CSS variables (e.g., var(--card), var(--border), var(--primary)).
Preserved Design Exceptions The following were intentionally bypassed during replacement:

Stellar Wallet Components: E.g., bg-slate-900 in the network tooltip UI (network-tooltip.tsx), which remains explicitly dark according to branded expectations.
Code Blocks: The text-emerald-400 color inside the tag code blocks within the developer documentation (developers/page.tsx) was retained, as its contrast relies strictly on a dark background constraint.
Merchant Logos: Background wrappers that need specific static contrast logic for rendered brand images (e.g., inside app/pay/[linkId]/page.tsx).
Documented the Strategy I added the requested block of documentation near the top of globals.css cataloging these explicit COLOR EXCEPTION rules so future developers are aware of why specific Tailwind classes persist.

Closes #61
Here's a breakdown of what was implemented in components/layout/AdminSidebar.tsx and mirrored into components/layout/MerchantSidebar.tsx to keep the UI perfectly synchronized:

Stripe Removal & Fill Pattern: Stripped out border-l-2, border-transparent, and border-primary entirely. The active state now seamlessly leverages a soft bg-primary/10 background layer accompanied by a subtle border-primary/30 containing border to provide depth.
Refined Typography Weights: Enforced font-semibold exclusively on the active navigation target while resting states use font-medium, aiding visual hierarchy.
Active Dot Indicator: Since we removed the heavy stripe, I introduced a small, elegantly positioned indicator dot (w-2 h-2 rounded-full bg-primary) pinned to the top-right of the active icon utilizing absolute positioning.
Interactive Hover States: Inactive items now leverage the group class, so that hovering smoothly transitions both the text label and the icon's color towards the foreground using standard opacity ramps.
Standardized Icon Sizing: Both the Admin and Merchant sidebars now conform exactly to w-5 h-5 sizing for their Lucide icons (the merchant sidebar previously used a slightly smaller w-4.5 convention).

Closes #62

Here is a breakdown of the specific improvements made to each section:

1. Merchant Dashboard (app/(merchant)/dashboard/page.tsx)
   Main Hero Card: Kept "Total Volume" in a prominent full-height card, increasing the font size of the primary metric and adding a subtle radial gradient.
   Combined Stack: Combined "Available to Settle" and "Active Links" into a single vertical column.
   "Available to Settle" now shows both the USDC and NGN (≈ ₦19,297,500) balances simultaneously, accompanied by an inline quick-action "Settle" button.
   "Active Links" was simplified into a horizontal strip to reduce cognitive load.
   FX Rate Sparkline: Redesigned "Current FX Rate" into a sleek inline card. It now features an SVG "sparkline" representation of the rate's trend, visually distinguishing it from static numeric metrics.
2. Settlement Page (app/(merchant)/settlement/page.tsx)
   Main Balance Card: "Available to Settle" is now a large, 2-column wide hero card. The layout groups the primary USDC amount side-by-side with the NGN equivalent separated by a clean vertical divider.
   Secondary Stack: "Pending Settlement" and "Total Settled" are now neatly stacked in the right column. We replaced the standard large-icon headers with simplified flex-row layouts featuring right-aligned status badges (e.g., Processing and Completed).
3. Admin Overview (app/(admin)/overview/page.tsx)
   Combined Hero Card: I unified "Total Processed" and "Platform Fees Generated" into a single, dominant 2-column hero card. The platform fees are now presented as a direct sub-metric tightly coupled with the total volume, separated by a vertical divider to show the direct correlation.
   Secondary Stack: "Active Merchants" and "Pending KYB Reviews" were converted into a vertical stack in the rightmost column. The KYB metric explicitly retains its critical "destructive" coloring to draw immediate administrative attention without needing a dedicated massive card.

[vercel]

@Nursca is attempting to deploy a commit to the therealjhay's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Nursca Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits