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

Reduce spacing and padding across the platform's user interface

Browse Source 
Adjusted various padding, margin, and spacing properties in Footer and MainContent components to minimize whitespace.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/LZrXNFV
This commit is contained in:
kimjaehyeon0101
2025-09-29 17:39:02 +00:00
parent 2ff367b70b
commit 4a00fd5c1b
2 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/Footer.tsx
View File

@ -3,10 +3,10 @@ import logoBlack from "@assets/logo_black_1759165229646.png";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-gray-50 border-t border-gray-200 mt-16"> <footer className="bg-gray-50 border-t border-gray-200 mt-6">
<div className="max-w-7xl mx-auto px-6 py-8"> <div className="max-w-7xl mx-auto px-4 py-4">
{/* Logo and Social Icons */} {/* Logo and Social Icons */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-3">
<div className="flex items-center"> <div className="flex items-center">
<img <img
src={logoBlack} src={logoBlack}
@ -15,18 +15,18 @@ export default function Footer() {
data-testid="footer-logo" data-testid="footer-logo"
/> />
</div> </div>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-2">
<Facebook className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-facebook" /> <Facebook className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-facebook" />
<X className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-x" /> <X className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-x" />
</div> </div>
</div> </div>
{/* Copyright and Links */} {/* Copyright and Links */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center pt-6 border-t border-gray-200"> <div className="flex flex-col md:flex-row justify-between items-start md:items-center pt-3 border-t border-gray-200">
<p className="text-xs text-gray-600 mb-4 md:mb-0" data-testid="copyright-text"> <p className="text-xs text-gray-600 mb-2 md:mb-0" data-testid="copyright-text">
© 2007-2025 - SAPIENS Media Limited. All Rights Reserved. © 2007-2025 - SAPIENS Media Limited. All Rights Reserved.
</p> </p>
<div className="flex space-x-6"> <div className="flex space-x-3">
<a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-terms">Terms And Conditions</a> <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-terms">Terms And Conditions</a>
<a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-privacy">Privacy Policy</a> <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-privacy">Privacy Policy</a>
<a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-risk">Risk Warning</a> <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-risk">Risk Warning</a>

42
client/src/components/MainContent.tsx
View File

@ -39,9 +39,9 @@ export default function MainContent() {
className="hover:shadow-md transition-shadow cursor-pointer bg-white" className="hover:shadow-md transition-shadow cursor-pointer bg-white"
data-testid={`card-outlet-${outlet.id}`} data-testid={`card-outlet-${outlet.id}`}
> >
<CardContent className="p-4"> <CardContent className="p-2">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-2">
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden"> <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
{outlet.imageUrl ? ( {outlet.imageUrl ? (
<img <img
src={outlet.imageUrl} src={outlet.imageUrl}
@ -49,7 +49,7 @@ export default function MainContent() {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
<div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center"> <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
<span className="text-gray-600 text-sm font-medium"> <span className="text-gray-600 text-sm font-medium">
{outlet.name.charAt(0)} {outlet.name.charAt(0)}
</span> </span>
@ -73,18 +73,18 @@ export default function MainContent() {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-6 py-8"> <div className="max-w-7xl mx-auto px-4 py-4">
{isLoading ? ( {isLoading ? (
<div className="space-y-12"> <div className="space-y-6">
{categories.map((category) => ( {categories.map((category) => (
<div key={category.id}> <div key={category.id}>
<h2 className="text-2xl font-bold text-gray-900 mb-6">{category.name}</h2> <h2 className="text-xl font-bold text-gray-900 mb-2">{category.name}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
{Array.from({ length: 8 }).map((_, i) => ( {Array.from({ length: 8 }).map((_, i) => (
<Card key={i} className="animate-pulse"> <Card key={i} className="animate-pulse">
<CardContent className="p-4"> <CardContent className="p-2">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-2">
<div className="w-12 h-12 bg-gray-200 rounded-full"></div> <div className="w-10 h-10 bg-gray-200 rounded-full"></div>
<div className="flex-1"> <div className="flex-1">
<div className="h-4 bg-gray-200 rounded mb-2"></div> <div className="h-4 bg-gray-200 rounded mb-2"></div>
<div className="h-3 bg-gray-200 rounded w-2/3"></div> <div className="h-3 bg-gray-200 rounded w-2/3"></div>
@ -98,36 +98,36 @@ export default function MainContent() {
))} ))}
</div> </div>
) : ( ) : (
<div className="space-y-12"> <div className="space-y-6">
{/* People Section */} {/* People Section */}
<div data-testid="section-people"> <div data-testid="section-people">
<h2 className="text-2xl font-bold text-gray-900 mb-6"> <h2 className="text-xl font-bold text-gray-900 mb-2">
People People
<span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("People").length})</span> <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
{getOutletsByCategory("People").map(renderOutletCard)} {getOutletsByCategory("People").map(renderOutletCard)}
</div> </div>
</div> </div>
{/* Topics Section */} {/* Topics Section */}
<div data-testid="section-topics"> <div data-testid="section-topics">
<h2 className="text-2xl font-bold text-gray-900 mb-6"> <h2 className="text-xl font-bold text-gray-900 mb-2">
Topics Topics
<span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("Topics").length})</span> <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
{getOutletsByCategory("Topics").map(renderOutletCard)} {getOutletsByCategory("Topics").map(renderOutletCard)}
</div> </div>
</div> </div>
{/* Companies Section */} {/* Companies Section */}
<div data-testid="section-companies"> <div data-testid="section-companies">
<h2 className="text-2xl font-bold text-gray-900 mb-6"> <h2 className="text-xl font-bold text-gray-900 mb-2">
Companies Companies
<span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("Companies").length})</span> <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
{getOutletsByCategory("Companies").map(renderOutletCard)} {getOutletsByCategory("Companies").map(renderOutletCard)}
</div> </div>
</div> </div>