Fix app list in user details page styles

packages/bbui/src/List/ListItem.svelte

@@ -9,11 +9,12 @@
   export let avatar = false
   export let title = null
   export let subtitle = null
+  export let hoverable = false
 
   $: initials = avatar ? title?.[0] : null
 </script>
 
-<div class="list-item">
+<div class="list-item" class:hoverable on:click>
   <div class="left">
     {#if icon}
       <div class="icon" style="background: {iconBackground || `transparent`};">
@@ -39,11 +40,12 @@
   .list-item {
     padding: 0 16px;
     height: 56px;
-    background: var(--spectrum-alias-background-color-tertiary);
+    background: var(--spectrum-global-color-gray-50);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
+    transition: background 130ms ease-out;
   }
   .list-item:not(:first-child) {
     border-top: none;
@@ -56,6 +58,10 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
   }
+  .hoverable:hover {
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-75);
+  }
   .left,
   .right {
     display: flex;

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

@@ -345,25 +345,22 @@
       <List>
         {#if allAppList.length}
           {#each allAppList as app}
-            <div
-              class="pointer"
+            <ListItem
+              title={app.name}
+              iconBackground={app?.icon?.color || ""}
+              icon={app?.icon?.name || "Apps"}
+              hoverable
               on:click={$goto(`../../overview/${app.devId}`)}
             >
-              <ListItem
-                title={app.name}
-                iconBackground={app?.icon?.color || ""}
-                icon={app?.icon?.name || "Apps"}
-              >
-                <div class="title ">
-                  <StatusLight
-                    square
-                    color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
-                  >
-                    {getRoleLabel(getHighestRole(app.roles))}
-                  </StatusLight>
-                </div>
-              </ListItem>
-            </div>
+              <div class="title ">
+                <StatusLight
+                  square
+                  color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
+                >
+                  {getRoleLabel(getHighestRole(app.roles))}
+                </StatusLight>
+              </div>
+            </ListItem>
           {/each}
         {:else}
           <ListItem icon="Apps" title="No apps" />
@@ -384,9 +381,6 @@
 </Modal>
 
 <style>
-  .pointer {
-    cursor: pointer;
-  }
   .fields {
     display: grid;
     grid-gap: var(--spacing-m);