aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update header layout for media outlets with logos and names

Browse Source 
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
This commit is contained in:
kimjaehyeon0101
2025-09-30 05:56:38 +00:00
parent dc2aa8cf28
commit a4b72a7f80
2 changed files with 55 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@ -26,10 +26,6 @@ externalPort = 3001
localPort = 38387 localPort = 38387
externalPort = 3003 externalPort = 3003
[[ports]]
localPort = 39255
externalPort = 4200
[[ports]] [[ports]]
localPort = 43349 localPort = 43349
externalPort = 3000 externalPort = 3000

70
client/src/pages/MediaOutlet.tsx
View File

@ -135,13 +135,12 @@ export default function MediaOutlet() {
<header className="bg-white border-b border-gray-200 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-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center space-x-3">
<img <div className="w-10 h-10 bg-gray-200 rounded-full animate-pulse"></div>
src="/attached_assets/logo_black_1759162717640.png" <div className="flex flex-col">
alt="SAPIENS" <div className="h-3 w-20 bg-gray-200 rounded animate-pulse mb-1"></div>
className="h-6 w-auto" <div className="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
data-testid="logo-sapiens" </div>
/>
</div> </div>
<div className="flex items-center space-x-4"> <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"> <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-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center space-x-3">
<img {outlet.imageUrl ? (
src="/attached_assets/logo_black_1759162717640.png" <img
alt="SAPIENS" src={outlet.imageUrl}
className="h-6 w-auto cursor-pointer" alt={outlet.name}
data-testid="logo-sapiens" className="w-10 h-10 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
onClick={() => setLocation("/")} 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>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">