Merge pull request #159 from Budibase/new-screen-modal-redesign

primary button and new screen modal redesigned

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;
+    color: #ffffff;
-    background: rgb(54, 133, 249, 0.1);
+    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 {

packages/builder/src/common/ButtonGroup.svelte

@@ -8,9 +8,8 @@
 
 <style>
   .root {
-    display: grid;
+    display: flex;
-    grid-auto-flow: column;
+    flex-direction: row;
-    grid-gap: 5px;
+    justify-content: space-between;
-    width: 50%;
   }
 </style>

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>

packages/builder/src/global.css

@@ -1,13 +1,14 @@
 @import "./budibase.css";
 
 :root {
-    --primary100: #173157FF;
+    --primary100: #0055ff;
-    --primary75: #454CA0BF;
+    --primary80: rgba(0, 85, 255, 0.8);
-    --primary50: #454CA080;
+    --primary60: #rgba(0, 85, 255, 0.6);
-    --primary25: #454CA040;
+    --primary40: #rgba(0, 85, 255, 0.4);
-    --primary10: #454CA01A;
+    --primary20: #rgba(0, 85, 255, 0.2);
-    --primary5: #454ca00c;
+    --primary10: #rgba(0, 85, 255, 0.1);
-    --primarydark: #3F448A;
+    --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;
 

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>
+