Fix create table modal

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

@@ -117,8 +117,8 @@
     {#if files[0]}{files[0].name}{:else}Upload{/if}
   </label>
 </div>
-<div class="schema-fields">
 {#if fields.length}
+  <div class="schema-fields">
     {#each fields as columnName}
       <div class="field">
         <span>{columnName}</span>
@@ -137,8 +137,9 @@
           on:click={() => omitColumn(columnName)} />
       </div>
     {/each}
-  {/if}
   </div>
+{/if}
+
 {#if fields.length}
   <div class="display-column">
     <Select
@@ -176,6 +177,10 @@
     display: none;
   }
 
+  .schema-fields {
+    margin-top: var(--spacing-xl);
+  }
+
   label {
     font-family: var(--font-sans);
     cursor: pointer;

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

@@ -3,7 +3,7 @@
   import { store } from "builderStore"
   import { tables } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { Input, Label, ModalContent, Toggle } from "@budibase/bbui"
+  import { Input, Label, ModalContent, Toggle, Divider } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -105,27 +105,20 @@
     <Label extraSmall grey>Auto Columns</Label>
     <div class="toggles">
       <div class="toggle-1">
-        <Toggle
+        <Toggle text="Created by" bind:value={autoColumns.createdBy.enabled} />
-          text="Created by"
+        <Toggle text="Created at" bind:value={autoColumns.createdAt.enabled} />
-          bind:checked={autoColumns.createdBy.enabled} />
+        <Toggle text="Auto ID" bind:value={autoColumns.autoID.enabled} />
-        <Toggle
-          text="Created at"
-          bind:checked={autoColumns.createdAt.enabled} />
-        <Toggle text="Auto ID" bind:checked={autoColumns.autoID.enabled} />
       </div>
       <div class="toggle-2">
-        <Toggle
+        <Toggle text="Updated by" bind:value={autoColumns.updatedBy.enabled} />
-          text="Updated by"
+        <Toggle text="Updated at" bind:value={autoColumns.updatedAt.enabled} />
-          bind:checked={autoColumns.updatedBy.enabled} />
-        <Toggle
-          text="Updated at"
-          bind:checked={autoColumns.updatedAt.enabled} />
       </div>
     </div>
+    <Divider />
   </div>
   <Toggle
-    text="Generate screens in the design section"
+    text="Generate screens in Design section"
-    bind:checked={createAutoscreens} />
+    bind:value={createAutoscreens} />
   <div>
     <Label grey extraSmall>Create Table from CSV (Optional)</Label>
     <TableDataImport bind:dataImport />
@@ -134,8 +127,7 @@
 
 <style>
   .autocolumns {
-    padding-bottom: 10px;
+    margin-bottom: -10px;
-    border-bottom: 3px solid var(--grey-1);
   }
 
   .toggles {