New Project + Settings page UI

app/common/tokens.js

@@ -137,70 +137,80 @@ export const fontSize = {
         '1rem',
         {
             lineHeight: '1.4rem',
-            fontWeight: '500',
+            fontWeight: '400',
+            letterSpacing: '0.02rem',
         },
     ],
     large: [
         '1rem',
         {
             lineHeight: '1.4rem',
             fontWeight: 'normal',
+            letterSpacing: '0.02rem',
         },
     ],
     regularPlus: [
         '0.9375rem',
         {
             lineHeight: '1.4rem',
-            fontWeight: '500',
+            fontWeight: '400',
+            letterSpacing: '0.02rem',
         },
     ],
     regular: [
         '0.9375rem',
         {
             lineHeight: '1.4rem',
-            fontWeight: 'normal',
+            fontWeight: '300',
+            letterSpacing: '0.02rem',
         },
     ],
     smallPlus: [
         '0.8125rem',
         {
-            lineHeight: '1.4rem',
-            fontWeight: '500',
+            lineHeight: '1.3rem',
+            fontWeight: '300',
+            letterSpacing: '0.015rem',
         },
     ],
     small: [
         '0.8125rem',
         {
-            lineHeight: '1.4rem',
-            fontWeight: 'normal',
+            lineHeight: '1.3rem',
+            fontWeight: '300',
+            letterSpacing: '0.015rem',
         },
     ],
     miniPlus: [
         '1rem',
         {
             lineHeight: 'normal',
             fontWeight: '500',
+            letterSpacing: '0.01rem',
         },
     ],
     mini: [
         '1rem',
         {
             lineHeight: 'normal',
             fontWeight: 'normal',
+            letterSpacing: '0.01rem',
         },
     ],
     microPlus: [
         '0.6875rem',
         {
             lineHeight: 'normal',
             fontWeight: '500',
+            letterSpacing: '0.01rem',
         },
     ],
     micro: [
         '0.6875rem',
         {
             lineHeight: 'normal',
             fontWeight: 'normal',
+            letterSpacing: '0.01rem',
         },
     ],
 };

app/src/components/ui/button.tsx

@@ -9,19 +9,20 @@ const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+                default:
+                    'bg-primary text-primary-foreground shadow hover:bg-primary/90 hover:border-border-hover',
                 destructive:
                     'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
                 outline:
-                    'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+                    'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-border-hover',
                 secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                ghost: 'hover:bg-bg-hover hover:text-accent-foreground hover:border-border-hover',
                 link: 'text-primary underline-offset-4 hover:underline',
             },
             size: {
                 default: 'h-9 px-4 py-2',
-                sm: 'h-8 rounded-md px-3 text-xs',
-                lg: 'h-10 rounded-md px-8',
+                sm: 'h-8 rounded-sm px-3 text-xs',
+                lg: 'h-10 rounded-sm px-8',
                 icon: 'h-9 w-9',
             },
         },

app/src/components/ui/card.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+            {...props}
+        />
+    ),
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+    ({ className, ...props }, ref) => (
+        <h3
+            ref={ref}
+            className={cn('font-semibold leading-none tracking-tight', className)}
+            {...props}
+        />
+    ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+    ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

app/src/routes/projects/ProjectsTab/Create/LoadProject.tsx

@@ -0,0 +1,43 @@
+import { ProjectData } from '.';
+
+// Step components for "Load existing project" path
+export const LoadStep1 = ({
+    formData,
+    setProjectData,
+}: {
+    formData: ProjectData;
+    setProjectData: (data: ProjectData) => void;
+}) => (
+    <div className="space-y-4">
+        <h2 className="text-xl font-bold">Step 1: Select Project</h2>
+        <input
+            type="text"
+            placeholder="Project Name"
+            value={formData.projectName}
+            onChange={(e) => setProjectData({ ...formData, projectName: e.target.value })}
+            className="w-full p-2 border rounded"
+        />
+    </div>
+);
+
+export const LoadStep2 = ({
+    formData,
+    setProjectData,
+}: {
+    formData: ProjectData;
+    setProjectData: (data: ProjectData) => void;
+}) => (
+    <div className="space-y-4">
+        <h2 className="text-xl font-bold">Step 2: Configure</h2>
+        <select
+            value={formData.projectType}
+            onChange={(e) => setProjectData({ ...formData, projectType: e.target.value })}
+            className="w-full p-2 border rounded"
+        >
+            <option value="">Select Project Type</option>
+            <option value="react">React</option>
+            <option value="vue">Vue</option>
+            <option value="angular">Angular</option>
+        </select>
+    </div>
+);

app/src/routes/projects/ProjectsTab/Create/NewProject.tsx

@@ -0,0 +1,50 @@
+import { ProjectData } from '.';
+
+// Step components for "New Onlook project" path
+export const NewStep1 = ({
+    formData,
+    setProjectData,
+}: {
+    formData: ProjectData;
+    setProjectData: (data: ProjectData) => void;
+}) => (
+    <div className="space-y-4">
+        <h2 className="text-xl font-bold">Step 1: Project Details</h2>
+        <input
+            type="text"
+            placeholder="Project Name"
+            value={formData.projectName}
+            onChange={(e) => setProjectData({ ...formData, projectName: e.target.value })}
+            className="w-full p-2 border rounded"
+        />
+        <input
+            type="text"
+            placeholder="Description"
+            value={formData.description}
+            onChange={(e) => setProjectData({ ...formData, description: e.target.value })}
+            className="w-full p-2 border rounded"
+        />
+    </div>
+);
+
+export const NewStep2 = ({
+    formData,
+    setProjectData,
+}: {
+    formData: ProjectData;
+    setProjectData: (data: ProjectData) => void;
+}) => (
+    <div className="space-y-4">
+        <h2 className="text-xl font-bold">Step 2: React Setup</h2>
+        <select
+            value={formData.reactVersion}
+            onChange={(e) => setProjectData({ ...formData, reactVersion: e.target.value })}
+            className="w-full p-2 border rounded"
+        >
+            <option value="">Select React Version</option>
+            <option value="18">React 18</option>
+            <option value="17">React 17</option>
+            <option value="16">React 16</option>
+        </select>
+    </div>
+);