Add login to view functionality

src/components/AITutor/LoginToView.tsx

@@ -0,0 +1,38 @@
+import { LockIcon } from 'lucide-react';
+
+import { showLoginPopup } from '../../lib/popup';
+import { cn } from '../../lib/classname';
+
+type LoginToViewProps = {
+  className?: string;
+};
+
+export function LoginToView(props: LoginToViewProps) {
+  const { className } = props;
+
+  return (
+    <div
+      className={cn(
+        'mt-8 min-h-[402px] rounded-xl border border-gray-200/50 bg-gradient-to-br from-gray-50 to-gray-100/50 p-12 backdrop-blur-sm',
+        'flex flex-col items-center justify-center',
+        className,
+      )}
+    >
+      <LockIcon className="size-8 stroke-[1.5] text-gray-600" />
+
+      <div className="mt-5 mb-4 flex flex-col items-center gap-0.5 text-center">
+        <h3 className="text-xl font-semibold text-gray-700">Login Required</h3>
+        <p className="text-sm text-balance leading-relaxed text-gray-500">
+          Please login to access the content and all the features of the AI Tutor.
+        </p>
+      </div>
+
+      <button
+        onClick={() => showLoginPopup()}
+        className="rounded-full bg-black px-6 py-2 text-sm font-medium text-white transition-all duration-300 hover:opacity-80 hover:shadow-md active:scale-[0.98] active:transform"
+      >
+        Login to Continue
+      </button>
+    </div>
+  );
+}

src/components/GenerateCourse/AICourseLesson.tsx

@@ -41,6 +41,7 @@ import {
   ResizablePanelGroup,
 } from './Resizeable';
 import { showLoginPopup } from '../../lib/popup';
+import { LoginToView } from '../AITutor/LoginToView';
 
 function getQuestionsFromResult(result: string) {
   const matchedQuestions = result.match(
@@ -433,22 +434,7 @@ export function AICourseLesson(props: AICourseLessonProps) {
                 </div>
               )}
 
-              {!isLoggedIn() && (
-                <div className="mt-8 flex min-h-[152px] flex-col items-center justify-center gap-3 rounded-lg border border-gray-200 p-8">
-                  <LockIcon className="size-10 stroke-2 text-gray-400/90" />
-                  <p className="text-sm text-gray-500">
-                    Please login to generate course content
-                  </p>
-                  <button
-                    onClick={() => {
-                      showLoginPopup();
-                    }}
-                    className="rounded-full bg-black px-4 py-1 text-sm text-white hover:bg-gray-800"
-                  >
-                    Login to Continue
-                  </button>
-                </div>
-              )}
+              {!isLoggedIn() && <LoginToView />}
 
               {!isLoading && !isGenerating && !error && (
                 <TestMyKnowledgeAction

src/components/GenerateCourse/AICourseLessonChat.tsx

@@ -360,7 +360,7 @@ export function AICourseLessonChat(props: AICourseLessonChatProps) {
                 }}
                 className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
               >
-                Login to Chat
+                Login / Register
               </button>
             </div>
           )}

src/components/GenerateCourse/AICourseRoadmapView.tsx

@@ -17,15 +17,15 @@ import {
 } from 'react';
 import type { AICourseViewMode } from './AICourseContent';
 import { replaceChildren } from '../../lib/dom';
-import { Frown, Loader2Icon, LockIcon } from 'lucide-react';
+import { Frown, Loader2Icon } from 'lucide-react';
 import { renderTopicProgress } from '../../lib/resource-progress';
 import { queryClient } from '../../stores/query-client';
 import { useQuery } from '@tanstack/react-query';
 import { billingDetailsOptions } from '../../queries/billing';
 import { AICourseOutlineHeader } from './AICourseOutlineHeader';
 import type { AiCourse } from '../../lib/ai';
-import { showLoginPopup } from '../../lib/popup';
 import { isLoggedIn } from '../../lib/jwt';
+import { LoginToView } from '../AITutor/LoginToView';
 
 export type AICourseRoadmapViewProps = {
   done: string[];
@@ -217,7 +217,7 @@ export function AICourseRoadmapView(props: AICourseRoadmapViewProps) {
   );
 
   return (
-    <div className="relative mx-auto min-h-[500px] rounded-xl border border-gray-200 bg-white shadow-xs lg:max-w-5xl">
+    <div className="relative overflow-hidden mx-auto min-h-[500px] rounded-xl border border-gray-200 bg-white shadow-xs lg:max-w-5xl">
       <AICourseOutlineHeader
         course={course}
         isLoading={isLoading}
@@ -236,22 +236,7 @@ export function AICourseRoadmapView(props: AICourseRoadmapViewProps) {
         </div>
       )}
 
-      {!isLoggedIn() && (
-        <div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-2">
-          <LockIcon className="size-10 stroke-2 text-gray-400/90" />
-          <p className="text-sm text-gray-500">
-            Please login to generate course content
-          </p>
-          <button
-            onClick={() => {
-              showLoginPopup();
-            }}
-            className="rounded-full bg-black px-4 py-1 text-sm text-white hover:bg-gray-800"
-          >
-            Login to Continue
-          </button>
-        </div>
-      )}
+      {!isLoggedIn() && <LoginToView className="-mt-1 -mb-2 rounded-none border-none" />}
 
       {error && !isGenerating && !isLoggedIn() && (
         <div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center">