🧹 chore(www): Update the onboarding (#207)

## Description
<!-- Briefly describe the purpose and scope of your changes -->

## Related Issues
<!-- List any related issues (e.g., "Closes #123", "Fixes #456") -->

## Type of Change

- [x] Bug fix (non-breaking change)
- [ ] New feature (non-breaking change)
- [ ] Breaking change (fix or feature that changes existing
functionality)
- [ ] Documentation update
- [ ] Other (please describe):

## Checklist

- [ ] I have updated relevant documentation
- [ ] My code follows the project's coding style
- [ ] My changes generate no new warnings/errors

## Notes for Reviewers
<!-- Point out areas you'd like reviewers to focus on, questions you
have, or decisions that need discussion -->

## Screenshots/Demo
<!-- If applicable, add screenshots or a GIF demo of your changes
(especially for UI changes) -->

## Additional Context
<!-- Add any other context about the pull request here -->

package.json

@@ -1,13 +1,5 @@
 {
   "name": "nestri",
-  "private": true,
-  "scripts": {
-    "build": "turbo build",
-    "dev": "turbo dev",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "lint": "turbo lint",
-    "sso": "aws sso login --sso-session=nestri --no-browser --use-device-code"
-  },
   "devDependencies": {
     "@cloudflare/workers-types": "4.20240821.1",
     "@pulumi/pulumi": "^3.134.0",
@@ -18,16 +10,21 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "bun@1.1.18",
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
+  "packageManager": "bun@1.2.4",
+  "private": true,
+  "scripts": {
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "sso": "aws sso login --sso-session=nestri --no-browser --use-device-code"
+  },
   "trustedDependencies": [
     "core-js-pure",
     "esbuild",
     "workerd"
   ],
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
   "dependencies": {
     "sst": "3.9.1"
   }

packages/www/src/App.tsx

@@ -87,9 +87,9 @@ export const App: Component = () => {
                 <Route
                     path="*"
                     component={(props) => (
-                        // <AuthProvider>
-                            // {props.children}
-                            props.children
+                        //  <AuthProvider>
+                        // {props.children}
+                        props.children
                         // </AuthProvider>
                     )}
                 >

packages/www/src/pages/new.tsx

@@ -28,13 +28,14 @@ const Hr = styled("hr", {
 })
 
 const Plan = {
-    Pro: 'Pro',
-    Basic: 'Basic',
+    Pro: 'BYOG',
+    Basic: 'Hosted',
 } as const;
 
 const schema = v.object({
     plan: v.pipe(
         v.enum(Plan),
+        v.minLength(2,"Please choose a plan"),
     ),
     display_name: v.pipe(
         v.string(),
@@ -48,6 +49,39 @@ const schema = v.object({
     )
 })
 
+// const Details = styled("details", {
+//     base: {
+//         overflow: "hidden",
+//         transition: "max-height .2s ease"
+//     }
+// })
+
+// const Summary = styled("summary", {
+//     base: {
+//         userSelect: "none",
+//         cursor: "pointer",
+//         listStyle: "none"
+//     }
+// })
+
+// const SVG = styled("svg", {
+//     base: {
+//         color: theme.color.gray.d900,
+//         width: 20,
+//         height: 20,
+//         marginRight: theme.space[2]
+//     }
+// })
+
+// const Subtitle = styled("p", {
+//     base: {
+//         color: theme.color.gray.d900,
+//         fontSize: theme.font.size.sm,
+//         fontWeight: theme.font.weight.regular,
+//         lineHeight: "1rem"
+//     }
+// })
+
 export function CreateTeamComponent() {
     const [form, { Form, Field }] = createForm({
         validate: valiForm(schema),
@@ -56,7 +90,7 @@ export function CreateTeamComponent() {
     return (
         <FullScreen>
             <Container horizontal="center" style={{ width: "100%", padding: "1rem", }} space="1" >
-                <Container style={{ "width": "100%","max-width": "380px" }} horizontal="start" space="3" >
+                <Container style={{ "width": "100%", "max-width": "380px" }} horizontal="start" space="3" >
                     <Text font="heading" spacing="none" size="3xl" weight="semibold">
                         Create a Team
                     </Text>
@@ -101,17 +135,27 @@ export function CreateTeamComponent() {
                                         {...props}
                                         value={field.value}
                                         badges={[
-                                            { label: "Basic", color: "gray" },
-                                            { label: "Pro", color: "blue" }
+                                            { label: "BYOG", color: "purple" },
+                                            { label: "Hosted", color: "blue" },
                                         ]}
                                         options={[
-                                            { label: "I'll be playing all by myself", value: 'Basic' },
-                                            { label: "I'll be playing with friends and family", value: 'Pro' },
+                                            { label: "I'll be playing on my machine", value: 'BYOG' },
+                                            { label: "I'll be playing on the cloud", value: 'Hosted' },
                                         ]}
                                     />
                                 </FormField>
                             )}
                         </Field>
+                        {/* <Details>
+                            <Summary>
+                                <div style={{ "display": "flex", "align-items": "center" }}>
+                                    <SVG xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z" /></SVG>
+                                    <Subtitle>
+                                        Continuing will start a 14-day Pro plan trial.
+                                    </Subtitle>
+                                </div>
+                            </Summary>
+                        </Details> */}
                         <Button color="brand">
                             Continue
                         </Button>

packages/www/src/ui/form.tsx

@@ -5,6 +5,8 @@ import { ComponentProps, createMemo, For, JSX, Show, splitProps } from "solid-js
 import { Container } from "./layout";
 import { utility } from "./utility";
 
+// FIXME: Make sure the focus ring goes to red when the input is invalid
+
 export const inputStyles: CSSProperties = {
     lineHeight: theme.font.lineHeight,
     appearance: "none",
@@ -17,11 +19,6 @@ export const inputStyles: CSSProperties = {
     borderColor: theme.color.gray.d400,
     color: theme.color.d1000.gray,
     backgroundColor: theme.color.background.d100,
-    // transition: `box-shadow ${theme.colorFadeDuration}`,
-    // boxShadow: `
-    //   0 0 0 1px inset ${theme.color.input.border},
-    //   ${theme.color.input.shadow}
-    // `,
 };
 
 export const inputDisabledStyles: CSSProperties = {
@@ -60,7 +57,12 @@ export const Root = styled("label", {
                 color: theme.color.gray.d900
             },
             danger: {
-                color: theme.color.red.d900
+                color: theme.color.red.d900,
+                // selectors: {
+                //     "&:has(input)": {
+                //         ...inputDangerFocusStyles
+                //     }
+                // }
             },
         },
     },
@@ -85,11 +87,14 @@ export const Input = styled("input", {
         },
         "::placeholder": {
             color: theme.color.gray.d800
-        }
-        // selectors: {
-        // [`${Root.selector({ color: "danger" })} &`]: {
-        //     ...inputDangerFocusStyles,
+        },
+        // ":invalid":{
+        //     ...inputDangerFocusStyles
         // },
+        // selectors: {
+        //     [`${Root.selector({ color: "danger" })} &`]: {
+        //         ...inputDangerFocusStyles,
+        //     },
         // },
     },
     variants: {
@@ -204,7 +209,7 @@ const InputLabel = styled("label", {
 
 const Hint = styled("p", {
     base: {
-        fontSize: theme.font.size.sm,
+        fontSize: theme.font.size.xs,
         lineHeight: theme.font.lineHeight,
         color: theme.color.gray.d800,
     },
@@ -296,7 +301,7 @@ export function Select(props: SelectProps) {
                         {label}
                         <Show when={props.badges}>
                             {props.badges &&
-                                <Badge style={{"background-color": theme.color[props.badges[key()].color].d700 }}>
+                                <Badge style={{ "background-color": theme.color[props.badges[key()].color].d700 }}>
                                     {props.badges[key()].label}
                                 </Badge>
                             }