[UI/UX] Premium Visual Refresh for Stock Chart and Indicator Panels (Glows, Custom Tooltips, and Subtle Gridlines)

[Edge-Explorer]

Summary

While the historical data loading, MACD, and RSI calculations are functionally perfect, the visual rendering of the charts uses default Recharts styles.

To elevate the visual appeal of the dashboard, we want to give the stock chart and indicator panels a premium, modern design refresh (matching the glassmorphism and glowing neon aesthetic of the rest of the QuantIQ interface).

---

Motivation

Modern financial interfaces (like TradingView, Linear, or premium crypto terminals) focus heavily on high-fidelity aesthetics:

• Semi-transparent, glowing neon gradients are easier to read and look stunning.
• Standard gray grid lines and default axis text draw too much focus away from the price action.
• Default tooltips look like generic popups rather than integrated dashboard components.

---

Proposed Implementation

1. Glowing Neon Line Gradients

Inject SVG linear gradients into the charts inside frontend/src/components/StockChart.tsx to add neon drop glows:

• Price Line: A cyan area gradient fading to transparent.
• RSI Line: A soft cyan glow line.
• MACD Lines: Electric purple and orange line curves.
• MACD Histogram: Soft, semi-transparent neon green (bullish) and neon red (bearish) bars with clean borders.

2. Custom Glassmorphic Tooltips

Replace Recharts default tooltip component with a custom React element:

• Style: background: rgba(13, 16, 27, 0.75), backdrop-filter: blur(12px), and a subtle white border 1px solid rgba(255, 255, 255, 0.08).
• Content: Modern typography, micro-spaced text, and color-coded status indicator dots matching each active curve.

3. Muted Axis and Grid Elements

• Adjust CartesianGrid properties to be very dark and subtle: stroke="rgba(255, 255, 255, 0.03)" or strokeDasharray="3 3".
• Style XAxis and YAxis text with smaller, muted typography (fontSize="10px", fill="var(--text-muted)").

4. Interactive Legends

• Modify the chart header text to dynamically display the values at the current cursor crosshair position when a user hovers over the charts (e.g., updating the text label next to the chart title in real time).

---

Files to Update

Layer	File Path	Description of Change
Frontend UI	frontend/src/components/StockChart.tsx	Define SVG gradient overlays, customize CartesianGrid/XAxis/YAxis styles, and build the custom glassmorphic tooltip component
Frontend Style	frontend/src/App.css	Define CSS glow effects, layout margins, glassmorphism filters, and cursor tracking styles

---

Acceptance Criteria

• Price area chart uses a cyan linear gradient that fades smoothly to transparent at the bottom.
• RSI and MACD signal lines feature subtle, glowing neon colors that blend with the theme.
• Hover tooltips are custom-built with glassmorphic blur and thin borders.
• Gridlines (CartesianGrid) are styled to be very dark and subtle (low opacity).
• Axis labels are cleanly styled with small, muted typography.
• Layout panels have clean vertical separations and consistent margins.