From e2f670e4a9636b7efd7b49668a0fb26834625ea6 Mon Sep 17 00:00:00 2001
From: eshanized <m.eshanized@gmail.com>
Date: Tue, 7 Jan 2025 23:06:47 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style:=20minor=20changes=20in=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PackageCard.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/PackageCard.tsx b/src/components/PackageCard.tsx
index 681281a..7081003 100644
--- a/src/components/PackageCard.tsx
+++ b/src/components/PackageCard.tsx
@@ -11,43 +11,45 @@ export function PackageCard({ package: pkg }: PackageCardProps) {
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <div className="bg-nord-5 dark:bg-nord-1 rounded-xl shadow-md border border-nord-4 dark:border-nord-2 hover:shadow-lg transition-all overflow-hidden">
+    <div className="bg-gradient-to-b from-nord-5 to-nord-6 dark:from-nord-1 dark:to-nord-2 rounded-xl shadow-lg border border-nord-4 dark:border-nord-2 hover:shadow-xl transition-all duration-300 overflow-hidden">
       {/* Header Section */}
-      <div className="p-5 flex items-start gap-4">
+      <div className="p-6 flex items-start gap-4">
         {/* Icon Section */}
-        <div className="flex-shrink-0 p-3 bg-nord-7/10 dark:bg-nord-7/20 rounded-xl shadow-sm">
+        <div className="flex-shrink-0 p-4 bg-nord-8/10 dark:bg-nord-8/20 rounded-full shadow-md">
           <Box className="h-6 w-6 text-nord-7 dark:text-nord-6" />
         </div>
 
         {/* Package Information */}
         <div className="flex-1">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-nord-0 dark:text-nord-6">
+            <h3 className="text-lg font-bold text-nord-0 dark:text-nord-6 group-hover:text-nord-10 transition-colors">
               {pkg.name}
             </h3>
             <span className="text-sm font-medium text-nord-3 dark:text-nord-4">
               {pkg.version}
             </span>
           </div>
-          <p className="mt-2 text-sm text-nord-2 dark:text-nord-4">{pkg.description}</p>
+          <p className="mt-2 text-sm text-nord-2 dark:text-nord-4 line-clamp-2">
+            {pkg.description}
+          </p>
 
           {/* Footer Section */}
           <div className="mt-4 flex items-center justify-between">
-            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-nord-8/10 dark:bg-nord-8/20 text-nord-10 dark:text-nord-8">
+            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-nord-7 to-nord-8 dark:from-nord-8/30 dark:to-nord-9 text-nord-0 dark:text-nord-6 shadow">
               {pkg.repository}
             </span>
             <button
               onClick={() => setExpanded(!expanded)}
-              className="text-nord-9 dark:text-nord-8 hover:text-nord-10 dark:hover:text-nord-7 flex items-center gap-2 text-sm font-medium"
+              className="text-nord-9 dark:text-nord-8 hover:text-nord-10 dark:hover:text-nord-7 flex items-center gap-2 text-sm font-medium transition-all duration-300"
             >
               {expanded ? (
                 <>
-                  <ChevronUp className="h-4 w-4" />
+                  <ChevronUp className="h-5 w-5" />
                   Hide Installation
                 </>
               ) : (
                 <>
-                  <ChevronDown className="h-4 w-4" />
+                  <ChevronDown className="h-5 w-5" />
                   Show Installation
                 </>
               )}
@@ -58,7 +60,7 @@ export function PackageCard({ package: pkg }: PackageCardProps) {
 
       {/* Expanded Section */}
       {expanded && (
-        <div className="border-t border-nord-4 dark:border-nord-2 p-5 bg-nord-6 dark:bg-nord-0">
+        <div className="border-t border-nord-4 dark:border-nord-2 p-6 bg-nord-6 dark:bg-nord-0 transition-all duration-300">
           <InstallGuide packageName={pkg.name} />
         </div>
       )}