Update UI for the discover page

src/components/CustomRoadmap/CustomRoadmapAlert.tsx

@@ -1,4 +1,11 @@
-import { BadgeCheck, MessageCircleHeart, PencilRuler } from 'lucide-react';
+import {
+  BadgeCheck,
+  Heart,
+  HeartHandshake,
+  MessageCircleHeart,
+  PencilRuler,
+  Search,
+} from 'lucide-react';
 import { showLoginPopup } from '../../lib/popup.ts';
 import { isLoggedIn } from '../../lib/jwt.ts';
 import { useState } from 'react';
@@ -17,14 +24,11 @@ export function CustomRoadmapAlert() {
         />
       )}
       <div className="relative mb-5 mt-0 rounded-md border border-yellow-500 bg-yellow-100 p-2 sm:-mt-6 sm:mb-7 sm:p-2.5">
-        <h2 className="text-base font-semibold text-yellow-800 sm:text-lg">
-          Community Roadmap
-        </h2>
-        <p className="mt-2 mb-2.5 sm:mb-1.5 sm:mt-1 text-sm text-yellow-800 sm:text-base">
-          This is a custom roadmap made by a community member and is not verified by{' '}
-          <span className="font-semibold">roadmap.sh</span>
+        <p className="mb-2.5 mt-2 text-sm text-yellow-800 sm:mb-1.5 sm:mt-1 sm:text-base">
+          This is a custom roadmap made by a community member and is not
+          verified by <span className="font-semibold">roadmap.sh</span>
         </p>
-        <div className="flex items-start sm:items-center flex-col sm:flex-row gap-2">
+        <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
           <a
             href="/roadmaps"
             className="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-700 underline-offset-2 hover:underline"
@@ -32,20 +36,16 @@ export function CustomRoadmapAlert() {
             <BadgeCheck className="h-4 w-4 stroke-[2.5]" />
             Visit Official Roadmaps
           </a>
-          <span className="font-black text-yellow-700 hidden sm:block">&middot;</span>
-          <button
+          <span className="hidden font-black text-yellow-700 sm:block">
+            &middot;
+          </span>
+          <a
+            href="/discover"
             className="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-700 underline-offset-2 hover:underline"
-            onClick={() => {
-              if (!isLoggedIn()) {
-                showLoginPopup();
-              } else {
-                setIsCreatingRoadmap(true);
-              }
-            }}
           >
-            <PencilRuler className="h-4 w-4 stroke-[2.5]" />
-            Create Your Own Roadmap
-          </button>
+            <HeartHandshake className="h-4 w-4 stroke-[2.5]" />
+            More Community Roadmaps
+          </a>
         </div>
 
         <MessageCircleHeart className="absolute bottom-2 right-2 hidden h-12 w-12 text-yellow-500 opacity-50 sm:block" />

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -8,7 +8,7 @@ import { httpDelete, httpPut } from '../../lib/http';
 import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
 import { RoadmapActionButton } from './RoadmapActionButton';
-import { Lock, Shapes } from 'lucide-react';
+import {Lock, Pencil, PenSquare, Shapes} from 'lucide-react';
 import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 import { CustomRoadmapAlert } from './CustomRoadmapAlert.tsx';
 import { CustomRoadmapRatings } from './CustomRoadmapRatings.tsx';
@@ -156,19 +156,13 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                   target="_blank"
                   className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
                 >
-                  <Shapes className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                  <span className="hidden lg:inline-block">Edit Roadmap</span>
+                  <PenSquare className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  <span className="hidden lg:inline-block">Edit</span>
                   <span className="lg:hidden">Edit</span>
                 </a>
-                <button
-                  onClick={() => setIsSharing(true)}
-                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
-                >
-                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                  Sharing
-                </button>
 
                 <RoadmapActionButton
+                  onUpdateSharing={() => setIsSharing(true)}
                   onDelete={() => {
                     const confirmation = window.confirm(
                       'Are you sure you want to delete this roadmap?',

src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx

@@ -45,7 +45,7 @@ export function DiscoverRoadmapSorting(props: DiscoverRoadmapSortingProps) {
       ref={dropdownRef}
     >
       <button
-        className="py-15 flex w-full items-center justify-between gap-2 rounded-md border px-2 text-sm"
+        className="py-15 flex w-full items-center justify-between gap-2 rounded-md border px-2 text-sm bg-white"
         onClick={() => setIsOpen(!isOpen)}
       >
         <span>{selectedValue?.label}</span>

src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx

@@ -11,6 +11,7 @@ import { httpGet } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
 import { DiscoverRoadmapSorting } from './DiscoverRoadmapSorting';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
+import { Tooltip } from '../Tooltip.tsx';
 
 type DiscoverRoadmapsProps = {};
 
@@ -120,23 +121,53 @@ export function DiscoverRoadmaps(props: DiscoverRoadmapsProps) {
         />
       )}
 
-      <div className="border-b bg-white py-7">
+      <div className="border-b bg-white pt-10 pb-7">
         <div className="container text-left">
           <div className="flex flex-col items-start bg-white">
-            <h1 className="mb-1 text-2xl font-bold sm:text-3xl">
+            <h1 className="mb-1 text-2xl font-bold sm:text-4xl">
               Community Roadmaps
             </h1>
-            <p className="text-base text-gray-500">
-              Browse the roadmaps created by the community or{' '}
+            <p className="mb-3 text-base text-gray-500">
+              An unvetted, selected list of community-curated roadmaps
+            </p>
+            <div className="relative">
+              <div className="flex 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={() => {
                       setIsCreatingRoadmap(true);
                     }}
-                className="rounded text-blue-600 underline"
                   >
-                create your own roadmap
+                    Create your own roadmap
                   </button>
-            </p>
+                </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="block rounded-md border border-gray-300 bg-gray-50 px-3.5 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
+                  >
+                    Visit our official roadmaps
+                  </a>
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/components/DiscoverRoadmaps/EmptyDiscoverRoadmaps.tsx

@@ -20,8 +20,8 @@ export function EmptyDiscoverRoadmaps() {
     <>
       {creatingRoadmapModal}
 
-      <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl border px-5 py-3 sm:px-0 sm:py-20">
-        <Wand2 className="mb-4 h-8 w-8 opacity-10 sm:h-14 sm:w-14" />
+      <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl border px-5 py-3 sm:px-0 sm:py-20 bg-white">
+        <Map className="mb-4 h-8 w-8 opacity-10 sm:h-14 sm:w-14" />
         <h2 className="mb-1 text-lg font-semibold sm:text-xl">
           No Roadmaps Found
         </h2>
@@ -41,7 +41,7 @@ export function EmptyDiscoverRoadmaps() {
           </button>
           <a
             href="/roadmaps"
-            className="flex w-full items-center gap-1.5 rounded-md bg-yellow-400 px-3 py-1.5 text-xs text-black hover:bg-yellow-500 sm:w-auto sm:text-sm"
+            className="flex w-full items-center gap-1.5 rounded-md bg-gray-300 px-3 py-1.5 text-xs text-black hover:bg-gray-400 sm:w-auto sm:text-sm"
           >
             <Map className="h-4 w-4" />
             Visit Official Roadmaps

src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx

@@ -4,7 +4,7 @@ export function LoadingRoadmaps() {
       {new Array(21).fill(0).map((_, index) => (
         <li
           key={index}
-          className="h-[175px] animate-pulse rounded-md border bg-gray-100"
+          className="h-[175px] animate-pulse rounded-md border bg-gray-200"
         />
       ))}
     </ul>

src/components/ShareOptions/ShareFriendList.tsx

@@ -206,11 +206,11 @@ export function ShareFriendList(props: ShareFriendListProps) {
       {friends.length === 0 && !isLoading && (
         <div className="flex h-full flex-grow flex-col items-center justify-center rounded-md border bg-gray-50 text-center">
           <Users2 className="mb-3 h-10 w-10 text-gray-300" />
-          <p className="font-semibold text-gray-500">
+          <p className="font-medium text-gray-500">
             You do not have any friends yet. <br />{' '}
             <a
               target="_blank"
-              className="underline underline-offset-2"
+              className="underline underline-offset-2 text-sm"
               href={`/account/friends`}
             >
               Invite your friends to share roadmaps with.

src/components/ShareOptions/ShareOptionsModal.tsx

@@ -403,7 +403,7 @@ function DiscoveryCheckbox(props: DiscoveryCheckboxProps) {
         onChange={(e) => setIsDiscoverable(e.target.checked)}
       />
       <span className="text-sm text-gray-500 group-hover:text-gray-700">
-        Include on discovery page (when launched)
+        Include on discovery page
       </span>
     </label>
   );

src/components/Tooltip.tsx

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 
 type TooltipProps = {
   children: ReactNode;
+  additionalClass?: string;
   position?:
     | 'right-center'
     | 'right-top'
@@ -19,7 +20,7 @@ type TooltipProps = {
 };
 
 export function Tooltip(props: TooltipProps) {
-  const { children, position = 'right-center' } = props;
+  const { children, additionalClass = '', position = 'right-center' } = props;
 
   let positionClass = '';
   if (position === 'right-center') {
@@ -52,7 +53,8 @@ export function Tooltip(props: TooltipProps) {
     <span
       className={clsx(
         'pointer-events-none absolute z-10 block w-max transform rounded-md bg-gray-900 px-2 py-1 text-sm font-medium text-white opacity-0 shadow-sm duration-100 group-hover:opacity-100',
-        positionClass
+        positionClass,
+        additionalClass,
       )}
     >
       {children}