Merge pull request #61 from stayzappy/refactor-inline-styles-35

style: refactor inline styles to utility classes in page.tsx

Author: soomtochukwu

frontend/src/app/globals.css

@@ -1029,6 +1029,7 @@ h2 {
   color: #3b82f6;
   border: 1px solid rgba(59, 130, 246, 0.3);
 }
+
 /* ── Skeleton loaders ────────────────────────────────────────── */
 .skeleton-shimmer {
   position: absolute;
@@ -1222,15 +1223,76 @@ h2 {
   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;
+}
+
+/* ── Accessibility: connect-wallet focus ─────────────────────── */
 .error-retry-btn:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px;
   border-radius: 8px;
 }
 
-/* ── Accessibility: connect-wallet focus ─────────────────────── */
 .connect-wallet-btn:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px;
   border-radius: 12px;
-}
+}

frontend/src/app/page.tsx

@@ -83,7 +83,6 @@ export default function Home() {
         setWsConnected(true);
         setIsLoading(false);
       } else if (isAgentMessageNotification(notification)) {
-        // payload is fully typed as AgentMessagePayload — no cast needed
         const { text, proactive, timestamp } = notification.payload;
         const agentMsg: ChatMessage = {
           id: Date.now(),
@@ -93,6 +92,7 @@ export default function Home() {
           timestamp,
         };
         setMessages((prev: ChatMessage[]) => [...prev, agentMsg]);
+        console.log("[App] Agent message received", text);
 
         // Parse allocations if present
         const parsedAllocations = parseAllocationsFromMessage(text);
@@ -116,6 +116,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,
@@ -137,6 +138,7 @@ export default function Home() {
     };
     setMessages((prev: ChatMessage[]) => [...prev, userMsg]);
     setIsTyping(true);
+    console.log("[App] User sent message:", userMsg.text);
 
     // Mock agent response delay
     setTimeout(() => {
@@ -175,7 +177,7 @@ export default function Home() {
           {/* Left Panel - Dashboard */}
           <GlassPanel>
             <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>
 
@@ -205,16 +207,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} aria-hidden="true" /> Active Strategy Routes
               </h3>
 
@@ -246,4 +239,4 @@ export default function Home() {
       </>
     </ErrorBoundary>
   );
-}
+}