select fix, select all on access levels, modal fixes

packages/builder/src/accessLevels/AccessLevelView.svelte

@@ -24,12 +24,18 @@
     ((!p2.nodeKey && !p1.nodeKey) || p2.nodeKey === p1.nodeKey)
 
   const hasPermission = hasPerm =>
-    some(p => matchPermissions(p, hasPerm))(clonedLevel.permissions)
+    clonedLevel.permissions.some(permission =>
+      matchPermissions(permission, hasPerm)
+    )
 
-  $: permissionMatrix = map(p => ({
-    permission: p,
-    hasPermission: hasPermission(p),
-  }))(allPermissions)
+  $: permissionMatrix = allPermissions.map(permission => ({
+    permission,
+    hasPermission: hasPermission(permission),
+  }))
+
+  $: allPermissionsSelected = permissionMatrix.every(
+    permission => permission.hasPermission
+  )
 
   const getPermissionName = perm =>
     perm.nodeKey ? `${perm.type} - ${perm.nodeKey}` : perm.type
@@ -37,7 +43,7 @@
   const save = () => {
     const newLevels = isNew
       ? [...allLevels, clonedLevel]
-      : [...filter(l => l.name !== level.name)(allLevels), clonedLevel]
+      : [...allLevels.filter(l => l.name !== level.name), clonedLevel]
 
     errors = validateAccessLevels(hierarchy, actions, newLevels)
 
@@ -68,6 +74,15 @@
     <Textbox label="Access Level Name" bind:text={clonedLevel.name} />
 
     <h4 class="budibase__title--4">Permissions</h4>
+
+    <Checkbox
+      label={'Select All'}
+      checked={allPermissionsSelected}
+      on:change={ev => {
+        permissionMatrix.forEach(permission =>
+          permissionChanged(permission.permission)(ev)
+        )
+      }} />
     {#each permissionMatrix as permission}
       <div class="permission-container">
         <Checkbox
@@ -92,6 +107,7 @@
 
 <style>
   .permission-container {
+    margin-top: 10px;
     margin-bottom: 10px;
   }
 </style>

packages/builder/src/common/Select.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="select-container">
-  <select on:change {value}>
+  <select on:change bind:value={value}>
     <slot />
   </select>
   <span class="arrow">
@@ -23,6 +23,7 @@
   }
 
   select {
+    height: 35px;
     display: block;
     font-family: sans-serif;
     font-weight: 500;

packages/builder/src/userInterface/NewScreen.svelte

@@ -3,6 +3,7 @@
   import PropsView from "./PropsView.svelte"
   import Textbox from "../common/Textbox.svelte"
   import Button from "../common/Button.svelte"
+  import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
   import { pipe } from "../common/core"
   import UIkit from "uikit"
@@ -122,8 +123,8 @@
       </div>
 
       <ButtonGroup style="float: right;">
-        <Button color="primary" grouped on:click={save}>Create Screen</Button>
-        <Button color="tertiary" grouped on:click={cancel}>Cancel</Button>
+        <ActionButton primary on:click={save}>Create Screen</ActionButton>
+        <ActionButton alert on:click={cancel}>Cancel</ActionButton>
       </ButtonGroup>
     </div>
   </div>