From 070ec8abd41042f883358f5657c6e328c86c358d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 10 May 2022 14:02:00 +0100
Subject: [PATCH] Improve role colours and ordering

---
 packages/bbui/src/Form/Core/Picker.svelte                | 4 ++--
 .../design/settings/controls/RoleSelect.svelte           | 2 ++
 packages/builder/src/stores/backend/roles.js             | 9 ++++++++-
 packages/frontend-core/src/utils/roles.js                | 2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index a3b5c147e..e184ca824 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/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>
diff --git a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte b/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
index 9571cf9a9..578578a98 100644
--- a/packages/builder/src/components/design/settings/controls/RoleSelect.svelte
+++ b/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}
 />
diff --git a/packages/builder/src/stores/backend/roles.js b/packages/builder/src/stores/backend/roles.js
index 0c3cdbce5..4d9ab303c 100644
--- a/packages/builder/src/stores/backend/roles.js
+++ b/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({
diff --git a/packages/frontend-core/src/utils/roles.js b/packages/frontend-core/src/utils/roles.js
index 0f7bf0c59..5c4aff2cf 100644
--- a/packages/frontend-core/src/utils/roles.js
+++ b/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)"
 }