Merge pull request #398 from Stellar-Analysis/v0/fix-terminal-ui

Launch Stellar Analysis landing experience and update branding

Author: vercel[bot]

frontend/src/app/[locale]/layout.tsx

@@ -73,7 +73,7 @@ export default async function LocaleLayout({ children, params }: Props) {
                     <ShortcutsInitializer />
                   <div className="flex min-h-screen">
                     <Sidebar />
-                    <main className="flex-1 ml-20 lg:ml-64 transition-all duration-300 relative" tabIndex={-1}>
+                    <main className="terminal-surface relative ml-20 flex-1 transition-all duration-300 lg:ml-64" tabIndex={-1}>
                       <Navbar />
 
                       {/* Background Ambient Glow — same warm gold treatment as the landing page's .stellar-dune */}

frontend/src/app/globals.css

@@ -312,6 +312,24 @@ body:has(.stellar-landing) nav {
   display: none;
 }
 
+/* Shared Stellar Analysis terminal surface */
+.terminal-surface {
+  font-family: var(--font-sans);
+  letter-spacing: -0.01em;
+}
+
+.terminal-surface h1,
+.terminal-surface h2,
+.terminal-surface h3 {
+  font-family: var(--font-serif);
+  letter-spacing: -0.035em;
+}
+
+.terminal-surface [class*="font-mono"] {
+  font-family: var(--font-mono);
+  letter-spacing: 0.08em;
+}
+
 body:has(.stellar-landing) main.flex-1 {
   margin-left: 0;
 }
@@ -525,7 +543,7 @@ body:has(.stellar-landing) main.flex-1 {
   flex-shrink: 0;
 }
 
-/* ─── Theme Toggle Button ─────────────────────────────────────────────── */
+/* ─── Theme Toggle Button ─────────────────────────────────────��───────── */
 .theme-toggle-btn {
   display: flex;
   align-items: center;

frontend/src/components/layout/header.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef } from "react";
 import { Menu, Wallet, LogOut } from "lucide-react";
 import { useWallet } from "../lib/wallet-context";
 import { NotificationCenter } from "./notification-center";
+import { useNotifications } from "@/contexts/NotificationContext";
 
 interface HeaderProps {
   onMenuToggle: () => void;
@@ -89,7 +90,7 @@ export function Header({ onMenuToggle, sidebarOpen }: HeaderProps) {
   };
 
   return (
-    <header className="fixed top-0 left-0 right-0 h-16 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-700 z-40">
+    <header className="fixed top-0 left-0 right-0 z-40 h-16 border-b border-border/70 bg-background/85 text-foreground backdrop-blur-xl">
       <div className="flex items-center justify-between h-full px-4 sm:px-6">
         {/* Left: Menu Toggle & Logo */}
         <div className="flex items-center gap-4">

frontend/src/components/layout/sidebar.tsx

@@ -152,7 +152,7 @@ export function Sidebar({ open, onClose }: SidebarProps = {}) {
   return (
     <aside
       aria-label="Sidebar navigation"
-      className={`hidden md:block fixed top-0 left-0 h-screen overflow-y-auto glass border-r border-border transition-all duration-500 z-50 ${collapsed ? "w-20" : "w-64"
+      className={`fixed left-0 top-0 z-50 hidden h-screen overflow-y-auto border-r border-border/70 bg-background/90 text-foreground shadow-[12px_0_40px_rgba(0,0,0,0.18)] backdrop-blur-xl transition-all duration-500 md:block ${collapsed ? "w-20" : "w-64"
         }`}
     >
       <div className="flex flex-col h-full">