From 23a23d18c748c2eb4b2aa801780a14c6aa46f5c3 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 29 Jul 2025 22:15:52 +0100
Subject: [PATCH] Improve personalize

---
 .../PersonalizedRoadmap/PersonalizedRoadmap.tsx     | 13 ++++++++++++-
 src/components/RoadmapHeader.astro                  |  1 -
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx b/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
index 9c9345e4b..3e846b3ad 100644
--- a/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
+++ b/src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
@@ -16,6 +16,7 @@ import { useAuth } from '../../hooks/use-auth';
 import { roadmapJSONOptions } from '../../queries/roadmap';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
+import { cn } from '../../lib/classname';
 
 type PersonalizedRoadmapProps = {
   roadmapId: string;
@@ -206,7 +207,7 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
         />
       ) : (
         <button
-          className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-400 transition-colors hover:text-gray-700"
+          className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-500 transition-colors hover:text-black"
           onClick={() => {
             if (!isLoggedIn()) {
               showLoginPopup();
@@ -226,6 +227,16 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
             <>
               <PersonStandingIcon className="h-4 w-4 shrink-0" />
               <span>Personalize</span>
+              <span
+                className={cn(
+                  'ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors sm:flex',
+                  {
+                    'bg-yellow-200 text-black group-hover:bg-yellow-300': true,
+                  },
+                )}
+              >
+                New
+              </span>
             </>
           )}
         </button>
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 91c1969df..d74e7f9f5 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -161,7 +161,6 @@ const hasProjects = projectCount > 0;
                 text='AI Tutor'
                 mobileText='AI'
                 isActive={false}
-                badgeText='New'
               />
             )}
           </div>