Button changes on the custom roadmap page

src/components/CustomRoadmap/CustomRoadmapRatings.tsx

@@ -35,6 +35,8 @@ export function CustomRoadmapRatings(props: CustomRoadmapRatingsProps) {
         />
       )}
       {average === 0 && (
+        <>
+          {!canManage && (
             <button
               className="flex items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium hover:border-black"
               onClick={() => {
@@ -46,6 +48,15 @@ export function CustomRoadmapRatings(props: CustomRoadmapRatingsProps) {
               <span className="block md:hidden">Rate</span>
             </button>
           )}
+          {canManage && (
+            <span className="flex items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium cursor-default opacity-50">
+              <Star className="size-4 fill-yellow-400 text-yellow-400" />
+              <span className="hidden md:block">No ratings yet</span>
+              <span className="block md:hidden">Rate</span>
+            </span>
+          )}
+        </>
+      )}
 
       {average > 0 && (
         <button

src/components/CustomRoadmap/RateRoadmapForm.tsx

@@ -46,6 +46,12 @@ export function RateRoadmapForm(props: RateRoadmapFormProps) {
   const [userFeedback, setUserFeedback] = useState('');
 
   const loadMyRoadmapRating = async () => {
+    // user can't have the rating for their own roadmap
+    if (canManage) {
+      setIsLoading(false);
+      return;
+    }
+
     const { response, error } = await httpGet<GetMyRoadmapRatingResponse>(
       `${import.meta.env.PUBLIC_API_URL}/v1-get-my-roadmap-rating/${roadmapSlug}`,
     );
@@ -127,7 +133,7 @@ export function RateRoadmapForm(props: RateRoadmapFormProps) {
                     )}
                   </div>
 
-                  <span className="w-14 shrink-0 text-sm text-gray-500">
+                  <span className="w-[35px] shrink-0 text-xs text-gray-500">
                     {percentage}%
                   </span>
                 </li>

src/components/CustomRoadmap/RoadmapActionButton.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
-import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
+import { Lock, MoreVertical, PenSquare, Shapes, Trash2 } from 'lucide-react';
 
 type RoadmapActionButtonProps = {
   onDelete?: () => void;
@@ -32,34 +32,34 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       {isOpen && (
         <div
           ref={menuRef}
-          className="align-right absolute right-0 top-full mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md z-[9999]"
+          className="align-right absolute right-0 top-full z-[9999] mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
         >
           <ul>
-            {onUpdateSharing && (
+            {onCustomize && (
               <li>
                 <button
                   onClick={() => {
                     setIsOpen(false);
-                    onUpdateSharing();
+                    onCustomize();
                   }}
                   className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
-                  <Lock size={14} className="mr-2" />
-                  Sharing
+                  <PenSquare size={14} className="mr-2" />
+                  Edit
                 </button>
               </li>
             )}
-            {onCustomize && (
+            {onUpdateSharing && (
               <li>
                 <button
                   onClick={() => {
                     setIsOpen(false);
-                    onCustomize();
+                    onUpdateSharing();
                   }}
                   className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
-                  <Shapes size={14} className="mr-2" />
-                  Customize
+                  <Lock size={14} className="mr-2" />
+                  Sharing
                 </button>
               </li>
             )}

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -115,7 +115,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               aria-label="Back to All Roadmaps"
             >
               ←
-              <span className="hidden sm:inline">&nbsp;Community Roadmaps</span>
+              <span className="hidden sm:inline">&nbsp;Discover More</span>
             </a>
 
             <ShareRoadmapButton
@@ -150,20 +150,13 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                   />
                 )}
 
-                <a
-                  href={`${
-                    import.meta.env.PUBLIC_EDITOR_APP_URL
-                  }/${$currentRoadmap?._id}`}
-                  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"
-                >
-                  <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>
-
                 <RoadmapActionButton
                   onUpdateSharing={() => setIsSharing(true)}
+                  onCustomize={() => {
+                    window.location.href = `${
+                      import.meta.env.PUBLIC_EDITOR_APP_URL
+                    }/${$currentRoadmap?._id}`;
+                  }}
                   onDelete={() => {
                     const confirmation = window.confirm(
                       'Are you sure you want to delete this roadmap?',

src/components/Rating/Rating.tsx

@@ -44,9 +44,9 @@ export function Rating(props: RatingProps) {
           />
         );
       })}
-      {props.total && (
+      {(props.total || 0) > 0 && (
         <span className="ml-1.5 text-xs text-gray-400">
-          ({Intl.NumberFormat('en-US').format(props.total)})
+          ({Intl.NumberFormat('en-US').format(props.total!)})
         </span>
       )}
     </div>