UI changes and fix

src/components/BestPracticeHeader.astro

@@ -27,7 +27,7 @@ const isBestPracticeReady = !isUpcoming;
         <MarkFavorite
           resourceId={bestPracticeId}
           resourceType="best-practice"
-          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[1] [&>svg]:stroke-gray-500 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 ml-2"
+          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1 relative focus:outline-0"
           client:load
         />
       </h1>

src/components/FeaturedItems/MarkFavorite.tsx

@@ -19,8 +19,12 @@ export function MarkFavorite({
   favorite,
   className,
 }: MarkFavoriteType) {
+  const localStorageKey = `${resourceType}-${resourceId}-favorite`;
+
   const [isLoading, setIsLoading] = useState(false);
-  const [isFavorite, setIsFavorite] = useState(favorite ?? false);
+  const [isFavorite, setIsFavorite] = useState(
+    favorite ?? localStorage.getItem(localStorageKey) === '1'
+  );
 
   async function toggleFavoriteHandler(e: Event) {
     e.preventDefault();
@@ -76,10 +80,7 @@ export function MarkFavorite({
       } = (e as CustomEvent).detail;
       if (id === resourceId && type === resourceType) {
         setIsFavorite(fav);
-        localStorage.setItem(
-          `${resourceType}-${resourceId}-favorite`,
-          fav ? '1' : '0'
-        );
+        localStorage.setItem(localStorageKey, fav ? '1' : '0');
       }
     };
 

src/components/RoadmapHeader.astro

@@ -46,7 +46,7 @@ const isRoadmapReady = !isUpcoming;
         <MarkFavorite
           resourceId={roadmapId}
           resourceType="roadmap"
-          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[1] [&>svg]:stroke-gray-500 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 ml-2"
+          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1 relative focus:outline-0"
           client:load
         />
       </h1>