sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-18 18:47:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 23

Apply more finished styling to login features, make the pop-up mobile friendly

Browse source
This commit is contained in:
sabaimran 2024-12-14 09:46:19 -08:00
parent 73c1fe6ae1
commit c25174e8d4
2 changed files with 42 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/interface/web/app/components/loginPrompt/loginPopup.tsx
View file

@ -3,6 +3,7 @@
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader } from "@/components/ui/card"; import { Card, CardDescription, CardHeader } from "@/components/ui/card";
import { KhojLogo } from "../logo/khojLogo"; import { KhojLogo } from "../logo/khojLogo";
import { Drawer, DrawerContent } from "@/components/ui/drawer";
export interface LoginPopupProps { export interface LoginPopupProps {
isMobileWidth?: boolean; isMobileWidth?: boolean;
@ -10,18 +11,36 @@ export interface LoginPopupProps {
} }
export default function LoginPopup(props: LoginPopupProps) { export default function LoginPopup(props: LoginPopupProps) {
if (props.isMobileWidth) {
return (
<Drawer open={true} onClose={() => props.setShowLoginPrompt(false)}>
<DrawerContent>
<PopUpContent {...props} />
</DrawerContent>
</Drawer>
);
}
return ( return (
<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"> <div className="fixed inset-x-0 bottom-8 z-30 flex items-center justify-center">
<PopUpContent {...props} />
</div>
);
}
function PopUpContent(props: LoginPopupProps) {
return (
<Card className="rounded-lg p-6 flex flex-col items-center justify-between gap-8 md:w-fit border-none md:flex-row md:z-30 md:shadow-lg">
{!props.isMobileWidth && <KhojLogo className="w-12 h-auto" />} {!props.isMobileWidth && <KhojLogo className="w-12 h-auto" />}
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center gap-8 md:gap-2">
<CardHeader className="p-0 text-xl font-bold">Welcome to Khoj!</CardHeader> <CardHeader className="p-0 text-xl font-bold">Welcome to Khoj!</CardHeader>
<CardDescription> <CardDescription>
Get started with Khoj, your AI-powered knowledge assistant. Sign in to get started with Khoj, your AI-powered knowledge assistant.
</CardDescription> </CardDescription>
</div> </div>
<Button <Button
variant={"default"} variant={"default"}
className="p-8 text-lg" className="p-6 text-lg"
onClick={() => props.setShowLoginPrompt(true)} onClick={() => props.setShowLoginPrompt(true)}
> >
Get started for free Get started for free

32
src/interface/web/app/components/loginPrompt/loginPrompt.tsx
View file

@ -145,7 +145,7 @@ export default function LoginPrompt(props: LoginPromptProps) {
if (props.isMobileWidth) { if (props.isMobileWidth) {
return ( return (
<Drawer open={true} onOpenChange={props.onOpenChange}> <Drawer open={true} onOpenChange={props.onOpenChange}>
<DrawerContent className={`flex flex-col gap-4 w-full`}> <DrawerContent className={`flex flex-col gap-4 w-full mb-4`}>
<div> <div>
{useEmailSignIn && ( {useEmailSignIn && (
<EmailSignInContext <EmailSignInContext
@ -231,7 +231,7 @@ function EmailSignInContext({
<div className="flex flex-col gap-4 p-4"> <div className="flex flex-col gap-4 p-4">
<Button <Button
variant="ghost" variant="ghost"
className="w-fit p-0 m-0 flex gap-2 items-center justify-center text-sm absolute top-5 left-5" className="w-fit p-1 m-0 flex gap-2 items-center justify-center text-sm absolute top-5 left-5 h-fit rounded-full border border-gray-200"
onClick={() => { onClick={() => {
setUseEmailSignIn(false); setUseEmailSignIn(false);
}} }}
@ -245,7 +245,7 @@ function EmailSignInContext({
{checkEmail {checkEmail
? recheckEmail ? recheckEmail
? `A new link has been sent to ${email}. 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` : `A one time sign in link has been sent to ${email}. Click on it to sign in on any browser.`
: "You will receive a sign-in link on the email address you provide below"} : "You will receive a sign-in link on the email address you provide below"}
</div> </div>
{!checkEmail && ( {!checkEmail && (
@ -255,6 +255,11 @@ function EmailSignInContext({
className="p-6 w-[300px] mx-auto rounded-lg" className="p-6 w-[300px] mx-auto rounded-lg"
disabled={checkEmail} disabled={checkEmail}
value={email} value={email}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleMagicLinkSignIn();
}
}}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
/> />
<Button <Button
@ -263,7 +268,7 @@ function EmailSignInContext({
onClick={handleMagicLinkSignIn} onClick={handleMagicLinkSignIn}
disabled={checkEmail} disabled={checkEmail}
> >
<PaperPlaneTilt className="h-6 w-6 mr-2" /> <PaperPlaneTilt className="h-6 w-6 mr-2 font-bold" />
{checkEmail ? "Check your email" : "Send sign in link"} {checkEmail ? "Check your email" : "Send sign in link"}
</Button> </Button>
</> </>
@ -282,7 +287,7 @@ function EmailSignInContext({
<ArrowsClockwise className="h-6 w-6 mr-2 text-gray-500" /> <ArrowsClockwise className="h-6 w-6 mr-2 text-gray-500" />
Resend email Resend email
</Button> </Button>
<LineVertical className="h-6 w-6 hidden md:block" /> <LineVertical className="h-6 w-6 hidden md:block opacity-50" />
<Button <Button
variant="ghost" variant="ghost"
className="p-0 text-orange-500" className="p-0 text-orange-500"
@ -316,24 +321,25 @@ function MainSignInContext({
setUseEmailSignIn: (useEmailSignIn: boolean) => void; setUseEmailSignIn: (useEmailSignIn: boolean) => void;
isMobileWidth: boolean; isMobileWidth: boolean;
}) { }) {
const plugin = useRef(Autoplay({ delay: 3500, stopOnInteraction: true })); const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: true }));
const [showArrows, setShowArrows] = useState(false); const [showArrows, setShowArrows] = useState(false);
const tips = [ const tips = [
{ {
src: "https://assets.khoj.dev/sign_in_demos/research_mode.gif", src: "https://assets.khoj.dev/sign_in_demos/research_mode.gif",
alt: "Research tip", alt: "Research tip",
description: "Use research mode to find answers to your questions", description: "Perform deeper research to get informed, accurate answers.",
}, },
{ {
src: "https://assets.khoj.dev/sign_in_demos/custom_agents.gif", src: "https://assets.khoj.dev/sign_in_demos/custom_agents.gif",
alt: "Personalize tip", alt: "Personalize tip",
description: "Personalize your Khoj experience by creating custom agents", description:
"Create AI agents and customize their personality to discuss homework, office work or a hobby.",
}, },
{ {
src: "https://assets.khoj.dev/sign_in_demos/docment_questions.gif", src: "https://assets.khoj.dev/sign_in_demos/docment_questions.gif",
alt: "Document tip", alt: "Document tip",
description: "Understand and create documents to expand your knowledge base", description: "Get verifiable answers from across the internet and your documents.",
}, },
]; ];
@ -363,7 +369,7 @@ function MainSignInContext({
alt={tip.alt} alt={tip.alt}
className="w-full h-auto rounded-b-none rounded-t-lg" className="w-full h-auto rounded-b-none rounded-t-lg"
/> />
<div className="absolute bottom-1 flex items-center justify-center text-white bg-black bg-opacity-50 text-center mx-auto rounded-lg p-4"> <div className="absolute bottom-0 flex items-center justify-center text-white bg-gradient-to-t from-black to-transparent text-center w-full p-4 py-6">
{tip.description} {tip.description}
</div> </div>
</CardContent> </CardContent>
@ -382,7 +388,7 @@ function MainSignInContext({
)} )}
<div className="flex flex-col gap-4 text-center p-2"> <div className="flex flex-col gap-4 text-center p-2">
<div className="text-center font-bold text-xl"> <div className="text-center font-bold text-xl">
Sign in for free to unlock your second brain Sign in to unlock your second brain
</div> </div>
</div> </div>
<div className="flex flex-col gap-8 pb-4 text-center align-middle items-center"> <div className="flex flex-col gap-8 pb-4 text-center align-middle items-center">
@ -390,7 +396,7 @@ function MainSignInContext({
{/* <div id="g_id_signin" /> */} {/* <div id="g_id_signin" /> */}
<Button <Button
variant="outline" variant="outline"
className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg" className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg font-bold"
onClick={handleGoogleSignIn} onClick={handleGoogleSignIn}
disabled={isLoading || !data?.google} disabled={isLoading || !data?.google}
> >
@ -436,7 +442,7 @@ function MainSignInContext({
<Button <Button
variant="outline" variant="outline"
className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg" className="w-[300px] p-8 flex gap-2 items-center justify-center rounded-lg font-bold"
onClick={() => { onClick={() => {
setUseEmailSignIn(true); setUseEmailSignIn(true);
}} }}