From 1a7bbdde181a8be4431d93756f78b9b9a9cb2bda Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 4 Mar 2024 16:08:37 +0000
Subject: [PATCH] Update UI for roadmap

---
 src/components/GenerateRoadmap/GenerateRoadmap.tsx |  2 +-
 src/components/GenerateRoadmap/RoadmapSearch.tsx   | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/GenerateRoadmap/GenerateRoadmap.tsx b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
index 1b16d960f..b81736770 100644
--- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx
+++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
@@ -258,7 +258,7 @@ export function GenerateRoadmap() {
               <span className="text-gray-800">
                 <span
                   className={cn(
-                    'inline-block w-[55px] rounded-md border px-0.5 text-center text-sm tabular-nums text-gray-800',
+                    'inline-block w-[65px] rounded-md border px-0.5 text-center text-sm tabular-nums text-gray-800',
                     {
                       'animate-pulse border-zinc-300 bg-zinc-300 text-zinc-300':
                         !roadmapLimit,
diff --git a/src/components/GenerateRoadmap/RoadmapSearch.tsx b/src/components/GenerateRoadmap/RoadmapSearch.tsx
index d000934a1..1eef76c39 100644
--- a/src/components/GenerateRoadmap/RoadmapSearch.tsx
+++ b/src/components/GenerateRoadmap/RoadmapSearch.tsx
@@ -1,4 +1,4 @@
-import { Wand } from 'lucide-react';
+import { Ban, Wand } from 'lucide-react';
 import type { FormEvent } from 'react';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
@@ -53,7 +53,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
         />
         <button
           className={cn(
-            'ml-2 flex min-w-[131px] flex-shrink-0 items-center gap-2 rounded-md bg-black px-4 py-2 text-white',
+            'ml-2 flex min-w-[143px] flex-shrink-0 items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white',
             {
               'cursor-not-allowed opacity-50':
                 !limit || !roadmapTopic || limitUsed >= limit,
@@ -73,7 +73,12 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
             </>
           )}
 
-          {limit > 0 && !canGenerateMore && <span>Limit reached</span>}
+          {limit > 0 && !canGenerateMore && (
+            <span className="flex items-center text-sm">
+              <Ban size={15} className="mr-2" />
+              Limit reached
+            </span>
+          )}
         </button>
       </form>
       <div className="mb-36">