From 68aa5a08be16746ddcdab011a2825de04020f0eb Mon Sep 17 00:00:00 2001
From: Afolabi Ayomide <afolabiayomide870@gmail.com>
Date: Mon, 27 Apr 2026 17:43:41 +0100
Subject: [PATCH] feat(ui): add reusable GlassPanel component and replace raw
 divs in page.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create GlassPanel.tsx with children and optional className props
- Applies the .glass-panel CSS class internally (backdrop blur 16px,
  rgba(24,24,27,0.7) background, 1px solid rgba(255,255,255,0.08) border,
  hover translateY(-2px) with deepened shadow — all defined in globals.css)
- Replace both raw <div className="glass-panel"> instances in page.tsx with <GlassPanel>

Closes #32
---
 frontend/src/app/components/GlassPanel.tsx | 14 ++++++++++++++
 frontend/src/app/page.tsx                  |  9 +++++----
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/components/GlassPanel.tsx

diff --git a/frontend/src/app/components/GlassPanel.tsx b/frontend/src/app/components/GlassPanel.tsx
new file mode 100644
index 0000000..654c62b
--- /dev/null
+++ b/frontend/src/app/components/GlassPanel.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+interface GlassPanelProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function GlassPanel({ children, className }: GlassPanelProps) {
+  return (
+    <div className={`glass-panel${className ? ` ${className}` : ""}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f5f6967..6978cbf 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -29,6 +29,7 @@ import {
 import { WalletModal } from "./components/WalletModal";
 import { ChatInterface, type ChatMessage } from "./components/ChatInterface";
 import { GoalTracker } from "./components/GoalTracker";
+import { GlassPanel } from "./components/GlassPanel";
 
 export default function Home() {
   const {
@@ -172,7 +173,7 @@ export default function Home() {
         />
         <main className="app-container" aria-label="Portfolio dashboard">
           {/* Left Panel - Dashboard */}
-          <div className="glass-panel">
+          <GlassPanel>
             <h1>Smasage Portfolio</h1>
             <p className="text-muted" style={{ marginBottom: "2.5rem" }}>
               Real-time on-chain tracking • Stellar Mainnet 🚀
@@ -231,16 +232,16 @@ export default function Home() {
                 </div>
               )}
             </div>
-          </div>
+          </GlassPanel>
 
           {/* Right Panel - Chat Agent */}
-          <div className="glass-panel">
+          <GlassPanel>
             <ChatInterface
               messages={messages}
               isTyping={isTyping}
               onSendMessage={handleSendMessage}
             />
-          </div>
+          </GlassPanel>
         </main>
       </>
     </ErrorBoundary>