Skip to content

Commit 3d5edc6

Browse files
sekubasekuba
committed
mobile things
1 parent 0b586c1 commit 3d5edc6

4 files changed

Lines changed: 19 additions & 19 deletions

File tree

‎src/components/Dashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export function Dashboard({ configInput, network, onResetRpc, onToggleNetwork, o
134134
</div>
135135
</div>)}
136136
<div className="mb-8">
137-
<h2 className="text-3xl font-black text-whisper-white mb-6 flex items-center gap-4">
137+
<h2 className="mb-6 flex flex-wrap items-center gap-3 text-2xl font-black text-whisper-white sm:gap-4 sm:text-3xl">
138138
<span className="inline-flex items-center justify-center w-12 h-12 bg-vermillion border-5 border-brand-black text-brand-black font-black shadow-brutal">
139139
{activeSlashings.length}
140140
</span>

‎src/components/RoundCard.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -74,26 +74,26 @@ export function RoundCard({ slashing, sequencerOccurrences }: RoundCardProps) {
7474
{slashing.slashActions?.map((action, idx) => (<span key={`${action.validator}-${idx}`}> Sequencer {action.validator}</span>))}
7575
</div>
7676

77-
<div className="p-6 cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
78-
<div className="flex items-center justify-between">
79-
<div className="flex items-center gap-4">
80-
<div className="bg-brand-black border-3 border-whisper-white px-4 py-2">
77+
<div className="cursor-pointer p-4 sm:p-6" onClick={() => setIsExpanded(!isExpanded)}>
78+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
79+
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
80+
<div className="bg-brand-black border-3 border-whisper-white px-3 py-2 sm:px-4">
8181
<div className="text-xs text-chartreuse font-black uppercase tracking-wider">Round</div>
8282
<div className="text-3xl font-black text-whisper-white">{slashing.round.toString()}</div>
8383
</div>
8484

85-
<div className={`px-4 py-2 border-3 text-sm font-black uppercase tracking-wider ${getStatusColor(displayStatus)}`}>
85+
<div className={`border-3 px-3 py-2 text-sm font-black uppercase tracking-wider sm:px-4 ${getStatusColor(displayStatus)}`}>
8686
{getStatusText(displayStatus)}
8787
</div>
8888
</div>
8989

90-
<div className="flex items-center gap-4">
91-
{slashing.affectedValidatorCount !== undefined && (<div className="bg-brand-black border-3 border-vermillion px-4 py-3">
90+
<div className="flex flex-wrap items-center gap-3 sm:justify-end sm:gap-4">
91+
{slashing.affectedValidatorCount !== undefined && (<div className="bg-brand-black border-3 border-vermillion px-3 py-2 sm:px-4 sm:py-3">
9292
<div className="text-xs text-vermillion font-black uppercase tracking-wider">Sequencers</div>
9393
<div className="text-2xl font-black text-whisper-white">{slashing.affectedValidatorCount}</div>
9494
</div>)}
9595

96-
{slashing.totalSlashAmount !== undefined && (<div className="bg-brand-black border-3 border-vermillion px-4 py-3">
96+
{slashing.totalSlashAmount !== undefined && (<div className="bg-brand-black border-3 border-vermillion px-3 py-2 sm:px-4 sm:py-3">
9797
<div className="text-xs text-vermillion font-black uppercase tracking-wider">Slash Total</div>
9898
<div className="text-2xl font-black text-vermillion">
9999
{parseInt(formatEther(slashing.totalSlashAmount), 10)} AZTEC
@@ -184,7 +184,7 @@ export function RoundCard({ slashing, sequencerOccurrences }: RoundCardProps) {
184184
</div>
185185

186186

187-
{isExpanded && (<div className="border-t-5 border-brand-black p-6 space-y-4 bg-brand-black/30">
187+
{isExpanded && (<div className="border-t-5 border-brand-black p-4 sm:p-6 space-y-4 bg-brand-black/30">
188188

189189
{slashing.payloadAddress && (<div>
190190
<div className="text-xs text-whisper-white font-black uppercase tracking-wider mb-2">Payload Address</div>
@@ -215,7 +215,7 @@ export function RoundCard({ slashing, sequencerOccurrences }: RoundCardProps) {
215215
{slashing.slashActions.map((action, idx) => {
216216
const occurrences = sequencerOccurrences?.get(action.validator.toLowerCase()) ?? 1;
217217
const showOccurrences = occurrences > 1;
218-
return (<div key={idx} className="flex items-center justify-between bg-brand-black px-4 py-3 border-3 border-whisper-white gap-3">
218+
return (<div key={idx} className="flex flex-col items-stretch justify-between gap-3 border-3 border-whisper-white bg-brand-black px-4 py-3 sm:flex-row sm:items-center">
219219
<div className="flex items-center gap-3 flex-1 min-w-0">
220220
<SequencerAddressLink
221221
address={action.validator}
@@ -242,7 +242,7 @@ export function RoundCard({ slashing, sequencerOccurrences }: RoundCardProps) {
242242
</div>)}
243243

244244

245-
<div className="grid grid-cols-2 gap-4 text-sm pt-4 border-t-3 border-brand-black">
245+
<div className="grid grid-cols-1 gap-4 border-t-3 border-brand-black pt-4 text-sm sm:grid-cols-2">
246246
<div className="bg-aubergine border-3 border-orchid px-4 py-3">
247247
<div className="text-orchid font-black uppercase text-xs mb-1">Ballots Cast</div>
248248
<div className="text-whisper-white font-black text-xl">

‎src/components/SlashingTimeline.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export function SlashingTimeline({ onOpenHelp }: SlashingTimelineProps) {
7474

7575
return (<div className="mb-8">
7676
<div className="mb-6">
77-
<h2 className="text-3xl font-black text-whisper-white mb-4 flex items-center gap-4 uppercase">
77+
<h2 className="mb-4 flex items-center gap-3 text-2xl font-black uppercase text-whisper-white sm:gap-4 sm:text-3xl">
7878
<div className="bg-aqua border-3 border-brand-black p-2">
7979
<svg className="w-8 h-8 text-brand-black stroke-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
8080
<path strokeLinecap="square" strokeLinejoin="miter" strokeWidth={3} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
@@ -109,9 +109,9 @@ export function SlashingTimeline({ onOpenHelp }: SlashingTimelineProps) {
109109

110110
{/* Current Voting Round Section */}
111111
<div className="brutal-border-pulse bg-lapis border-5 border-aqua p-5 shadow-brutal-aqua [--pulse-color:var(--color-aqua)]">
112-
<div className="flex items-start justify-between gap-4 mb-4">
112+
<div className="mb-4 flex flex-col items-stretch gap-4 sm:flex-row sm:items-start sm:justify-between">
113113
<div className="flex-1">
114-
<div className="flex items-center gap-3 mb-3">
114+
<div className="mb-3 flex flex-wrap items-center gap-3">
115115
<h3 className="font-black text-lg uppercase tracking-tight text-aqua">
116116
Current Voting Round {currentRound.toString()}
117117
</h3>
@@ -124,7 +124,7 @@ export function SlashingTimeline({ onOpenHelp }: SlashingTimelineProps) {
124124
<br></br>Each slot proposer submits one ballot that votes separately on every potential offender
125125
</p>
126126
</div>
127-
<div className="text-right shrink-0">
127+
<div className="shrink-0 sm:text-right">
128128
<div className="bg-brand-black border-3 border-aqua px-4 py-2">
129129
<div className="opacity-75 mb-1 text-xs font-black uppercase text-aqua">Ends In</div>
130130
<div className="text-2xl font-black text-whisper-white">{formatTimeRemaining(secondsRemaining, { approximate: true })}</div>

‎src/components/StatsPanel.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,15 +91,15 @@ export function StatsPanel() {
9191
</svg>),
9292
},
9393
];
94-
return (<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
95-
{statCards.map((stat) => (<div key={stat.label} className={`${stat.bgColor} ${stat.borderColor} border-5 ${stat.shadowColor} p-5 transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none`}>
94+
return (<div className="mb-8 grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-4">
95+
{statCards.map((stat) => (<div key={stat.label} className={`${stat.bgColor} ${stat.borderColor} border-5 ${stat.shadowColor} p-3 transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none sm:p-5`}>
9696
<div className="flex items-center justify-between mb-3">
9797
<span className={`text-xs font-black uppercase tracking-wider ${stat.textColor}`}>
9898
{stat.label}
9999
</span>
100100
<span className={stat.textColor}>{stat.icon}</span>
101101
</div>
102-
<div className={`text-3xl font-black ${stat.textColor} tracking-tight`}>
102+
<div className={`text-2xl font-black sm:text-3xl ${stat.textColor} tracking-tight`}>
103103
{typeof stat.value === 'number' ? formatNumber(stat.value) : stat.value}
104104
</div>
105105
</div>))}

0 commit comments

Comments
 (0)