diff --git a/src/components/AITutor/LoginToView.tsx b/src/components/AITutor/LoginToView.tsx new file mode 100644 index 000000000..9f2932b16 --- /dev/null +++ b/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> + ); +} diff --git a/src/components/GenerateCourse/AICourseLesson.tsx b/src/components/GenerateCourse/AICourseLesson.tsx index 28c053521..f6131baac 100644 --- a/src/components/GenerateCourse/AICourseLesson.tsx +++ b/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 diff --git a/src/components/GenerateCourse/AICourseLessonChat.tsx b/src/components/GenerateCourse/AICourseLessonChat.tsx index 442fb553a..66e1c674f 100644 --- a/src/components/GenerateCourse/AICourseLessonChat.tsx +++ b/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> )} diff --git a/src/components/GenerateCourse/AICourseRoadmapView.tsx b/src/components/GenerateCourse/AICourseRoadmapView.tsx index 05437a99a..26d0ace42 100644 --- a/src/components/GenerateCourse/AICourseRoadmapView.tsx +++ b/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">