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

Improve layout and spacing of prediction market elements on article pages

Browse Source 
Adjusted various padding and margin values in Article.tsx to reduce whitespace between prediction market components.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/XHpsebf
This commit is contained in:
kimjaehyeon0101
2025-09-30 04:58:38 +00:00
parent 84d3fe85ad
commit e997b5895c
35 changed files with 423 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -226,12 +226,12 @@ export default function Article() {
))}
</div>
) : markets.length > 0 ? (
<div className="space-y-4">
<div className="space-y-2">
{markets.map((market) => (
<Card key={market.id} className="border border-gray-200">
<CardContent className="p-6">
<CardContent className="p-4">
{/* Question and Live Badge */}
<div className="flex items-start justify-between mb-6">
<div className="flex items-start justify-between mb-3">
<h3 className="text-base font-medium flex-1 pr-4" data-testid={`text-market-question-${market.id}`}>
{market.question}
</h3>
@ -243,23 +243,23 @@ export default function Article() {
</div>
{/* Percentages */}
<div className="flex items-center justify-between mb-6">
<div className="flex items-center justify-between mb-3">
<div className="text-left">
<div className="text-4xl font-bold" data-testid={`text-yes-price-${market.id}`}>
{formatPercentage(market.yesPrice)}
</div>
<div className="text-sm text-gray-500 mt-1">YES</div>
<div className="text-sm text-gray-500 mt-0.5">YES</div>
</div>
<div className="text-right">
<div className="text-4xl font-bold" data-testid={`text-no-price-${market.id}`}>
{formatPercentage(market.noPrice)}
</div>
<div className="text-sm text-gray-500 mt-1">NO</div>
<div className="text-sm text-gray-500 mt-0.5">NO</div>
</div>
</div>
{/* Yes/No Buttons */}
<div className="grid grid-cols-2 gap-3 mb-6">
<div className="grid grid-cols-2 gap-2 mb-3">
<Button
variant="outline"
className="w-full border-gray-300 hover:bg-gray-50"
@ -281,8 +281,8 @@ export default function Article() {
</div>
{/* Market Info */}
<div className="flex items-center justify-between text-sm text-gray-500 pt-4 border-t border-gray-200">
<div className="flex items-center space-x-4">
<div className="flex items-center justify-between text-sm text-gray-500 pt-3 border-t border-gray-200">
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-1">
<DollarSign className="h-4 w-4" />
<span data-testid={`text-total-volume-${market.id}`}>