Standardise icons across groups and users

packages/bbui/src/Icon/IconAvatar.svelte

@@ -0,0 +1,58 @@
+<script>
+  import Icon from "./Icon.svelte"
+
+  export let icon
+  export let background
+  export let color
+  export let size = "M"
+</script>
+
+<div
+  class="icon size--{size}"
+  style="background: {background || `transparent`};"
+  class:filled={!!background}
+>
+  <Icon name={icon} color={background ? "white" : color} />
+</div>
+
+<style>
+  .icon {
+    width: 28px;
+    height: 28px;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+  }
+  .icon :global(.spectrum-Icon) {
+    width: 20px;
+    height: 20px;
+  }
+  .icon.filled :global(.spectrum-Icon) {
+    width: 16px;
+    height: 16px;
+  }
+  .icon.size--S {
+    width: 22px;
+    height: 22px;
+  }
+  .icon.size--S :global(.spectrum-Icon) {
+    width: 16px;
+    height: 16px;
+  }
+  .icon.size--S.filled :global(.spectrum-Icon) {
+    width: 12px;
+    height: 12px;
+  }
+  .icon.size--L {
+    width: 40px;
+    height: 40px;
+  }
+  .icon.size--L :global(.spectrum-Icon) {
+    width: 28px;
+    height: 28px;
+  }
+  .icon.size--L.filled :global(.spectrum-Icon) {
+    width: 22px;
+    height: 22px;
+  }
+</style>

packages/bbui/src/List/ListItem.svelte

@@ -1,11 +1,12 @@
 <script>
   import Body from "../Typography/Body.svelte"
-  import Icon from "../Icon/Icon.svelte"
+  import IconAvatar from "../Icon/IconAvatar.svelte"
   import Label from "../Label/Label.svelte"
   import Avatar from "../Avatar/Avatar.svelte"
 
   export let icon = null
   export let iconBackground = null
+  export let iconColor = null
   export let avatar = false
   export let title = null
   export let subtitle = null
@@ -17,9 +18,7 @@
 <div class="list-item" class:hoverable on:click>
   <div class="left">
     {#if icon}
-      <div class="icon" style="background: {iconBackground || `transparent`};">
-        <Icon name={icon} size="S" color={iconBackground ? "white" : null} />
-      </div>
+      <IconAvatar {icon} color={iconColor} background={iconBackground} />
     {/if}
     {#if avatar}
       <Avatar {initials} />
@@ -88,11 +87,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .icon {
-    width: var(--spectrum-alias-avatar-size-400);
-    height: var(--spectrum-alias-avatar-size-400);
-    display: grid;
-    place-items: center;
-    border-radius: 50%;
-  }
 </style>

packages/bbui/src/Popover/Popover.svelte

@@ -64,6 +64,9 @@
 <style>
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000) !important;
+    border-color: var(--spectrum-global-color-gray-200);
+    box-shadow: 0 8px 16px 2px rgba(0, 0, 0, 0.25);
+    filter: none;
   }
   .spectrum-Popover.is-open.spectrum-Popover--withTip {
     margin-top: var(--spacing-xs);

packages/bbui/src/index.js

@@ -20,6 +20,7 @@ export { default as Button } from "./Button/Button.svelte"
 export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon, directions } from "./Icon/Icon.svelte"
+export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"

packages/builder/src/components/settings/UserGroupPicker.svelte

@@ -6,6 +6,8 @@
   export let selected
   export let list = []
   export let labelKey
+  export let iconComponent = null
+  export let extractIconProps = x => x
 
   const dispatch = createEventDispatcher()
 
@@ -42,7 +44,6 @@
     <div class="header">
       <Search placeholder="Search" bind:value={searchTerm} />
     </div>
-    <Divider noMargin />
     <div class="items">
       {#each sortedList as item}
         <div
@@ -51,6 +52,12 @@
           }}
           class="item"
         >
+          {#if iconComponent}
+            <svelte:component
+              this={iconComponent}
+              {...extractIconProps(item)}
+            />
+          {/if}
           <div class="text">
             {item[labelKey]}
           </div>
@@ -86,14 +93,14 @@
     margin-top: -8px;
   }
   .item {
-    align-items: end;
     display: flex;
     justify-content: space-between;
     cursor: pointer;
     padding: var(--spacing-s) var(--spacing-l);
     background: var(--spectrum-global-color-gray-50);
     transition: background 130ms ease-out;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-m);
+    align-items: center;
   }
   .item:hover {
     background: var(--spectrum-global-color-gray-100);

packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte

@@ -112,7 +112,7 @@
     <Layout noPadding gap="M">
       <div class="header">
         <div class="title">
-          <GroupIcon {group} />
+          <GroupIcon {group} size="L" />
           <div class="text-padding">
             <Heading>{group?.name}</Heading>
           </div>
@@ -158,7 +158,6 @@
             {#each group.users as user}
               <ListItem
                 title={user.email}
-                avatar
                 on:click={() => $goto(`../users/${user._id}`)}
                 hoverable
               >
@@ -188,7 +187,7 @@
             <ListItem
               title={app.name}
               icon={app?.icon?.name || "Apps"}
-              iconBackground={app?.icon?.color || ""}
+              iconColor={app?.icon?.color || ""}
               on:click={() => $goto(`../../overview/${app.devId}`)}
               hoverable
             >

packages/builder/src/pages/builder/portal/manage/groups/_components/GroupIcon.svelte

@@ -1,20 +1,8 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { IconAvatar } from "@budibase/bbui"
 
   export let group
+  export let size = "M"
 </script>
 
-<div style="background: {group?.color};" class="circle">
-  <Icon size="S" name={group?.icon} />
-</div>
-
-<style>
-  .circle {
-    border-radius: 50%;
-    height: 30px;
-    width: 30px;
-    color: white;
-    display: grid;
-    place-items: center;
-  }
-</style>
+<IconAvatar icon={group?.icon} background={group?.color} {size} />

packages/builder/src/pages/builder/portal/manage/users/[userId].svelte

@@ -29,6 +29,7 @@
   import { RoleUtils } from "@budibase/frontend-core"
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
   import DeleteUserModal from "./_components/DeleteUserModal.svelte"
+  import GroupIcon from "../groups/_components/GroupIcon.svelte"
 
   export let userId
 
@@ -207,7 +208,7 @@
             </div>
           </div>
         </div>
-        {#if userId !== $auth.user._id}
+        {#if userId !== $auth.user?._id}
           <div>
             <ActionMenu align="right">
               <span slot="control">
@@ -277,6 +278,8 @@
               selected={user.userGroups}
               on:select={e => addGroup(e.detail)}
               on:deselect={e => removeGroup(e.detail)}
+              iconComponent={GroupIcon}
+              extractIconProps={item => ({ group: item, size: "S" })}
             />
           </Popover>
         </div>
@@ -320,7 +323,7 @@
           {#each availableApps as app}
             <ListItem
               title={app.name}
-              iconBackground={app?.icon?.color || ""}
+              iconColor={app?.icon?.color}
               icon={app?.icon?.name || "Apps"}
               hoverable
               on:click={() => $goto(`../../overview/${app.devId}`)}