Update auction pages to use the new Sapiens logo and consistent styling

Update the UI and CSS theme for auction-related pages to match the homepage, incorporating the new Sapiens logo and improving visual consistency.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bLfICpO

client/src/pages/AuctionGuide.tsx

@@ -29,12 +29,14 @@ export default function AuctionGuide() {
       <header className="bg-card border-b border-border sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-4 py-2">
           <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-2">
+            <Link href="/">
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold">
+              <img 
-                S
+                src="/attached_assets/logo_black_1759181850935.png" 
-              </div>
+                alt="SAPIENS" 
-              <span className="text-xl font-bold tracking-tight">SAPIENS</span>
+                className="h-5 w-auto cursor-pointer"
-            </div>
+                data-testid="logo-sapiens"
+              />
+            </Link>
             
             <div className="flex items-center space-x-3">
               <nav className="hidden md:flex space-x-4">

client/src/pages/Auctions.tsx

@@ -158,56 +158,49 @@ export default function Auctions() {
   };
 
   return (
-    <div className="flex flex-col min-h-screen bg-background">
+    <div className="flex flex-col min-h-screen bg-gray-50">
       {/* Header */}
-      <header className="bg-card border-b border-border sticky top-0 z-50">
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="max-w-7xl mx-auto px-4 py-3">
           <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-8">
+            <div className="flex items-center">
-              <div className="flex items-center space-x-3">
+              <Link href="/">
-                <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
+                <img 
-                  S
+                  src="/attached_assets/logo_black_1759181850935.png" 
-                </div>
+                  alt="SAPIENS" 
-                <span className="text-2xl font-bold tracking-tight">SAPIENS</span>
+                  className="h-5 w-auto cursor-pointer"
+                  data-testid="logo-sapiens"
+                />
+              </Link>
             </div>
             
-              <nav className="hidden md:flex space-x-6">
+            <div className="flex items-center space-x-3">
-                <Link href="/" className="text-muted-foreground hover:text-foreground transition-colors">Home</Link>
+              <Link href="/auction-guide">
-                <Link href="/auctions" className="text-foreground hover:text-primary transition-colors">Auctions</Link>
+                <Button variant="ghost" size="sm" data-testid="button-auction-guide">
-                <Link href="/auction-guide" className="text-muted-foreground hover:text-foreground transition-colors">Auction Guide</Link>
+                  <BookOpen className="h-4 w-4" />
-                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
+                </Button>
-                {(user?.role === 'admin' || user?.role === 'superadmin') && (
+              </Link>
-                  <Link href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
+              
-                    Dashboard
+              {isAuthenticated && user ? (
+                <>
+                  {(user.role === 'admin' || user.role === 'superadmin') && (
+                    <Link href="/admin">
+                      <Button variant="ghost" size="sm">
+                        Admin Dashboard
+                      </Button>
                     </Link>
                   )}
-              </nav>
-            </div>
                   
-            <div className="flex items-center space-x-4">
-              <div className="relative">
-                <Input 
-                  type="text" 
-                  placeholder="Search auctions..." 
-                  className="w-64"
-                  data-testid="input-search"
-                />
-                <i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
-              </div>
-              
-              {isAuthenticated ? (
-                <div className="flex items-center space-x-2">
-                  <span className="text-sm text-muted-foreground">Welcome, {user?.firstName || 'User'}</span>
                   <Button 
-                    variant="outline" 
+                    variant="ghost" 
                     size="sm"
                     onClick={() => window.location.href = "/api/logout"}
                   >
                     Logout
                   </Button>
-                </div>
+                </>
               ) : (
-                <Button onClick={() => window.location.href = "/api/login"}>
+                <Button size="sm" onClick={() => window.location.href = "/api/login"}>
                   Login
                 </Button>
               )}
@@ -216,39 +209,30 @@ export default function Auctions() {
         </div>
       </header>
 
-      <main className="flex-1 max-w-7xl mx-auto px-6 py-8 w-full">
+      <main className="flex-1 max-w-7xl mx-auto px-4 py-3 w-full">
         {/* Page Header */}
-        <div className="mb-8">
+        <div className="mb-4">
-          <div className="flex items-center justify-between mb-4">
+          <h1 className="text-2xl font-bold mb-2">Media Outlet Auctions</h1>
-            <h1 className="text-3xl font-bold">Media Outlet Auctions</h1>
+          <p className="text-sm text-gray-600">
-            <Link href="/auction-guide">
+            Bid for exclusive editorial rights and content management privileges
-              <Button variant="outline" data-testid="button-auction-guide">
-                <BookOpen className="mr-2 h-4 w-4" />
-                Complete Auction Guide
-              </Button>
-            </Link>
-          </div>
-          <p className="text-lg text-muted-foreground mb-6">
-            Bid for exclusive editorial rights and content management privileges. 
-            Based on competitive bidding similar to advertising platforms, combining bid amount with quality scores.
           </p>
           
           {/* Auction Explanation */}
-          <Card className="mb-6">
+          <Card className="mt-3">
-            <CardContent className="p-6">
+            <CardContent className="p-3">
-              <h3 className="text-lg font-semibold mb-3">How Auctions Work</h3>
+              <h3 className="font-semibold mb-2 text-sm">How Auctions Work</h3>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
                 <div>
-                  <h4 className="font-medium text-primary mb-2">Bid Amount</h4>
+                  <h4 className="font-medium mb-1">Bid Amount</h4>
-                  <p className="text-muted-foreground">Your maximum willingness to pay for editorial control, similar to keyword bidding in advertising.</p>
+                  <p className="text-gray-600">Your maximum willingness to pay for editorial control</p>
                 </div>
                 <div>
-                  <h4 className="font-medium text-chart-2 mb-2">Quality Score</h4>
+                  <h4 className="font-medium mb-1">Quality Score</h4>
-                  <p className="text-muted-foreground">Platform assessment of your content quality, engagement history, and editorial standards.</p>
+                  <p className="text-gray-600">Platform assessment of your content quality and engagement</p>
                 </div>
                 <div>
-                  <h4 className="font-medium text-chart-1 mb-2">Final Ranking</h4>
+                  <h4 className="font-medium mb-1">Final Ranking</h4>
-                  <p className="text-muted-foreground">Combination of bid amount and quality score determines winning position and actual cost.</p>
+                  <p className="text-gray-600">Combination of bid amount and quality score</p>
                 </div>
               </div>
             </CardContent>

client/src/pages/Home.tsx

@@ -54,9 +54,9 @@ export default function Home() {
           <div className="flex items-center justify-between">
             <div className="flex items-center">
               <img 
-                src="/attached_assets/logo_black_1759162717640.png" 
+                src="/attached_assets/logo_black_1759181850935.png" 
                 alt="SAPIENS" 
-                className="h-6 w-auto cursor-pointer"
+                className="h-5 w-auto cursor-pointer"
                 data-testid="logo-sapiens"
                 onClick={() => setLocation("/")}
               />