Add featuring functionality

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -81,7 +81,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
           <ShowcaseAlert currentRoadmap={$currentRoadmap} />
         )}
 
-        <div className="container relative mt-6 py-5 sm:py-12">
+        <div className="container relative py-5 sm:py-12">
           {!$canManageCurrentRoadmap && <CustomRoadmapAlert />}
 
           {creator?.name && (

src/components/CustomRoadmap/Showcase/ShowcaseAlert.tsx

@@ -22,35 +22,35 @@ export function ShowcaseAlert(props: ShowcaseAlertProps) {
     submitted: {
       icon: EyeIcon,
       label:
-        'We are reviewing your roadmap. It will be visible to everyone on the platform once approved.',
+        'We are currently reviewing your roadmap, please wait for our response.',
-      className: 'text-blue-600 border-blue-200',
+      className: 'bg-blue-100 text-blue-600 border-blue-200',
     },
     approved: {
       icon: SmileIcon,
-      label: 'Hooray! Your roadmap is now visible to everyone on the platform.',
+      label: 'Hooray! Your roadmap is now visible on the community page.',
-      className: 'text-green-600 border-green-200',
+      className: 'text-green-600 bg-green-100 border-green-300',
     },
     rejected: {
       icon: FrownIcon,
       label: 'Sorry, we are unable to feature your roadmap at this time.',
-      className: 'text-red-600 border-red-200',
+      className: 'text-red-600 bg-red-100 border-red-300',
     },
     rejected_with_reason: {
       icon: FlagIcon,
       label: (
         <>
-          Your roadmap needs changes before it can be featured.{' '}
+          Your roadmap could not be featured at this time{' '}
           <button
-            className="font-medium underline underline-offset-2 hover:no-underline"
+            className="font-medium underline underline-offset-2 hover:text-red-800"
             onClick={() => {
               setShowRejectedReason(true);
             }}
           >
-            Check Reason
+            click here to see why
           </button>
         </>
       ),
-      className: 'text-yellow-600 border-yellow-200',
+      className: 'text-red-800 bg-red-200 border-red-200',
     },
   };
   const showcaseStatusDetails = showcaseStatusMap[showcaseStatus];
@@ -72,11 +72,8 @@ export function ShowcaseAlert(props: ShowcaseAlertProps) {
 
       <div
         className={cn(
-          'absolute inset-x-0 top-0 z-10',
+          'z-10 border-b -mb-4',
-          showcaseStatus === 'submitted' && 'bg-blue-100',
+          showcaseStatusDetails.className,
-          showcaseStatus === 'approved' && 'bg-green-100',
-          showcaseStatus === 'rejected' && 'bg-red-100',
-          showcaseStatus === 'rejected_with_reason' && 'bg-yellow-100',
         )}
       >
         <div className="container relative flex items-center justify-center py-2 text-sm">

src/components/CustomRoadmap/Showcase/ShowcaseStatus.tsx

@@ -13,7 +13,7 @@ export function ShowcaseStatus(props: ShowcaseStatusProps) {
   const { showcaseStatus } = currentRoadmap;
   const [showSubmitWarning, setShowSubmitWarning] = useState(false);
 
-  if (!currentRoadmap || showcaseStatus !== undefined) {
+  if (!currentRoadmap || showcaseStatus) {
     return null;
   }
 
@@ -35,7 +35,7 @@ export function ShowcaseStatus(props: ShowcaseStatusProps) {
         disabled={!!showcaseStatus}
       >
         <SendIcon className="mr-0 h-4 w-4 stroke-[2.5] sm:mr-1.5" />
-        <span className="hidden sm:inline">Submit for Showcase</span>
+        <span className="hidden sm:inline">Apply to be Featured</span>
       </button>
     </>
   );

src/components/CustomRoadmap/Showcase/SubmitShowcaseWarning.tsx

@@ -48,16 +48,31 @@ export function SubmitShowcaseWarning(props: SubmitShowcaseWarningProps) {
       <div className="p-4">
         <h2 className="text-lg font-semibold">
           {showcaseStatus === 'rejected_with_reason'
-            ? 'Rejected Reason'
+            ? 'Rejected with Reason'
-            : 'Featured Listing'}
+            : 'Feature Your Roadmap'}
         </h2>
         <p className="mt-2 text-sm">
-          {showcaseStatus === 'rejected_with_reason' && showcaseRejectedReason}
+          {showcaseStatus === 'rejected_with_reason' && (
+            <>
+              <span
+                className={
+                  'block rounded-md bg-red-100 px-2 py-1.5 text-red-700'
+                }
+              >
+                {showcaseRejectedReason}
+              </span>
+              <span className="block mt-3">
+                Feel free to make changes to your roadmap and resubmit.
+              </span>
+            </>
+          )}
           {!showcaseStatus && (
             <>
-              Submitting your roadmap for a featured listing will make it
+              We will review your roadmap and if accepted, we will make it
-              visible to everyone on the platform.{' '}
+              public and show it on the community roadmap listing.{' '}
-              <span className="font-medium">Are you sure?</span>
+              <span className="mt-4 block font-medium">
+                Are you sure to submit?
+              </span>
             </>
           )}
         </p>

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -1,7 +1,7 @@
 export function SkeletonRoadmapHeader() {
   return (
     <div className="border-b">
-      <div className="container relative mt-6 py-5 sm:py-12">
+      <div className="container relative py-5 sm:py-12">
         <div className="-mb-0.5 flex items-center gap-1.5">
           <div className="h-5 w-5 animate-pulse rounded-full bg-gray-300" />
           <div className="h-5 w-5/12 animate-pulse rounded-md bg-gray-200" />

src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx

@@ -133,14 +133,6 @@ export function DiscoverRoadmaps(props: DiscoverRoadmapsProps) {
             <div className="relative">
               <div className="flex flex-col sm:flex-row items-center gap-1.5">
                 <span className="group relative normal-case">
-                  <Tooltip
-                    position={'bottom-left'}
-                    additionalClass={
-                      'translate-y-0.5 bg-yellow-300 font-normal !text-black'
-                    }
-                  >
-                    Ask us to feature it once you're done!
-                  </Tooltip>
                   <button
                     className="rounded-md bg-black px-3.5 py-1.5 text-sm font-medium text-white transition-colors hover:bg-black"
                     onClick={() => {
@@ -151,14 +143,6 @@ export function DiscoverRoadmaps(props: DiscoverRoadmapsProps) {
                   </button>
                 </span>
                 <span className="group relative normal-case">
-                  <Tooltip
-                    position={'bottom-left'}
-                    additionalClass={
-                      'translate-y-0.5 bg-yellow-300 font-normal !text-black'
-                    }
-                  >
-                    Up-to-date and maintained by the official team
-                  </Tooltip>
                   <a
                     href="/roadmaps"
                     className="inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-sm text-black sm:py-1.5 sm:text-sm"