feat: Enhance PageHeader styling and add primary-hover color

app/globals.css

@@ -12,6 +12,7 @@
   --popover-foreground: oklch(0.32 0 0);
   --primary: oklch(0.62 0.19 259.76);
   --primary-foreground: oklch(1.00 0 0);
+  --primary-hover: #1077BB;
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.45 0.03 257.68);
   --muted: oklch(0.98 0 0);
@@ -60,7 +61,7 @@
   --card-foreground: oklch(0.92 0 0);
   --popover: oklch(0.27 0 0);
   --popover-foreground: oklch(0.92 0 0);
-  --primary: oklch(0.62 0.19 259.76);
+  --primary: #10639D;
   --primary-foreground: oklch(1.00 0 0);
   --secondary: oklch(0.27 0 0);
   --secondary-foreground: oklch(0.92 0 0);
@@ -111,6 +112,7 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);

components/features/projectList/PageHeader.tsx

@@ -38,20 +38,25 @@ const PageHeader = memo(({ projectsCount, className }: PageHeaderProps) => {
   return (
     <>
       <div
-        className={`h-12 bg-card border-b border-border flex items-center justify-between px-4 ${className || ''}`}
+        className={`h-14 bg-card border-b border-border flex items-center justify-between px-4 ${className || ''}`}
       >
         <div className="flex items-center gap-3">
-          <Folder className="h-4 w-4 text-muted-foreground" />
-          <h1 className="text-sm font-medium text-foreground">Projects</h1>
-          <span className="text-xs text-muted-foreground">({projectsCount})</span>
+          <div className="flex items-center gap-2">
+            <Folder className="h-4 w-4" />
+            <h1 className="text-base font-mono font-bold text-foreground uppercase">Projects</h1>
+          </div>
+
+          <span className="text-xs text-foreground bg-[#4D4D4D] rounded-full px-2 py-0.5">
+            {projectsCount}
+          </span>
         </div>
 
         <div className="flex items-center gap-3">
           {/* New Project Button */}
           <Button
             size="sm"
             onClick={() => setShowCreateProject(true)}
-            className="h-7 bg-primary hover:bg-primary/90 text-primary-foreground text-xs px-3"
+            className="h-7 bg-primary hover:bg-primary-hover text-primary-foreground text-xs px-3"
           >
             <Plus className="mr-1 h-3 w-3" />
             New Project

components/terminal/terminal-toolbar.tsx

@@ -216,7 +216,7 @@ export function TerminalToolbar({
                   ) : (
                     <>
                       <Square className="mr-2 h-3 w-3" />
-                      Stop Sandbox
+                      Stop Project
                     </>
                   )}
                 </DropdownMenuItem>
@@ -230,7 +230,7 @@ export function TerminalToolbar({
                     className="text-xs cursor-pointer focus:bg-[#37373d] focus:text-white"
                   >
                     <Trash2 className="mr-2 h-3 w-3" />
-                    Delete Sandbox
+                    Delete Project
                   </DropdownMenuItem>
                 </>
               )}