From 161f21eb57fe8ac9d6f0149223c23bc35a37f81d Mon Sep 17 00:00:00 2001
From: bkellam <bshizzle1234@gmail.com>
Date: Thu, 27 Feb 2025 13:25:24 -0800
Subject: [PATCH] Make login and onboarding mobile friendly

---
 .../connectionCreationForms/secretCombobox.tsx     |  2 +-
 .../onboard/components/connectCodeHost.tsx         |  2 +-
 .../app/[domain]/onboard/components/inviteTeam.tsx |  2 +-
 packages/web/src/app/[domain]/onboard/page.tsx     |  4 ++--
 .../web/src/app/login/components/loginForm.tsx     |  8 ++++----
 packages/web/src/app/login/page.tsx                |  2 +-
 .../src/app/onboard/components/orgCreateForm.tsx   | 14 +++++++++-----
 packages/web/src/app/onboard/page.tsx              |  4 ++--
 8 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/web/src/app/[domain]/components/connectionCreationForms/secretCombobox.tsx b/packages/web/src/app/[domain]/components/connectionCreationForms/secretCombobox.tsx
index 2fa64010..0ba03e16 100644
--- a/packages/web/src/app/[domain]/components/connectionCreationForms/secretCombobox.tsx
+++ b/packages/web/src/app/[domain]/components/connectionCreationForms/secretCombobox.tsx
@@ -252,7 +252,7 @@ const ImportSecretDialog = ({ open, onOpenChange, onSecretCreated, codeHostType
             onOpenChange={onOpenChange}
         >
             <DialogContent
-                className="p-16 max-w-2xl max-h-[80vh] overflow-scroll"
+                className="p-16 max-w-[90vw] sm:max-w-2xl max-h-[80vh] overflow-scroll rounded-lg"
             >
                 <DialogHeader>
                     <DialogTitle className="text-2xl font-semibold">Import a secret</DialogTitle>
diff --git a/packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx b/packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx
index 0e20fe41..9a402fee 100644
--- a/packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx
+++ b/packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx
@@ -83,7 +83,7 @@ interface CodeHostSelectionProps {
 
 const CodeHostSelection = ({ onSelect }: CodeHostSelectionProps) => {
     return (
-        <div className="flex flex-row gap-4">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
             <CodeHostButton
                 name="GitHub"
                 logo={getCodeHostIcon("github")!}
diff --git a/packages/web/src/app/[domain]/onboard/components/inviteTeam.tsx b/packages/web/src/app/[domain]/onboard/components/inviteTeam.tsx
index 1d2d23dd..c4505e17 100644
--- a/packages/web/src/app/[domain]/onboard/components/inviteTeam.tsx
+++ b/packages/web/src/app/[domain]/onboard/components/inviteTeam.tsx
@@ -72,7 +72,7 @@ export const InviteTeam = ({ nextStep }: InviteTeamProps) => {
     }, [onComplete, form, captureEvent]);
 
     return (
-        <Card className="p-12 w-[500px]">
+        <Card className="p-12 w-full sm:max-w-[500px]">
             <Form {...form}>
                 <form onSubmit={form.handleSubmit(onSubmit)}>
                     <CardContent className="space-y-4">
diff --git a/packages/web/src/app/[domain]/onboard/page.tsx b/packages/web/src/app/[domain]/onboard/page.tsx
index df773b5b..fdeb5c68 100644
--- a/packages/web/src/app/[domain]/onboard/page.tsx
+++ b/packages/web/src/app/[domain]/onboard/page.tsx
@@ -41,8 +41,8 @@ export default async function Onboard({ params, searchParams }: OnboardProps) {
     const lastRequiredStep = OnboardingSteps.Checkout;
 
     return (
-        <div className="flex flex-col items-center p-12 min-h-screen bg-backgroundSecondary relative">
-            <LogoutEscapeHatch className="absolute top-0 right-0 p-12" />
+        <div className="flex flex-col items-center py-12 px-4 sm:px-12 min-h-screen bg-backgroundSecondary relative">
+            <LogoutEscapeHatch className="absolute top-0 right-0 p-4 sm:p-12" />
             {step === OnboardingSteps.ConnectCodeHost && (
                 <>
                     <OnboardHeader
diff --git a/packages/web/src/app/login/components/loginForm.tsx b/packages/web/src/app/login/components/loginForm.tsx
index d92b4c36..3af17085 100644
--- a/packages/web/src/app/login/components/loginForm.tsx
+++ b/packages/web/src/app/login/components/loginForm.tsx
@@ -45,14 +45,14 @@ export const LoginForm = ({ callbackUrl, error, enabledMethods }: LoginFormProps
     }, [error]);
 
     return (
-        <div className="flex flex-col items-center justify-center">
+        <div className="flex flex-col items-center justify-center w-full">
             <div className="mb-6 flex flex-col items-center">
                 <SourcebotLogo
-                    className="h-16"
+                    className="h-12 sm:h-16"
                 />
-                <h2 className="text-lg font-bold">Sign in to your account</h2>
+                <h2 className="text-lg font-bold text-center">Sign in to your account</h2>
             </div>
-            <Card className="flex flex-col items-center border p-12 rounded-lg gap-6 w-[500px] bg-background">
+            <Card className="flex flex-col items-center border p-6 sm:p-12 rounded-lg gap-4 sm:gap-6 w-full sm:w-[500px] max-w-[500px] bg-background">
                 {error && (
                     <div className="text-sm text-destructive text-center text-wrap border p-2 rounded-md border-destructive">
                         {errorMessage}
diff --git a/packages/web/src/app/login/page.tsx b/packages/web/src/app/login/page.tsx
index c113fa0a..8723ea1a 100644
--- a/packages/web/src/app/login/page.tsx
+++ b/packages/web/src/app/login/page.tsx
@@ -27,7 +27,7 @@ export default async function Login({ searchParams }: LoginProps) {
             });
 
     return (
-        <div className="flex flex-col items-center p-12 h-screen bg-backgroundSecondary">
+        <div className="flex flex-col items-center p-4 sm:p-12 min-h-screen w-full bg-backgroundSecondary">
             <LoginForm
                 callbackUrl={searchParams.callbackUrl}
                 error={searchParams.error}
diff --git a/packages/web/src/app/onboard/components/orgCreateForm.tsx b/packages/web/src/app/onboard/components/orgCreateForm.tsx
index 69807d76..b6bd4f8e 100644
--- a/packages/web/src/app/onboard/components/orgCreateForm.tsx
+++ b/packages/web/src/app/onboard/components/orgCreateForm.tsx
@@ -7,7 +7,7 @@ import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { isServiceError } from "@/lib/utils"
 import { Loader2 } from "lucide-react"
 import { useToast } from "@/components/hooks/use-toast"
@@ -20,6 +20,7 @@ export function OrgCreateForm() {
     const { toast } = useToast();
     const router = useRouter();
     const captureEvent = useCaptureEvent();
+    const [isLoading, setIsLoading] = useState(false);
 
     const onboardingFormSchema = z.object({
         name: z.string()
@@ -49,9 +50,9 @@ export function OrgCreateForm() {
             domain: "",
         }
     });
-    const { isSubmitting } = form.formState;
 
     const onSubmit = useCallback(async (data: z.infer<typeof onboardingFormSchema>) => {
+        setIsLoading(true);
         const response = await createOrg(data.name, data.domain);
         if (isServiceError(response)) {
             toast({
@@ -60,9 +61,12 @@ export function OrgCreateForm() {
             captureEvent('wa_onboard_org_create_fail', {
                 error: response.errorCode,
             })
+            setIsLoading(false);
         } else {
             router.push(`/${data.domain}/onboard`);
-            captureEvent('wa_onboard_org_create_success', {})
+            captureEvent('wa_onboard_org_create_success', {});
+            // @note: we don't want to set isLoading to false here since we want to show the loading
+            // spinner until the page is redirected.
         }
     }, [router, toast, captureEvent]);
 
@@ -113,8 +117,8 @@ export function OrgCreateForm() {
                             </FormItem>
                         )}
                     />
-                    <Button variant="default" className="w-full" type="submit" disabled={isSubmitting}>
-                        {isSubmitting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+                    <Button variant="default" className="w-full" type="submit" disabled={isLoading}>
+                        {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
                         Create
                     </Button>
                 </form>
diff --git a/packages/web/src/app/onboard/page.tsx b/packages/web/src/app/onboard/page.tsx
index 9bb08c81..3cc2ddfa 100644
--- a/packages/web/src/app/onboard/page.tsx
+++ b/packages/web/src/app/onboard/page.tsx
@@ -12,14 +12,14 @@ export default async function Onboarding() {
     }
 
     return (
-        <div className="flex flex-col items-center min-h-screen p-12 bg-backgroundSecondary relative">
+        <div className="flex flex-col items-center min-h-screen py-12 px-4 sm:px-12 bg-backgroundSecondary relative">
             <OnboardHeader
                 title="Setup your organization"
                 description="Create a organization for your team to search and share code across your repositories."
                 step={OnboardingSteps.CreateOrg}
             />
             <OrgCreateForm />
-            <LogoutEscapeHatch className="absolute top-0 right-0 p-12" />
+            <LogoutEscapeHatch className="absolute top-0 right-0 p-4 sm:p-12" />
         </div>
     );
 }