From a4b72a7f80bf4786bedfee34df7d17c899e1022d Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 30 Sep 2025 05:56:38 +0000
Subject: [PATCH] Update header layout for media outlets with logos and names

Replace the SAPIENS logo in the media outlet header with a profile picture, SAPIENS logo, and the media outlet's name, including an info icon.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/16cZmxV
---
 .replit                          |  4 --
 client/src/pages/MediaOutlet.tsx | 70 +++++++++++++++++++++++++-------
 2 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/.replit b/.replit
index 47249af..e53b196 100644
--- a/.replit
+++ b/.replit
@@ -26,10 +26,6 @@ externalPort = 3001
 localPort = 38387
 externalPort = 3003
 
-[[ports]]
-localPort = 39255
-externalPort = 4200
-
 [[ports]]
 localPort = 43349
 externalPort = 3000
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index 75496cd..5f2ce07 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -135,13 +135,12 @@ export default function MediaOutlet() {
         <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="flex items-center justify-between">
-              <div className="flex items-center">
-                <img 
-                  src="/attached_assets/logo_black_1759162717640.png" 
-                  alt="SAPIENS" 
-                  className="h-6 w-auto"
-                  data-testid="logo-sapiens"
-                />
+              <div className="flex items-center space-x-3">
+                <div className="w-10 h-10 bg-gray-200 rounded-full animate-pulse"></div>
+                <div className="flex flex-col">
+                  <div className="h-3 w-20 bg-gray-200 rounded animate-pulse mb-1"></div>
+                  <div className="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
+                </div>
               </div>
               
               <div className="flex items-center space-x-4">
@@ -254,14 +253,55 @@ export default function MediaOutlet() {
       <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="flex items-center justify-between">
-            <div className="flex items-center">
-              <img 
-                src="/attached_assets/logo_black_1759162717640.png" 
-                alt="SAPIENS" 
-                className="h-6 w-auto cursor-pointer"
-                data-testid="logo-sapiens"
-                onClick={() => setLocation("/")}
-              />
+            <div className="flex items-center space-x-3">
+              {outlet.imageUrl ? (
+                <img 
+                  src={outlet.imageUrl} 
+                  alt={outlet.name}
+                  className="w-10 h-10 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
+                  onClick={() => setEnlargedImage(outlet.imageUrl!)}
+                  data-testid="image-outlet-header-profile"
+                />
+              ) : (
+                <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
+                  <span className="text-gray-600 font-bold text-sm">
+                    {outlet.name.charAt(0)}
+                  </span>
+                </div>
+              )}
+              <div className="flex flex-col cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
+                <img 
+                  src="/attached_assets/logo_black_1759162717640.png" 
+                  alt="SAPIENS" 
+                  className="h-3 w-auto mb-0.5"
+                  data-testid="logo-sapiens"
+                />
+                <div className="flex items-center space-x-1.5">
+                  <span className="text-sm font-semibold text-gray-900" data-testid="text-outlet-name-header">
+                    {outlet.name}
+                  </span>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          onClick={(e) => e.stopPropagation()}
+                          className="inline-flex items-center"
+                          aria-label="View outlet information"
+                        >
+                          <Info 
+                            className="h-3.5 w-3.5 text-gray-500 cursor-pointer hover:text-gray-700" 
+                            data-testid="icon-info-header"
+                          />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p className="max-w-xs">{outlet.description || "Media Outlet"}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </div>
             </div>
             
             <div className="flex items-center space-x-4">