From a8b6270fe0cfd6314d253b9cc2f54173ebfc21f2 Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Wed, 25 Dec 2024 06:47:20 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20user=20interface=20and=20?=
 =?UTF-8?q?directory?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/download/SuggestedMirror.tsx | 25 +++++++++++----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/download/SuggestedMirror.tsx b/src/components/download/SuggestedMirror.tsx
index dee9d90e..838c51cf 100644
--- a/src/components/download/SuggestedMirror.tsx
+++ b/src/components/download/SuggestedMirror.tsx
@@ -1,6 +1,6 @@
 import { MapPin } from 'lucide-react';
-import { type Mirror } from '@/types/download';
-import { type UserLocation } from '@/lib/location';
+import { type Mirror } from '../../types/download';
+import { type UserLocation } from '../../lib/location';
 
 interface SuggestedMirrorProps {
   mirror: Mirror;
@@ -10,25 +10,26 @@ interface SuggestedMirrorProps {
 
 export function SuggestedMirror({ mirror, userLocation, onSelect }: SuggestedMirrorProps) {
   return (
-    <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border-2 border-cornflower-blue">
-      <div className="flex items-center gap-2 mb-4">
-        <MapPin className="h-5 w-5 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">
+      <div className="flex items-center gap-3 mb-5">
+        <MapPin className="h-6 w-6 text-cornflower-blue" />
         <div>
-          <h3 className="font-medium text-gray-900">Suggested Mirror</h3>
-          <p className="text-sm text-gray-500">Based on your location: {userLocation.city}, {userLocation.country}</p>
+          <h3 className="text-2xl 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-2">
-        <p className="font-medium text-gray-900">{mirror.name}</p>
+
+      <div className="space-y-3">
+        <p className="font-semibold text-gray-900 text-lg">{mirror.name}</p>
         <p className="text-sm text-gray-600">{mirror.location}</p>
+        
         <button
           onClick={() => onSelect(mirror)}
-          className="w-full mt-2 px-4 py-2 bg-cornflower-blue text-white rounded-lg hover:bg-blue-600 transition-colors"
+          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"
         >
           Use This Mirror
         </button>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}