[Design] Update InfoPanel styling and layout (#4553)

src/components/dialog/content/manager/button/PackActionButton.vue

@@ -1,18 +1,20 @@
 <template>
   <Button
     outlined
-    class="!m-0 p-0 rounded-lg text-gray-900 dark-theme:text-gray-50"
+    class="!m-0 p-0 max-w-[120px] rounded-lg text-gray-900 dark-theme:text-gray-50"
     :class="[
       variant === 'black'
         ? 'bg-neutral-900 text-white border-neutral-900'
-        : 'border-neutral-700',
+        : variant === 'red'
+          ? 'border-red-500'
+          : 'border-neutral-700',
       fullWidth ? 'w-full' : 'w-min-content'
     ]"
     :disabled="loading"
     v-bind="$attrs"
     @click="onClick"
   >
-    <span class="py-2 px-3 whitespace-nowrap text-xs flex items-center gap-2">
+    <span class="py-1.5 px-3 whitespace-nowrap text-xs flex items-center gap-2">
       <i
         v-if="hasWarning && !loading"
         class="pi pi-exclamation-triangle text-yellow-500"
@@ -42,7 +44,7 @@ const {
   loading?: boolean
   loadingMessage?: string
   fullWidth?: boolean
-  variant?: 'default' | 'black'
+  variant?: 'default' | 'black' | 'red'
   hasWarning?: boolean
 }>()
 

src/components/dialog/content/manager/button/PackUninstallButton.vue

@@ -6,7 +6,7 @@
         ? $t('manager.uninstallSelected')
         : $t('manager.uninstall')
     "
-    severity="danger"
+    variant="red"
     :loading-message="$t('manager.uninstalling')"
     @action="uninstallItems"
   />

src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue

@@ -1,14 +1,14 @@
 <template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
+  <div v-if="nodePacks?.length" class="flex flex-col items-center">
     <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
+      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
     </slot>
     <h2
       class="text-2xl font-bold text-center mt-4 mb-2"
       style="word-break: break-all"
     >
       <slot name="title">
-        {{ nodePacks[0].name }}
+        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
       </slot>
     </h2>
     <div class="mt-2 mb-4 w-full max-w-xs flex justify-center">
@@ -27,7 +27,7 @@
       </slot>
     </div>
   </div>
-  <div v-else class="flex flex-col items-center mb-6">
+  <div v-else class="flex flex-col items-center">
     <NoResultsPlaceholder
       :message="$t('manager.status.unknown')"
       :title="$t('manager.tryAgainLater')"

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -6,8 +6,12 @@
           <PackIconStacked :node-packs="nodePacks" />
         </template>
         <template #title>
-          {{ nodePacks.length }}
-          {{ $t('manager.packsSelected') }}
+          <div class="mt-5">
+            <span class="inline-block mr-2 text-blue-500 text-base">{{
+              nodePacks.length
+            }}</span>
+            <span class="text-base">{{ $t('manager.packsSelected') }}</span>
+          </div>
         </template>
         <template #install-button>
           <PackInstallButton :full-width="true" :node-packs="nodePacks" />

src/components/dialog/content/manager/infoPanel/InfoTabs.vue

@@ -16,7 +16,11 @@
         </Tab>
       </TabList>
       <TabPanels class="overflow-auto py-4 px-2">
-        <TabPanel v-if="hasCompatibilityIssues" value="warning">
+        <TabPanel
+          v-if="hasCompatibilityIssues"
+          value="warning"
+          class="bg-transparent"
+        >
           <WarningTabPanel
             :node-pack="nodePack"
             :conflict-result="conflictResult"

src/components/dialog/content/manager/infoPanel/InfoTextSection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-4 text-sm">
     <div v-for="(section, index) in sections" :key="index" class="mb-4">
-      <div class="mb-1">
+      <div class="mb-3">
         {{ section.title }}
       </div>
       <div class="text-muted break-words">

src/components/dialog/content/manager/infoPanel/MetadataRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex py-1.5 text-xs">
-    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}:</div>
+    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}</div>
     <div class="w-2/3">
       <slot>{{ value }}</slot>
     </div>

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-4 overflow-hidden">
+  <div class="overflow-hidden">
     <InfoTextSection
       v-if="nodePack?.description"
       :sections="descriptionSections"

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4 mt-4 text-sm">
+  <div class="flex flex-col gap-4 text-sm">
     <template v-if="mappedNodeDefs?.length">
       <div
         v-for="nodeDef in mappedNodeDefs"

src/components/dialog/content/manager/packIcon/PackIcon.vue

@@ -1,11 +1,37 @@
 <template>
-  <img
-    :src="isImageError ? DEFAULT_ICON : imgSrc"
-    :alt="nodePack.name + ' icon'"
-    class="object-contain rounded-lg max-h-72 max-w-72"
-    :style="{ width: cssWidth, height: cssHeight }"
-    @error="isImageError = true"
-  />
+  <div class="w-full max-w-[204] aspect-[2/1] rounded-lg overflow-hidden">
+    <!-- default banner show -->
+    <div v-if="showDefaultBanner" class="w-full h-full">
+      <img
+        :src="DEFAULT_BANNER"
+        alt="default banner"
+        class="w-full h-full object-cover"
+      />
+    </div>
+    <!-- banner_url or icon show -->
+    <div v-else class="relative w-full h-full">
+      <!-- blur background -->
+      <div
+        v-if="imgSrc"
+        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
+        :style="{
+          backgroundImage: `url(${imgSrc})`,
+          filter: 'blur(10px)'
+        }"
+      ></div>
+      <!-- image -->
+      <img
+        :src="isImageError ? DEFAULT_BANNER : imgSrc"
+        :alt="nodePack.name + ' banner'"
+        :class="
+          isImageError
+            ? 'relative w-full h-full object-cover z-10'
+            : 'relative w-full h-full object-contain z-10'
+        "
+        @error="isImageError = true"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -13,29 +39,14 @@ import { computed, ref } from 'vue'
 
 import { components } from '@/types/comfyRegistryTypes'
 
-const DEFAULT_ICON = '/assets/images/fallback-gradient-avatar.svg'
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 
-const {
-  nodePack,
-  width = '4.5rem',
-  height = '4.5rem'
-} = defineProps<{
+const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
-  width?: string
-  height?: string
 }>()
 
 const isImageError = ref(false)
-const shouldShowFallback = computed(
-  () => !nodePack.icon || nodePack.icon.trim() === '' || isImageError.value
-)
-const imgSrc = computed(() =>
-  shouldShowFallback.value ? DEFAULT_ICON : nodePack.icon
-)
 
-const convertToCssValue = (value: string | number) =>
-  typeof value === 'number' ? `${value}rem` : value
-
-const cssWidth = computed(() => convertToCssValue(width))
-const cssHeight = computed(() => convertToCssValue(height))
+const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
+const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
 </script>

src/components/dialog/content/manager/packIcon/PackIconStacked.vue

@@ -1,25 +1,19 @@
 <template>
-  <div class="relative w-24 h-24">
+  <div class="relative w-[224px] h-[104px] shadow-xl">
     <div
       v-for="(pack, index) in nodePacks.slice(0, maxVisible)"
       :key="pack.id"
-      class="absolute"
+      class="absolute w-[210px] h-[90px]"
       :style="{
         bottom: `${index * offset}px`,
         right: `${index * offset}px`,
         zIndex: maxVisible - index
       }"
     >
-      <div class="border rounded-lg p-0.5">
-        <PackIcon :node-pack="pack" width="4.5rem" height="4.5rem" />
+      <div class="border rounded-lg shadow-lg p-0.5">
+        <PackIcon :node-pack="pack" />
       </div>
     </div>
-    <div
-      v-if="nodePacks.length > maxVisible"
-      class="absolute -top-2 -right-2 bg-primary rounded-full w-7 h-7 flex items-center justify-center text-xs font-bold shadow-md z-10"
-    >
-      +{{ nodePacks.length - maxVisible }}
-    </div>
   </div>
 </template>
 

src/locales/en/main.json

@@ -194,7 +194,7 @@
     "noDescription": "No description available",
     "installSelected": "Install Selected",
     "installAllMissingNodes": "Install All Missing Nodes",
-    "packsSelected": "Packs Selected",
+    "packsSelected": "packs selected",
     "status": {
       "active": "Active",
       "pending": "Pending",