removed uk-margin and swapped with new bb-margin classes

packages/builder/src/components/common/DatePicker.svelte

@@ -24,7 +24,7 @@
   })
 </script>
 
-<div class="uk-margin">
+<div class="bb-margin-m">
   <label class="uk-form-label">{label}</label>
   <div class="uk-form-controls">
     <input

packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte

@@ -66,7 +66,7 @@
   <ErrorsBox {errors} />
   <form on:submit|preventDefault class="uk-form-stacked">
     {#each modelSchema as [key, meta]}
-      <div class="uk-margin">
+      <div class="bb-margin-xl">
         {#if meta.type === 'link'}
           <LinkedRecordSelector
             bind:linked={record[key]}

packages/builder/src/components/userInterface/NewScreen.svelte

@@ -80,11 +80,11 @@
   okText="Create Screen">
 
   <div data-cy="new-screen-dialog">
-    <div class="uk-margin">
+    <div class="bb-margin-xl">
       <Input label="Name" bind:value={name} />
     </div>
 
-    <div class="uk-margin">
+    <div class="bb-margin-xl">
       <Input
         label="Url"
         error={routeError}
@@ -92,7 +92,7 @@
         on:change={routeChanged} />
     </div>
 
-    <div class="uk-margin">
+    <div class="bb-margin-xl">
       <label>Layout Component</label>
       <Select bind:value={layoutComponent} secondary>
         {#each layoutComponents as { _component, name }}
@@ -103,10 +103,3 @@
   </div>
 
 </ConfirmDialog>
-
-<style>
-  .uk-margin {
-    display: flex;
-    flex-direction: column;
-  }
-</style>

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte

@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="uk-margin block-field">
+<div class="bb-margin-xl block-field">
   <label class="uk-form-label">Page</label>
   <div class="uk-form-controls">
     <select class="budibase__input" bind:value={pageName}>

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte

@@ -4,7 +4,7 @@
   export let value
 </script>
 
-<div class="uk-margin block-field">
+<div class="bb-margin-xl block-field">
   <div class="uk-form-controls">
     <select class="budibase__input" bind:value>
       <option value="" />

packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte

@@ -5,7 +5,7 @@
   export let value
 </script>
 
-<div class="uk-margin block-field">
+<div class="bb-margin-xl block-field">
   <div class="uk-form-controls">
     <select class="budibase__input" bind:value={value.model}>
       {#each $backendUiStore.models as model}
@@ -16,10 +16,10 @@
 </div>
 
 {#if value.model}
-  <div class="uk-margin block-field">
+  <div class="bb-margin-xl block-field">
     <label class="uk-form-label fields">Fields</label>
     {#each Object.keys(value.model.schema) as field}
-      <div class="uk-form-controls uk-margin">
+      <div class="uk-form-controls bb-margin-xl">
         <Input bind:value={value[field]} label={field} />
       </div>
     {/each}

packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte

@@ -81,7 +81,7 @@
     {/if}
   </header>
   {#if selectedTab === 'TEST'}
-    <div class="uk-margin config-item">
+    <div class="bb-margin-m">
       {#if testResult}
         <button
           transition:fade
@@ -111,12 +111,10 @@
       <div class="panel">
         <div class="panel-body">
           <div class="block-label">Workflow: {workflow.name}</div>
-          <div class="config-item">
-            <Input label="Name" bind:value={workflow.name} thin />
-          </div>
           <div class="config-item">
             <label class="uk-form-label">User Access</label>
             <div class="access-levels">
+
               {#each ACCESS_LEVELS as level}
                 <span class="access-level">
                   <label>{level.name}</label>

packages/builder/src/global.css

@@ -95,3 +95,18 @@ textarea {
 .hoverable:hover {
     cursor: pointer;
 }
+
+.bb-margin-m {
+    margin-bottom: var(--spacing-m);
+}
+* + .bb-margin-m {
+    margin-top: var(--spacing-m);
+}
+
+.bb-margin-xl {
+    margin-bottom: var(--spacing-xl);
+}
+
+* + .bb-margin-xl {
+    margin-top: var(--spacing-xl);
+}