From 780f791048e396293532adb742d35e8e4ed97286 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 2 Jun 2020 20:55:15 +0100
Subject: [PATCH] Defeat

I stand defeated to UIKit and its CSS shackles
---
 packages/builder/src/budibase.css               |  2 +-
 .../src/components/common/ActionButton.svelte   |  4 ++--
 .../builder/src/components/common/Select.svelte | 10 ++++------
 .../CreateEditModel/CreateEditModel.svelte      | 10 ++++++----
 .../modals/CreateEditModel/FieldView.svelte     | 17 +++++++++++++----
 .../ModelDataTable/modals/CreateEditView.svelte |  3 ++-
 6 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 7aa47605f9..910a795cd2 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -117,7 +117,7 @@
 }
 
 .budibase__table tr {
-    border-bottom: 1px solid var(--blue-light);
+    border-bottom: 1px solid var(--grey-light);
 }
 
 .button--toggled {
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index 153d00b6a6..96e7c6b6ae 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -42,13 +42,13 @@
   .secondary {
     color: var(--ink);
     border: solid 1px var(--grey-dark);
-    background: none;
+    background: white;
   }
 
   .button {
     font-size: 14px;
     font-weight: 500;
-    border-radius: 5px;
+    border-radius: 3px;
     padding: 10px 20px;
     height: 40px;
   }
diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte
index 39dbe6d059..e89b8006a5 100644
--- a/packages/builder/src/components/common/Select.svelte
+++ b/packages/builder/src/components/common/Select.svelte
@@ -20,11 +20,9 @@
 <style>
   .select-container {
     font-size: 14px;
-    color: var(--secondary60);
-    font-weight: bold;
     position: relative;
-    max-width: 400px;
-    min-width: 275px;
+    border: var(--grey-dark) 1px solid;
+    max-width: 256px;
   }
 
   .adjusted {
@@ -43,7 +41,7 @@
     font-family: sans-serif;
     font-weight: 400;
     font-size: 14px;
-    color: #000333;
+    color: var(--ink);
     padding: 0 40px 0px 20px;
     width: 100%;
     max-width: 100%;
@@ -63,6 +61,6 @@
     width: 30px;
     height: 30px;
     pointer-events: none;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index df1b27e426..ecb35c23ba 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -88,7 +88,7 @@
       </tbody>
     </table>
     <footer>
-      <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
+        <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
     </footer>
   </div>
 {:else}
@@ -128,7 +128,7 @@
   }
 
   tbody > tr:hover {
-    background-color: var(--blue-light);
+    background-color: var(--grey-light);
   }
 
   .table-controls {
@@ -154,10 +154,12 @@
   }
 
   footer {
-    margin: 40px 40px 0px 40px;
     background-color: var(--grey-light);
-    padding: 20px 0px;
+    margin-top: 40px;
+    padding: 20px 40px 20px 40px;
     display: flex;
     justify-content: flex-end;
   }
+
+
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
index 2c3443ae56..c17a0ac9c8 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@@ -79,19 +79,28 @@
   </form>
 </div>
 <footer>
+  <div class="button">
+    <ActionButton secondary on:click={goBack}>Cancel</ActionButton>
+  </div>
   <ActionButton primary on:click={save}>Save</ActionButton>
-  <ActionButton alert on:click={goBack}>Cancel</ActionButton>
 </footer>
 
 <style>
   .root {
-    margin: 20px;
+    margin: 40px;
   }
   footer {
-    padding: 20px;
+    padding: 20px 40px;
     border-radius: 0 0 5px 5px;
     bottom: 0;
     left: 0;
-    background: #fafafa;
+    background: var(--grey-light);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 7ca59e87f2..873e34950a 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -96,6 +96,7 @@
   .snippet-selector__heading {
     margin-right: 20px;
     font-size: 14px;
+    color: var(--ink-lighter);
   }
 
   .header {
@@ -109,7 +110,7 @@
   }
   
   .code-snippets {
-  margin: 20px 0px 20px 0px;
+    margin: 20px 0px 20px 0px;
   }
 
   .buttons {