From 97d57daa41a2e30ba2ce22c71b414ae7e5bacf98 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 11 Feb 2026 19:08:39 +0100
Subject: [PATCH] A improved personal item style

---
 src/components/layout/Navbar.tsx |  31 ++++------
 src/components/logos.tsx         | 101 +++++++++++++++++++++++++++++++
 2 files changed, 114 insertions(+), 18 deletions(-)
 create mode 100644 src/components/logos.tsx

diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index b61d6e1..06e55cf 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -7,6 +7,7 @@ import {
   UserIcon,
   WalletIcon,
 } from "lucide-react";
+import { SolanaLogo } from "../logos";
 
 const links = [
   {
@@ -20,6 +21,9 @@ const links = [
 ];
 
 export default function Navbar() {
+  const personalItemClass =
+    "rounded-full bg-card p-2! aspect-square group hover:bg-accent/20 hover:text-accent";
+
   return (
     <nav className="border-b-2 border-b-border py-4 px-5 flex gap-5 items-center">
       <a href="/markets" className="flex gap-1 items-center">
@@ -41,37 +45,28 @@ export default function Navbar() {
         </ul>
       </div>
       <div className="ml-auto flex gap-4">
-        <Button
-          variant="outline"
-          className="rounded-full bg-card p-2! aspect-square"
-        >
+        <Button variant="outline" className={personalItemClass}>
           <StarIcon />
         </Button>
-        <Button
-          variant="outline"
-          className="rounded-full bg-card p-2! aspect-square"
-        >
+        <Button variant="outline" className={personalItemClass}>
           <BellIcon />
         </Button>
       </div>
       <div className="flex gap-4">
-        <Button
-          variant="outline"
-          className="rounded-full bg-card p-2! aspect-square group"
-        >
+        <Button variant="outline" className={personalItemClass}>
           <div className="flex gap-1 items-center h-full">
             <WalletIcon />
-            3.13
-            <span className="w-[1.5px] h-full ml-1 mr-1 bg-border group-hover:bg-accent-foreground animate-colors duration-300" />
+            <div className="flex items-center">
+              <SolanaLogo className="p-0.5" />
+              3.13
+            </div>
+            <span className="w-[1.5px] h-full ml-1 mr-1 bg-border group-hover:bg-accent/60 animate-colors duration-300" />
             $248
             <ChevronDownIcon />
           </div>
         </Button>
 
-        <Button
-          variant="outline"
-          className="rounded-full bg-card p-2! aspect-square"
-        >
+        <Button variant="outline" className={personalItemClass}>
           <UserIcon />
         </Button>
       </div>
diff --git a/src/components/logos.tsx b/src/components/logos.tsx
new file mode 100644
index 0000000..634a31c
--- /dev/null
+++ b/src/components/logos.tsx
@@ -0,0 +1,101 @@
+import { SVGProps } from "react";
+
+export const SolanaLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 397.7 311.7"
+    style={{
+      background: "new 0 0 397.7 311.7",
+    }}
+    xmlSpace="preserve"
+    {...props}
+  >
+    <style type="text/css">
+      {
+        "\n\t.st0{fill:url(#SVGID_1_);}\n\t.st1{fill:url(#SVGID_2_);}\n\t.st2{fill:url(#SVGID_3_);}\n"
+      }
+    </style>
+    <linearGradient
+      id="SVGID_1_"
+      gradientUnits="userSpaceOnUse"
+      x1={360.8791}
+      y1={351.4553}
+      x2={141.213}
+      y2={-69.2936}
+      gradientTransform="matrix(1 0 0 -1 0 314)"
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#00FFA3",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#DC1FFF",
+        }}
+      />
+    </linearGradient>
+    <path
+      className="st0"
+      d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"
+    />
+    <linearGradient
+      id="SVGID_2_"
+      gradientUnits="userSpaceOnUse"
+      x1={264.8291}
+      y1={401.6014}
+      x2={45.163}
+      y2={-19.1475}
+      gradientTransform="matrix(1 0 0 -1 0 314)"
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#00FFA3",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#DC1FFF",
+        }}
+      />
+    </linearGradient>
+    <path
+      className="st1"
+      d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"
+    />
+    <linearGradient
+      id="SVGID_3_"
+      gradientUnits="userSpaceOnUse"
+      x1={312.5484}
+      y1={376.688}
+      x2={92.8822}
+      y2={-44.061}
+      gradientTransform="matrix(1 0 0 -1 0 314)"
+    >
+      <stop
+        offset={0}
+        style={{
+          stopColor: "#00FFA3",
+        }}
+      />
+      <stop
+        offset={1}
+        style={{
+          stopColor: "#DC1FFF",
+        }}
+      />
+    </linearGradient>
+    <path
+      className="st2"
+      d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4 c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"
+    />
+  </svg>
+);