Improve role colours and ordering

packages/bbui/src/Form/Core/Picker.svelte

@@ -109,7 +109,7 @@
   {/if}
   {#if fieldColour}
     <span class="option-colour">
-      <StatusLight custom color={fieldColour} />
+      <StatusLight size="L" color={fieldColour} />
     </span>
   {/if}
   <svg
@@ -182,7 +182,7 @@
             </svg>
             {#if getOptionColour(option, idx)}
               <span class="option-colour">
-                <StatusLight custom color={getOptionColour(option, idx)} />
+                <StatusLight size="L" color={getOptionColour(option, idx)} />
               </span>
             {/if}
           </li>

packages/builder/src/components/design/settings/controls/RoleSelect.svelte

@@ -1,6 +1,7 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { roles } from "stores/backend"
+  import { RoleUtils } from "@budibase/frontend-core"
 
   export let value
   export let error
@@ -12,5 +13,6 @@
   options={$roles}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
+  getOptionColour={role => RoleUtils.getRoleColour(role._id)}
   {error}
 />

packages/builder/src/stores/backend/roles.js

@@ -1,5 +1,6 @@
 import { writable } from "svelte/store"
 import { API } from "api"
+import { RoleUtils } from "@budibase/frontend-core"
 
 export function createRolesStore() {
   const { subscribe, update, set } = writable([])
@@ -7,7 +8,13 @@ export function createRolesStore() {
   const actions = {
     fetch: async () => {
       const roles = await API.getRoles()
-      set(roles)
+      set(
+        roles.sort((a, b) => {
+          const priorityA = RoleUtils.getRolePriority(a._id)
+          const priorityB = RoleUtils.getRolePriority(b._id)
+          return priorityA > priorityB ? -1 : 1
+        })
+      )
     },
     delete: async role => {
       await API.deleteRole({

packages/frontend-core/src/utils/roles.js

@@ -18,5 +18,5 @@ export const getRolePriority = roleId => {
 }
 
 export const getRoleColour = roleId => {
-  return RoleColours[roleId] ?? "#ffa500"
+  return RoleColours[roleId] ?? "rgb(20, 115, 230)"
 }