style(frontend): refactor UI components with rounded corners, light theme, and design polish

services/frontend/src/widgets/Header.tsx

@@ -1,6 +1,9 @@
+import { motion } from "framer-motion";
 import { Wifi, WifiOff } from "lucide-react";
 import type { DashboardTab } from "../entities/ui/types";
 import type { VoiceStatus } from "../shared/api/client";
+import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
+import { cn } from "../shared/lib/utils";
 import { Badge } from "../shared/ui";
 import type { WsStatus } from "../shared/ws/socket";
 
@@ -22,14 +25,59 @@ interface HeaderProps {
   voiceStatus: VoiceStatus;
 }
 
+/** Dot indicator colour for WS badge */
+function wsDotColor(status: WsStatus): string {
+  switch (status) {
+    case "connected":
+      return "bg-emerald-400";
+    case "error":
+      return "bg-red-400";
+    case "connecting":
+    case "disconnected":
+      return "bg-gray-400";
+  }
+}
+
+function WsIndicator({ status }: { status: WsStatus }) {
+  const dot = wsDotColor(status);
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
+      <span className="text-xs font-medium capitalize">{status}</span>
+    </div>
+  );
+}
+
+/** Voice status indicator dot */
+function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
+  const isConnected = voiceStatus.connected;
+  const dot = isConnected ? "bg-[#7EC8E3]" : "bg-gray-300";
+  const label = isConnected
+    ? voiceStatus.activeChannelName || "connected"
+    : "idle";
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
+      <span className="text-xs font-medium">{label}</span>
+    </div>
+  );
+}
+
 export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
   return (
-    <header className="sticky top-0 z-10 border-b border-border bg-background/80 px-4 py-4 backdrop-blur md:px-8">
+    <header className="sticky top-0 z-10 border-b border-[#7EC8E3]/20 bg-white/70 px-4 py-4 backdrop-blur-md md:px-8">
       <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <div className="flex items-center gap-3">
+        {/* Left: animated tab title + subtitle */}
+        <motion.div
+          key={activeTab}
+          variants={fadeSlideUp}
+          initial="initial"
+          animate="animate"
+          className="flex items-center gap-3"
+        >
           <div>
             <h1 className="text-xl font-bold tracking-tight">
-              <span className="text-primary">GMW</span>
+              <span className="text-[#7EC8E3]">GMW</span>
               <span className="mx-2 text-muted-foreground">·</span>
               {titles[activeTab]}
             </h1>
@@ -37,29 +85,34 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
               {subtitles[activeTab]}
             </p>
           </div>
-        </div>
-        <div className="flex flex-wrap gap-2">
+        </motion.div>
+
+        {/* Right: status badges */}
+        <div className="flex flex-wrap items-center gap-2">
+          {/* WS Badge */}
           <Badge
-            variant={
-              wsStatus === "connected"
-                ? "success"
-                : wsStatus === "error"
-                  ? "destructive"
-                  : "warning"
-            }
+            variant="outline"
+            className="border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs text-muted-foreground"
           >
             {wsStatus === "connected" ? (
-              <Wifi className="mr-1 h-3 w-3" />
+              <Wifi className="mr-1.5 h-3 w-3 text-emerald-400" />
             ) : (
-              <WifiOff className="mr-1 h-3 w-3" />
+              <WifiOff className="mr-1.5 h-3 w-3 text-red-400" />
             )}
-            WebSocket {wsStatus}
+            <WsIndicator status={wsStatus} />
           </Badge>
-          <Badge variant={voiceStatus.connected ? "success" : "secondary"}>
-            Voice{" "}
-            {voiceStatus.connected
-              ? voiceStatus.activeChannelName || "connected"
-              : "idle"}
+
+          {/* Voice Badge */}
+          <Badge
+            variant="outline"
+            className={cn(
+              "border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs",
+              voiceStatus.connected
+                ? "text-[#7EC8E3]"
+                : "text-muted-foreground",
+            )}
+          >
+            <VoiceIndicator voiceStatus={voiceStatus} />
           </Badge>
         </div>
       </div>