aimond/sapiens-web2
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

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"
data-testid={`card-outlet-${outlet.id}`}
>
<CardContent className="p-4">
<div className="flex items-center space-x-3">
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
<CardContent className="p-2">
<div className="flex items-center space-x-2">
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
{outlet.imageUrl ? (
<img
src={outlet.imageUrl}
@ -49,7 +49,7 @@ export default function MainContent() {
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">
{outlet.name.charAt(0)}
</span>
@ -73,18 +73,18 @@ export default function MainContent() {
return (
<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 ? (
<div className="space-y-12">
<div className="space-y-6">
{categories.map((category) => (
<div key={category.id}>
<h2 className="text-2xl font-bold text-gray-900 mb-6">{category.name}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<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-2">
{Array.from({ length: 8 }).map((_, i) => (
<Card key={i} className="animate-pulse">
<CardContent className="p-4">
<div className="flex items-center space-x-3">
<div className="w-12 h-12 bg-gray-200 rounded-full"></div>
<CardContent className="p-2">
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-gray-200 rounded-full"></div>
<div className="flex-1">
<div className="h-4 bg-gray-200 rounded mb-2"></div>
<div className="h-3 bg-gray-200 rounded w-2/3"></div>
@ -98,36 +98,36 @@ export default function MainContent() {
))}
</div>
) : (
<div className="space-y-12">
<div className="space-y-6">
{/* People Section */}
<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
<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>
<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)}
</div>
</div>
{/* Topics Section */}
<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
<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>
<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)}
</div>
</div>
{/* Companies Section */}
<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
<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>
<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)}
</div>
</div>