Update design section to use new role metadata

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

@@ -1,7 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { roles } from "stores/builder"
-  import { RoleUtils } from "@budibase/frontend-core"
 
   export let value
   export let error
@@ -12,10 +11,9 @@
   bind:value
   on:change
   options={$roles}
-  getOptionLabel={role => role.name}
+  getOptionLabel={role => role.displayName}
   getOptionValue={role => role._id}
-  getOptionColour={role =>
-    role.color || "var(--spectrum-global-color-static-magenta-400)"}
+  getOptionColour={role => role.color}
   {placeholder}
   {error}
 />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { RoleUtils } from "@budibase/frontend-core"
   import { Tooltip, StatusLight } from "@budibase/bbui"
   import { roles } from "stores/builder"
   import { Roles } from "constants/backend"
@@ -13,7 +12,7 @@
   $: tooltip =
     roleId === Roles.PUBLIC
       ? "Open to the public"
-      : `Requires ${role?.name} access`
+      : `Requires ${role?.displayName} access`
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->