merge: #4043

4043: ui improvements and bug fixes pt 4 r=wendybujalski a=wendybujalski

- Improve UI for the Test tab on the CustomizeAsset screen, disable the panel expanding
- finish improvements to the Properties tab on the CustomizeAsset screen, better icons
- make the functions panel section collapse when you select multiple assets
- fix search filter padding issues on Customize screen
- IconButton improvements, new ErrorMessage variant

Co-authored-by: wendybujalski <wendydbujalski@gmail.com>

app/web/src/components/AssetCard.vue

@@ -1,12 +1,7 @@
 <template>
   <div
     v-if="asset"
-    :class="
-      clsx(
-        'p-xs border-l-4 border relative',
-        titleCard ? 'mb-xs' : 'rounded-md',
-      )
-    "
+    :class="clsx('p-xs border-l-4 border relative', !titleCard && 'rounded-md')"
     :style="{
       borderColor: asset.color,
       backgroundColor: `#${bodyBg.toHex()}`,

app/web/src/components/AssetFuncListPanel.vue

@@ -29,8 +29,8 @@
         <EmptyStateCard
           v-if="assetStore.selectedAssets.length > 1"
           iconName="funcs"
-          primaryText=""
-          secondaryText="You have selected multiple assets above"
+          primaryText="Cannot Select Functions"
+          secondaryText="You have selected multiple assets above. To select a function, select one asset."
         />
         <EmptyStateCard
           v-else

app/web/src/components/AssetListPanel.vue

@@ -27,7 +27,7 @@
             @click="() => newAssetModalRef?.modal?.open()"
           />
           <IconButton
-            v-if="canContribute || true"
+            v-if="canContribute"
             class="hover:scale-125"
             icon="cloud-upload"
             size="sm"

app/web/src/components/FilterPill.vue

@@ -13,7 +13,7 @@
       v-if="filter.iconName"
       :name="filter.iconName"
       size="sm"
-      :class="clsx(iconClasses, filter.iconName.includes('logo') && 'mx-2xs')"
+      :class="clsx(iconClasses, extraPadding && 'mx-2xs')"
       :style="filter.iconColor && !selected ? { color: filter.iconColor } : {}"
     />
     <div class="pr-2xs">
@@ -41,4 +41,14 @@ const iconClasses = computed(() => {
     return getToneTextColorClass(props.filter.iconTone);
   } else return "";
 });
+
+// Add an icon to this list if it needs to have additional X padding to look right
+const extraPaddingIcons = ["cloud-upload", "code-deployed"];
+
+const extraPadding = computed(
+  () =>
+    props.filter.iconName &&
+    (props.filter.iconName.includes("logo") ||
+      extraPaddingIcons.includes(props.filter.iconName)),
+);
 </script>