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,14 +345,12 @@
       <List>
         {#if allAppList.length}
           {#each allAppList as app}
-            <div
-              class="pointer"
-              on:click={$goto(`../../overview/${app.devId}`)}
-            >
             <ListItem
               title={app.name}
               iconBackground={app?.icon?.color || ""}
               icon={app?.icon?.name || "Apps"}
+              hoverable
+              on:click={$goto(`../../overview/${app.devId}`)}
             >
               <div class="title ">
                 <StatusLight
@@ -363,7 +361,6 @@
                 </StatusLight>
               </div>
             </ListItem>
-            </div>
           {/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);