Skip to content

Commit e386666

Browse files
ashucoder9ashucoder9
committed
fix alignment of header on chain stats
1 parent 2644964 commit e386666

File tree

1 file changed

+43
-43
lines changed

1 file changed

+43
-43
lines changed

‎components/stats/ChainMetricsPage.tsx‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -439,45 +439,38 @@ export default function ChainMetricsPage({
439439
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20 pt-8">
440440
<div className="container mx-auto mt-4 p-4 sm:p-6 pb-24 space-y-8 sm:space-y-12">
441441
{/* Hero Section Skeleton */}
442-
<div className="relative overflow-hidden rounded-2xl p-8 sm:p-12">
442+
<div className="relative overflow-hidden rounded-2xl p-6 sm:p-8">
443443
{/* Multi-layer gradient background */}
444-
<div className="absolute inset-0 bg-black" />
444+
<div className="absolute inset-0 bg-gradient-to-br from-black via-neutral-950 to-black" />
445445
<div
446-
className="absolute inset-0 opacity-60"
446+
className="absolute inset-0 opacity-50"
447447
style={{
448-
background: `linear-gradient(140deg, ${themeColor}88 0%, transparent 70%)`
448+
background: `linear-gradient(135deg, ${themeColor}99 0%, ${themeColor}44 30%, transparent 60%)`
449449
}}
450450
/>
451451
<div
452-
className="absolute inset-0 opacity-40"
452+
className="absolute inset-0 opacity-30"
453453
style={{
454-
background: `linear-gradient(to top left, ${themeColor}66 0%, transparent 50%)`
454+
background: `radial-gradient(ellipse at top right, ${themeColor}88 0%, transparent 50%)`
455455
}}
456456
/>
457457
<div
458-
className="absolute inset-0 opacity-30"
458+
className="absolute inset-0 opacity-20"
459459
style={{
460-
background: `radial-gradient(circle at 50% 50%, ${themeColor}88 0%, ${themeColor}44 30%, transparent 70%)`
460+
background: `radial-gradient(ellipse at bottom left, ${themeColor}66 0%, transparent 40%)`
461461
}}
462462
/>
463463

464464
{/* Content */}
465465
<div className="relative z-10">
466-
{/* ExplorerDropdown Placeholder for L1s */}
467-
{!chainName.includes("C-Chain") && (
468-
<div className="flex justify-end mb-4">
469-
<div className="h-8 w-28 bg-white/20 rounded-md animate-pulse" />
470-
</div>
471-
)}
472-
473-
<div className="flex flex-col sm:flex-row items-start gap-6">
466+
<div className="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
474467
{/* Chain Logo Skeleton - Only show if chainLogoURI exists */}
475468
{chainLogoURI && (
476-
<div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-white/20 animate-pulse shrink-0" />
469+
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl bg-white/20 animate-pulse shrink-0" />
477470
)}
478471

479472
<div className="flex-1 min-w-0">
480-
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold mb-3 text-white">
473+
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold mb-2 text-white">
481474
{chainName.includes("C-Chain")
482475
? "Avalanche C-Chain Metrics"
483476
: `${chainName} L1 Metrics`}
@@ -488,6 +481,13 @@ export default function ChainMetricsPage({
488481
: `Loading ${chainName} metrics...`}
489482
</p>
490483
</div>
484+
485+
{/* ExplorerDropdown Placeholder for L1s */}
486+
{!chainName.includes("C-Chain") && (
487+
<div className="shrink-0 self-start sm:self-center">
488+
<div className="h-8 w-28 bg-white/50 dark:bg-white/20 rounded-md animate-pulse" />
489+
</div>
490+
)}
491491
</div>
492492
</div>
493493
</div>
@@ -651,52 +651,39 @@ export default function ChainMetricsPage({
651651
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20 pt-8">
652652
<div className="container mx-auto mt-4 p-4 sm:p-6 pb-24 space-y-8 sm:space-y-12">
653653
{/* Header */}
654-
<div className="relative overflow-hidden rounded-2xl p-8 sm:p-12">
654+
<div className="relative overflow-hidden rounded-2xl p-6 sm:p-8">
655655
{/* Multi-layer gradient background */}
656-
<div className="absolute inset-0 bg-black" />
656+
<div className="absolute inset-0 bg-gradient-to-br from-black via-neutral-950 to-black" />
657657
<div
658-
className="absolute inset-0 opacity-60"
658+
className="absolute inset-0 opacity-50"
659659
style={{
660-
background: `linear-gradient(140deg, ${themeColor}88 0%, transparent 70%)`
660+
background: `linear-gradient(135deg, ${themeColor}99 0%, ${themeColor}44 30%, transparent 60%)`
661661
}}
662662
/>
663663
<div
664-
className="absolute inset-0 opacity-40"
664+
className="absolute inset-0 opacity-30"
665665
style={{
666-
background: `linear-gradient(to top left, ${themeColor}66 0%, transparent 50%)`
666+
background: `radial-gradient(ellipse at top right, ${themeColor}88 0%, transparent 50%)`
667667
}}
668668
/>
669669
<div
670-
className="absolute inset-0 opacity-30"
670+
className="absolute inset-0 opacity-20"
671671
style={{
672-
background: `radial-gradient(circle at 50% 50%, ${themeColor}44 0%, transparent 70%)`
672+
background: `radial-gradient(ellipse at bottom left, ${themeColor}66 0%, transparent 40%)`
673673
}}
674674
/>
675675

676676
{/* Content */}
677677
<div className="relative z-10">
678-
{/* Top row with ExplorerDropdown */}
679-
{!chainName.includes("C-Chain") && currentChain?.explorers && (
680-
<div className="flex justify-end mb-4">
681-
<div className="[&_button]:border-neutral-300 dark:[&_button]:border-white/30 [&_button]:text-neutral-800 dark:[&_button]:text-white [&_button]:hover:bg-neutral-100 dark:[&_button]:hover:bg-white/10 [&_button]:hover:border-neutral-400 dark:[&_button]:hover:border-white/50">
682-
<ExplorerDropdown
683-
explorers={currentChain.explorers}
684-
variant="outline"
685-
size="sm"
686-
/>
687-
</div>
688-
</div>
689-
)}
690-
691-
{/* Main content row */}
692-
<div className="flex flex-col sm:flex-row items-start gap-6">
678+
{/* Main content row with aligned explorer button */}
679+
<div className="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
693680
{/* Logo */}
694681
{chainLogoURI && (
695682
<div className="shrink-0">
696683
<img
697684
src={chainLogoURI}
698685
alt={`${chainName} logo`}
699-
className="w-20 h-20 sm:w-24 sm:h-24 rounded-xl object-contain bg-white/10 p-2"
686+
className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl object-contain bg-white/10 p-2"
700687
onError={(e) => {
701688
(e.target as HTMLImageElement).style.display = 'none';
702689
}}
@@ -706,7 +693,7 @@ export default function ChainMetricsPage({
706693

707694
{/* Title and description */}
708695
<div className="flex-1 min-w-0">
709-
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-white mb-3 break-words">
696+
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-white mb-2 break-words">
710697
{chainName.includes("C-Chain")
711698
? "Avalanche C-Chain Metrics"
712699
: `${chainName} L1 Metrics`}
@@ -715,6 +702,19 @@ export default function ChainMetricsPage({
715702
{description}
716703
</p>
717704
</div>
705+
706+
{/* Explorer Dropdown aligned with title */}
707+
{!chainName.includes("C-Chain") && currentChain?.explorers && (
708+
<div className="shrink-0 self-start sm:self-center">
709+
<div className="[&_button]:border-neutral-700 dark:[&_button]:border-white/30 [&_button]:text-neutral-900 dark:[&_button]:text-white [&_button]:bg-white/90 dark:[&_button]:bg-transparent [&_button]:hover:bg-white dark:[&_button]:hover:bg-white/10 [&_button]:hover:border-neutral-900 dark:[&_button]:hover:border-white/50 [&_button]:backdrop-blur-sm">
710+
<ExplorerDropdown
711+
explorers={currentChain.explorers}
712+
variant="outline"
713+
size="sm"
714+
/>
715+
</div>
716+
</div>
717+
)}
718718
</div>
719719
</div>
720720
</div>

0 commit comments

Comments
 (0)