Skip to content
This repository was archived by the owner on Mar 16, 2026. It is now read-only.

Commit 4c3ac73

Browse files
biwasxyzbiwasxyz
committed
style(proposals): Refine proposal card layout and badge presentation
1 parent 09431ca commit 4c3ac73

2 files changed

Lines changed: 196 additions & 136 deletions

File tree

‎src/components/proposals/NewProposalCard.tsx‎

Lines changed: 114 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,6 @@ const cleanSummary = (
139139

140140
function NewProposalCard({
141141
proposal,
142-
// tokenSymbol = "",
143-
// showDAOInfo = false,
144142
voteData,
145143
vetoData,
146144
currentBlockHeight,
@@ -301,21 +299,23 @@ function NewProposalCard({
301299

302300
return (
303301
<Link href={`/proposals/${proposal.id}`} className="block group h-full">
304-
<article className="bg-card rounded-lg hover:shadow-lg transition-all duration-200 overflow-hidden h-full flex flex-col">
302+
<article className="bg-card rounded-sm hover:shadow-lg transition-all duration-200 overflow-hidden h-full flex flex-col ">
305303
{/* Header */}
306-
<div className="p-4 pb-3 flex-1">
307-
<div className="flex items-start justify-between gap-3 mb-3">
308-
<div className="flex items-start gap-3 flex-1 min-w-0">
304+
<div className="p-4 flex-1">
305+
{/* Top row - User info and Status Badge */}
306+
<div className="flex items-start justify-between mb-3">
307+
{/* Left side - Avatar and User info */}
308+
<div className="flex items-center gap-3">
309309
{/* Avatar */}
310-
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center">
311-
<User2 className="w-5 h-5 text-primary" />
310+
<div className="flex-shrink-0 w-10 h-10 rounded-sm bg-primary/20 flex items-center justify-center">
311+
<User2 className="w-7 h-7 text-primary" />
312312
</div>
313313

314314
{/* User info and timestamp */}
315-
<div className="flex items-center gap-2 flex-wrap min-h-[40px]">
315+
<div className="flex flex-col">
316316
{references.username ? (
317317
<span
318-
className="text-sm font-semibold hover:underline cursor-pointer"
318+
className="text-sm font-semibold hover:underline cursor-pointer text-foreground"
319319
onClick={(e) => {
320320
e.preventDefault();
321321
e.stopPropagation();
@@ -332,7 +332,7 @@ function NewProposalCard({
332332
</span>
333333
) : (
334334
<span
335-
className="text-sm font-semibold hover:underline cursor-pointer"
335+
className="text-sm font-semibold hover:underline cursor-pointer text-foreground"
336336
onClick={(e) => {
337337
e.preventDefault();
338338
e.stopPropagation();
@@ -346,116 +346,142 @@ function NewProposalCard({
346346
@{truncateString(proposal.creator, 4, 4)}
347347
</span>
348348
)}
349-
350-
<span className="text-sm text-muted-foreground">·</span>
351-
<span className="text-sm text-muted-foreground">{timeAgo}</span>
349+
<span className="text-xs text-muted-foreground">{timeAgo}</span>
352350
</div>
353351
</div>
354352

355353
{/* Status Badge - top right */}
356354
<div className="flex-shrink-0">
357-
<ProposalStatusBadge proposal={proposal} size="sm" />
355+
<ProposalStatusBadge proposal={proposal} size="md" />
358356
</div>
359357
</div>
360358

361-
{/* Title and summary - full width */}
362-
<div className="mb-3">
363-
{/* Proposal title */}
364-
<h3 className="text-lg font-bold text-foreground mb-3 group-hover:text-primary transition-colors leading-snug">
359+
{/* Title */}
360+
<div className="mb-1">
361+
<h3 className="text-lg font-bold text-foreground group-hover:text-primary transition-colors leading-tight">
365362
{proposal.proposal_id && (
366-
<span className="text-muted-foreground">
367-
#{proposal.proposal_id}{" "}
368-
</span>
363+
<span className="text-primary">#{proposal.proposal_id} </span>
369364
)}
370365
{proposal.title}
371366
</h3>
372-
373-
{/* Summary */}
374-
{cleanedSummary && (
375-
<p className="text-base text-muted-foreground mb-0 line-clamp-3 leading-relaxed">
376-
{cleanedSummary}
377-
</p>
378-
)}
379367
</div>
380368

381-
{/* Quorum and Threshold Badges - below summary */}
382-
{showBadges && enhancedCalculations && (
383-
<div className="flex items-center gap-2 flex-wrap">
384-
{/* Quorum Badge */}
369+
{/* Summary */}
370+
{cleanedSummary && (
371+
<p className="text-md text-muted-foreground mb-2 line-clamp-4 leading-relaxed">
372+
{cleanedSummary}
373+
</p>
374+
)}
375+
</div>
376+
377+
{/* Quorum and Threshold Badges */}
378+
{showBadges && enhancedCalculations && (
379+
<div className="flex items-center gap-3 px-4 pb-3">
380+
{/* Quorum */}
381+
<div
382+
className={cn(
383+
"rounded-sm px-2 py-1 border flex items-center gap-2",
384+
isActive
385+
? enhancedCalculations.metQuorum
386+
? "bg-success/10 border-success/30"
387+
: "bg-card border-border"
388+
: enhancedCalculations.metQuorum
389+
? "bg-success/10 border-success/30"
390+
: "bg-destructive/10 border-destructive/30"
391+
)}
392+
>
393+
<span className="text-xs">QUORUM:</span>
385394
<span
386395
className={cn(
387-
"text-xs px-2 py-0.5 rounded-sm border font-medium",
396+
"text-xs uppercase font-bold",
388397
isActive
389398
? enhancedCalculations.metQuorum
390-
? "bg-success/10 border-success/20 text-success"
391-
: "bg-primary/10 border-primary/20 text-primary"
399+
? "text-success"
400+
: "text-foreground"
392401
: enhancedCalculations.metQuorum
393-
? "bg-success/10 border-success/20 text-success"
394-
: "bg-destructive/10 border-destructive/20 text-destructive"
402+
? "text-success"
403+
: "text-destructive"
395404
)}
396405
>
397-
Quorum:{" "}
398406
{getStatusText(
399407
enhancedCalculations.metQuorum,
400408
enhancedCalculations.participationRate
401409
)}
402410
</span>
411+
</div>
403412

404-
{/* Threshold Badge */}
413+
{/* Threshold */}
414+
<div
415+
className={cn(
416+
"rounded-sm px-2 py-1 border flex items-center gap-2",
417+
isActive
418+
? enhancedCalculations.metThreshold
419+
? "bg-success/10 border-success/30"
420+
: "bg-card border-border"
421+
: enhancedCalculations.metThreshold
422+
? "bg-success/10 border-success/30"
423+
: "bg-destructive/10 border-destructive/30"
424+
)}
425+
>
426+
<span className=" text-xs">THRESHOLD:</span>
405427
<span
406428
className={cn(
407-
"text-xs px-2 py-0.5 rounded-sm border font-medium",
429+
"text-xs uppercase font-bold",
408430
isActive
409431
? enhancedCalculations.metThreshold
410-
? "bg-success/10 border-success/20 text-success"
411-
: "bg-primary/10 border-primary/20 text-primary"
432+
? "text-success"
433+
: "text-foreground"
412434
: enhancedCalculations.metThreshold
413-
? "bg-success/10 border-success/20 text-success"
414-
: "bg-destructive/10 border-destructive/20 text-destructive"
435+
? "text-success"
436+
: "text-destructive"
415437
)}
416438
>
417-
Threshold:{" "}
418439
{getStatusText(
419440
enhancedCalculations.metThreshold,
420441
enhancedCalculations.approvalRate
421442
)}
422443
</span>
444+
</div>
423445

424-
{isVetoed && (
425-
<span className="text-xs px-2 py-0.5 bg-destructive/10 text-destructive rounded-full">
426-
Vetoed
446+
{/* Vetoed Badge */}
447+
{isVetoed && (
448+
<div className="rounded-sm px-1 border bg-destructive/10 border-destructive/30">
449+
<span className="text-xs text-destructive uppercase">
450+
VETOED
427451
</span>
428-
)}
429-
</div>
430-
)}
431-
</div>
452+
</div>
453+
)}
454+
</div>
455+
)}
432456

433457
{/* Vote Actions Bar */}
434-
<div className="border-t border-border px-4 py-2">
435-
<div className="flex items-center justify-around">
458+
<div className="border-t border-border">
459+
<div className="flex items-center px-6 py-4">
436460
{/* Thumbs Up (For) */}
437461
<button
438-
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-success/10 transition-colors group/btn"
462+
className="flex items-center gap-2 px-3 py-2 rounded-sm hover:bg-success/10 transition-colors group/btn mr-auto"
439463
onClick={(e) => {
440464
e.preventDefault();
441465
e.stopPropagation();
442466
}}
443467
>
444-
<ThumbsUp
445-
className={cn(
446-
"h-5 w-5 transition-colors",
447-
voteSummary.totalVotes !== null &&
448-
voteSummary.totalVotes > 0 &&
449-
(voteSummary.votesFor || 0) > 0
450-
? "text-success fill-success"
451-
: "text-muted-foreground group-hover/btn:text-success"
452-
)}
453-
/>
468+
<div className="w-8 h-8 rounded-sm bg-success/10 flex items-center justify-center">
469+
<ThumbsUp
470+
className={cn(
471+
"h-4 w-4 transition-colors",
472+
voteSummary.totalVotes !== null &&
473+
voteSummary.totalVotes > 0 &&
474+
(voteSummary.votesFor || 0) > 0
475+
? "text-success"
476+
: "text-muted-foreground group-hover/btn:text-success"
477+
)}
478+
/>
479+
</div>
454480
{voteSummary.totalVotes !== null &&
455481
voteSummary.totalVotes > 0 && (
456482
<span
457483
className={cn(
458-
"text-sm font-medium",
484+
"text-sm font-bold",
459485
(voteSummary.votesFor || 0) > 0
460486
? "text-success"
461487
: "text-muted-foreground"
@@ -471,27 +497,29 @@ function NewProposalCard({
471497

472498
{/* Thumbs Down (Against) */}
473499
<button
474-
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-destructive/10 transition-colors group/btn"
500+
className="flex items-center gap-2 px-3 py-2 rounded-sm hover:bg-destructive/10 transition-colors group/btn mr-auto"
475501
onClick={(e) => {
476502
e.preventDefault();
477503
e.stopPropagation();
478504
}}
479505
>
480-
<ThumbsDown
481-
className={cn(
482-
"h-5 w-5 transition-colors",
483-
voteSummary.totalVotes !== null &&
484-
voteSummary.totalVotes > 0 &&
485-
(voteSummary.votesAgainst || 0) > 0
486-
? "text-destructive fill-destructive"
487-
: "text-muted-foreground group-hover/btn:text-destructive"
488-
)}
489-
/>
506+
<div className="w-8 h-8 rounded-sm bg-destructive/10 flex items-center justify-center">
507+
<ThumbsDown
508+
className={cn(
509+
"h-4 w-4 transition-colors",
510+
voteSummary.totalVotes !== null &&
511+
voteSummary.totalVotes > 0 &&
512+
(voteSummary.votesAgainst || 0) > 0
513+
? "text-destructive"
514+
: "text-muted-foreground group-hover/btn:text-destructive"
515+
)}
516+
/>
517+
</div>
490518
{voteSummary.totalVotes !== null &&
491519
voteSummary.totalVotes > 0 && (
492520
<span
493521
className={cn(
494-
"text-sm font-medium",
522+
"text-sm font-bold",
495523
(voteSummary.votesAgainst || 0) > 0
496524
? "text-destructive"
497525
: "text-muted-foreground"
@@ -505,10 +533,10 @@ function NewProposalCard({
505533
)}
506534
</button>
507535

508-
{/* Reference Link */}
536+
{/* Reference Link or View */}
509537
{references.referenceLink ? (
510538
<button
511-
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-primary/10 transition-colors group/btn"
539+
className="flex items-center gap-2 px-3 py-2 rounded-sm hover:bg-muted/10 transition-colors group/btn ml-auto"
512540
onClick={(e) => {
513541
e.preventDefault();
514542
e.stopPropagation();
@@ -521,22 +549,22 @@ function NewProposalCard({
521549
}
522550
}}
523551
>
524-
<ExternalLink className="h-5 w-5 text-muted-foreground group-hover/btn:text-primary" />
525-
<span className="text-sm font-medium text-muted-foreground group-hover/btn:text-primary">
552+
<ExternalLink className="h-4 w-4 text-muted-foreground group-hover/btn:text-foreground" />
553+
<span className="text-sm font-medium text-muted-foreground group-hover/btn:text-foreground">
526554
Post
527555
</span>
528556
</button>
529557
) : (
530558
<button
531-
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-primary/10 transition-colors group/btn"
559+
className="flex items-center gap-2 px-3 py-2 rounded-sm hover:bg-muted/10 transition-colors group/btn ml-auto"
532560
onClick={(e) => {
533561
e.preventDefault();
534562
e.stopPropagation();
535563
router.push(`/proposals/${proposal.id}`);
536564
}}
537565
>
538-
<MessageCircle className="h-5 w-5 text-muted-foreground group-hover/btn:text-primary" />
539-
<span className="text-sm font-medium text-muted-foreground group-hover/btn:text-primary">
566+
<MessageCircle className="h-4 w-4 text-muted-foreground group-hover/btn:text-foreground" />
567+
<span className="text-sm font-medium text-muted-foreground group-hover/btn:text-foreground">
540568
View
541569
</span>
542570
</button>

0 commit comments

Comments
 (0)