From f18653af33ada42b64505fd004eb30558cfadc70 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Sun, 22 Mar 2020 14:05:13 +0000
Subject: [PATCH] modal styling

---
 .../builder/src/database/FieldView.svelte     | 23 ++++++++++++-------
 .../modals/CreateDatabase.svelte              | 19 ++++++++++++---
 .../modals/CreateEditRecord.svelte            | 17 +++++++++++---
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/database/FieldView.svelte b/packages/builder/src/database/FieldView.svelte
index 4cb77f5951..8bf32d7ac5 100644
--- a/packages/builder/src/database/FieldView.svelte
+++ b/packages/builder/src/database/FieldView.svelte
@@ -138,12 +138,19 @@
     {/if}
   </form>
 
-  <div class="uk-modal-footer uk-text-right">
-    <ButtonGroup>
-      <ActionButton primary on:click={save}>Save</ActionButton>
-      <ActionButton alert on:click={() => onFinished(false)}>
-        Cancel
-      </ActionButton>
-    </ButtonGroup>
-  </div>
+  <footer>
+    <ActionButton primary on:click={save}>Save</ActionButton>
+    <ActionButton alert on:click={() => onFinished(false)}>Cancel</ActionButton>
+  </footer>
 </div>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>
diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte
index e28b6418fb..f335c82246 100644
--- a/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte
+++ b/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte
@@ -18,8 +18,21 @@
 <section>
   Database Name
   <input class="uk-input" type="text" bind:value={databaseName} />
-  <div class="actions">
+  <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!databaseName} on:click={createDatabase}>Save</ActionButton>
-  </div>
+    <ActionButton disabled={!databaseName} on:click={createDatabase}>
+      Save
+    </ActionButton>
+  </footer>
 </section>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>
diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte
index 23773de0a4..e4b008323f 100644
--- a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte
@@ -63,7 +63,7 @@
         </div>
       {/each}
     </form>
-    <div class="actions">
+    <footer>
       <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
       <ActionButton
         on:click={async () => {
@@ -79,6 +79,17 @@
         }}>
         Save
       </ActionButton>
-    </div>
+    </footer>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+  footer {
+    position: absolute;
+    padding: 20px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: #fafafa;
+  }
+</style>
\ No newline at end of file