Pull in more work from new design UI

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

@@ -86,9 +86,13 @@
   on:mousedown={onClick}
 >
   {#if fieldIcon}
-    <span class="option-icon">
+    <span class="option-left">
       <Icon name={fieldIcon} />
     </span>
+  {:else if fieldColour}
+    <span class="option-left">
+      <StatusLight custom color={fieldColour} />
+    </span>
   {/if}
   <span
     class="spectrum-Picker-label"
@@ -107,8 +111,8 @@
       <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
   {/if}
-  {#if fieldColour}
-    <span class="option-colour">
+  {#if fieldIcon && fieldColour}
+    <span class="option-right">
       <StatusLight custom color={fieldColour} />
     </span>
   {/if}
@@ -166,9 +170,13 @@
             on:click={() => onSelectOption(getOptionValue(option, idx))}
           >
             {#if getOptionIcon(option, idx)}
-              <span class="option-icon">
+              <span class="option-left">
                 <Icon name={getOptionIcon(option, idx)} />
               </span>
+            {:else if getOptionColour(option, idx)}
+              <span class="option-left">
+                <StatusLight custom color={getOptionColour(option, idx)} />
+              </span>
             {/if}
             <span class="spectrum-Menu-itemLabel">
               {getOptionLabel(option, idx)}
@@ -180,8 +188,8 @@
             >
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
-            {#if getOptionColour(option, idx)}
-              <span class="option-colour">
+            {#if getOptionIcon(option, idx) && getOptionColour(option, idx)}
+              <span class="option-right">
                 <StatusLight custom color={getOptionColour(option, idx)} />
               </span>
             {/if}
@@ -224,13 +232,14 @@
   .spectrum-Menu-checkmark {
     align-self: center;
     margin-top: 0;
+    margin-left: 12px;
   }
-  .option-colour {
-    padding-left: 8px;
-  }
-  .option-icon {
+  .option-left {
     padding-right: 8px;
   }
+  .option-right {
+    padding-left: 8px;
+  }
 
   .spectrum-Popover :global(.spectrum-Search) {
     margin-top: -1px;

packages/frontend-core/src/constants.js

@@ -63,3 +63,12 @@ export const TableNames = {
  *   - Coerce types for search endpoint
  */
 export const ApiVersion = "1"
+
+// Role IDs
+export const Roles = {
+  ADMIN: "ADMIN",
+  POWER: "POWER",
+  BASIC: "BASIC",
+  PUBLIC: "PUBLIC",
+  BUILDER: "BUILDER",
+}

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

@@ -1,4 +1,5 @@
 export * as LuceneUtils from "./lucene"
 export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
+export * as RoleUtils from "./roles"
 export * as Utils from "./utils"

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

@@ -0,0 +1,22 @@
+import { Roles } from "../constants"
+
+const RolePriorities = {
+  [Roles.ADMIN]: 4,
+  [Roles.POWER]: 3,
+  [Roles.BASIC]: 2,
+  [Roles.PUBLIC]: 1,
+}
+const RoleColours = {
+  [Roles.ADMIN]: "var(--spectrum-global-color-static-seafoam-400)",
+  [Roles.POWER]: "var(--spectrum-global-color-static-purple-400)",
+  [Roles.BASIC]: "var(--spectrum-global-color-static-magenta-400)",
+  [Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)",
+}
+
+export const getRolePriority = roleId => {
+  return RolePriorities[roleId] ?? 0
+}
+
+export const getRoleColour = roleId => {
+  return RoleColours[roleId] ?? "rgb(20, 115, 230)"
+}