From f73a7c22e40b7979be7bc768e18920a6217e27fe Mon Sep 17 00:00:00 2001
From: Zappy <adezapelectronics@gmail.com>
Date: Sat, 25 Apr 2026 14:41:13 +0100
Subject: [PATCH] style: refactor inline styles to utility classes in page.tsx

---
 frontend/src/app/globals.css | 62 ++++++++++++++++++++++++++++++++++++
 frontend/src/app/page.tsx    | 61 ++++++++---------------------------
 2 files changed, 75 insertions(+), 48 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 230daba..efdb728 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -784,6 +784,7 @@ h2 {
   color: #3b82f6;
   border: 1px solid rgba(59, 130, 246, 0.3);
 }
+
 /* ── Skeleton loaders ────────────────────────────────────────── */
 .skeleton-shimmer {
   position: absolute;
@@ -978,3 +979,64 @@ h2 {
 .error-retry-btn:hover {
   opacity: 0.85;
 }
+
+/* ── Refactored Utility Classes (Issue #35) ─────────────────── */
+.portfolio-subtitle {
+  margin-bottom: 2.5rem;
+}
+
+.goal-title {
+  font-size: 1.25rem;
+  margin-bottom: 4px;
+}
+
+.goal-subtitle {
+  font-size: 0.9rem;
+}
+
+.goal-status-text {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-top: 4px;
+}
+
+.progress-stats {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.allocation-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.1rem;
+  margin-bottom: 1.25rem;
+  margin-top: 1rem;
+}
+
+.chat-title {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.chat-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: var(--success);
+}
+
+.proactive-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: var(--accent-primary);
+  margin-bottom: 4px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 7f59317..cc2fb55 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -98,6 +98,7 @@ export default function Home() {
           timestamp: payload.timestamp,
         };
         setMessages((prev) => [...prev, agentMsg]);
+        console.log("[App] Agent message received", payload.text);
 
         // Parse allocations if present
         const parsedAllocations = parseAllocationsFromMessage(payload.text);
@@ -126,6 +127,7 @@ export default function Home() {
   // Register goal with notification server on mount
   useEffect(() => {
     if (wsConnected) {
+      console.log("[App] Registering goal...");
       registerGoal({
         currentBalance: goalData.currentBalance,
         targetAmount: goalData.targetAmount,
@@ -148,6 +150,7 @@ export default function Home() {
     setMessages((prev) => [...prev, userMsg]);
     setInputState("");
     setIsTyping(true);
+    console.log("[App] User sent message:", userMsg.text);
 
     // Mock agent response delay
     setTimeout(() => {
@@ -185,7 +188,7 @@ export default function Home() {
           {/* Left Panel - Dashboard */}
           <div className="glass-panel">
             <h1>Smasage Portfolio</h1>
-            <p className="text-muted" style={{ marginBottom: "2.5rem" }}>
+            <p className="text-muted portfolio-subtitle">
               Real-time on-chain tracking • Stellar Mainnet 🚀
             </p>
 
@@ -207,18 +210,16 @@ export default function Home() {
               <div className="goal-section skeleton-fade-in">
                 <div className="goal-header">
                   <div>
-                    <h3 style={{ fontSize: "1.25rem", marginBottom: "4px" }}>
+                    <h3 className="goal-title">
                       European Vacation
                     </h3>
-                    <p className="text-muted" style={{ fontSize: "0.9rem" }}>
+                    <p className="text-muted goal-subtitle">
                       Target: $18,000 by Aug 2026
                     </p>
                     <p
+                      className="goal-status-text"
                       style={{
-                        fontSize: "0.85rem",
                         color: getStatusColor(goalStatus),
-                        fontWeight: 600,
-                        marginTop: "4px",
                       }}
                     >
                       Status: {goalStatus}
@@ -236,15 +237,7 @@ export default function Home() {
                     style={{ width: `${progress}%` }}
                   ></div>
                 </div>
-                <div
-                  style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    fontSize: "0.85rem",
-                    color: "var(--text-muted)",
-                    fontWeight: 500,
-                  }}
-                >
+                <div className="progress-stats">
                   <span>68% Completed</span>
                   <span>$5,550 Remaining</span>
                 </div>
@@ -252,16 +245,7 @@ export default function Home() {
             )}
 
             <div className="allocation-list">
-              <h3
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  fontSize: "1.1rem",
-                  marginBottom: "1.25rem",
-                  marginTop: "1rem",
-                }}
-              >
+              <h3 className="allocation-title">
                 <Activity size={18} /> Active Strategy Routes
               </h3>
 
@@ -289,18 +273,10 @@ export default function Home() {
                   <Bot size={28} />
                 </div>
                 <div>
-                  <h2 style={{ margin: 0, fontSize: "1.25rem" }}>
+                  <h2 className="chat-title">
                     OpenClaw Agent
                   </h2>
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "6px",
-                      fontSize: "0.85rem",
-                      color: "var(--success)",
-                    }}
-                  >
+                  <div className="chat-status">
                     <CheckCircle2
                       size={12}
                       fill="var(--success)"
@@ -315,18 +291,7 @@ export default function Home() {
                 {messages.map((msg) => (
                   <div key={msg.id} className={`message ${msg.sender}`}>
                     {msg.proactive && (
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "6px",
-                          fontSize: "0.75rem",
-                          color: "var(--accent-primary)",
-                          marginBottom: "4px",
-                          fontWeight: 600,
-                          textTransform: "uppercase",
-                        }}
-                      >
+                      <div className="proactive-label">
                         <AlertCircle size={12} /> Proactive Nudge
                       </div>
                     )}
@@ -365,4 +330,4 @@ export default function Home() {
       </>
     </ErrorBoundary>
   );
-}
+}
\ No newline at end of file