Defeat

I stand defeated to UIKit and its CSS shackles

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 {

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;
   }

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>

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>

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>

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 {