From f50dee0ea495ea7a20f2dcefe0b5b9a1f930c4e3 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] 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>
+