feat: adjust onboarding ui

Author: Innei

be/apps/dashboard/agents.md

@@ -175,15 +175,17 @@ This dashboard follows a **linear design language** with clean lines and subtle
 
 Core Design Principles:
 
-- **No rounded corners**: All elements use sharp, clean edges
-- **Linear gradient borders**: Use subtle gradient borders for visual separation
+- **Hierarchical rounding**: 
+  - Main page containers: Sharp edges with linear gradient borders
+  - Interactive elements (inputs, buttons, cards): `rounded-lg` for approachable feel
+- **Linear gradient borders**: Use subtle gradient borders for main container separation
 - **Minimal backgrounds**: Use solid colors (`bg-background`, `bg-background-tertiary`)
 - **Clean typography**: Clear hierarchy with appropriate font sizes
 - **Subtle interactions**: Focus rings and hover states with minimal animation
 
 Form Elements (Inputs, Textareas, Selects):
 
-- **Shape**: **NO** `rounded-xl` - use straight edges
+- **Shape**: Use `rounded-lg` for subtle rounded corners (NOT sharp edges, NOT heavy rounding like `rounded-xl`)
 - **Background**: Use `bg-background` for standard inputs
 - **Border**: Use `border border-fill-tertiary` for default state
 - **Padding**: Standard padding is `px-3 py-2` for inputs
@@ -215,7 +217,7 @@ Example (text input):
     id="field-id"
     type="text"
     className={cx(
-      'w-full border border-fill-tertiary bg-background',
+      'w-full rounded-lg border border-fill-tertiary bg-background',
       'px-3 py-2 text-sm text-text placeholder:text-text-tertiary/70',
       'focus:outline-none focus:ring-2 focus:ring-accent/40',
       'transition-all duration-200',
@@ -232,7 +234,7 @@ Example (textarea):
 ```tsx
 <textarea
   className={cx(
-    'w-full border border-fill-tertiary bg-background',
+    'w-full rounded-lg border border-fill-tertiary bg-background',
     'px-3 py-2 text-sm text-text placeholder:text-text-tertiary/70',
     'focus:outline-none focus:ring-2 focus:ring-accent/40',
     'transition-all duration-200',
@@ -244,7 +246,7 @@ Example (textarea):
 
 Buttons:
 
-- **Shape**: **NO** `rounded-xl` - use straight edges
+- **Shape**: Use `rounded-lg` for subtle rounded corners (consistent with form elements)
 - **Padding**: Standard is `px-6 py-2.5` for medium buttons
 - **Text Size**: Use `text-sm` with `font-medium`
 - **Primary Button**:
@@ -266,7 +268,7 @@ Example (primary button):
 <button
   type="submit"
   className={cx(
-    'px-6 py-2.5',
+    'rounded-lg px-6 py-2.5',
     'bg-accent text-white font-medium text-sm',
     'transition-all duration-200',
     'hover:bg-accent/90',
@@ -284,7 +286,7 @@ Example (ghost button):
 <button
   type="button"
   className={cx(
-    'px-6 py-2.5',
+    'rounded-lg px-6 py-2.5',
     'text-sm font-medium text-text-secondary',
     'hover:text-text hover:bg-fill/50',
     'transition-all duration-200',
@@ -296,8 +298,12 @@ Example (ghost button):
 
 Cards and Containers:
 
-- **Shape**: **NO rounded corners** - use sharp edges
-- **Borders**: Use linear gradient borders for main containers
+- **Shape**: 
+  - **Main page containers** (e.g., OnboardingWizard): **NO rounded corners** - use sharp edges with linear gradient borders
+  - **Inner content cards** (e.g., form sections, review cards): Use `rounded-lg` for visual hierarchy
+- **Borders**: 
+  - Main containers: Use linear gradient borders
+  - Inner cards: Use `border border-fill-tertiary`
 - **Dividers**: Use horizontal gradient dividers for section separation
   - Example: `<div className="h-[0.5px] bg-linear-to-r from-transparent via-text/20 to-transparent" />`
 - **Backgrounds**: Use solid colors (`bg-background`, `bg-background-tertiary`)
@@ -346,7 +352,9 @@ Typography:
 
 Do NOT:
 
-- ❌ Use rounded corners (`rounded-xl`, `rounded-2xl`, `rounded-full`, etc.) - this design language uses **sharp edges**
+- ❌ Use heavy rounding (`rounded-xl`, `rounded-2xl`, `rounded-full`) - use `rounded-lg` for form elements and cards
+- ❌ Use sharp edges (no rounding) on form elements - always use `rounded-lg` for inputs, buttons, and cards
+- ❌ Mix rounding styles - main page containers are sharp, all interactive elements use `rounded-lg`
 - ❌ Use heavy borders or box shadows - use subtle linear gradients instead
 - ❌ Use animated bottom borders or underlines on inputs (outdated pattern)
 - ❌ Use large padding (`py-3`, `py-4`) on standard inputs - stick to `py-2` or `py-2.5`
@@ -452,9 +460,9 @@ Change checklist (agents):
 - Pastel color tokens used
 - Atoms created via createAtomHooks; selectors stable
 - No edits to auto-generated files
-- **UI Design**: Form inputs use **NO rounded corners**, `bg-background`, `border-fill-tertiary`, and `focus:ring-2 focus:ring-accent/40`
-- **UI Design**: Buttons use **NO rounded corners**, `px-6 py-2.5`, `text-sm font-medium`
-- **UI Design**: Main containers use linear gradient borders (see login.tsx example)
+- **UI Design**: Form inputs use `rounded-lg`, `bg-background`, `border-fill-tertiary`, and `focus:ring-2 focus:ring-accent/40`
+- **UI Design**: Buttons use `rounded-lg`, `px-6 py-2.5`, `text-sm font-medium`
+- **UI Design**: Inner content cards use `rounded-lg` for visual hierarchy
+- **UI Design**: Main page containers use linear gradient borders with sharp edges
 - **UI Design**: All interactive elements have proper focus states and transitions
-- **UI Design**: NO `rounded-xl`, `rounded-2xl`, or any border-radius classes
 - Code passes pnpm lint, pnpm format, and pnpm build

be/apps/dashboard/src/modules/onboarding/components/LinearBorderBox.tsx

@@ -0,0 +1,98 @@
+import { clsxm } from '@afilmory/utils'
+import type { FC, ReactNode } from 'react'
+
+type LinearBorderContainerProps = {
+  children: ReactNode
+  className?: string
+  /**
+   * If true, uses the advanced flex layout that allows borders to span the full height/width.
+   * This is needed when you have complex nested layouts (like grid) inside.
+   *
+   * If false, uses simple relative positioning (works for basic cases).
+   */
+  useAdvancedLayout?: boolean
+}
+
+/**
+ * A container with linear gradient borders on all sides.
+ *
+ * **Two Layout Modes:**
+ *
+ * 1. **Simple mode** (`useAdvancedLayout={false}`, default):
+ *    - Uses `position: relative` with absolutely positioned borders
+ *    - Works for simple content without complex nested layouts
+ *    - Borders may not span full height if content has complex flex/grid
+ *
+ * 2. **Advanced mode** (`useAdvancedLayout={true}`):
+ *    - Uses flex layout with separate containers for right/bottom borders
+ *    - Borders always span the full container dimensions
+ *    - Required for complex nested layouts (like OnboardingWizard grid)
+ *
+ * @example
+ * ```tsx
+ * // Simple case (login form)
+ * <LinearBorderContainer className="p-12">
+ *   <form>...</form>
+ * </LinearBorderContainer>
+ *
+ * // Complex case (onboarding wizard with grid)
+ * <LinearBorderContainer useAdvancedLayout className="bg-background-tertiary">
+ *   <div className="grid lg:grid-cols-[280px_1fr]">
+ *     <Sidebar />
+ *     <Content />
+ *   </div>
+ * </LinearBorderContainer>
+ * ```
+ */
+export const LinearBorderContainer: FC<LinearBorderContainerProps> = ({
+  children,
+  className,
+  useAdvancedLayout = false,
+}) => {
+  if (!useAdvancedLayout) {
+    // Simple mode: works for basic content
+    return (
+      <div className={clsxm('relative', className)}>
+        {/* Top border */}
+        <div className="absolute left-0 top-0 right-0 h-[0.5px] bg-linear-to-r from-transparent via-text to-transparent" />
+
+        {/* Right border */}
+        <div className="absolute top-0 right-0 bottom-0 w-[0.5px] bg-linear-to-b from-transparent via-text to-transparent" />
+
+        {/* Bottom border */}
+        <div className="absolute left-0 bottom-0 right-0 h-[0.5px] bg-linear-to-r from-transparent via-text to-transparent" />
+
+        {/* Left border */}
+        <div className="absolute top-0 left-0 bottom-0 w-[0.5px] bg-linear-to-b from-transparent via-text to-transparent" />
+
+        {children}
+      </div>
+    )
+  }
+
+  // Advanced mode: uses flex layout for borders that span full dimensions
+  return (
+    <div className="flex flex-col">
+      <div className={clsxm('flex flex-row', className)}>
+        {/* Top border */}
+        <div className="absolute left-0 right-0 h-[0.5px] bg-linear-to-r from-transparent via-text to-transparent" />
+
+        {/* Left border */}
+        <div className="absolute top-0 bottom-0 w-[0.5px] bg-linear-to-b from-transparent via-text to-transparent" />
+
+        {/* Main content area */}
+        {children}
+
+        {/* Right border container */}
+        <div className="flex flex-col shrink-0">
+          <div className="absolute bottom-0 top-0 w-[0.5px] bg-linear-to-b from-transparent via-text to-transparent" />
+        </div>
+      </div>
+
+      {/* Bottom border container */}
+      <div className="shrink-0 w-[2px]">
+        <div className="absolute left-0 right-0 h-[0.5px] bg-linear-to-r from-transparent via-text to-transparent" />
+      </div>
+    </div>
+  )
+}

be/apps/dashboard/src/modules/onboarding/components/LinearBorderContainer.tsx

@@ -25,15 +25,15 @@ export const OnboardingFooter: FC<OnboardingFooterProps> = ({
       <Button
         type="button"
         variant="ghost"
-        className="px-6 py-2.5 min-w-[120px] text-sm font-medium text-text-secondary hover:text-text hover:bg-fill/50 transition-all duration-200"
+        className="rounded-lg px-6 py-2.5 min-w-[120px] text-sm font-medium text-text-secondary hover:text-text hover:bg-fill/50 transition-all duration-200"
         onClick={onBack}
         disabled={disableBack || isSubmitting}
       >
         Back
       </Button>
       <Button
         type="button"
-        className="px-6 py-2.5 min-w-[140px] bg-accent text-white text-sm font-medium hover:bg-accent/90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-accent/40 transition-all duration-200"
+        className="rounded-lg px-6 py-2.5 min-w-[140px] bg-accent text-white text-sm font-medium hover:bg-accent/90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-accent/40 transition-all duration-200"
         onClick={onNext}
         isLoading={isSubmitting}
       >

be/apps/dashboard/src/modules/onboarding/components/OnboardingFooter.tsx

@@ -1,7 +1,9 @@
+import { ScrollArea } from '@afilmory/ui'
 import type { FC, ReactNode } from 'react'
 
 import { ONBOARDING_STEPS } from '../constants'
 import { useOnboardingWizard } from '../hooks/useOnboardingWizard'
+import { LinearBorderContainer } from './LinearBorderContainer'
 import { OnboardingFooter } from './OnboardingFooter'
 import { OnboardingHeader } from './OnboardingHeader'
 import { OnboardingSidebar } from './OnboardingSidebar'
@@ -89,59 +91,60 @@ export const OnboardingWizard: FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-background flex flex-col items-center justify-center px-4 py-10">
-      <div className="w-full max-w-7xl flex flex-row bg-background-tertiary">
-        {/* Top border */}
-        <div className="absolute left-0 right-0 h-[0.5px] bg-linear-to-r from-transparent via-text to-transparent" />
-
-        {/* Left border */}
-        <div className="absolute top-0 bottom-0 w-[0.5px] bg-linear-to-b from-transparent via-text to-transparent" />
-
-        <div className="grid lg:grid-cols-[280px_1fr]">
+    <div className="min-h-screen bg-background flex items-center justify-center px-4 py-10">
+      <LinearBorderContainer
+        useAdvancedLayout
+        className="w-full max-w-7xl h-[85vh] bg-background-tertiary"
+      >
+        <div className="grid h-full lg:grid-cols-[280px_1fr]">
           {/* Sidebar */}
-          <div className="relative">
-            <div className="absolute top-0 right-0 bottom-0 w-[0.5px] bg-text/20" />
+          <div className="relative h-full">
+            {/* Vertical divider with gradient that fades at top/bottom */}
+            <div className="absolute top-0 right-0 bottom-0 w-[0.5px] bg-linear-to-b from-transparent via-text/20 to-transparent" />
             <OnboardingSidebar
               currentStepIndex={currentStepIndex}
               canNavigateTo={canNavigateTo}
               onStepSelect={jumpToStep}
             />
           </div>
 
-          {/* Main content */}
-          <main className="flex flex-col">
-            <OnboardingHeader
-              currentStepIndex={currentStepIndex}
-              totalSteps={ONBOARDING_STEPS.length}
-              step={currentStep}
-            />
-
-            {/* Horizontal divider */}
-            <div className="h-[0.5px] bg-linear-to-r from-transparent via-text/30 to-transparent" />
-
-            <section className="p-12">{stepContent[currentStep.id]}</section>
+          {/* Main content with fixed height and scrollable area */}
+          <main className="flex h-full flex-col w-[800px]">
+            {/* Fixed header */}
+            <div className="shrink-0">
+              <OnboardingHeader
+                currentStepIndex={currentStepIndex}
+                totalSteps={ONBOARDING_STEPS.length}
+                step={currentStep}
+              />
+              {/* Horizontal divider */}
+              <div className="h-[0.5px] bg-linear-to-r from-transparent via-text/20 to-transparent" />
+            </div>
 
-            {/* Horizontal divider */}
-            <div className="h-[0.5px] bg-linear-to-r from-transparent via-text/30 to-transparent" />
+            {/* Scrollable content area */}
+            <div className="flex-1 overflow-hidden">
+              <ScrollArea rootClassName="h-full" viewportClassName="h-full">
+                <section className="p-12">
+                  {stepContent[currentStep.id]}
+                </section>
+              </ScrollArea>
+            </div>
 
-            <OnboardingFooter
-              onBack={goToPrevious}
-              onNext={goToNext}
-              disableBack={currentStepIndex === 0}
-              isSubmitting={mutation.isPending}
-              isLastStep={currentStepIndex === ONBOARDING_STEPS.length - 1}
-            />
+            {/* Fixed footer */}
+            <div className="shrink-0">
+              {/* Horizontal divider */}
+              <div className="h-[0.5px] bg-linear-to-r from-transparent via-text/20 to-transparent" />
+              <OnboardingFooter
+                onBack={goToPrevious}
+                onNext={goToNext}
+                disableBack={currentStepIndex === 0}
+                isSubmitting={mutation.isPending}
+                isLastStep={currentStepIndex === ONBOARDING_STEPS.length - 1}
+              />
+            </div>
           </main>
         </div>
-        <div className="flex flex-col shrink-0">
-          {/* Right border */}
-          <div className="absolute bottom-0 top-0 w-[0.5px] bg-linear-to-b from-transparent via-text to-transparent" />
-        </div>
-      </div>
-      <div className="shrink-0 w-[2px]">
-        {/* Bottom border */}
-        <div className="absolute left-0 right-0 h-[0.5px] bg-linear-to-r from-transparent via-text to-transparent" />
-      </div>
+      </LinearBorderContainer>
     </div>
   )
 }