Creates separate onboarding variant for the Main container

Author: samejr

apps/webapp/app/components/layout/AppLayout.tsx

@@ -60,13 +60,26 @@ export function PageBody({
 export function MainCenteredContainer({
   children,
   className,
+  variant = "default",
 }: {
   children: React.ReactNode;
   className?: string;
+  variant?: "default" | "onboarding";
 }) {
   return (
-    <div className="flex h-full w-full flex-col overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 lg:p-0">
-      <div className={cn("m-auto max-w-xs p-1 lg:mx-auto lg:mb-0 lg:mt-[22vh]", className)}>
+    <div
+      className={cn(
+        "h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+        variant === "onboarding" && "flex flex-col p-4 lg:p-0"
+      )}
+    >
+      <div
+        className={cn(
+          "mx-auto max-w-xs p-1",
+          variant === "onboarding" ? "m-auto lg:mx-auto lg:mb-0 lg:mt-[22vh]" : "mt-6 md:mt-[22vh]",
+          className
+        )}
+      >
         {children}
       </div>
     </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

@@ -361,7 +361,7 @@ export default function Page() {
   return (
     <AppContainer className="bg-charcoal-900">
       <BackgroundWrapper>
-        <MainCenteredContainer className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+        <MainCenteredContainer variant="onboarding" className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
           <div>
             <FormTitle
               LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}

apps/webapp/app/routes/_app.orgs.new/route.tsx

@@ -143,7 +143,7 @@ export default function NewOrganizationPage() {
   return (
     <AppContainer className="bg-charcoal-900">
       <BackgroundWrapper>
-        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+        <MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
           <FormTitle
             LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
             title="Create an Organization"

apps/webapp/app/routes/confirm-basic-details.tsx

@@ -241,7 +241,7 @@ export default function Page() {
   return (
     <AppContainer className="bg-charcoal-900">
       <BackgroundWrapper>
-        <MainCenteredContainer className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+        <MainCenteredContainer variant="onboarding" className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
           <Form method="post" {...form.props}>
             <FormTitle
               title="Welcome to Trigger.dev"

apps/webapp/app/routes/invites.tsx

@@ -101,7 +101,7 @@ export default function Page() {
   return (
     <AppContainer className="bg-charcoal-900">
       <BackgroundWrapper>
-        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+        <MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
           <div>
             <FormTitle
               LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}

apps/webapp/app/routes/vercel.onboarding.tsx

@@ -293,7 +293,7 @@ export default function VercelOnboardingPage() {
     return (
       <AppContainer className="bg-charcoal-900">
         <BackgroundWrapper>
-          <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+          <MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
             <FormTitle title="Installation Expired" description={data.error} />
             <Button
               variant="primary/medium"
@@ -325,7 +325,7 @@ export default function VercelOnboardingPage() {
     return (
       <AppContainer className="bg-charcoal-900">
         <BackgroundWrapper>
-          <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+          <MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
             <FormTitle
               LeadingIcon={<BuildingOfficeIcon className="size-7 text-indigo-500" />}
               title="Select Organization"
@@ -401,7 +401,7 @@ export default function VercelOnboardingPage() {
   return (
     <AppContainer className="bg-charcoal-900">
       <BackgroundWrapper>
-        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+        <MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
           <FormTitle
             LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}
             title="Select Project"