From 4fbfc0a057bc7279b9a971c4f5024ae8762c8ca5 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Wed, 15 Oct 2025 04:40:17 +0000
Subject: [PATCH] Update media outlet header to display logo and name with an
 about button

Refactor the header component in Community, MediaOutlet, and Report pages to use a new layout with improved styling for the Sapiens logo, outlet name, and About button.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/cEkjo93
---
 client/src/pages/Community.tsx   | 28 +++++++++++++++-------------
 client/src/pages/MediaOutlet.tsx | 28 +++++++++++++++-------------
 client/src/pages/Report.tsx      | 28 +++++++++++++++-------------
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/client/src/pages/Community.tsx b/client/src/pages/Community.tsx
index 58dc93a..63a8d5b 100644
--- a/client/src/pages/Community.tsx
+++ b/client/src/pages/Community.tsx
@@ -136,30 +136,32 @@ export default function Community() {
                   </span>
                 </div>
               )}
-              <div className="flex flex-col cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation(`/media/${slug}`)}>
-                <img 
-                  src="/attached_assets/logo_black_1759162717640.png" 
-                  alt="SAPIENS" 
-                  className="h-7 w-auto mb-1"
-                  data-testid="logo-sapiens"
-                />
-                <div className="flex items-center space-x-1.5">
-                  <span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
+              <div className="flex flex-col justify-between bg-gray-50 px-4 py-2 rounded-xl border border-gray-200 cursor-pointer hover:bg-gray-100 transition-all h-16">
+                <div className="flex items-center h-10 cursor-pointer" onClick={() => setLocation(`/media/${slug}`)}>
+                  <img 
+                    src="/attached_assets/logo_black_1759162717640.png" 
+                    alt="SAPIENS" 
+                    className="h-6 w-auto"
+                    data-testid="logo-sapiens"
+                  />
+                </div>
+                <div className="flex items-center space-x-1.5 h-6">
+                  <span className="text-xs font-semibold text-gray-700" data-testid="text-outlet-name-header">
                     {outlet.name}
                   </span>
                   <Button
-                    variant="outline"
+                    variant="ghost"
                     size="sm"
                     onClick={(e) => {
                       e.stopPropagation();
                       setLocation(`/media/${outlet.slug}/report`);
                     }}
-                    className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
+                    className="h-5 px-1.5 flex items-center gap-0.5 text-xs hover:bg-gray-200"
                     aria-label="View complete profile"
                     data-testid="button-profile"
                   >
-                    <IdCard className="h-3 w-3" />
-                    <span>About</span>
+                    <IdCard className="h-2.5 w-2.5" />
+                    <span className="text-[10px]">About</span>
                   </Button>
                 </div>
               </div>
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index 77c009a..3791aca 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -207,30 +207,32 @@ export default function MediaOutlet() {
                   </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-7 w-auto mb-1"
-                  data-testid="logo-sapiens"
-                />
-                <div className="flex items-center space-x-1.5">
-                  <span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
+              <div className="flex flex-col justify-between bg-gray-50 px-4 py-2 rounded-xl border border-gray-200 cursor-pointer hover:bg-gray-100 transition-all h-16">
+                <div className="flex items-center h-10 cursor-pointer" onClick={() => setLocation("/")}>
+                  <img 
+                    src="/attached_assets/logo_black_1759162717640.png" 
+                    alt="SAPIENS" 
+                    className="h-6 w-auto"
+                    data-testid="logo-sapiens"
+                  />
+                </div>
+                <div className="flex items-center space-x-1.5 h-6">
+                  <span className="text-xs font-semibold text-gray-700" data-testid="text-outlet-name-header">
                     {outlet.name}
                   </span>
                   <Button
-                    variant="outline"
+                    variant="ghost"
                     size="sm"
                     onClick={(e) => {
                       e.stopPropagation();
                       setLocation(`/media/${outlet.slug}/report`);
                     }}
-                    className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
+                    className="h-5 px-1.5 flex items-center gap-0.5 text-xs hover:bg-gray-200"
                     aria-label="View complete profile"
                     data-testid="button-profile"
                   >
-                    <IdCard className="h-3 w-3" />
-                    <span>About</span>
+                    <IdCard className="h-2.5 w-2.5" />
+                    <span className="text-[10px]">About</span>
                   </Button>
                 </div>
               </div>
diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx
index 2269f4e..fc49fc1 100644
--- a/client/src/pages/Report.tsx
+++ b/client/src/pages/Report.tsx
@@ -473,30 +473,32 @@ export default function Report() {
                       </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-7 w-auto mb-1"
-                      data-testid="logo-sapiens"
-                    />
-                    <div className="flex items-center space-x-1.5">
-                      <span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
+                  <div className="flex flex-col justify-between bg-gray-50 px-4 py-2 rounded-xl border border-gray-200 cursor-pointer hover:bg-gray-100 transition-all h-16">
+                    <div className="flex items-center h-10 cursor-pointer" onClick={() => setLocation("/")}>
+                      <img 
+                        src="/attached_assets/logo_black_1759162717640.png" 
+                        alt="SAPIENS" 
+                        className="h-6 w-auto"
+                        data-testid="logo-sapiens"
+                      />
+                    </div>
+                    <div className="flex items-center space-x-1.5 h-6">
+                      <span className="text-xs font-semibold text-gray-700" data-testid="text-outlet-name-header">
                         {outlet.name}
                       </span>
                       <Button
-                        variant="outline"
+                        variant="ghost"
                         size="sm"
                         onClick={(e) => {
                           e.stopPropagation();
                           setLocation(`/media/${outlet.slug}/report`);
                         }}
-                        className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
+                        className="h-5 px-1.5 flex items-center gap-0.5 text-xs hover:bg-gray-200"
                         aria-label="View complete profile"
                         data-testid="button-profile"
                       >
-                        <IdCard className="h-3 w-3" />
-                        <span>About</span>
+                        <IdCard className="h-2.5 w-2.5" />
+                        <span className="text-[10px]">About</span>
                       </Button>
                     </div>
                   </div>