From 6f9fe361aeb235ef37c516729d29dc18a6897120 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 9 Oct 2023 09:07:59 +0100
Subject: [PATCH] Change style of custom roadmap page

---
 src/components/CustomRoadmap/EmptyRoadmap.tsx          | 5 +++--
 src/components/CustomRoadmap/RoadmapHeader.tsx         | 7 +++----
 src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/CustomRoadmap/EmptyRoadmap.tsx b/src/components/CustomRoadmap/EmptyRoadmap.tsx
index e9b6587c6..40dccffd5 100644
--- a/src/components/CustomRoadmap/EmptyRoadmap.tsx
+++ b/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>
         )}
diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx
index 34554ba82..79933b5c6 100644
--- a/src/components/CustomRoadmap/RoadmapHeader.tsx
+++ b/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
diff --git a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx b/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
index 1a034b6da..1fcd87a41 100644
--- a/src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx
+++ b/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>