modal styling

packages/builder/src/budibase.css

@@ -110,7 +110,7 @@
     background: #fafafa;
 }
 
-.budibase__table th {
+.budibase__table thead > tr > th {
     color: var(--button-text);
     text-transform: capitalize;
     font-weight: 500;

packages/builder/src/common/Modal.svelte

@@ -41,6 +41,9 @@
         {/if}
         <slot />
       </div>
+      <div class="uk-modal-footer">
+        <slot name="footer" />
+      </div>
     </div>
   {/if}
 </div>
@@ -52,5 +55,6 @@
     height: 80vh;
     display: flex;
     flex-direction: column;
+    padding: 0;
   }
 </style>

packages/builder/src/database/ActionsHeader.svelte

@@ -39,9 +39,12 @@
 <style>
   .root {
     display: flex;
-    background: #fafafa;
     width: 100%;
     border-top: 1px solid #ccc;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
   }
 
   .button-container {

packages/builder/src/database/DatabaseRoot.svelte

@@ -13,7 +13,7 @@
     CreateEditModelModal,
     CreateEditViewModal,
     CreateDatabaseModal,
-    DeleteRecordModal
+    DeleteRecordModal,
   } from "./ModelDataTable/modals"
 
   let selectedRecord
@@ -52,21 +52,20 @@
   {/if}
 </Modal>
 
-
 <div class="root">
   <div class="node-view">
     <div class="database-actions">
       <div class="budibase__label--big">
         {#if $backendUiStore.selectedDatabase.name}
-          {$backendUiStore.selectedDatabase.name} {breadcrumbs} 
+          {$backendUiStore.selectedDatabase.name} {breadcrumbs}
         {/if}
-        </div>
+      </div>
       {#if $backendUiStore.selectedDatabase.id}
         <ActionButton
           primary
           on:click={() => {
             selectedRecord = null
-            backendUiStore.actions.modals.show("RECORD")
+            backendUiStore.actions.modals.show('RECORD')
           }}>
           Create new record
         </ActionButton>

packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -81,10 +81,4 @@
       </ActionButton>
     </div>
   </div>
-</div>
+</div>
-
-<style>
-  .actions {
-    /* position: absolute; */
-  }
-</style>

packages/builder/src/database/ModelView.svelte

@@ -166,7 +166,6 @@
 <style>
   .root {
     height: 100%;
-    padding: 2rem;
   }
 
   .horizontal-stack {

packages/builder/src/nav/BackendNav.svelte

@@ -25,7 +25,9 @@
     <div class="components-list-container">
       <div class="nav-group-header">
         <div class="hierarchy-title">Databases</div>
-        <i class="ri-add-line hoverable" on:click={() => backendUiStore.actions.modals.show("DATABASE")} />
+        <i
+          class="ri-add-line hoverable"
+          on:click={() => backendUiStore.actions.modals.show('DATABASE')} />
       </div>
     </div>
 
@@ -34,20 +36,22 @@
     </div>
   </div>
   <hr />
-  <div class="hierarchy">
+  {#if $backendUiStore.selectedDatabase.id}
-    <div class="components-list-container">
+    <div class="hierarchy">
-      <div class="nav-group-header">
+      <div class="components-list-container">
-        <div class="hierarchy-title">Users</div>
+        <div class="nav-group-header">
-        <i class="ri-add-line" />
+          <div class="hierarchy-title">Users</div>
+          <i class="ri-add-line" />
+        </div>
       </div>
-    </div>
 
-    <div class="hierarchy-items-container">
+      <div class="hierarchy-items-container">
-      <UsersList />
+        <UsersList />
-    </div>
+      </div>
 
-    <NavItem name="ACCESS_LEVELS" label="User Levels" />
+      <NavItem name="ACCESS_LEVELS" label="User Levels" />
-  </div>
+    </div>
+  {/if}
 </div>
 
 <style>

packages/builder/src/nav/UsersList.svelte

@@ -1,5 +1,7 @@
 <script>
-  import { store } from "../builderStore"
+  import { onMount } from "svelte"
+  import { store, backendUiStore } from "../builderStore"
+  import api from "../builderStore/api";
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
@@ -8,34 +10,28 @@
     return { name, props }
   }
 
-  const pages = [
+  let users = []
-    {
-      title: "Joe",
-      id: "joe",
-    },
-    {
-      title: "Mike",
-      id: "mike",
-    },
-    {
-      title: "Martin",
-      id: "martin",
-    },
-  ]
 
-  store.setCurrentPage("main")
+  $: currentAppInfo = {
+    appname: $store.appname,
+    instanceId: $backendUiStore.selectedDatabase.id
+  }
+
+  async function fetchUsers() {
+    const DELETE_RECORDS_URL = `/_builder/instance/${currentAppInfo.appname}/${currentAppInfo.instanceId}/api/users`
+    const response = await api.get(DELETE_RECORDS_URL);
+    users = await response.json()
+  }
+
+  onMount(fetchUsers)
 </script>
 
 <div class="root">
   <ul>
-    {#each pages as { title, id }}
+    {#each users as user}
       <li>
         <i class="ri-user-4-line" />
-        <button
+        <button class:active={user.id === $store.currentUserId}>{user.name}</button>
-          class:active={id === $store.currentPageName}
-          on:click={() => store.setCurrentPage(id)}>
-          {title}
-        </button>
       </li>
     {/each}
   </ul>