convert createuser component to use new modal

packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte

@@ -35,5 +35,6 @@
   footer {
     padding: 20px;
     background: #fafafa;
+    border-radius: 0.5rem;
   }
 </style>

packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte

@@ -29,16 +29,18 @@
 </script>
 
 <form class="uk-form-stacked">
-  <label class="uk-form-label" for="form-stacked-text">Username</label>
-  <input class="uk-input" type="text" bind:value={username} />
-  <label class="uk-form-label" for="form-stacked-text">Password</label>
-  <input class="uk-input" type="password" bind:value={password} />
-  <label class="uk-form-label" for="form-stacked-text">Access Levels</label>
-  <select multiple bind:value={accessLevels}>
-    {#each $store.accessLevels.levels as level}
-      <option value={level.name}>{level.name}</option>
-    {/each}
-  </select>
+  <div>
+    <label class="uk-form-label" for="form-stacked-text">Username</label>
+    <input class="uk-input" type="text" bind:value={username} />
+    <label class="uk-form-label" for="form-stacked-text">Password</label>
+    <input class="uk-input" type="password" bind:value={password} />
+    <label class="uk-form-label" for="form-stacked-text">Access Levels</label>
+    <select multiple bind:value={accessLevels}>
+      {#each $store.accessLevels.levels as level}
+        <option value={level.name}>{level.name}</option>
+      {/each}
+    </select>
+  </div>
   <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
     <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
@@ -46,13 +48,13 @@
 </form>
 
 <style>
+  div {
+    padding: 30px;
+  }
   footer {
-    position: absolute;
     padding: 20px;
-    width: 100%;
-    bottom: 0;
-    left: 0;
     background: #fafafa;
+    border-radius: 0.5rem;
   }
   select {
     width: 100%;

packages/builder/src/components/nav/BackendNav.svelte

@@ -6,7 +6,10 @@
   import UsersList from "./UsersList.svelte"
   import NavItem from "./NavItem.svelte"
   import getIcon from "components/common/icon"
-  import { CreateDatabaseModal } from "components/database/ModelDataTable/modals"
+  import {
+    CreateDatabaseModal,
+    CreateUserModal,
+  } from "components/database/ModelDataTable/modals"
   const { open, close } = getContext("simple-modal")
 
   const openDatabaseCreator = () => {
@@ -18,6 +21,15 @@
       { styleContent: { padding: "0" } }
     )
   }
+  const openUserCreator = () => {
+    open(
+      CreateUserModal,
+      {
+        onClosed: close,
+      },
+      { styleContent: { padding: "0" } }
+    )
+  }
 </script>
 
 <div class="items-root">
@@ -39,9 +51,7 @@
       <div class="components-list-container">
         <div class="nav-group-header">
           <div class="hierarchy-title">Users</div>
-          <i
-            class="ri-add-line hoverable"
-            on:click={() => backendUiStore.actions.modals.show('USER')} />
+          <i class="ri-add-line hoverable" on:click={openUserCreator} />
         </div>
       </div>
 

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -31,9 +31,7 @@
   $: recordOpen = $backendUiStore.visibleModal === "RECORD"
   $: modelOpen = $backendUiStore.visibleModal === "MODEL"
   $: viewOpen = $backendUiStore.visibleModal === "VIEW"
-  $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
   $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
-  $: userOpen = $backendUiStore.visibleModal === "USER"
 </script>
 
 <!-- <Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
@@ -46,15 +44,9 @@
   {#if viewOpen}
     <CreateEditViewModal {onClosed} />
   {/if}
-  {#if databaseOpen}
-    <CreateDatabaseModal {onClosed} />
-  {/if}
   {#if deleteRecordOpen}
     <DeleteRecordModal record={selectedRecord} {onClosed} />
   {/if}
-  {#if userOpen}
-    <CreateUserModal {onClosed} />
-  {/if}
 </Modal> -->
 
 <div class="root">