From 2c063716ce7ae24cd89ad7982d397ca6874476dd Mon Sep 17 00:00:00 2001
From: Syed Ghufran Hassan <syedghufranhassan@gmail.com>
Date: Wed, 25 Feb 2026 20:33:59 +0500
Subject: [PATCH] refactor(ui): polish StakingStats and FeeStructure components

- Added consistent spacing and vertical alignment
- Converted labels to semantic spans
- Improved heading and item separation for clarity
- Standardized flex layout for card content
---
 .../src/components/staking/StakingStats.tsx   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/staking/StakingStats.tsx b/frontend/src/components/staking/StakingStats.tsx
index 211f794..bcf0c8a 100644
--- a/frontend/src/components/staking/StakingStats.tsx
+++ b/frontend/src/components/staking/StakingStats.tsx
@@ -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>
@@ -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>