'UI Shell and General Architecture'

1 files changed, 22 insertions, 9 deletions

diff --git a/frontend/components/PriceChart.tsx b/frontend/components/PriceChart.tsx
index 8ce4ea9..3db55ce 100644
--- a/frontend/components/PriceChart.tsx
+++ b/frontend/components/PriceChart.tsx
@@ -12,6 +12,10 @@ type Props = {
 };
 
 export function PriceChart({ symbol, points }: Props) {
+  if (!points.length) {
+    return <div className="psm-card-empty">No price history available for this range.</div>;
+  }
+
   const x = points.map((point) => point.date);
   const y = points.map((point) => point.close ?? null);
   const data: Data[] = [
@@ -21,26 +25,35 @@ export function PriceChart({ symbol, points }: Props) {
       type: "scatter",
       mode: "lines",
       name: symbol,
-      line: { color: "#C2AA7A", width: 2.4 },
+      line: { color: "#C2AA7A", width: 2.5 },
       fill: "tozeroy",
-      fillcolor: "rgba(194,170,122,0.10)"
+      fillcolor: "rgba(194,170,122,0.08)",
+      hovertemplate: "%{x}<br>$%{y:.2f}<extra></extra>"
     }
   ];
+
   const layout: Partial<Layout> = {
     autosize: true,
     height: 360,
-    margin: { l: 52, r: 18, t: 18, b: 38 },
+    margin: { l: 52, r: 24, t: 20, b: 42 },
     paper_bgcolor: "rgba(0,0,0,0)",
     plot_bgcolor: "rgba(0,0,0,0)",
     hovermode: "x unified",
     font: { family: "IBM Plex Mono, monospace", color: "#8E8676" },
-    xaxis: { showgrid: false, zeroline: false },
-    yaxis: { showgrid: true, gridcolor: "#232934", tickprefix: "$", tickformat: ",.2f" }
+    xaxis: {
+      showgrid: false,
+      zeroline: false,
+      color: "#8E8676"
+    },
+    yaxis: {
+      showgrid: true,
+      gridcolor: "#232934",
+      color: "#8E8676",
+      tickprefix: "$",
+      tickformat: ",.2f"
+    }
   };
 
-  if (!points.length) {
-    return <div className="empty-panel">No price history available for this period.</div>;
-  }
-
   return <Plot data={data} layout={layout} config={{ displayModeBar: false, responsive: true }} className="chart" useResizeHandler />;
 }
+