feat: common layout for the step content

Author: comatory

studio/src/components/layout/onboarding-layout.tsx

@@ -14,9 +14,9 @@ export const OnboardingLayout = ({ children, title }: { children?: React.ReactNo
         {title && <h1 className="text-lg font-semibold tracking-tight">{title}</h1>}
         <Stepper steps={ONBOARDING_STEPS} currentStep={(currentStep ?? 1) - 1} className="ml-auto" />
       </header>
-      <main className="w-full flex-1 px-6 pt-24">
+      <main className="w-full flex-1 px-6 pt-12">
         <Card className="mx-auto w-full max-w-2xl">
-          <CardContent className="p-6">{children}</CardContent>
+          <CardContent className="flex min-h-160 flex-col p-6">{children}</CardContent>
         </Card>
       </main>
     </div>

studio/src/components/onboarding/onboarding-container.tsx

@@ -0,0 +1,3 @@
+export const OnboardingContainer = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex flex-1 flex-col items-center gap-4 text-center">{children}</div>;
+};

studio/src/components/onboarding/onboarding-navigation.tsx

@@ -15,7 +15,7 @@ export const OnboardingNavigation = ({
   onSkip: () => void;
 }) => {
   return (
-    <div className="flex w-full justify-between">
+    <div className="mt-auto flex w-full justify-between pt-8">
       <div className="flex items-center gap-1">
         <Button asChild variant="outline" onClick={onSkip}>
           <Link href="/">Skip</Link>

studio/src/components/onboarding/step-1.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 import { useMutation } from '@connectrpc/connect-query';
 import { createOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
@@ -43,7 +44,7 @@ export const Step1 = () => {
   }, [setStep]);
 
   return (
-    <div className="flex flex-col items-center gap-4 text-center">
+    <OnboardingContainer>
       <h2 className="text-2xl font-semibold tracking-tight">Step 1</h2>
       <OnboardingNavigation
         onSkip={setSkipped}
@@ -60,6 +61,6 @@ export const Step1 = () => {
           isLoading: isPending,
         }}
       />
-    </div>
+    </OnboardingContainer>
   );
 };

studio/src/components/onboarding/step-2.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 
 export const Step2 = () => {
@@ -10,9 +11,9 @@ export const Step2 = () => {
   }, [setStep]);
 
   return (
-    <div className="flex flex-col items-center gap-4 text-center">
+    <OnboardingContainer>
       <h2 className="text-2xl font-semibold tracking-tight">Step 2</h2>
       <OnboardingNavigation onSkip={setSkipped} backHref="/onboarding/1" forward={{ href: '/onboarding/3' }} />
-    </div>
+    </OnboardingContainer>
   );
 };

studio/src/components/onboarding/step-3.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 
 export const Step3 = () => {
@@ -10,9 +11,9 @@ export const Step3 = () => {
   }, [setStep]);
 
   return (
-    <div className="flex flex-col items-center gap-4 text-center">
+    <OnboardingContainer>
       <h2 className="text-2xl font-semibold tracking-tight">Step 3</h2>
       <OnboardingNavigation onSkip={setSkipped} backHref="/onboarding/2" forward={{ href: '/onboarding/4' }} />
-    </div>
+    </OnboardingContainer>
   );
 };

studio/src/components/onboarding/step-4.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { OnboardingContainer } from './onboarding-container';
 import { OnboardingNavigation } from './onboarding-navigation';
 import { useMutation } from '@connectrpc/connect-query';
 import { finishOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
@@ -43,7 +44,7 @@ export const Step4 = () => {
   });
 
   return (
-    <div className="flex flex-col items-center gap-4 text-center">
+    <OnboardingContainer>
       <h2 className="text-2xl font-semibold tracking-tight">Step 4</h2>
       <OnboardingNavigation
         onSkip={setSkipped}
@@ -54,6 +55,6 @@ export const Step4 = () => {
         }}
         forwardLabel="Finish"
       />
-    </div>
+    </OnboardingContainer>
   );
 };

studio/tailwind.config.js

@@ -92,6 +92,9 @@ export default {
           950: 'hsl(var(--gray-950))',
         },
       },
+      spacing: {
+        160: '40rem',
+      },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',