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

Update media outlet header to display logo and name with an about button

Browse Source 
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
This commit is contained in:
kimjaehyeon0101
2025-10-15 04:40:17 +00:00
parent d20f405a68
commit 4fbfc0a057
3 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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