From d5681ad1a27b853436471c759f8d0de813756870 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Fri, 13 Dec 2024 11:30:14 -0800
Subject: [PATCH] Update image assets to sign up prompt

---
 .../chatInputArea/chatInputArea.tsx           |   1 +
 .../app/components/loginPrompt/loginPopup.tsx |   8 +-
 .../loginPrompt/loginPrompt.module.css        |   1 -
 .../components/loginPrompt/loginPrompt.tsx    | 119 +++++++++++-------
 4 files changed, 80 insertions(+), 49 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 173f6edc..cb55386a 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -732,6 +732,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                             <Button
                                 variant="ghost"
                                 className="float-right justify-center gap-1 flex items-center p-1.5 mr-2 h-fit"
+                                disabled={props.sendDisabled || !props.isLoggedIn}
                                 onClick={() => {
                                     setUseResearchMode(!useResearchMode);
                                     chatInputRef?.current?.focus();
diff --git a/src/interface/web/app/components/loginPrompt/loginPopup.tsx b/src/interface/web/app/components/loginPrompt/loginPopup.tsx
index f9c8ac44..69790d83 100644
--- a/src/interface/web/app/components/loginPrompt/loginPopup.tsx
+++ b/src/interface/web/app/components/loginPrompt/loginPopup.tsx
@@ -11,17 +11,17 @@ export interface LoginPopupProps {
 
 export default function LoginPopup(props: LoginPopupProps) {
     return (
-        <Card className="absolute inset-x-0 bottom-2 md:bottom-8 left-1/2 transform -translate-x-1/2 p-6 flex flex-col md:flex-row items-center justify-between bg-gradient-to-b from-slate-50 dark:from-slate-900 to-bg-secondary z-30 shadow-lg gap-8 w-full md:w-fit">
+        <Card className="absolute rounded-lg inset-x-0 bottom-2 md:bottom-8 left-1/2 transform -translate-x-1/2 p-6 flex flex-col md:flex-row items-center justify-between bg-gradient-to-b from-slate-50 dark:from-slate-900 to-bg-secondary z-30 shadow-lg gap-8 w-full md:w-fit">
             {!props.isMobileWidth && <KhojLogo className="w-12 h-auto" />}
             <div className="flex flex-col items-start justify-center">
-                <CardHeader className="p-0 text-xl">Welcome to Khoj!</CardHeader>
+                <CardHeader className="p-0 text-xl font-bold">Welcome to Khoj!</CardHeader>
                 <CardDescription>
-                    Get started with Khoj, your AI-powered research assistant, now.
+                    Get started with Khoj, your AI-powered knowledge assistant.
                 </CardDescription>
             </div>
             <Button
                 variant={"default"}
-                className="bg-gradient-to-br from-orange-200 to-orange-500"
+                className="p-8 text-lg"
                 onClick={() => props.setShowLoginPrompt(true)}
             >
                 Get started for free
diff --git a/src/interface/web/app/components/loginPrompt/loginPrompt.module.css b/src/interface/web/app/components/loginPrompt/loginPrompt.module.css
index 419274ca..9c674a9c 100644
--- a/src/interface/web/app/components/loginPrompt/loginPrompt.module.css
+++ b/src/interface/web/app/components/loginPrompt/loginPrompt.module.css
@@ -3,7 +3,6 @@
     -webkit-user-select: none;
     -ms-user-select: none;
     -webkit-appearance: none;
-    background-color: WHITE;
     background-image: none;
     /* border: 1px solid #747775; */
     -webkit-border-radius: 20px;
diff --git a/src/interface/web/app/components/loginPrompt/loginPrompt.tsx b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
index 2e639626..2c5f6467 100644
--- a/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
+++ b/src/interface/web/app/components/loginPrompt/loginPrompt.tsx
@@ -145,7 +145,7 @@ export default function LoginPrompt(props: LoginPromptProps) {
     if (props.isMobileWidth) {
         return (
             <Drawer open={true} onOpenChange={props.onOpenChange}>
-                <DrawerContent className={`flex flex-col gap-4 max-w-xl`}>
+                <DrawerContent className={`flex flex-col gap-4 w-full`}>
                     <div>
                         {useEmailSignIn && (
                             <EmailSignInContext
@@ -178,7 +178,7 @@ export default function LoginPrompt(props: LoginPromptProps) {
     return (
         <Dialog open={true} onOpenChange={props.onOpenChange}>
             <DialogContent
-                className={`flex flex-col gap-4 max-w-xl ${!useEmailSignIn ? "p-0 pb-4 m-0" : ""}`}
+                className={`flex flex-col gap-4 ${!useEmailSignIn ? "p-0 pb-4 m-0 max-w-xl" : "w-fit"}`}
             >
                 <div>
                     {useEmailSignIn && (
@@ -239,55 +239,60 @@ function EmailSignInContext({
                 <ArrowLeft className="h-6 w-6" />
             </Button>
             <div>
-                <div className="text-center font-bold text-lg">Sign in with Email</div>
+                <div className="text-center font-bold text-xl">Get started with Khoj</div>
             </div>
             <div className="text-center text-sm text-muted-foreground">
                 {checkEmail
                     ? recheckEmail
-                        ? "A new link has been sent. Click on the link in your email to sign-in"
-                        : "Click on the link in your email to sign-in"
+                        ? `A new link has been sent to ${email}. Click on the link in your email to sign-in`
+                        : `A sign-in link has been sent to ${email}. Click on the link in your email to sign-in`
                     : "You will receive a sign-in link on the email address you provide below"}
             </div>
-            <Input
-                placeholder="Email"
-                className="p-6"
-                disabled={checkEmail}
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-            />
-            <Button
-                variant="default"
-                className="p-6"
-                onClick={handleMagicLinkSignIn}
-                disabled={!email}
-            >
-                <PaperPlaneTilt className="h-6 w-6 mr-2" />
-                {checkEmail ? "Check your email" : "Send sign in link"}
-            </Button>
+            {!checkEmail && (
+                <>
+                    <Input
+                        placeholder="Email"
+                        className="p-6 w-[300px] mx-auto rounded-lg"
+                        disabled={checkEmail}
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <Button
+                        variant="default"
+                        className="p-6 w-[300px] mx-auto flex gap-2 items-center justify-center rounded-lg"
+                        onClick={handleMagicLinkSignIn}
+                        disabled={checkEmail}
+                    >
+                        <PaperPlaneTilt className="h-6 w-6 mr-2" />
+                        {checkEmail ? "Check your email" : "Send sign in link"}
+                    </Button>
+                </>
+            )}
+
             {checkEmail && (
-                <div className="flex items-center justify-center gap-4 text-muted-foreground">
+                <div className="flex items-center justify-center gap-4 text-muted-foreground flex-col md:flex-row">
                     <Button
                         variant="ghost"
-                        className="p-0"
+                        className="p-0 text-orange-500"
                         disabled={recheckEmail}
                         onClick={() => {
                             handleMagicLinkSignIn();
                         }}
                     >
-                        <ArrowsClockwise className="h-6 w-6 mr-2" />
+                        <ArrowsClockwise className="h-6 w-6 mr-2 text-gray-500" />
                         Resend email
                     </Button>
-                    <LineVertical className="h-6 w-6" />
+                    <LineVertical className="h-6 w-6 hidden md:block" />
                     <Button
                         variant="ghost"
-                        className="p-0"
+                        className="p-0 text-orange-500"
                         disabled={recheckEmail}
                         onClick={() => {
                             setEmail("");
                             setCheckEmail(false);
                         }}
                     >
-                        <PencilSimple className="h-6 w-6 mr-2" />
+                        <PencilSimple className="h-6 w-6 mr-2 text-gray-500" />
                         Use a different email
                     </Button>
                 </div>
@@ -311,12 +316,25 @@ function MainSignInContext({
     setUseEmailSignIn: (useEmailSignIn: boolean) => void;
     isMobileWidth: boolean;
 }) {
-    const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
+    const plugin = useRef(Autoplay({ delay: 3500, stopOnInteraction: true }));
+    const [showArrows, setShowArrows] = useState(false);
 
     const tips = [
-        { src: "/documents_tip.png", alt: "Documents tip" },
-        { src: "/personalize_tip.png", alt: "Personalize tip" },
-        { src: "/automate_tip.png", alt: "Automate tip" },
+        {
+            src: "https://assets.khoj.dev/sign_in_demos/research_mode.gif",
+            alt: "Research tip",
+            description: "Use research mode to find answers to your questions",
+        },
+        {
+            src: "https://assets.khoj.dev/sign_in_demos/custom_agents.gif",
+            alt: "Personalize tip",
+            description: "Personalize your Khoj experience by creating custom agents",
+        },
+        {
+            src: "https://assets.khoj.dev/sign_in_demos/docment_questions.gif",
+            alt: "Document tip",
+            description: "Understand and create documents to expand your knowledge base",
+        },
     ];
 
     return (
@@ -325,15 +343,24 @@ function MainSignInContext({
                 <Carousel
                     plugins={[plugin.current]}
                     className="w-full"
-                    onMouseEnter={plugin.current.stop}
-                    onMouseLeave={plugin.current.reset}
+                    onMouseEnter={() => {
+                        plugin.current.stop();
+                        setShowArrows(true);
+                    }}
+                    onMouseLeave={() => {
+                        plugin.current.play();
+                        setShowArrows(false);
+                    }}
                 >
                     <CarouselContent>
                         {tips.map((tip, index) => (
                             <CarouselItem key={index}>
-                                <div className="p-0">
+                                <div className="relative p-0">
                                     <Card>
-                                        <CardContent className="flex items-center justify-center rounded-b-none rounded-t-lg p-0">
+                                        <CardContent className="flex flex-col items-center justify-center rounded-b-none rounded-t-lg p-0">
+                                            <div className="flex items-center justify-center text-black text-center p-4">
+                                                {tip.description}
+                                            </div>
                                             <img
                                                 src={tip.src}
                                                 alt={tip.alt}
@@ -345,21 +372,25 @@ function MainSignInContext({
                             </CarouselItem>
                         ))}
                     </CarouselContent>
-                    <CarouselPrevious className="absolute left-0" />
-                    <CarouselNext className="absolute right-0" />
+                    {showArrows && (
+                        <>
+                            <CarouselPrevious className="absolute left-0" />
+                            <CarouselNext className="absolute right-0" />
+                        </>
+                    )}
                 </Carousel>
             )}
-            <div className="flex flex-col gap-4 text-center p-4">
-                <div className="text-center font-bold text-lg">
-                    Sign in to unlock your second brain
+            <div className="flex flex-col gap-4 text-center p-2">
+                <div className="text-center font-bold text-xl">
+                    Sign in for free to unlock your second brain
                 </div>
             </div>
-            <div className="flex flex-col gap-4 py-4 text-center align-middle items-center">
+            <div className="flex flex-col gap-8 pb-4 text-center align-middle items-center">
                 <GoogleSignIn onLoad={handleGoogleScriptLoad} />
                 {/* <div id="g_id_signin" /> */}
                 <Button
                     variant="outline"
-                    className="w-[300px] p-6 flex gap-2 items-center justify-center"
+                    className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg"
                     onClick={handleGoogleSignIn}
                     disabled={isLoading || !data?.google}
                 >
@@ -405,7 +436,7 @@ function MainSignInContext({
 
                 <Button
                     variant="outline"
-                    className="w-[300px] p-6 flex gap-2 items-center justify-center"
+                    className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg"
                     onClick={() => {
                         setUseEmailSignIn(true);
                     }}
@@ -414,7 +445,7 @@ function MainSignInContext({
                     Continue with Email
                 </Button>
             </div>
-            <div className="text-center text-muted-foreground text-xs">
+            <div className="text-center text-muted-foreground text-sm mb-[20px]">
                 By logging in, you agree to our{" "}
                 <Link href="https://khoj.dev/terms-of-service">Terms of Service</Link>. See{" "}
                 <Link href="https://khoj.dev/privacy-policy">Privacy Policy</Link>.