Adjust media outlet name display to appear below the logo

Modify the UI in Community, MediaOutlet, and Report components to stack the SAPIENS logo and media outlet name vertically, and adjust font sizes and button dimensions for better layout.

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:32:59 +00:00
parent a5ea8e9b00
commit d20f405a68
3 changed files with 15 additions and 15 deletions

View File

@ -136,15 +136,15 @@ export default function Community() {
</span>
</div>
)}
<div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation(`/media/${slug}`)}>
<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"
className="h-7 w-auto mb-1"
data-testid="logo-sapiens"
/>
<div className="flex items-center space-x-1.5">
<span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
<span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
{outlet.name}
</span>
<Button
@ -154,11 +154,11 @@ export default function Community() {
e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`);
}}
className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
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-3.5 w-3.5" />
<IdCard className="h-3 w-3" />
<span>About</span>
</Button>
</div>

View File

@ -207,15 +207,15 @@ export default function MediaOutlet() {
</span>
</div>
)}
<div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
<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"
className="h-7 w-auto mb-1"
data-testid="logo-sapiens"
/>
<div className="flex items-center space-x-1.5">
<span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
<span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
{outlet.name}
</span>
<Button
@ -225,11 +225,11 @@ export default function MediaOutlet() {
e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`);
}}
className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
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-3.5 w-3.5" />
<IdCard className="h-3 w-3" />
<span>About</span>
</Button>
</div>

View File

@ -473,15 +473,15 @@ export default function Report() {
</span>
</div>
)}
<div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
<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"
className="h-7 w-auto mb-1"
data-testid="logo-sapiens"
/>
<div className="flex items-center space-x-1.5">
<span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
<span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
{outlet.name}
</span>
<Button
@ -491,11 +491,11 @@ export default function Report() {
e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`);
}}
className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
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-3.5 w-3.5" />
<IdCard className="h-3 w-3" />
<span>About</span>
</Button>
</div>