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

---
 src/components/download/SuggestedMirror.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/download/SuggestedMirror.tsx b/src/components/download/SuggestedMirror.tsx
index 838c51cf..8c86b53d 100644
--- a/src/components/download/SuggestedMirror.tsx
+++ b/src/components/download/SuggestedMirror.tsx
@@ -1,4 +1,4 @@
-import { MapPin } from 'lucide-react';
+import { MapPin, Download } from 'lucide-react';
 import { type Mirror } from '../../types/download';
 import { type UserLocation } from '../../lib/location';
 
@@ -10,24 +10,25 @@ interface SuggestedMirrorProps {
 
 export function SuggestedMirror({ mirror, userLocation, onSelect }: SuggestedMirrorProps) {
   return (
-    <div className="bg-white/90 backdrop-blur-lg p-6 rounded-lg shadow-lg border-2 border-cornflower-blue hover:shadow-xl transition-shadow">
-      <div className="flex items-center gap-3 mb-5">
-        <MapPin className="h-6 w-6 text-cornflower-blue" />
+    <div className="bg-white/90 backdrop-blur-lg p-6 rounded-lg shadow-lg border-2 border-cornflower-blue hover:shadow-xl transition-shadow ease-in-out duration-300">
+      <div className="flex items-center gap-4 mb-5">
+        <MapPin className="h-7 w-7 text-cornflower-blue" />
         <div>
-          <h3 className="text-2xl font-semibold text-gray-900">Suggested Mirror</h3>
+          <h3 className="text-3xl font-semibold text-gray-900">Suggested Mirror</h3>
           <p className="text-sm text-gray-600">Based on your location: {userLocation.city}, {userLocation.country}</p>
         </div>
       </div>
 
-      <div className="space-y-3">
-        <p className="font-semibold text-gray-900 text-lg">{mirror.name}</p>
+      <div className="space-y-4">
+        <p className="font-semibold text-2xl text-gray-900">{mirror.name}</p>
         <p className="text-sm text-gray-600">{mirror.location}</p>
         
         <button
           onClick={() => onSelect(mirror)}
-          className="w-full mt-4 px-5 py-3 bg-cornflower-blue text-white rounded-lg hover:bg-blue-600 transition-colors ease-in-out"
+          className="w-full mt-4 px-6 py-3 bg-cornflower-blue text-white rounded-lg hover:bg-blue-600 active:scale-95 transition-all ease-in-out flex items-center justify-center gap-2"
         >
-          Use This Mirror
+          <Download className="h-5 w-5" />
+          <span>Download</span>
         </button>
       </div>
     </div>