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

Update header layout to match design specifications for media outlets

Browse Source 
Adjusts the header component in Community, MediaOutlet, and Report pages to display the profile picture next to the outlet name, aligning with the provided design mockups. This includes changes to image sizes, text styles, and button variants for a consistent UI.

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
This commit is contained in:
kimjaehyeon0101
2025-10-15 04:46:19 +00:00
parent 8cd539740d
commit 1c7483b12e
4 changed files with 39 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/pages/Community.tsx
View File

@ -136,32 +136,30 @@ export default function Community() {
</span>
</div>
)}
<div className="flex flex-col justify-between h-16">
<div className="flex items-center h-10 cursor-pointer hover:opacity-80 transition-opacity" 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">
<div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation(`/media/${slug}`)}>
<img
src="/attached_assets/logo_black_1759162717640.png"
alt="SAPIENS"
className="h-5 w-auto"
data-testid="logo-sapiens"
/>
<div className="flex items-center space-x-2">
<span className="text-base font-bold text-gray-900" data-testid="text-outlet-name-header">
{outlet.name}
</span>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`);
}}
className="h-5 px-1.5 flex items-center gap-0.5 text-xs hover:bg-gray-200"
className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
aria-label="View complete profile"
data-testid="button-profile"
>
<IdCard className="h-2.5 w-2.5" />
<span className="text-[10px]">About</span>
<IdCard className="h-3 w-3" />
<span>About</span>
</Button>
</div>
</div>

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

@ -207,32 +207,30 @@ export default function MediaOutlet() {
</span>
</div>
)}
<div className="flex flex-col justify-between h-16">
<div className="flex items-center h-10 cursor-pointer hover:opacity-80 transition-opacity" 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">
<div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
<img
src="/attached_assets/logo_black_1759162717640.png"
alt="SAPIENS"
className="h-5 w-auto"
data-testid="logo-sapiens"
/>
<div className="flex items-center space-x-2">
<span className="text-base font-bold text-gray-900" data-testid="text-outlet-name-header">
{outlet.name}
</span>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`);
}}
className="h-5 px-1.5 flex items-center gap-0.5 text-xs hover:bg-gray-200"
className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
aria-label="View complete profile"
data-testid="button-profile"
>
<IdCard className="h-2.5 w-2.5" />
<span className="text-[10px]">About</span>
<IdCard className="h-3 w-3" />
<span>About</span>
</Button>
</div>
</div>

28
client/src/pages/Report.tsx
View File

@ -474,32 +474,30 @@ export default function Report() {
</span>
</div>
)}
<div className="flex flex-col justify-between h-16">
<div className="flex items-center h-10 cursor-pointer hover:opacity-80 transition-opacity" 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">
<div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
<img
src="/attached_assets/logo_black_1759162717640.png"
alt="SAPIENS"
className="h-5 w-auto"
data-testid="logo-sapiens"
/>
<div className="flex items-center space-x-2">
<span className="text-base font-bold text-gray-900" data-testid="text-outlet-name-header">
{outlet.name}
</span>
<Button
variant="ghost"
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`);
}}
className="h-5 px-1.5 flex items-center gap-0.5 text-xs hover:bg-gray-200"
className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
aria-label="View complete profile"
data-testid="button-profile"
>
<IdCard className="h-2.5 w-2.5" />
<span className="text-[10px]">About</span>
<IdCard className="h-3 w-3" />
<span>About</span>
</Button>
</div>
</div>