Skip to content

refactor(ui): polish StakingStats and FeeStructure components #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
syed-ghufran-hassan wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(ui): polish StakingStats and FeeStructure components #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions frontend/src/components/staking/StakingStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ export function StakingStats() {
<div className="mt-8 bg-white rounded-2xl shadow-lg p-6">
<h2 className="text-xl font-bold text-gray-900 mb-4">Your Stake</h2>
<div className="grid grid-cols-2 gap-4">
<div className="bg-green-50 rounded-lg p-4">
<div className="text-sm text-green-600">Staked Amount</div>
<div className="text-2xl font-bold text-green-900">0 STX</div>
<div className="bg-green-50 rounded-lg p-4 flex flex-col">
<span className="text-sm text-green-600">Staked Amount</span>
<span className="text-2xl font-bold text-green-900 mt-1">0 STX</span>
</div>
<div className="bg-blue-50 rounded-lg p-4">
<div className="text-sm text-blue-600">Lock Status</div>
<div className="text-2xl font-bold text-blue-900">-</div>
<div className="bg-blue-50 rounded-lg p-4 flex flex-col">
<span className="text-sm text-blue-600">Lock Status</span>
<span className="text-2xl font-bold text-blue-900 mt-1">-</span>
</div>
</div>
</div>
Expand All @@ -19,17 +19,17 @@ export function StakingStats() {
export function FeeStructure() {
return (
<div className="mt-8 bg-green-50 rounded-2xl p-6">
<h3 className="text-lg font-bold text-green-900 mb-2">Fee Structure</h3>
<h3 className="text-lg font-bold text-green-900 mb-4">Fee Structure</h3>
<div className="grid md:grid-cols-2 gap-4 text-green-800">
<div className="bg-white rounded-lg p-4">
<div className="font-medium">Normal Withdrawal</div>
<div className="text-2xl font-bold">0.5%</div>
<div className="text-sm">After ~1 day lock period</div>
<div className="bg-white rounded-lg p-4 flex flex-col">
<span className="font-medium">Normal Withdrawal</span>
<span className="text-2xl font-bold mt-1">0.5%</span>
<span className="text-sm mt-1">After ~1 day lock period</span>
</div>
<div className="bg-white rounded-lg p-4">
<div className="font-medium">Early Withdrawal</div>
<div className="text-2xl font-bold">2.5%</div>
<div className="text-sm">Before lock period ends</div>
<div className="bg-white rounded-lg p-4 flex flex-col">
<span className="font-medium">Early Withdrawal</span>
<span className="text-2xl font-bold mt-1">2.5%</span>
<span className="text-sm mt-1">Before lock period ends</span>
</div>
</div>
</div>
Expand Down