feat: update UI

src/components/CustomRoadmap/FeaturedListing/FeaturedListingStatus.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { SubmitFeaturedListingWarning } from './SubmitFeaturedListingWarning';
 import type { GetRoadmapResponse } from '../CustomRoadmap';
+import { CheckIcon, EyeIcon, FlagIcon, SendIcon, XIcon } from 'lucide-react';
+import { cn } from '../../../lib/classname';
 
 type FeaturedListingStatusProps = {
   currentRoadmap: GetRoadmapResponse;
@@ -13,11 +15,31 @@ export function FeaturedListingStatus(props: FeaturedListingStatusProps) {
   const [showSubmitWarning, setShowSubmitWarning] = useState(false);
 
   const currentLabel = {
-    idle: 'Submit for Featured Listing',
-    submitted: 'Submitted',
-    approved: 'Approved',
-    rejected: 'Rejected',
-    rejected_with_reason: 'Rejected with Reason',
+    idle: {
+      icon: SendIcon,
+      label: 'Submit for Featured Listing',
+      className: 'bg-gray-100 text-gray-600 border-gray-200',
+    },
+    submitted: {
+      icon: EyeIcon,
+      label: 'Waiting for Approval',
+      className: 'bg-blue-100 text-blue-600 border-blue-200',
+    },
+    approved: {
+      icon: CheckIcon,
+      label: 'Approved',
+      className: 'bg-green-100 text-green-600 border-green-200',
+    },
+    rejected: {
+      icon: XIcon,
+      label: 'Rejected',
+      className: 'bg-red-100 text-red-600 border-red-200',
+    },
+    rejected_with_reason: {
+      icon: FlagIcon,
+      label: 'Changes Requested',
+      className: 'bg-yellow-100 text-yellow-600 border-yellow-200',
+    },
   }[featuredListStatus];
 
   return (
@@ -31,16 +53,19 @@ export function FeaturedListingStatus(props: FeaturedListingStatusProps) {
       )}
 
       <button
-        className="text-sm"
+        className={cn(
+          'flex items-center gap-1.5 rounded-full border px-2 text-sm',
+          currentLabel?.className,
+        )}
         onClick={() => {
-          if (!['idle', 'rejected_with_reason'].includes(featuredListStatus)) {
-            return;
-          }
-
           setShowSubmitWarning(true);
         }}
+        disabled={
+          !['idle', 'rejected_with_reason'].includes(featuredListStatus)
+        }
       >
-        {currentLabel}
+        <currentLabel.icon className="size-3 stroke-[2.5]" />
+        {currentLabel.label}
       </button>
     </>
   );