Change style of custom roadmap page

src/components/CustomRoadmap/EmptyRoadmap.tsx

@@ -1,4 +1,4 @@
-import { CircleSlash } from 'lucide-react';
+import {CircleSlash, PenSquare, Shapes} from 'lucide-react';
 
 type EmptyRoadmapProps = {
   roadmapId: string;
@@ -18,8 +18,9 @@ export function EmptyRoadmap(props: EmptyRoadmapProps) {
         {canManage && (
           <a
             href={editUrl}
-            className="mt-4 rounded-lg bg-black px-4 py-2 font-medium text-white hover:bg-gray-900"
+            className="mt-4 rounded-md bg-gray-500 px-4 py-2 font-medium text-white hover:bg-gray-600 flex items-center"
           >
+            <Shapes className="inline-block mr-2 h-4 w-4" />
             Edit Roadmap
           </a>
         )}

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -143,7 +143,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                   $currentRoadmap?._id
                 }`}
                 target="_blank"
-                className="inline-flex items-center justify-center rounded-md bg-gray-500 py-1.5 pl-2 pr-2 text-xs font-medium text-white hover:bg-gray-600 sm:px-3 sm:text-sm"
+                className="inline-flex items-center justify-center rounded-md bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:bg-gray-300  hover:border-gray-300 sm:px-3 sm:text-sm border border-gray-300"
               >
                 <Shapes className="mr-1.5 h-4 w-4 stroke-[2.5]" />
                 <span className="hidden sm:inline-block">Edit Roadmap</span>
@@ -151,11 +151,10 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               </a>
               <button
                 onClick={() => setIsSharing(true)}
-                className="inline-flex items-center justify-center rounded-md bg-gray-500 py-1.5 pl-2 pr-2 text-xs font-medium text-white hover:bg-gray-600 sm:px-3 sm:text-sm"
+                className="inline-flex items-center justify-center rounded-md bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:bg-gray-300  hover:border-gray-300 sm:px-3 sm:text-sm border border-gray-300"
               >
                 <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                <span className="hidden sm:inline-block">Share Roadmap</span>
-                <span className="sm:hidden">Share</span>
+                Sharing
               </button>
 
               <RoadmapActionButton

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -14,8 +14,8 @@ export function SkeletonRoadmapHeader() {
         <div className="flex justify-between gap-2 sm:gap-0">
           <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
           <div className="flex items-center gap-2">
-            <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[137.71px]" />
-            <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[150.34px]" />
+            <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139.71px]" />
+            <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[100.34px]" />
             <div className="h-7 w-[32px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[89.73px]" />
           </div>
         </div>