From 31eb063cf6318c6825300c10ba8c53658e289452 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Sat, 7 Mar 2020 16:33:44 +0000
Subject: [PATCH 1/9] WIP: Poc for date picker

---
 .../src/DatePicker/DatePicker.svelte                   | 10 ++++++++++
 .../materialdesign-components/src/DatePicker/index.js  |  1 +
 .../materialdesign-components/src/Menu/Menu.svelte     |  1 +
 .../materialdesign-components/src/Test/TestApp.svelte  |  2 ++
 packages/materialdesign-components/src/Test/props.js   |  6 +++++-
 packages/materialdesign-components/src/index.js        |  1 +
 6 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 packages/materialdesign-components/src/DatePicker/DatePicker.svelte
 create mode 100644 packages/materialdesign-components/src/DatePicker/index.js

diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
new file mode 100644
index 0000000000..946bcd9dd7
--- /dev/null
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { Menu } from "../Menu"
+  import { Textfield } from "../Textfield"
+
+  let open = false
+  debugger
+</script>
+
+<Textfield label="Select Date" />
+<Menu {open} />
diff --git a/packages/materialdesign-components/src/DatePicker/index.js b/packages/materialdesign-components/src/DatePicker/index.js
new file mode 100644
index 0000000000..76af457b24
--- /dev/null
+++ b/packages/materialdesign-components/src/DatePicker/index.js
@@ -0,0 +1 @@
+export { default as DatePicker } from "./DatePicker.svelte"
diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte
index 8439128208..7d2c40c3d0 100644
--- a/packages/materialdesign-components/src/Menu/Menu.svelte
+++ b/packages/materialdesign-components/src/Menu/Menu.svelte
@@ -39,6 +39,7 @@
   })
 
   $: menuList && _bb.attachChildren(menuList)
+  debugger
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index baf3db4c81..f011be3089 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -17,6 +17,7 @@
     Icon,
     List,
     Select,
+    DatePicker,
   } = props
 
   let currentComponent
@@ -28,6 +29,7 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
+            DatePicker,
             Button,
             BodyBoundToStore,
             Textfield,
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 73672f7b3e..e1f148c963 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -205,5 +205,9 @@ export const props = {
         value: "2",
       },
     ],
-  }
+  },
+  DatePicker: {
+    _component: "@budibase/materialdesign-components/ListItem",
+    _children: [],
+  },
 }
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 5e1df0081e..7575f19786 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -19,3 +19,4 @@ export { default as recordForm } from "./Templates/recordForm"
 export { List, ListItem } from "./List"
 export { Menu } from "./Menu"
 export { Select } from "./Select"
+export { DatePicker } from "./DatePicker"

From 7c23e644e065595807faef711bf60c081e5da89f Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 11 Mar 2020 14:04:47 +0000
Subject: [PATCH 2/9] Datepicker and Icon Button

---
 package.json                                  |   5 +-
 .../src/Common/Icon.svelte                    |  21 ++
 .../src/Common/Ripple.js                      |   2 +-
 .../src/DatePicker/DatePicker.svelte          | 187 +++++++++++++++++-
 .../src/DatePicker/_style.scss                |  15 ++
 .../src/DatePicker/index.js                   |   3 +-
 .../src/IconButton/IconButton.svelte          |  40 ++++
 .../src/IconButton/_style.scss                |  13 ++
 .../src/IconButton/index.js                   |   2 +
 .../src/Menu/Menu.svelte                      |   1 -
 .../src/Textfield/Textfield.svelte            |   3 +-
 .../src/Typography/Caption.svelte             |   2 +-
 .../materialdesign-components/src/index.js    |   1 +
 yarn.lock                                     |  61 ++++++
 14 files changed, 344 insertions(+), 12 deletions(-)
 create mode 100644 packages/materialdesign-components/src/DatePicker/_style.scss
 create mode 100644 packages/materialdesign-components/src/IconButton/IconButton.svelte
 create mode 100644 packages/materialdesign-components/src/IconButton/_style.scss
 create mode 100644 packages/materialdesign-components/src/IconButton/index.js

diff --git a/package.json b/package.json
index 01e91b64ac..ea235ae5b4 100644
--- a/package.json
+++ b/package.json
@@ -24,5 +24,8 @@
     "lint:fix": "eslint --fix packages",
     "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\""
   },
-  "dependencies": {}
+  "dependencies": {
+    "@material/icon-button": "4.0.0",
+    "date-fns": "^2.10.0"
+  }
 }
diff --git a/packages/materialdesign-components/src/Common/Icon.svelte b/packages/materialdesign-components/src/Common/Icon.svelte
index d4820fcf6c..bb2ac8d957 100644
--- a/packages/materialdesign-components/src/Common/Icon.svelte
+++ b/packages/materialdesign-components/src/Common/Icon.svelte
@@ -1,10 +1,31 @@
 <script>
   import { getContext } from "svelte"
+  import ripple from "../Ripple.js"
 
+  export let onClick = null
   export let icon = ""
   export let context = ""
 
   let cls = !!context ? `material-icons mdc-${context}__icon` : "material-icons"
+
+  $: useRipple = onClick !== null
 </script>
 
 <i class={cls}>{icon}</i>
+{#if useRipple}
+  <div use:ripple>
+    <i on:click={onClick} class={cls}>{icon}</i>
+  </div>
+{:else}
+  <i class={cls}>{icon}</i>
+{/if}
+
+<style>
+  div {
+    border-radius: 50%;
+    padding-top: 2px;
+    width: fit-content;
+    height: fit-content;
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/Common/Ripple.js b/packages/materialdesign-components/src/Common/Ripple.js
index 2553bbca65..6a19dac3ea 100644
--- a/packages/materialdesign-components/src/Common/Ripple.js
+++ b/packages/materialdesign-components/src/Common/Ripple.js
@@ -2,7 +2,7 @@ import { MDCRipple } from "@material/ripple"
 
 export default function ripple(
   node,
-  props = { colour: "primary", unbounded: false }
+  props = { colour: "primary", unbounded: true }
 ) {
   node.classList.add("mdc-ripple-surface")
   let component = new MDCRipple(node)
diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
index 946bcd9dd7..e5b693de6e 100644
--- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@@ -1,10 +1,185 @@
 <script>
-  import { Menu } from "../Menu"
-  import { Textfield } from "../Textfield"
+  import { onMount } from "svelte";
+  import {
+    startOfMonth,
+    endOfMonth,
+    getDate,
+    getMonth,
+    getYear,
+    addMonths,
+    subMonths,
+    format
+  } from "date-fns";
+  import { MDCMenu } from "@material/menu";
+  import { Textfield } from "../Textfield";
+  import Icon from "../Common/Icon.svelte";
+  import ripple from "../Ripple.js";
+  import { Body1, Body2, Caption } from "../Typography";
 
-  let open = false
-  debugger
+  let textFieldHeight = null;
+  let menu;
+  let instance;
+
+  let daysArr = [];
+  let navDate = new Date();
+  const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+  export let date = new Date();
+  export let open = true;
+
+  onMount(() => {
+    if (!!menu) {
+      instance = new MDCMenu(menu);
+      instance.open = true;
+      instance.setFixedPostion = true;
+    }
+  });
+
+  function selectDate(dayOfMonth) {
+    let month = getMonth(navDate);
+    let year = getYear(navDate);
+    date = new Date(year, month, dayOfMonth);
+  }
+
+  function addMonth() {
+    navDate = addMonths(navDate, 1);
+  }
+
+  function subtractMonth() {
+    navDate = subMonths(navDate, 1);
+  }
+
+  function openCalendar() {
+    instance.open = true;
+  }
+
+  $: dateMonthEnds = endOfMonth(navDate).getDate();
+  $: dateMonthBegins = startOfMonth(navDate).getDay();
+  $: dayStart = dateMonthBegins + 1; //1 = sunday
+  $: monthAndYear = format(navDate, "MMMM y");
+  $: selectedDate = format(date, "dd/MM/yyyy");
+  $: dayOfSelectedDate = getDate(date);
+  $: for (let d = 1; d <= dateMonthEnds; d++) {
+    if (d === 1) {
+      daysArr = [d];
+    } else {
+      daysArr = [...daysArr, d];
+    }
+  }
+  $: rowRepeater =
+    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5;
+  $: sameMonthAndYear =
+    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate);
+  debugger;
 </script>
 
-<Textfield label="Select Date" />
-<Menu {open} />
+<style>
+  .bbmd-menu {
+    width: 310px;
+    height: auto;
+    padding: 5px;
+  }
+
+  .month-picker {
+    display: grid;
+    grid-template-columns: 20px 1fr 20px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .month-picker > span {
+    text-align: center;
+  }
+
+  .calendar-container {
+    display: grid;
+    height: 100%;
+    grid-template-rows: repeat(3, auto);
+    grid-gap: 5px;
+  }
+
+  .calendar-container > div {
+    /* border: 1px solid red; */
+  }
+
+  .week-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .day-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .centreText {
+    text-align: center;
+  }
+
+  span {
+    margin: auto;
+  }
+</style>
+
+<!-- 
+  TODO: Add trailing icon button on textfield that is clickable
+  TODO: Add transition effects to toggling of calendar
+  TODO: Bug - August 2020 has too many rows. find out why
+  TODO: Bug - make out transition of date bg colour instantaneous
+ -->
+<div class="mdc-menu-surface--anchor">
+  <Textfield
+    bind:tfHeight={textFieldHeight}
+    value={selectedDate}
+    trailingIcon={true}
+    useIconButton={true}
+    iconButtonClick={openCalendar}
+    icon="calendar_today"
+    label="Select Date" />
+
+  <div
+    bind:this={menu}
+    class="mdc-menu mdc-menu-surface bbmd-menu"
+    style={`margin-top: ${textFieldHeight + 15}px`}>
+    <div class="calendar-container">
+      <div class="month-picker">
+        <span>
+          <Icon icon="chevron_left" onClick={subtractMonth} />
+        </span>
+        <div class="centreText">
+          <Body1 text={monthAndYear} />
+        </div>
+        <span>
+          <Icon icon="chevron_right" onClick={addMonth} />
+        </span>
+      </div>
+      <div class="week-days">
+        {#each weekdayMap as day, i}
+          <div class="centreText">
+            <Caption text={day} />
+          </div>
+        {/each}
+      </div>
+      <div
+        class="day-picker"
+        style={`grid-template-rows: repeat(${rowRepeater}, 40px)`}>
+        {#each daysArr as day, i}
+          <div
+            use:ripple
+            on:click={() => selectDate(day)}
+            class={`bbmd-day ${dayOfSelectedDate === day && sameMonthAndYear ? 'selected' : ''}`}>
+            {#if i === 0}
+              <div style={`grid-column-start: ${dateMonthBegins}`}>
+                <Body2 text={day} />
+              </div>
+            {:else}
+              <Body2 text={day} />
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <ul class="mdc-list" role="menu" />
+  </div>
+</div>
diff --git a/packages/materialdesign-components/src/DatePicker/_style.scss b/packages/materialdesign-components/src/DatePicker/_style.scss
new file mode 100644
index 0000000000..8257eb7409
--- /dev/null
+++ b/packages/materialdesign-components/src/DatePicker/_style.scss
@@ -0,0 +1,15 @@
+@import "@material/ripple/mdc-ripple.scss";
+@import "@material/theme/mixins";
+
+.bbmd-day {
+  transition: background-color 0.5s ease-in;
+  display: flex;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.selected {
+  @include mdc-theme-prop(background-color, primary);
+  @include mdc-theme-prop(color, on-primary);
+}
diff --git a/packages/materialdesign-components/src/DatePicker/index.js b/packages/materialdesign-components/src/DatePicker/index.js
index 76af457b24..de6a6e1f09 100644
--- a/packages/materialdesign-components/src/DatePicker/index.js
+++ b/packages/materialdesign-components/src/DatePicker/index.js
@@ -1 +1,2 @@
-export { default as DatePicker } from "./DatePicker.svelte"
+import "./_style.scss";
+export { default as DatePicker } from "./DatePicker.svelte";
diff --git a/packages/materialdesign-components/src/IconButton/IconButton.svelte b/packages/materialdesign-components/src/IconButton/IconButton.svelte
new file mode 100644
index 0000000000..bbadade28e
--- /dev/null
+++ b/packages/materialdesign-components/src/IconButton/IconButton.svelte
@@ -0,0 +1,40 @@
+<script>
+  import ripple from "../Ripple.js";
+  import ClassBuilder from "../ClassBuilder.js";
+
+  const cb = new ClassBuilder("icon-button");
+
+  export let onClick = () => {};
+  export let disabled = false;
+  export let href = "";
+  export let icon = "";
+  export let onIcon = ""; //on state icon for toggle button
+  export let size = "medium";
+
+  $: isToggleButton = !!icon && !!onIcon;
+  $: useLinkButton = !!href;
+
+  $: customs = { size };
+  $: props = { customs, extras: ["material-icons"] };
+  $: iconBtnClass = cb.build({ props });
+</script>
+
+{#if useLinkButton}
+  <a on:click={onClick} class={iconBtnClass} {href} {disabled}>
+    {#if isToggleButton}
+      <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+        {onIcon}
+      </i>
+      <i class="material-icons mdc-icon-button__icon">{icon}</i>
+    {:else}{icon}{/if}
+  </a>
+{:else}
+  <button on:click={onClick} use:ripple class={iconBtnClass} {disabled}>
+    {#if isToggleButton}
+      <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+        {onIcon}
+      </i>
+      <i class="material-icons mdc-icon-button__icon">{icon}</i>
+    {:else}{icon}{/if}
+  </button>
+{/if}
diff --git a/packages/materialdesign-components/src/IconButton/_style.scss b/packages/materialdesign-components/src/IconButton/_style.scss
new file mode 100644
index 0000000000..587374638f
--- /dev/null
+++ b/packages/materialdesign-components/src/IconButton/_style.scss
@@ -0,0 +1,13 @@
+@import "@material/icon-button/mdc-icon-button";
+
+.bbmd-mdc-icon-button--size-large {
+  @include mdc-icon-button-icon-size(24px);
+}
+
+.bbmd-mdc-icon-button--size-medium {
+  @include mdc-icon-button-icon-size(20px);
+}
+
+.bbmd-mdc-icon-button--size-small {
+  @include mdc-icon-button-icon-size(16px);
+}
diff --git a/packages/materialdesign-components/src/IconButton/index.js b/packages/materialdesign-components/src/IconButton/index.js
new file mode 100644
index 0000000000..697e69f10c
--- /dev/null
+++ b/packages/materialdesign-components/src/IconButton/index.js
@@ -0,0 +1,2 @@
+import "./_style.scss";
+export { default as IconButton } from "./IconButton.svelte";
diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte
index 7d2c40c3d0..8439128208 100644
--- a/packages/materialdesign-components/src/Menu/Menu.svelte
+++ b/packages/materialdesign-components/src/Menu/Menu.svelte
@@ -39,7 +39,6 @@
   })
 
   $: menuList && _bb.attachChildren(menuList)
-  debugger
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 7de3141e54..7285876317 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -13,6 +13,7 @@
   const cb = new ClassBuilder("text-field", ["primary", "medium"])
 
   let tf = null
+  export let tfHeight = null
   let tfInstance = null
 
   onMount(() => {
@@ -105,7 +106,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
  -->
 
 <div class="textfield-container" class:fullwidth>
-  <div bind:this={tf} class={blockClasses}>
+  <div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
     {#if textarea}
       <CharacterCounter />
       <textarea
diff --git a/packages/materialdesign-components/src/Typography/Caption.svelte b/packages/materialdesign-components/src/Typography/Caption.svelte
index 17d60048d3..84c8c39d61 100644
--- a/packages/materialdesign-components/src/Typography/Caption.svelte
+++ b/packages/materialdesign-components/src/Typography/Caption.svelte
@@ -2,4 +2,4 @@
   export let text = ""
 </script>
 
-<div class="mdc-typography--caption">{text}</div>
+<span class="mdc-typography--caption">{text}</span>
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 7575f19786..13cf4fb2ca 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -20,3 +20,4 @@ export { List, ListItem } from "./List"
 export { Menu } from "./Menu"
 export { Select } from "./Select"
 export { DatePicker } from "./DatePicker"
+export { IconButton } from "./IconButton"
diff --git a/yarn.lock b/yarn.lock
index 0daff7db37..7a11b53ea3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -756,6 +756,62 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@material/animation@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-4.0.0.tgz#19eaf377809f20978f8452a4237d27867d3ffd1d"
+  integrity sha512-IfzXzstWdtKQcsNWu+s2Hpz5dBwkTHtgtzoesr+FC7TqENH+SJdsF1ntnZI1XVi2C9ZlBf7f4BSmXpWHD0MIlw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/base@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-4.0.0.tgz#535574d0b63c18892cfb70e88b27bc8f8090677a"
+  integrity sha512-vHm7fkqXzjdfxifXvlmaZColoIfKuWmO+1rvdzDORTWP+A8Dq70cgKd2I1SBqxzDGjOasMzHbQI6f9MISQf2vQ==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/dom@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-4.0.0.tgz#f0e68c4429e555040304c958bb3e11614276fdfa"
+  integrity sha512-GRCJT9+PGWqygZwGf1XLTrbmzP35YWG7+T0hpfhoIJO8VDiMTeyfvhJXFuA2wh9pD0noEjte0lmbdBlykrbWZw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/feature-targeting@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-4.0.0.tgz#8d9d1470801a1fd166773731613d9fa89e0fd85e"
+  integrity sha512-0gk+f151vqmEdWkrQ9ocPlQRU9aUtSGsVBhletqIbsthLUsZIz9qk25FHjV1wHd/bGHknd9NH+T8ENprv3KLFg==
+
+"@material/icon-button@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/icon-button/-/icon-button-4.0.0.tgz#f7293462f1b4967712f9b8755b87c2228dcccc3d"
+  integrity sha512-b1SyWtr2cwlKgIVo+irxRgW0lpIzauADLAxQEJ8/RTO9qVFviohJUnS+5QQCkC5zex5Q52OmQ+aNl0KRjkUdvQ==
+  dependencies:
+    "@material/base" "^4.0.0"
+    "@material/feature-targeting" "^4.0.0"
+    "@material/ripple" "^4.0.0"
+    "@material/theme" "^4.0.0"
+    tslib "^1.9.3"
+
+"@material/ripple@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-4.0.0.tgz#906ba421a3e6c68651d829d44c50a95060aa1e75"
+  integrity sha512-9BLIOvyCP5sM+fQpLlcJZWyrHguusJq8E5A1pxg0wQwputOyaPBM7recHhYkJmVjzRpTcPgf1PkvkpN6DKGcNg==
+  dependencies:
+    "@material/animation" "^4.0.0"
+    "@material/base" "^4.0.0"
+    "@material/dom" "^4.0.0"
+    "@material/feature-targeting" "^4.0.0"
+    "@material/theme" "^4.0.0"
+    tslib "^1.9.3"
+
+"@material/theme@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-4.0.0.tgz#8de388fcdbae20fd09b02a3bdef3049bf2f623a8"
+  integrity sha512-vS4G4rusJTatTH50kSYO1U3UGN8EY9kGRvPaFsEFKikJBOqcR6KWK9H9/wCLqqd6nDNifEj9H2sdWw1AV4NA6Q==
+  dependencies:
+    "@material/feature-targeting" "^4.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1630,6 +1686,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.10.0.tgz#abd10604d8bafb0bcbd2ba2e9b0563b922ae4b6b"
+  integrity sha512-EhfEKevYGWhWlZbNeplfhIU/+N+x0iCIx7VzKlXma2EdQyznVlZhCptXUY+BegNpPW2kjdx15Rvq503YcXXrcA==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"

From 8f3c00bc81c2bf1f61d28935c3721370a846bd18 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 11 Mar 2020 16:28:09 +0000
Subject: [PATCH 3/9] Datepicker and icon bug fixes

---
 .../materialdesign-components/package.json    |   2 +
 .../src/Common/Icon.svelte                    |  21 --
 .../src/DatePicker/DatePicker.svelte          | 182 +++++++++---------
 .../src/IconButton/IconButton.svelte          |  49 +++--
 .../src/IconButton/_style.scss                |  22 ++-
 .../src/Test/TestApp.svelte                   |   2 +-
 .../src/Test/props.js                         |   3 +-
 .../src/Textfield/Textfield.svelte            |  22 ++-
 8 files changed, 158 insertions(+), 145 deletions(-)

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 576aebeed5..f21c6c8d6b 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -18,6 +18,7 @@
     "@material/checkbox": "^4.0.0",
     "@material/data-table": "4.0.0",
     "@material/form-field": "^4.0.0",
+    "@material/icon-button": "4.0.0",
     "@material/list": "4.0.0",
     "@material/menu": "4.0.0",
     "@material/radio": "^4.0.0",
@@ -25,6 +26,7 @@
     "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
+    "date-fns": "^2.10.0",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.15",
     "npm-run-all": "^4.1.5",
diff --git a/packages/materialdesign-components/src/Common/Icon.svelte b/packages/materialdesign-components/src/Common/Icon.svelte
index bb2ac8d957..d4820fcf6c 100644
--- a/packages/materialdesign-components/src/Common/Icon.svelte
+++ b/packages/materialdesign-components/src/Common/Icon.svelte
@@ -1,31 +1,10 @@
 <script>
   import { getContext } from "svelte"
-  import ripple from "../Ripple.js"
 
-  export let onClick = null
   export let icon = ""
   export let context = ""
 
   let cls = !!context ? `material-icons mdc-${context}__icon` : "material-icons"
-
-  $: useRipple = onClick !== null
 </script>
 
 <i class={cls}>{icon}</i>
-{#if useRipple}
-  <div use:ripple>
-    <i on:click={onClick} class={cls}>{icon}</i>
-  </div>
-{:else}
-  <i class={cls}>{icon}</i>
-{/if}
-
-<style>
-  div {
-    border-radius: 50%;
-    padding-top: 2px;
-    width: fit-content;
-    height: fit-content;
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
index e5b693de6e..142805533f 100644
--- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount } from "svelte"
   import {
     startOfMonth,
     endOfMonth,
@@ -8,121 +8,73 @@
     getYear,
     addMonths,
     subMonths,
-    format
-  } from "date-fns";
-  import { MDCMenu } from "@material/menu";
-  import { Textfield } from "../Textfield";
-  import Icon from "../Common/Icon.svelte";
-  import ripple from "../Ripple.js";
-  import { Body1, Body2, Caption } from "../Typography";
+    format,
+  } from "date-fns"
+  import { MDCMenu } from "@material/menu"
+  import { Textfield } from "../Textfield"
+  import Icon from "../Common/Icon.svelte"
+  import ripple from "../Common/Ripple.js"
+  import { Body1, Body2, Caption } from "../Typography"
+  import { IconButton } from "../IconButton"
 
-  let textFieldHeight = null;
-  let menu;
-  let instance;
+  let textFieldHeight = null
+  let menu
+  let instance
 
-  let daysArr = [];
-  let navDate = new Date();
-  const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  let daysArr = []
+  let navDate = new Date()
+  const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
 
-  export let date = new Date();
-  export let open = true;
+  export let date = new Date()
+  export let open = true
 
   onMount(() => {
     if (!!menu) {
-      instance = new MDCMenu(menu);
-      instance.open = true;
-      instance.setFixedPostion = true;
+      instance = new MDCMenu(menu)
+      instance.open = true
+      instance.setFixedPostion = true
     }
-  });
+  })
 
   function selectDate(dayOfMonth) {
-    let month = getMonth(navDate);
-    let year = getYear(navDate);
-    date = new Date(year, month, dayOfMonth);
+    let month = getMonth(navDate)
+    let year = getYear(navDate)
+    date = new Date(year, month, dayOfMonth)
   }
 
   function addMonth() {
-    navDate = addMonths(navDate, 1);
+    navDate = addMonths(navDate, 1)
   }
 
   function subtractMonth() {
-    navDate = subMonths(navDate, 1);
+    navDate = subMonths(navDate, 1)
   }
 
   function openCalendar() {
-    instance.open = true;
+    instance.open = true
   }
 
-  $: dateMonthEnds = endOfMonth(navDate).getDate();
-  $: dateMonthBegins = startOfMonth(navDate).getDay();
-  $: dayStart = dateMonthBegins + 1; //1 = sunday
-  $: monthAndYear = format(navDate, "MMMM y");
-  $: selectedDate = format(date, "dd/MM/yyyy");
-  $: dayOfSelectedDate = getDate(date);
+  $: dateMonthEnds = endOfMonth(navDate).getDate()
+  $: dateMonthBegins = startOfMonth(navDate).getDay()
+  $: dayStart = dateMonthBegins + 1 //1 = sunday
+  $: monthAndYear = format(navDate, "MMMM y")
+  $: selectedDate = format(date, "dd/MM/yyyy")
+  $: dayOfSelectedDate = getDate(date)
   $: for (let d = 1; d <= dateMonthEnds; d++) {
     if (d === 1) {
-      daysArr = [d];
+      daysArr = [d]
     } else {
-      daysArr = [...daysArr, d];
+      daysArr = [...daysArr, d]
     }
   }
   $: rowRepeater =
-    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5;
+    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
   $: sameMonthAndYear =
-    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate);
-  debugger;
+    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
+  $: console.log(textFieldHeight)
 </script>
 
-<style>
-  .bbmd-menu {
-    width: 310px;
-    height: auto;
-    padding: 5px;
-  }
-
-  .month-picker {
-    display: grid;
-    grid-template-columns: 20px 1fr 20px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .month-picker > span {
-    text-align: center;
-  }
-
-  .calendar-container {
-    display: grid;
-    height: 100%;
-    grid-template-rows: repeat(3, auto);
-    grid-gap: 5px;
-  }
-
-  .calendar-container > div {
-    /* border: 1px solid red; */
-  }
-
-  .week-days {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-  }
-
-  .day-picker {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-  }
-
-  .centreText {
-    text-align: center;
-  }
-
-  span {
-    margin: auto;
-  }
-</style>
-
 <!-- 
-  TODO: Add trailing icon button on textfield that is clickable
   TODO: Add transition effects to toggling of calendar
   TODO: Bug - August 2020 has too many rows. find out why
   TODO: Bug - make out transition of date bg colour instantaneous
@@ -140,18 +92,18 @@
   <div
     bind:this={menu}
     class="mdc-menu mdc-menu-surface bbmd-menu"
-    style={`margin-top: ${textFieldHeight + 15}px`}>
+    style={`margin-top: 70px`}>
     <div class="calendar-container">
       <div class="month-picker">
-        <span>
-          <Icon icon="chevron_left" onClick={subtractMonth} />
-        </span>
+        <div>
+          <IconButton icon="chevron_left" onClick={subtractMonth} />
+        </div>
         <div class="centreText">
           <Body1 text={monthAndYear} />
         </div>
-        <span>
-          <Icon icon="chevron_right" onClick={addMonth} />
-        </span>
+        <div>
+          <IconButton icon="chevron_right" onClick={addMonth} />
+        </div>
       </div>
       <div class="week-days">
         {#each weekdayMap as day, i}
@@ -183,3 +135,47 @@
     <ul class="mdc-list" role="menu" />
   </div>
 </div>
+
+<style>
+  .bbmd-menu {
+    width: 330px;
+    height: auto;
+    padding: 5px;
+  }
+
+  .month-picker {
+    display: grid;
+    grid-template-columns: 40px 1fr 40px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .calendar-container {
+    display: grid;
+    height: 100%;
+    grid-template-rows: repeat(3, auto);
+    grid-gap: 5px;
+  }
+
+  .calendar-container > div {
+    /* border: 1px solid red; */
+  }
+
+  .week-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .day-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .centreText {
+    text-align: center;
+  }
+
+  span {
+    margin: auto;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/IconButton/IconButton.svelte b/packages/materialdesign-components/src/IconButton/IconButton.svelte
index bbadade28e..13a2c899f0 100644
--- a/packages/materialdesign-components/src/IconButton/IconButton.svelte
+++ b/packages/materialdesign-components/src/IconButton/IconButton.svelte
@@ -1,40 +1,51 @@
 <script>
-  import ripple from "../Ripple.js";
-  import ClassBuilder from "../ClassBuilder.js";
+  import ripple from "../Common/Ripple.js"
+  import ClassBuilder from "../ClassBuilder.js"
 
-  const cb = new ClassBuilder("icon-button");
+  const cb = new ClassBuilder("icon-button")
 
-  export let onClick = () => {};
-  export let disabled = false;
-  export let href = "";
-  export let icon = "";
-  export let onIcon = ""; //on state icon for toggle button
-  export let size = "medium";
+  export let _bb
+  export let context = ""
+  export let onClick = () => {}
+  export let disabled = false
+  export let href = ""
+  export let icon = ""
+  export let onIcon = "" //on state icon for toggle button
+  export let size = "medium"
 
-  $: isToggleButton = !!icon && !!onIcon;
-  $: useLinkButton = !!href;
+  $: isToggleButton = !!icon && !!onIcon
+  $: useLinkButton = !!href
 
-  $: customs = { size };
-  $: props = { customs, extras: ["material-icons"] };
-  $: iconBtnClass = cb.build({ props });
+  $: customs = { size }
+  $: props = { customs, extras: ["material-icons", context] }
+  $: iconBtnClass = cb.build({ props })
 </script>
 
 {#if useLinkButton}
   <a on:click={onClick} class={iconBtnClass} {href} {disabled}>
     {#if isToggleButton}
-      <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+      <i
+        use:ripple
+        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
         {onIcon}
       </i>
-      <i class="material-icons mdc-icon-button__icon">{icon}</i>
+      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
     {:else}{icon}{/if}
   </a>
 {:else}
-  <button on:click={onClick} use:ripple class={iconBtnClass} {disabled}>
+  <button
+    on:click={onClick}
+    class={iconBtnClass}
+    {disabled}
+    role="button"
+    tabindex="0">
     {#if isToggleButton}
-      <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+      <i
+        use:ripple
+        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
         {onIcon}
       </i>
-      <i class="material-icons mdc-icon-button__icon">{icon}</i>
+      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
     {:else}{icon}{/if}
   </button>
 {/if}
diff --git a/packages/materialdesign-components/src/IconButton/_style.scss b/packages/materialdesign-components/src/IconButton/_style.scss
index 587374638f..d37efeea79 100644
--- a/packages/materialdesign-components/src/IconButton/_style.scss
+++ b/packages/materialdesign-components/src/IconButton/_style.scss
@@ -1,13 +1,19 @@
 @import "@material/icon-button/mdc-icon-button";
 
-.bbmd-mdc-icon-button--size-large {
-  @include mdc-icon-button-icon-size(24px);
+.mdc-icon-button {
+
+
+  &.bbmd-mdc-icon-button--size-large {
+    @include mdc-icon-button-icon-size(24px);
+  }
+  
+  &.bbmd-mdc-icon-button--size-medium {
+    @include mdc-icon-button-icon-size(20px);
+  }
+  
+  &.bbmd-mdc-icon-button--size-small {
+    @include mdc-icon-button-icon-size(16px);
+  }
 }
 
-.bbmd-mdc-icon-button--size-medium {
-  @include mdc-icon-button-icon-size(20px);
-}
 
-.bbmd-mdc-icon-button--size-small {
-  @include mdc-icon-button-icon-size(16px);
-}
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index f011be3089..ef3844d4da 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -29,13 +29,13 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            DatePicker,
             Button,
             BodyBoundToStore,
             Textfield,
             Select,
             Radiobutton,
             Radiobuttongroup,
+            DatePicker,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index e1f148c963..ceefd61893 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -207,7 +207,8 @@ export const props = {
     ],
   },
   DatePicker: {
-    _component: "@budibase/materialdesign-components/ListItem",
+    _component: "@budibase/materialdesign-components/DatePicker",
     _children: [],
+    open: true,
   },
 }
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 7285876317..0cbea49529 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -9,11 +9,13 @@
   import HelperText from "./HelperText.svelte"
   import CharacterCounter from "./CharacterCounter.svelte"
   import Icon from "../Common/Icon.svelte"
+  import { IconButton } from "../IconButton"
 
   const cb = new ClassBuilder("text-field", ["primary", "medium"])
 
   let tf = null
   export let tfHeight = null
+  $: console.log("TF", tfHeight)
   let tfInstance = null
 
   onMount(() => {
@@ -41,6 +43,8 @@
   export let placeholder = ""
   export let icon = ""
   export let trailingIcon = false
+  export let useIconButton = false
+  export let iconButtonClick = () => {}
   export let textarea = false
   export let rows = 4
   export let cols = 40
@@ -124,7 +128,14 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:change={changed} />
     {:else}
       {#if renderLeadingIcon}
-        <Icon context="text-field" {icon} />
+        {#if useIconButton}
+          <IconButton
+            {icon}
+            context="mdc-text-field__icon mdc-text-field__icon--leading"
+            onClick={iconButtonClick} />
+        {:else}
+          <Icon context="text-field" {icon} />
+        {/if}
       {/if}
       <input
         {id}
@@ -140,7 +151,14 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:focus={focus}
         on:input={changed} />
       {#if renderTrailingIcon}
-        <Icon context="text-field" {icon} />
+        {#if useIconButton}
+          <IconButton
+            {icon}
+            context="mdc-text-field__icon mdc-text-field__icon--trailing"
+            onClick={iconButtonClick} />
+        {:else}
+          <Icon context="text-field" {icon} />
+        {/if}
       {/if}
       {#if variant !== 'outlined'}
         <div class="mdc-line-ripple" />

From 8076840fe18c3def9d91475829391671ffab8129 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Thu, 12 Mar 2020 14:07:20 +0000
Subject: [PATCH 4/9] Adding onChange functionality for typing date in field
 and tidy up

---
 .../materialdesign-components/components.json | 22 ++++++++
 .../src/DatePicker/DatePicker.svelte          | 55 +++++++++----------
 .../src/DatePicker/_style.scss                |  2 +-
 .../src/IconButton/IconButton.svelte          | 41 +++++++++-----
 .../src/IconButton/_style.scss                |  1 -
 .../src/Test/TestApp.svelte                   |  2 +
 .../src/Test/props.js                         |  8 ++-
 .../src/Textfield/Textfield.svelte            | 10 ++--
 8 files changed, 91 insertions(+), 50 deletions(-)

diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index 0028b39545..d017e54b11 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -169,6 +169,16 @@
     "description": "Material Design <tr>.",
     "props": {}
   },
+  "DatePicker": {
+    "name": "DatePicker",
+    "description": "Material Design DatePicker",
+    "props": {
+      "date": "string",
+      "label": "string",
+      "onSelect": "event"
+    },
+    "tags": []
+  },
   "H1": {
     "name": "H1",
     "description": "Sets the font properties as Roboto Headline1",
@@ -217,6 +227,18 @@
     },
     "tags": []
   },
+  "IconButton": {
+    "onClick": "event",
+    "disabled": "bool",
+    "href": "string",
+    "icon": "string",
+    "size": {
+      "type":"options",
+      "options": ["small", "medium", "large"],
+      "default": "medium"
+    },
+    "tags": []
+  },
   "Label": {
     "name": "Label",
     "description": "A simple label component that displays its text in the standard Roboto Material Design font",
diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
index 142805533f..d43cbc072e 100644
--- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@@ -17,21 +17,22 @@
   import { Body1, Body2, Caption } from "../Typography"
   import { IconButton } from "../IconButton"
 
-  let textFieldHeight = null
   let menu
   let instance
+  let textfieldValue = ""
 
   let daysArr = []
   let navDate = new Date()
   const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
 
   export let date = new Date()
-  export let open = true
+  export let label = ""
+  export let onSelect = selectedDate => {}
 
   onMount(() => {
     if (!!menu) {
       instance = new MDCMenu(menu)
-      instance.open = true
+      instance.open = false
       instance.setFixedPostion = true
     }
   })
@@ -40,6 +41,7 @@
     let month = getMonth(navDate)
     let year = getYear(navDate)
     date = new Date(year, month, dayOfMonth)
+    onSelect(date)
   }
 
   function addMonth() {
@@ -50,8 +52,21 @@
     navDate = subMonths(navDate, 1)
   }
 
-  function openCalendar() {
-    instance.open = true
+  function openCalendar(isOpen) {
+    instance.open = isOpen === undefined ? !instance.open : isOpen
+  }
+
+  function textFieldChange(value) {
+    const isDate = /^\d{1,2}\/\d{1,2}\/\d{4}$/
+    if (isDate.test(value)) {
+      const [year, month, day] = value.split("/").reverse()
+      if (month > 0 && month <= 12 && (day > 0 && day <= 31)) {
+        date = new Date(year, month - 1, day)
+        navDate = date
+        openCalendar(true)
+        onSelect(date)
+      }
+    }
   }
 
   $: dateMonthEnds = endOfMonth(navDate).getDate()
@@ -71,23 +86,17 @@
     dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
   $: sameMonthAndYear =
     getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
-  $: console.log(textFieldHeight)
 </script>
 
-<!-- 
-  TODO: Add transition effects to toggling of calendar
-  TODO: Bug - August 2020 has too many rows. find out why
-  TODO: Bug - make out transition of date bg colour instantaneous
- -->
 <div class="mdc-menu-surface--anchor">
   <Textfield
-    bind:tfHeight={textFieldHeight}
+    {label}
+    onChange={textFieldChange}
     value={selectedDate}
     trailingIcon={true}
     useIconButton={true}
     iconButtonClick={openCalendar}
-    icon="calendar_today"
-    label="Select Date" />
+    icon="calendar_today" />
 
   <div
     bind:this={menu}
@@ -118,20 +127,16 @@
         {#each daysArr as day, i}
           <div
             use:ripple
+            style={i === 0 ? `grid-column-start: ${dayStart}` : ``}
             on:click={() => selectDate(day)}
             class={`bbmd-day ${dayOfSelectedDate === day && sameMonthAndYear ? 'selected' : ''}`}>
-            {#if i === 0}
-              <div style={`grid-column-start: ${dateMonthBegins}`}>
-                <Body2 text={day} />
-              </div>
-            {:else}
-              <Body2 text={day} />
-            {/if}
+            <Body2 text={day} />
           </div>
         {/each}
       </div>
     </div>
 
+    <!-- Superfluous but necessary to keep the menu instance sweet -->
     <ul class="mdc-list" role="menu" />
   </div>
 </div>
@@ -157,10 +162,6 @@
     grid-gap: 5px;
   }
 
-  .calendar-container > div {
-    /* border: 1px solid red; */
-  }
-
   .week-days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
@@ -174,8 +175,4 @@
   .centreText {
     text-align: center;
   }
-
-  span {
-    margin: auto;
-  }
 </style>
diff --git a/packages/materialdesign-components/src/DatePicker/_style.scss b/packages/materialdesign-components/src/DatePicker/_style.scss
index 8257eb7409..6cc1f5510a 100644
--- a/packages/materialdesign-components/src/DatePicker/_style.scss
+++ b/packages/materialdesign-components/src/DatePicker/_style.scss
@@ -2,7 +2,7 @@
 @import "@material/theme/mixins";
 
 .bbmd-day {
-  transition: background-color 0.5s ease-in;
+  transition: background-color .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   display: flex;
   border-radius: 50%;
   justify-content: center;
diff --git a/packages/materialdesign-components/src/IconButton/IconButton.svelte b/packages/materialdesign-components/src/IconButton/IconButton.svelte
index 13a2c899f0..57580776e3 100644
--- a/packages/materialdesign-components/src/IconButton/IconButton.svelte
+++ b/packages/materialdesign-components/src/IconButton/IconButton.svelte
@@ -4,6 +4,8 @@
 
   const cb = new ClassBuilder("icon-button")
 
+  let on = false
+
   export let _bb
   export let context = ""
   export let onClick = () => {}
@@ -13,6 +15,11 @@
   export let onIcon = "" //on state icon for toggle button
   export let size = "medium"
 
+  function onButtonClick() {
+    open = !open
+    onClick()
+  }
+
   $: isToggleButton = !!icon && !!onIcon
   $: useLinkButton = !!href
 
@@ -22,20 +29,10 @@
 </script>
 
 {#if useLinkButton}
-  <a on:click={onClick} class={iconBtnClass} {href} {disabled}>
-    {#if isToggleButton}
-      <i
-        use:ripple
-        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
-        {onIcon}
-      </i>
-      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
-    {:else}{icon}{/if}
-  </a>
-{:else}
-  <button
-    on:click={onClick}
+  <a
+    on:click={onButtonClick}
     class={iconBtnClass}
+    {href}
     {disabled}
     role="button"
     tabindex="0">
@@ -47,5 +44,23 @@
       </i>
       <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
     {:else}{icon}{/if}
+  </a>
+{:else}
+  <button
+    on:click={onButtonClick}
+    class={iconBtnClass}
+    {disabled}
+    role="button"
+    aria-label="Add to favorites"
+    aria-pressed="false"
+    tabindex="0">
+    {#if isToggleButton}
+      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
+      <i
+        use:ripple
+        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+        {onIcon}
+      </i>
+    {:else}{icon}{/if}
   </button>
 {/if}
diff --git a/packages/materialdesign-components/src/IconButton/_style.scss b/packages/materialdesign-components/src/IconButton/_style.scss
index d37efeea79..412ea0ad6a 100644
--- a/packages/materialdesign-components/src/IconButton/_style.scss
+++ b/packages/materialdesign-components/src/IconButton/_style.scss
@@ -2,7 +2,6 @@
 
 .mdc-icon-button {
 
-
   &.bbmd-mdc-icon-button--size-large {
     @include mdc-icon-button-icon-size(24px);
   }
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index ef3844d4da..a84d0280d4 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -18,6 +18,7 @@
     List,
     Select,
     DatePicker,
+    IconButton,
   } = props
 
   let currentComponent
@@ -36,6 +37,7 @@
             Radiobutton,
             Radiobuttongroup,
             DatePicker,
+            IconButton,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index ceefd61893..e53441c8ce 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -209,6 +209,12 @@ export const props = {
   DatePicker: {
     _component: "@budibase/materialdesign-components/DatePicker",
     _children: [],
-    open: true,
+    label: "Date of Admission",
+    onSelect: date => console.log("SELECTED DATE", date)
+  },
+  IconButton: {
+    _component: "@budibase/materialdesign-components/IconButton",
+    _children: [],
+    icon: "calendar_today",
   },
 }
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 0cbea49529..36c4618df3 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -15,7 +15,6 @@
 
   let tf = null
   export let tfHeight = null
-  $: console.log("TF", tfHeight)
   let tfInstance = null
 
   onMount(() => {
@@ -98,10 +97,11 @@
   function changed(e) {
     const val = e.target.value
     value = val
-    if (_bb.isBound(_bb.props.value)) {
-      _bb.setStateFromBinding(_bb.props.value, val)
-    }
-    _bb.call(onChange, val)
+    onChange(value)
+    // if (_bb.isBound(_bb.props.value)) {
+    //   _bb.setStateFromBinding(_bb.props.value, val)
+    // }
+    // _bb.call(onChange, val)
   }
 </script>
 

From c469d765c5e991083e7c861926f4d182237ddde5 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 16 Mar 2020 18:18:42 +0000
Subject: [PATCH 5/9] global ui changes

Changes include:
Label font weights
Secondary color
Icon background colors
Positioning of icons
---
 packages/builder/src/budibase.css             |  7 ++---
 packages/builder/src/global.css               | 17 ++++++------
 packages/builder/src/nav/BackendNav.svelte    |  2 +-
 .../ComponentPropertiesPanel.svelte           | 27 +++++++++++++------
 .../ComponentsHierarchyChildren.svelte        |  2 +-
 .../ComponentsPaneSwitcher.svelte             |  4 +--
 .../src/userInterface/LayoutEditor.svelte     | 13 ++++-----
 .../LayoutTemplateControls.svelte             | 10 +++----
 .../src/userInterface/PagesList.svelte        |  4 +--
 .../src/userInterface/PropControl.svelte      |  6 ++---
 .../PropertyCascader/PropertyCascader.svelte  |  4 +--
 .../userInterface/UserInterfaceRoot.svelte    | 24 ++++++++++++-----
 12 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 30fb9fd02b..582e5bff7f 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -1,7 +1,8 @@
 /* Budibase Component Styles */
 .header {
     font-size: 0.75rem;
-    color: #999;
+    color: #000333;
+    opacity: 0.4;
     text-transform: uppercase;
     margin-top: 1rem;
     font-weight: 500;
@@ -68,7 +69,7 @@
 
 .budibase__nav-item.selected {
     color: var(--button-text);
-    background: var(--background-button) !important;
+    background: #fafafa !important;
 }
 
 .budibase__nav-item:hover {
@@ -82,7 +83,7 @@
     border: 1px solid #DBDBDB;
     text-align: left;
     letter-spacing: 0.7px;
-    color: #163057;
+    color: #000333;
     font-size: 16px;
     padding-left: 5px;
 }
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 745dee014c..15df05b3dc 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -9,12 +9,13 @@
     --primary5: #454ca00c;
     --primarydark: #3F448A;
 
-    --secondary100:#828fa5;
-    --secondary75: #162B4DBF;
-    --secondary50: #162B4D80;
-    --secondary25: #162B4D40;
-    --secondary10: #162B4D1A;
-    --secondary5:#fff;
+    --secondary100:#000333;
+    --secondary80: rgba(0, 3, 51, 0.8);
+    --secondary60: rgba(0, 3, 51, 0.6);
+    --secondary40: rgba(0, 3, 51, 0.4);
+    --secondary20: rgba(0, 3, 51, 0.2);
+    --secondary10: rgba(0, 3, 51, 0.1);
+    --secondary5: rgba(0, 3, 51, 0.05);
     --secondarydark: #3F448A;
 
     --tertiary: #F2F5F7;
@@ -61,7 +62,7 @@
 
 html, body {
     font-family: var(--fontnormal);
-    color: var(--secondary100);
+    color: var(--secondary80);
     padding: 0;
     margin: 0;
     height:100%;
@@ -83,7 +84,7 @@ h2 {
 h3 {
     font-family: var(--fontbold);
     font-size: 24pt;
-    color: var(--darkslate);
+    color: var(--secondary60);
 }
 
 h4 {
diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte
index 1da512d4eb..6956a8e2d8 100644
--- a/packages/builder/src/nav/BackendNav.svelte
+++ b/packages/builder/src/nav/BackendNav.svelte
@@ -99,7 +99,7 @@
     flex-direction: column;
     max-height: 100%;
     height: 100%;
-    background-color: var(--secondary5);
+    background-color: var(--white);
   }
 
   .nav-group-header {
diff --git a/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
index 4fa7b092bd..4e8f5a40f8 100644
--- a/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
@@ -162,38 +162,49 @@
   .component-props-container {
     margin-top: 10px;
     flex: 1 1 auto;
-    overflow-y: auto;
   }
 
   ul {
     list-style: none;
     display: flex;
+    justify-content: space-between;
     padding: 0;
   }
 
   li {
-    margin-right: 20px;
     background: none;
-    border-radius: 5px;
+    border-radius: 3px;
     width: 48px;
     height: 48px;
   }
 
+
+
   li button {
-    width: 100%;
-    height: 100%;
+    width: 48px;
+    height: 48px;
     background: none;
     border: none;
-    border-radius: 5px;
-    padding: 12px;
+    border-radius: 3px;
+    padding: 7px;
     outline: none;
     cursor: pointer;
     position: relative;
   }
 
+  li:nth-last-child(1) {
+    margin-right: 0px;
+    background: none;
+    border-radius: 3px;
+    width: 48px;
+    height: 48px;
+  }
+
   .selected {
     color: var(--button-text);
-    background: var(--background-button) !important;
+    background: #f9f9f9 !important;
+    width: 48px;
+    height: 48px;
   }
 
   .button-indicator {
diff --git a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
index 8a168ec11e..d62886ac55 100644
--- a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
@@ -94,7 +94,7 @@
     border-radius: 3px;
     height: 35px;
     align-items: center;
-    font-weight: normal;
+    font-weight: 400;
   }
 
   .item button {
diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
index d7abe25b6d..6cde6369ab 100644
--- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
@@ -46,7 +46,7 @@
 
     </div>
   {/if}
-
+ 
 </div>
 
 <style>
@@ -85,6 +85,6 @@
     flex: 1 1 auto;
     height: 0px;
     overflow-y: auto;
-    padding: 0 1.5rem 1.5rem 1.5rem;
+    padding: 0 20px 40px 20px;
   }
 </style>
diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte
index 44ae3c0d40..f48c1f3c77 100644
--- a/packages/builder/src/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/userInterface/LayoutEditor.svelte
@@ -136,7 +136,8 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 700;
-    color: #8997ab;
+    color: #000333;
+    opacity: 0.6;
     margin-bottom: 10px;
   }
 
@@ -144,16 +145,16 @@
     text-transform: uppercase;
     font-size: 10px;
     font-weight: 700;
-    color: #163057;
-    opacity: 0.3;
+    color: #000333;
+    opacity: 0.4;
     margin-bottom: 15px;
   }
 
   h5 {
     font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.6;
+    font-weight: 400;
+    color: #000333;
+    opacity: 0.8;
     padding-top: 12px;
     margin-bottom: 0;
   }
diff --git a/packages/builder/src/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/userInterface/LayoutTemplateControls.svelte
index 21c375abcc..dc1395bf0e 100644
--- a/packages/builder/src/userInterface/LayoutTemplateControls.svelte
+++ b/packages/builder/src/userInterface/LayoutTemplateControls.svelte
@@ -51,26 +51,26 @@
 <style>
   .selected {
     color: var(--button-text);
-    background: var(--background-button);
+    background: #f9f9f9;
+    opacity: 1;
   }
 
   button {
     cursor: pointer;
     outline: none;
     border: none;
-    border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
+    border-radius: 3px;
 
     min-width: 1.6rem;
     min-height: 1.6rem;
 
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
 
     font-size: 1.2rem;
     font-weight: 500;
-    color: rgba(22, 48, 87, 1);
+    color: #000333;
   }
 
   .inputs {
diff --git a/packages/builder/src/userInterface/PagesList.svelte b/packages/builder/src/userInterface/PagesList.svelte
index 64322e48af..1c57a00c41 100644
--- a/packages/builder/src/userInterface/PagesList.svelte
+++ b/packages/builder/src/userInterface/PagesList.svelte
@@ -46,7 +46,7 @@
   .root {
     padding-bottom: 10px;
     font-size: 0.9rem;
-    color: var(--secondary50);
+    color: #000333;
     font-weight: bold;
     position: relative;
     padding-left: 1.8rem;
@@ -79,6 +79,6 @@
   .icon {
     display: inline-block;
     width: 14px;
-    color: #333;
+    color: #000333;
   }
 </style>
diff --git a/packages/builder/src/userInterface/PropControl.svelte b/packages/builder/src/userInterface/PropControl.svelte
index aabd245ac2..63bcc22550 100644
--- a/packages/builder/src/userInterface/PropControl.svelte
+++ b/packages/builder/src/userInterface/PropControl.svelte
@@ -39,9 +39,9 @@
   h5 {
     word-wrap: break-word;
     font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.6;
+    font-weight: 400;
+    color: #000333;
+    opacity: 0.8;
     padding-top: 12px;
     margin-bottom: 0;
   }
diff --git a/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte b/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte
index 27f76b9356..4b51cab58b 100644
--- a/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte
+++ b/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte
@@ -91,9 +91,7 @@
     cursor: pointer;
     outline: none;
     border: none;
-    border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
-
+    border-radius: 3px;
     font-size: 1.6rem;
     font-weight: 700;
     color: rgba(22, 48, 87, 1);
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index 18ad131923..d946712df1 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -108,17 +108,28 @@
     padding: 0;
   }
 
+
+.root {
+  display: grid;
+  grid-template-columns: 275px 1fr 275px;
+  height: 100%;
+  width: 100%;
+  background: #fafafa;
+}
+
+@media only screen and (min-width: 1800px) {
   .root {
     display: grid;
-    grid-template-columns: 290px 1fr 350px;
+    grid-template-columns: 300px 1fr 300px;
     height: 100%;
     width: 100%;
     background: #fafafa;
   }
+}
 
   .ui-nav {
     grid-column: 1;
-    background-color: var(--secondary5);
+    background-color: var(--white);
     height: calc(100vh - 49px);
     padding: 0;
     overflow: hidden;
@@ -136,17 +147,18 @@
 
   .components-pane {
     grid-column: 3;
-    background-color: var(--secondary5);
+    background-color: var(--white);
     min-height: 0px;
     overflow-y: hidden;
   }
 
   .components-nav-header {
-    font-size: 0.75rem;
-    color: #999;
+    font-size: 12px;
+    color: #000333;
     text-transform: uppercase;
     margin-top: 1rem;
-    font-weight: 500;
+    font-weight: 700;
+    opacity: 0.6;
   }
 
   .nav-group-header {

From 74caf8496f2349a81d69412e22dd47f414040d21 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 17 Mar 2020 09:57:18 +0000
Subject: [PATCH 6/9] component nav tidy up

---
 packages/builder/src/common/PlusButton.svelte     |  4 +---
 packages/builder/src/common/Select.svelte         |  9 ++++-----
 packages/builder/src/global.css                   |  6 +++---
 .../userInterface/ComponentSelectionList.svelte   | 12 +++++-------
 .../userInterface/ComponentsPaneSwitcher.svelte   | 15 ++++++++-------
 5 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte
index 5baca63715..6e2e4cf58a 100644
--- a/packages/builder/src/common/PlusButton.svelte
+++ b/packages/builder/src/common/PlusButton.svelte
@@ -8,8 +8,6 @@
     outline: none;
     border: none;
     border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
-
     min-width: 1.8rem;
     min-height: 1.8rem;
     padding-bottom: 10px;
@@ -20,6 +18,6 @@
 
     font-size: 1.2rem;
     font-weight: 700;
-    color: rgba(22, 48, 87, 1);
+    color: var(--secondary100);
   }
 </style>
diff --git a/packages/builder/src/common/Select.svelte b/packages/builder/src/common/Select.svelte
index e360c1c4d6..de0c57fc41 100644
--- a/packages/builder/src/common/Select.svelte
+++ b/packages/builder/src/common/Select.svelte
@@ -23,11 +23,11 @@
   }
 
   select {
-    height: 35px;
+    height: 40px;
     display: block;
     font-family: sans-serif;
-    font-weight: 500;
-    color: #163057;
+    font-weight: 400;
+    color: #000333;
     padding: 0 2.6em 0em 1.4em;
     width: 100%;
     max-width: 100%;
@@ -36,8 +36,7 @@
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
-    background: #fff;
-    border: 1px solid #ccc;
+    background: var(--lightslate);
   }
 
   .arrow {
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 15df05b3dc..003294ee26 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -36,8 +36,8 @@
 
     --white: #FFFFFF;
     --darkslate: #1a202c;
-    --slate: #a0aec0;
-    --lightslate: #f7fafc;
+    --slate: #d8d8d8;
+    --lightslate: #f9f9f9;
 
     --borderradius: 2px;
     --borderradiusall: 2px 2px 2px 2px;
@@ -56,7 +56,7 @@
     --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
     --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
 
-    --background-button: #e6eeff;
+    --background-button: #f9f9f9;
     --button-text: #0055ff;
 }
 
diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte
index b123350f10..34e0ca8d33 100644
--- a/packages/builder/src/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte
@@ -239,12 +239,12 @@
     position: relative;
     padding: 0 15px;
     cursor: pointer;
-    border: 1px solid #ebebeb;
+    border: 1px solid #d8d8d8;
     border-radius: 2px;
     margin: 5px 0;
     height: 40px;
     box-sizing: border-box;
-    color: #163057;
+    color: #000333;
     display: flex;
     align-items: center;
     flex: 1;
@@ -256,11 +256,10 @@
   }
 
   .component > .name {
-    color: #163057;
+    color: #000333;
     display: inline-block;
     font-size: 12px;
-    font-weight: bold;
-    opacity: 0.6;
+    opacity: 0.8;
   }
 
   ul {
@@ -279,12 +278,11 @@
     background: #fafafa;
     padding: 10px;
     border-radius: 2px;
-    color: rgba(22, 48, 87, 0.6);
+    color:var(--secondary80);
   }
 
   .preset-menu > span {
     font-size: 12px;
-    font-weight: bold;
     text-transform: uppercase;
     margin-top: 5px;
   }
diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
index 6cde6369ab..504ff18372 100644
--- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
@@ -54,14 +54,15 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 2rem 0;
+    padding: 20px 0;
   }
 
   .switcher {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 25px;
-    padding: 0 1.5rem;
+    margin-bottom: 20px;
+    padding: 0 20px 20px;
+    border-bottom: 1px solid #d8d8d8;
   }
 
   .switcher > button {
@@ -70,15 +71,15 @@
     margin: 0;
     padding: 0;
     cursor: pointer;
-    font-weight: 600;
     font-size: 0.85rem;
+    font-weight: 400;
     text-transform: uppercase;
-    color: #999;
-    background-color: rgba(0, 0, 0, 0);
+    color: var(--secondary60);
   }
 
   .switcher > .selected {
-    color: #333;
+    color: var(--secondary100);
+    font-weight: 500;
   }
 
   .panel {

From 54317f3d53c1f74a22befbbb9d067cb05161edb6 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 17 Mar 2020 11:16:49 +0000
Subject: [PATCH 7/9] color change

---
 packages/standard-components/src/Button.svelte | 5 ++---
 packages/standard-components/src/Login.svelte  | 7 +++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index d4bcd7b354..10f66d9311 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -78,13 +78,12 @@
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 2px;
-    color: #333;
-    background-color: #f4f4f4;
+    color: #000333;
     outline: none;
   }
 
   .default:active {
-    background-color: #ddd;
+    background-color: #f9f9f9;
   }
 
   .default:focus {
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index b3f6f36779..501023d83e 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -155,16 +155,15 @@
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 2px;
-    color: #333;
-    background-color: #f4f4f4;
+    color: #000333;
     outline: none;
   }
 
   .default-button:active {
-    background-color: #ddd;
+    background-color: #f9f9f9;
   }
 
   .default-button:focus {
-    border-color: #666;
+    border-color: #f9f9f9;
   }
 </style>

From 217906c7df0e5f61c26db3b0a1e8754ffda62eea Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 19 Mar 2020 09:34:23 +0000
Subject: [PATCH 8/9] navigator panel touch ups

the current navigator panel design contains the wrong colors, padding, etc. This resolves that.
---
 packages/builder/src/budibase.css             |  2 +-
 .../ComponentsPaneSwitcher.svelte             |  2 +-
 .../src/userInterface/PropControl.svelte      |  1 +
 .../userInterface/UserInterfaceRoot.svelte    | 38 +++++++++++--------
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 582e5bff7f..7a82999241 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -59,7 +59,7 @@
     cursor: pointer;
     padding: 0 7px 0 3px;
     height: 35px;
-    margin: 5px 0;
+    margin: 5px 20px 5px 0px;
     border-radius: 0 5px 5px 0;
     display: flex;
     align-items: center;
diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
index 504ff18372..12c0206407 100644
--- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
@@ -71,7 +71,7 @@
     margin: 0;
     padding: 0;
     cursor: pointer;
-    font-size: 0.85rem;
+    font-size: 14px;
     font-weight: 400;
     text-transform: uppercase;
     color: var(--secondary60);
diff --git a/packages/builder/src/userInterface/PropControl.svelte b/packages/builder/src/userInterface/PropControl.svelte
index 63bcc22550..7106245428 100644
--- a/packages/builder/src/userInterface/PropControl.svelte
+++ b/packages/builder/src/userInterface/PropControl.svelte
@@ -34,6 +34,7 @@
     grid-template-rows: 1fr;
     grid-template-columns: 70px 1fr;
     grid-gap: 10px;
+    align-items: baseline;
   }
 
   h5 {
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index d946712df1..8fd3039eb5 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -43,7 +43,9 @@
     <div class="pages-list-container">
       <div class="nav-header">
         <span class="navigator-title">Navigator</span>
-        <span class="components-nav-header">Pages</span>
+          <div class="border-line" />
+
+        <span class="components-nav-page">Pages</span>
       </div>
 
       <div class="nav-items-container">
@@ -152,25 +154,29 @@
     overflow-y: hidden;
   }
 
-  .components-nav-header {
+  .components-nav-page {
     font-size: 12px;
     color: #000333;
     text-transform: uppercase;
-    margin-top: 1rem;
+    padding-left: 20px;
+    margin-top: 20px;
     font-weight: 700;
     opacity: 0.6;
   }
 
-  .nav-group-header {
-    font-size: 0.9rem;
-    padding-left: 1rem;
+  .components-nav-header {
+    font-size: 12px;
+    color: #000333;
+    text-transform: uppercase;
+    margin-top: 20px;
+    font-weight: 700;
+    opacity: 0.6;
   }
 
   .nav-header {
     display: flex;
     flex-direction: column;
-    margin-top: 1.5rem;
-    padding: 0 1.8rem;
+    margin-top: 20px;
   }
 
   .nav-items-container {
@@ -179,7 +185,7 @@
 
   .nav-group-header {
     display: flex;
-    padding: 1.5rem 0 0 1.8rem;
+    padding: 0px 20px 0px 20px;
     font-size: 0.9rem;
     font-weight: bold;
     justify-content: space-between;
@@ -212,20 +218,20 @@
   }
 
   .navigator-title {
+    font-size: 14px;
+    color: var(--secondary100);
+    font-weight: 500;
     text-transform: uppercase;
-    font-weight: 400;
-    color: #999;
-    font-size: 0.9rem;
+    padding: 0 20px 20px 20px;
+    line-height: 1rem !important;
   }
 
   .border-line {
-    border-bottom: 1px solid #ddd;
-    margin-top: 1.5rem;
-    width: calc(100% + 1.5rem);
+    border-bottom: 1px solid #d8d8d8;
   }
 
   .components-list-container {
     overflow: auto;
-    padding: 0 30px 0 0;
+    padding: 20px 0px 0 0;
   }
 </style>

From a166f3e510fe87ed7a7e2fcd90b11362b10fbfde Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 19 Mar 2020 12:31:23 +0000
Subject: [PATCH 9/9] primary button and new screen modal redesigned

Changes include:
Primary button redesigned
Cancel button added
Button positiioning changed
New screen modal redesigned
---
 .../builder/src/common/ActionButton.svelte    | 16 ++++++---
 .../builder/src/common/ButtonGroup.svelte     |  7 ++--
 .../builder/src/common/ConfirmDialog.svelte   | 17 ++++++++--
 packages/builder/src/global.css               | 17 +++++-----
 .../src/userInterface/NewScreen.svelte        | 33 +++++++++++++++++++
 5 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte
index e1230692d1..f4f13c0757 100644
--- a/packages/builder/src/common/ActionButton.svelte
+++ b/packages/builder/src/common/ActionButton.svelte
@@ -2,6 +2,7 @@
   export let disabled = false
   export let hidden = false
   export let primary = true
+  export let cancel = false
   export let alert = false
   export let warning = false
 </script>
@@ -12,6 +13,7 @@
   class:hidden
   class:primary
   class:alert
+  class:cancel
   class:warning
   {disabled}>
   <slot />
@@ -19,8 +21,8 @@
 
 <style>
   .primary {
-    color: #0055ff;
-    background: rgb(54, 133, 249, 0.1);
+    color: #ffffff;
+    background: #0055ff;
   }
 
   .alert {
@@ -28,17 +30,23 @@
     background: rgba(255, 0, 31, 0.1);
   }
 
+  .cancel {
+    color: var(--secondary40);
+    background: none;
+  }
+
   .button {
     font-size: 14px;
-    font-weight: bold;
+    font-weight: 600;
     border-radius: 5px;
     border: none;
-    min-width: 120px;
+    padding: 10px 20px;
     height: 45px;
   }
 
   .button:hover {
     cursor: pointer;
+    font-weight: 700;
   }
 
   .button:disabled {
diff --git a/packages/builder/src/common/ButtonGroup.svelte b/packages/builder/src/common/ButtonGroup.svelte
index d833249a7e..7b57ea34cc 100644
--- a/packages/builder/src/common/ButtonGroup.svelte
+++ b/packages/builder/src/common/ButtonGroup.svelte
@@ -8,9 +8,8 @@
 
 <style>
   .root {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: 5px;
-    width: 50%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
   }
 </style>
diff --git a/packages/builder/src/common/ConfirmDialog.svelte b/packages/builder/src/common/ConfirmDialog.svelte
index 5d1002c483..8b69a120ad 100644
--- a/packages/builder/src/common/ConfirmDialog.svelte
+++ b/packages/builder/src/common/ConfirmDialog.svelte
@@ -41,13 +41,26 @@
       <h4 class="budibase__title--4">{title}</h4>
     </div>
     <div class="uk-modal-body">
-      <slot>{body}</slot>
+      <slot class="rows">{body}</slot>
     </div>
     <div class="uk-modal-footer">
       <ButtonGroup>
+        <ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
         <ActionButton primary on:click={ok}>{okText}</ActionButton>
-        <ActionButton alert on:click={cancel}>{cancelText}</ActionButton>
       </ButtonGroup>
     </div>
   </div>
 </div>
+
+<style>
+
+.uk-modal-footer {
+  background: var(--lightslate);
+}
+
+.uk-modal-dialog {
+  width: 400px;
+  border-radius: 5px;
+}
+
+</style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 003294ee26..a05adfc7c9 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -1,13 +1,14 @@
 @import "./budibase.css";
 
 :root {
-    --primary100: #173157FF;
-    --primary75: #454CA0BF;
-    --primary50: #454CA080;
-    --primary25: #454CA040;
-    --primary10: #454CA01A;
-    --primary5: #454ca00c;
-    --primarydark: #3F448A;
+    --primary100: #0055ff;
+    --primary80: rgba(0, 85, 255, 0.8);
+    --primary60: #rgba(0, 85, 255, 0.6);
+    --primary40: #rgba(0, 85, 255, 0.4);
+    --primary20: #rgba(0, 85, 255, 0.2);
+    --primary10: #rgba(0, 85, 255, 0.1);
+    --primary5: #rgba(0, 85, 255, 0.05);
+    --primarydark: #0044cc;
 
     --secondary100:#000333;
     --secondary80: rgba(0, 3, 51, 0.8);
@@ -16,7 +17,7 @@
     --secondary20: rgba(0, 3, 51, 0.2);
     --secondary10: rgba(0, 3, 51, 0.1);
     --secondary5: rgba(0, 3, 51, 0.05);
-    --secondarydark: #3F448A;
+    --secondarydark: #00021a;
 
     --tertiary: #F2F5F7;
 
diff --git a/packages/builder/src/userInterface/NewScreen.svelte b/packages/builder/src/userInterface/NewScreen.svelte
index b5e2a32570..e247c19417 100644
--- a/packages/builder/src/userInterface/NewScreen.svelte
+++ b/packages/builder/src/userInterface/NewScreen.svelte
@@ -126,3 +126,36 @@
 
 </ConfirmDialog>
 
+<style>
+
+.uk-margin {
+  display: flex;
+  flex-direction: column;
+}
+
+.uk-form-controls {
+  margin-left: 0 !important;
+}
+
+.uk-form-label {
+  padding-bottom: 10px;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--secondary80);
+}
+
+.uk-input {
+  height: 40px !important;
+  border-radius: 3px;
+}
+
+.uk-select {
+  height: 40px !important;
+  font-weight: 500px;
+  color: var(--secondary60);
+  border: 1px solid var(--slate);
+  border-radius: 3px;
+}
+
+</style>
+