Frontend UI Redesign (Apple Aesthetic)

frontend/src/components/Header.tsx

@@ -15,7 +15,7 @@ const Header = () => {
 
   return (
     <>
-      <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:px-8">
+      <header className="sticky top-0 z-30 flex h-20 items-center justify-between border-b border-border bg-background/95 px-6 backdrop-blur supports-[backdrop-filter]:bg-background/80 md:px-10">
         {/* Left Section */}
         <div className="flex items-center gap-4">
           {/* Mobile Hamburger */}
@@ -26,24 +26,19 @@ const Header = () => {
             className="md:hidden"
             aria-label="Open menu"
           >
-            <Menu className="h-5 w-5" />
+            <Menu className="h-6 w-6" />
           </Button>
 
           {/* Breadcrumbs / Page Title */}
           <div>
-            <h1 className="text-lg font-bold tracking-tight text-foreground md:text-xl">
+            <h1 className="text-2xl font-bold tracking-tight text-foreground">
               Dashboard
             </h1>
-            <div className="hidden items-center gap-1 text-xs text-muted-foreground md:flex">
-              <span className="hover:text-foreground cursor-pointer transition-colors">Home</span>
-              <ChevronRight className="h-3 w-3" />
-              <span className="font-medium text-foreground">Dashboard</span>
-            </div>
           </div>
         </div>
 
         {/* Right Actions */}
-        <div className="flex items-center gap-2 md:gap-4">
+        <div className="flex items-center gap-4">
           {/* Theme Toggle */}
           <ThemeToggle />
 
@@ -62,4 +57,3 @@ const Header = () => {
 };
 
 export default Header;
-

frontend/src/components/QuickSelect.tsx

@@ -1,6 +1,6 @@
 import { TrendingUp } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Button } from './ui/button';
+import { cn } from '../utils/cn';
 
 interface QuickSelectProps {
   onSelect: (ticker: string) => void;
@@ -18,32 +18,31 @@ const popularTickers = [
 
 const QuickSelect = ({ onSelect, disabled = false }: QuickSelectProps) => {
   return (
-    <Card className="h-full border-border bg-card shadow-sm transition-shadow hover:shadow-md">
-      <CardHeader className="pb-3">
-        <div className="flex items-center gap-2">
-          <div className="flex items-center justify-center rounded-full bg-success/10 p-2 text-success">
-            <TrendingUp className="h-4 w-4" />
-          </div>
-          <CardTitle className="text-sm font-semibold text-foreground">Trending Stocks</CardTitle>
+    <div className="h-full rounded-2xl border border-border bg-card p-5 shadow-sm transition-all hover:shadow-md">
+      <div className="mb-4 flex items-center gap-2">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/10 text-success">
+          <TrendingUp className="h-4 w-4" />
         </div>
-      </CardHeader>
-      <CardContent>
-        <div className="flex flex-wrap gap-2">
-          {popularTickers.map(({ symbol }) => (
-            <Button
-              key={symbol}
-              variant="secondary"
-              size="sm"
-              onClick={() => onSelect(symbol)}
-              disabled={disabled}
-              className="rounded-full bg-secondary/50 font-medium hover:bg-secondary hover:text-secondary-foreground"
-            >
-              {symbol}
-            </Button>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
+        <span className="font-semibold text-foreground">Trending Now</span>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {popularTickers.map(({ symbol }) => (
+          <Button
+            key={symbol}
+            variant="ghost"
+            onClick={() => onSelect(symbol)}
+            disabled={disabled}
+            className={cn(
+              "h-9 rounded-full bg-muted/50 px-4 text-sm font-medium transition-all hover:bg-primary hover:text-primary-foreground",
+              "border border-transparent hover:border-primary/20"
+            )}
+          >
+            {symbol}
+          </Button>
+        ))}
+      </div>
+    </div>
   );
 };