fix: setup project page

studio/pages/vercel/setupProject.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { makeAutoObservable } from 'mobx'
 import { debounce } from 'lodash'
-import { Button, Typography } from '@supabase/ui'
+import { Button, Input, Listbox, Select, Typography } from '@supabase/ui'
 import { Dictionary } from '@supabase/grid'
 
 import { useStore } from 'hooks'
@@ -16,6 +16,7 @@ import {
   REGIONS_DEFAULT,
   DEFAULT_MINIMUM_PASSWORD_STRENGTH,
   API_URL,
+  PRICING_PLANS_DEFAULT,
 } from 'lib/constants'
 import { VERCEL_INTEGRATION_CONFIGS } from 'lib/vercelConfigs'
 import {
@@ -187,8 +188,8 @@ const CreateProject = observer(() => {
     } else delayedCheckPasswordStrength(value)
   }
 
-  function onDbRegionChange(e: ChangeEvent<HTMLSelectElement>) {
-    setDbRegion(e.target.value)
+  function onDbRegionChange(value: string) {
+    setDbRegion(value)
   }
 
   async function checkPasswordStrength(value: string) {
@@ -205,6 +206,7 @@ const CreateProject = observer(() => {
       db_pass: dbPass,
       db_region: dbRegion,
       db_sql: dbSql || '',
+      db_pricing_plan: PRICING_PLANS_DEFAULT,
       auth_site_url: _store.selectedVercelProjectUrl,
       vercel_configuration_id: _store.configurationId,
     }
@@ -263,71 +265,64 @@ const CreateProject = observer(() => {
 
   return (
     <div className="">
-      <Typography.Title level={3}>Project details for integration</Typography.Title>
+      <h3 className="mb-2">Project details for integration</h3>
       <div className="py-2">
-        <label htmlFor="projectName" className="block w-full text-base normal-case">
-          Project name
-        </label>
-        <div className="mt-1">
-          <input
-            type="text"
-            name="projectName"
-            id="projectName"
-            value={projectName}
-            onChange={onProjectNameChange}
-            placeholder="Project name"
-            className="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md"
-          />
-        </div>
+        <Input
+          autoFocus
+          id="projectName"
+          label="Project name"
+          type="text"
+          placeholder=""
+          descriptionText=""
+          value={projectName}
+          onChange={onProjectNameChange}
+        />
       </div>
       <div className="py-2">
-        <label htmlFor="dbPass" className="block w-full text-base normal-case">
-          Database password
-        </label>
-        <div className="mt-1 space-y-2">
-          <input
-            type="password"
-            name="dbPass"
-            id="dbPass"
-            value={dbPass}
-            onChange={onDbPassChange}
-            placeholder="· · · · · · · · · · · · ·"
-            className="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 rounded-md"
-          />
-          <PasswordStrengthBar
-            password={dbPass}
-            passwordStrengthScore={passwordStrengthScore}
-            passwordStrengthMessage={passwordStrengthMessage}
-          />
-        </div>
+        <Input
+          id="dbPass"
+          label="Database Password"
+          type="password"
+          placeholder="Type in a strong password"
+          value={dbPass}
+          onChange={onDbPassChange}
+          descriptionText={
+            <PasswordStrengthBar
+              passwordStrengthScore={passwordStrengthScore}
+              password={dbPass}
+              passwordStrengthMessage={passwordStrengthMessage}
+            />
+          }
+        />
       </div>
       <div className="py-2 pb-4">
-        <label htmlFor="projectName" className="block w-full text-base normal-case">
-          Database region
-        </label>
         <div className="mt-1">
-          <select
-            id="dbRegion"
-            name="dbRegion"
+          <Listbox
+            label="Region"
+            type="select"
             value={dbRegion}
             onChange={onDbRegionChange}
-            className="focus:ring-green-500 focus:border-green-500 relative block w-full rounded-md bg-transparent focus:z-10 sm:text-sm border-gray-300"
+            descriptionText="Select a region close to you for the best performance."
           >
-            {Object.keys(REGIONS).map((choice) => {
+            {Object.keys(REGIONS).map((option: string, i) => {
+              const label = Object.values(REGIONS)[i]
               return (
-                <option
-                  key={(REGIONS as any)[choice]}
-                  value={(REGIONS as any)[choice]}
-                  className="text-black"
+                <Listbox.Option
+                  key={option}
+                  label={label}
+                  value={label}
+                  addOnBefore={({ active, selected }: any) => (
+                    <img
+                      className="w-5 rounded-sm"
+                      src={`/img/regions/${Object.keys(REGIONS)[i]}.svg`}
+                    />
+                  )}
                 >
-                  {(REGIONS as any)[choice]}
-                </option>
+                  <span className="text-scale-1200">{label}</span>
+                </Listbox.Option>
               )
             })}
-          </select>
-          <Typography.Text type="secondary">
-            <p className="pt-2">Select a region close to you for the best performance.</p>
-          </Typography.Text>
+          </Listbox>
         </div>
       </div>
       <Button disabled={loading || !canSubmit} loading={loading} onClick={onCreateProject}>