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

BIN
attached_assets/스크린샷 2025-10-15 오후 1.42.39_1760503523687.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

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

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

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

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

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

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