Update data page to use new styles

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -51,19 +51,17 @@
   }
 </script>
 
-<section>
-  <div class="table-controls">
-    <h2 class="title">
-      <span>{title}</span>
-      {#if loading}
-        <div transition:fade>
-          <Spinner size="10" />
-        </div>
-      {/if}
-    </h2>
-    <div class="popovers">
-      <slot />
-    </div>
+<div class="table-container">
+  <div class="title">
+    <h1>{title}</h1>
+    {#if loading}
+      <div transition:fade>
+        <Spinner size="10" />
+      </div>
+    {/if}
+  </div>
+  <div class="popovers">
+    <slot />
   </div>
   <table class="bb-table">
     <thead>
@@ -125,20 +123,44 @@
     bind:currentPage
     pageItemCount={paginatedData.length}
     {ITEMS_PER_PAGE} />
-</section>
+</div>
 
 <style>
+  .table-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
   .title {
-    font-size: 24px;
-    font-weight: 600;
-    text-rendering: optimizeLegibility;
-    margin-top: 0;
+    height: 24px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title > div {
+    margin-left: var(--spacing-xs);
+  }
+
+  .popovers {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: var(--spacing-l);
   }
-  .title > span {
+  .popovers :global(button) {
+    font-weight: 500;
+  }
+  .popovers :global(button svg) {
     margin-right: var(--spacing-xs);
   }
 
@@ -200,19 +222,6 @@
     background: var(--grey-1);
   }
 
-  .table-controls {
-    width: 100%;
-  }
-
-  .popovers {
-    display: flex;
-  }
-
-  :global(.popovers > div) {
-    margin-right: var(--spacing-m);
-    margin-bottom: var(--spacing-xl);
-  }
-
   .edit-header {
     width: 60px;
   }

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -5,9 +5,10 @@
   import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
-  import { Heading } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
+  import NavItem from "components/common/NavItem.svelte"
 
+  let modal
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
@@ -20,67 +21,77 @@
     backendUiStore.actions.views.select(view)
     $goto(`./view/${view.name}`)
   }
+
+  function onClickView(table, viewName) {
+    if (selectedView === viewName) {
+      return
+    }
+    selectView({
+      name: viewName,
+      ...table.views[viewName],
+    })
+  }
 </script>
 
 <div class="items-root">
   {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-    <div class="hierarchy">
-      <div class="components-list-container">
-        <Heading small>Tables</Heading>
-        <Spacer medium />
-        <CreateTableModal />
-        <div class="hierarchy-items-container">
-          {#each $backendUiStore.tables as table}
-            <ListItem
-              selected={selectedView === `all_${table._id}`}
-              title={table.name}
-              icon="ri-table-fill"
-              on:click={() => selectTable(table)}>
-              <EditTablePopover {table} />
-            </ListItem>
-            {#each Object.keys(table.views || {}) as viewName}
-              <ListItem
-                indented
-                selected={selectedView === viewName}
-                title={viewName}
-                icon="ri-eye-line"
-                on:click={() => (selectedView === viewName ? {} : selectView({
-                        name: viewName,
-                        ...table.views[viewName],
-                      }))}>
-                <EditViewPopover
-                  view={{ name: viewName, ...table.views[viewName] }} />
-              </ListItem>
-            {/each}
-          {/each}
-        </div>
-      </div>
+    <div class="title">
+      <h1>Tables</h1>
+      <i on:click={modal.show} class="ri-add-circle-fill" />
+    </div>
+    <div class="hierarchy-items-container">
+      {#each $backendUiStore.tables as table}
+        <NavItem
+          icon="ri-table-line"
+          text={table.name}
+          selected={selectedView === `all_${table._id}`}
+          on:click={() => selectTable(table)}>
+          <EditTablePopover {table} />
+        </NavItem>
+        {#each Object.keys(table.views || {}) as viewName}
+          <NavItem
+            indentLevel={1}
+            icon="ri-eye-line"
+            text={viewName}
+            selected={selectedView === viewName}
+            on:click={() => onClickView(table, viewName)}>
+            <EditViewPopover
+              view={{ name: viewName, ...table.views[viewName] }} />
+          </NavItem>
+        {/each}
+      {/each}
     </div>
   {/if}
 </div>
+<Modal bind:this={modal}>
+  <CreateTableModal />
+</Modal>
 
 <style>
-  h5 {
-    font-size: 18px;
-    font-weight: 600;
-    margin-top: 0;
-    margin-bottom: var(--spacing-xl);
-  }
-
   .items-root {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    gap: var(--spacing-l);
   }
 
-  .hierarchy {
+  .title {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
   }
-
-  .hierarchy-items-container {
-    margin-top: var(--spacing-xl);
-    flex: 1 1 auto;
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 </style>

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -2,8 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Button, Input, Label, ModalContent, Modal } from "@budibase/bbui"
-  import Spinner from "components/common/Spinner.svelte"
+  import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -22,15 +21,9 @@
   let dataImport
   let error = ""
 
-  function resetState() {
-    name = ""
-    dataImport = undefined
-    error = ""
-  }
-
   function checkValid(evt) {
     const tableName = evt.target.value
-    if ($backendUiStore.models?.some(model => model.name === tableName)) {
+    if ($backendUiStore.models?.some((model) => model.name === tableName)) {
       error = `Table with name ${tableName} already exists. Please choose another name.`
       return
     }
@@ -56,8 +49,8 @@
 
     // Create auto screens
     const screens = screenTemplates($store, [table])
-      .filter(template => defaultScreens.includes(template.id))
-      .map(template => template.create())
+      .filter((template) => defaultScreens.includes(template.id))
+      .map((template) => template.create())
     for (let screen of screens) {
       // Record the table that created this screen so we can link it later
       screen.autoTableId = table._id
@@ -74,7 +67,7 @@
     }
 
     // Create autolink to newly created list page
-    const listPage = screens.find(screen =>
+    const listPage = screens.find((screen) =>
       screen.props._instanceName.endsWith("List")
     )
     await store.createLink(listPage.route, table.name)
@@ -84,23 +77,20 @@
   }
 </script>
 
-<Button primary wide on:click={modal.show}>Create New Table</Button>
-<Modal bind:this={modal} on:hide={resetState}>
-  <ModalContent
-    title="Create Table"
-    confirmText="Create"
-    onConfirm={saveTable}
-    disabled={error || !name || (dataImport && !dataImport.valid)}>
-    <Input
-      data-cy="table-name-input"
-      thin
-      label="Table Name"
-      on:input={checkValid}
-      bind:value={name}
-      {error} />
-    <div>
-      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-      <TableDataImport bind:dataImport />
-    </div>
-  </ModalContent>
-</Modal>
+<ModalContent
+  title="Create Table"
+  confirmText="Create"
+  onConfirm={saveTable}
+  disabled={error || !name || (dataImport && !dataImport.valid)}>
+  <Input
+    data-cy="table-name-input"
+    thin
+    label="Table Name"
+    on:input={checkValid}
+    bind:value={name}
+    {error} />
+  <div>
+    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+    <TableDataImport bind:dataImport />
+  </div>
+</ModalContent>

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

@@ -18,18 +18,17 @@
   .root {
     height: calc(100vh - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(0, 1fr);
-    background: var(--grey-1);
-    line-height: 1;
+    grid-template-columns: 260px minmax(0, 1fr);
+    background: var(--grey-2);
   }
   .content {
     flex: 1 1 auto;
-    padding: var(--spacing-xl) 40px;
+    padding: var(--spacing-l) 40px;
     overflow-y: auto;
   }
   .nav {
     overflow-y: auto;
     background: var(--white);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-l) var(--spacing-xl);
   }
 </style>