From ff5e0aa8cc4a0da34423f80ac49eb836859ea836 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 28 Sep 2020 11:50:29 +0100
Subject: [PATCH] UI update to the Table dropdown

Spacing within the dropdown improved. Utilised new components from bbui.
Attempted to change the dropdown button to a select so it was consistent with the other inputs but failed.
I did improve the dropdown button by ensuring the width remains the same when selecting different values.
---
 .../userInterface/ModelViewSelect.svelte      | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ModelViewSelect.svelte b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
index 605fdfa130..6540e6eca8 100644
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { Button, Icon, DropdownMenu } from "@budibase/bbui"
+  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { backendUiStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
-  let anchor, dropdown
+  let anchorRight, dropdownRight
 
   export let value = {}
 
@@ -30,21 +30,17 @@
   }, [])
 </script>
 
-<div bind:this={anchor}>
-  <Button secondary small on:click={dropdown.show}>
+<div class="dropdownbutton" bind:this={anchorRight}>
+  <Button secondary wide on:click={dropdownRight.show}>
     <span>{value.label ? value.label : 'Model / View'}</span>
     <Icon name="arrowdown" />
   </Button>
 </div>
-<DropdownMenu
-  bind:this={dropdown}
-  width="175px"
-  borderColor="#d1d1d1ff"
-  {anchor}
-  align="right">
-  <div class="model-view-container">
-    <p>Tables</p>
-
+<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
+  <div class="dropdown">
+    <div class="title">
+      <Heading extraSmall>Tables</Heading>
+    </div>
     <ul>
       {#each models as model}
         <li
@@ -55,7 +51,9 @@
       {/each}
     </ul>
     <hr />
-    <p>Views</p>
+    <div class="title">
+      <Heading extraSmall>Views</Heading>
+    </div>
     <ul>
       {#each views as view}
         <li
@@ -69,23 +67,18 @@
 </DropdownMenu>
 
 <style>
-  .model-view-container {
-    padding-bottom: 8px;
-    font: var(--smallheavybodytext);
+  .dropdownbutton {
+    width: 100%;
   }
-
-  p {
-    color: var(--grey-7);
-    margin: 0px;
-    padding: 8px;
+  .dropdown {
+    padding: var(--spacing-m) 0;
   }
-
-  span {
-    text-transform: capitalize;
+  .title {
+    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
   }
 
   hr {
-    margin: 10px 0px 5px 0px;
+    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
   }
 
   ul {
@@ -97,7 +90,8 @@
   li {
     cursor: pointer;
     margin: 0px;
-    padding: 5px 8px;
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-xs);
   }
 
   .selected {