From 4ce256ae352bc85015729946bcdcf1fcb9f3ec46 Mon Sep 17 00:00:00 2001
From: eshanized <m.eshanized@gmail.com>
Date: Fri, 27 Dec 2024 21:15:02 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style(truncate):=20beautify=20the?=
 =?UTF-8?q?=20terminal=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/InstallGuide.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/InstallGuide.tsx b/src/components/InstallGuide.tsx
index 5ee2db0..2537374 100644
--- a/src/components/InstallGuide.tsx
+++ b/src/components/InstallGuide.tsx
@@ -17,21 +17,31 @@ export function InstallGuide({ packageName }: InstallGuideProps) {
   };
 
   return (
-    <div className="bg-gray-900 rounded-lg p-4 mt-4">
-      <div className="flex items-center gap-2 mb-2">
-        <Terminal className="h-4 w-4 text-gray-400" />
-        <span className="text-gray-400 text-sm">Installation Command</span>
+    <div className="bg-nord-0 dark:bg-nord-3 rounded-xl p-5 shadow-md transition-all">
+      {/* Title Section */}
+      <div className="flex items-center gap-3 mb-4">
+        <Terminal className="h-5 w-5 text-nord-9 dark:text-nord-7" />
+        <span className="text-nord-2 dark:text-nord-5 text-sm font-semibold uppercase tracking-wide">
+          Installation Command
+        </span>
       </div>
-      <div className="flex items-center justify-between bg-gray-800 rounded px-4 py-2">
-        <code className="text-blue-400 font-mono">{command}</code>
+
+      {/* Command Display Section */}
+      <div className="flex items-center justify-between bg-nord-4 dark:bg-nord-2 rounded-lg px-5 py-3">
+        <code className="text-nord-8 dark:text-nord-6 font-mono text-sm truncate">{command}</code>
         <button
           onClick={copyCommand}
-          className="text-gray-400 hover:text-white transition-colors"
-          title="Copy to clipboard"
+          className="flex items-center justify-center w-8 h-8 rounded-full bg-nord-3 hover:bg-nord-7 dark:bg-nord-5 dark:hover:bg-nord-8 transition-colors"
+          title={copied ? 'Copied!' : 'Copy to clipboard'}
+          aria-label={copied ? 'Copied' : 'Copy command'}
         >
-          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          {copied ? (
+            <Check className="h-4 w-4 text-nord-6 dark:text-nord-0" />
+          ) : (
+            <Copy className="h-4 w-4 text-nord-6 dark:text-nord-0" />
+          )}
         </button>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}