Change button position

src/components/CreateVersion/CreateVersion.tsx

@@ -3,6 +3,7 @@ import { httpPost } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
 import { isLoggedIn } from '../../lib/jwt';
 import { Layers2, Loader2 } from 'lucide-react';
+import { showLoginPopup } from '../../lib/popup';
 
 type CreateVersionProps = {
   roadmapId: string;
@@ -15,9 +16,15 @@ export function CreateVersion(props: CreateVersionProps) {
   const [isLoading, setIsLoading] = useState(false);
 
   async function createVersion() {
-    if (isLoading || !roadmapId || !isLoggedIn()) {
+    if (isLoading || !roadmapId) {
       return;
     }
+
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
     setIsLoading(true);
     const { response, error } = await httpPost<{ roadmapId: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-create-version/${roadmapId}`,
@@ -34,21 +41,22 @@ export function CreateVersion(props: CreateVersionProps) {
       import.meta.env.PUBLIC_EDITOR_APP_URL
     }/${response?.roadmapId}`;
 
+    setIsLoading(false);
     window.open(roadmapEditorUrl, '_blank');
   }
 
   return (
     <button
       disabled={isLoading}
-      className="inline-flex h-full items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:bg-gray-400 sm:text-sm"
+      className="inline-flex h-full items-center justify-center rounded-md border bg-gray-50 px-3 py-1.5 text-xs font-medium text-black hover:bg-gray-200 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:hover:bg-gray-200 max-sm:hidden sm:text-sm"
       onClick={createVersion}
     >
       {isLoading ? (
-        <Loader2 className="mr-2 h-3 w-3 animate-spin stroke-[2.5] text-white max-md:mr-0" />
+        <Loader2 className="mr-2 h-3 w-3 animate-spin stroke-[2.5]" />
       ) : (
-        <Layers2 className="mr-2 h-3 w-3 stroke-[2.5] text-white max-md:mr-0" />
+        <Layers2 className="mr-2 h-3 w-3 stroke-[2.5]" />
       )}
-      <span className="max-md:hidden">Create Version</span>
+      Create your own Version
     </button>
   );
 }

src/components/RoadmapHeader.astro

@@ -61,6 +61,14 @@ const hasTnsBanner = !!tnsBannerLink;
     ]}
   >
     <div class='mb-3 mt-0 sm:mb-4'>
+      {
+        isForkable && (
+          <div class='mb-2'>
+            <CreateVersion client:load roadmapId={roadmapId} />
+          </div>
+        )
+      }
+
       <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
         {title}
         <span class='relative top-0 sm:-top-1'>
@@ -138,10 +146,6 @@ const hasTnsBanner = !!tnsBannerLink;
             </a>
           )
         }
-
-        <div data-auth-required class='inline hidden'>
-          <CreateVersion client:load roadmapId={roadmapId} />
-        </div>
       </div>
 
       <div class='flex items-center gap-1 sm:gap-2'>