From f2e189acc76cd5907435d90ed770be9aeafca118 Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Sun, 29 Dec 2024 05:03:25 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style:=20added=20spacing=20in=20the?=
 =?UTF-8?q?=20lists?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/download/MirrorList.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/download/MirrorList.tsx b/src/components/download/MirrorList.tsx
index f2d8229c..b721a898 100644
--- a/src/components/download/MirrorList.tsx
+++ b/src/components/download/MirrorList.tsx
@@ -10,33 +10,33 @@ interface MirrorListProps {
 
 export function MirrorList({ mirrors, onSelect }: MirrorListProps) {
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       {mirrors.map((mirror, index) => (
         <motion.div
           key={mirror.id}
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: index * 0.1 }}
-          className="bg-white/80 backdrop-blur-sm p-4 rounded-lg border border-gray-200 hover:border-cornflower-blue transition-colors"
+          className="bg-white/90 backdrop-blur-sm p-6 rounded-xl border border-gray-200 shadow-lg hover:shadow-2xl hover:border-cornflower-blue transition-all duration-300 ease-in-out"
         >
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <Globe className="h-5 w-5 text-cornflower-blue" />
+            <div className="flex items-center gap-4">
+              <Globe className="h-6 w-6 text-cornflower-blue" />
               <div>
-                <h3 className="font-medium text-gray-900">{mirror.name}</h3>
-                <p className="text-sm text-gray-500">{mirror.location}</p>
+                <h3 className="text-xl font-semibold text-gray-900">{mirror.name}</h3>
+                <p className="text-sm text-gray-600">{mirror.location}</p>
               </div>
             </div>
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-1 text-sm text-gray-600">
-                <Wifi className="h-4 w-4" />
+            <div className="flex items-center gap-6">
+              <div className="flex items-center gap-2 text-sm text-gray-600">
+                <Wifi className="h-5 w-5" />
                 {formatSpeed(mirror.speed)}
               </div>
               <button
                 onClick={() => onSelect(mirror)}
-                className="flex items-center gap-2 px-4 py-2 bg-cornflower-blue text-white rounded-lg hover:bg-blue-600 transition-colors"
+                className="flex items-center gap-3 px-5 py-2 bg-cornflower-blue text-white rounded-lg hover:bg-cornflower-blue/80 transition-all duration-300 ease-in-out transform hover:scale-105"
               >
-                <Download className="h-4 w-4" />
+                <Download className="h-5 w-5" />
                 Select
               </button>
             </div>
@@ -45,4 +45,4 @@ export function MirrorList({ mirrors, onSelect }: MirrorListProps) {
       ))}
     </div>
   );
-}
\ No newline at end of file
+}