chore: fix icons in marketplace

web/projects/marketplace/src/pages/list/item/item.component.html

@@ -6,7 +6,9 @@
   <!-- darkening overlay -->
   <div class="overlay"></div>
   <!-- icon -->
-  <img [src]="determineIcon()" class="icon" alt="{{ pkg.title }} Icon" />
+  <span tuiAvatar class="icon" [round]="false">
+    <img [src]="determineIcon()" alt="{{ pkg.title }} Icon" />
+  </span>
   <div class="detail">
     <span class="detail-title" ticker>
       {{ pkg.title }}

web/projects/marketplace/src/pages/list/item/item.component.scss

@@ -51,9 +51,6 @@
   pointer-events: none;
   position: absolute;
   top: -2.5rem;
-  border-radius: 9999px;
-  object-fit: cover;
-  transform: none;
 }
 
 .detail {

web/projects/marketplace/src/pages/list/item/item.component.ts

@@ -2,13 +2,20 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { LocalizePipe, TickerComponent } from '@start9labs/shared'
+import { TuiAvatar } from '@taiga-ui/kit'
 import { MarketplacePkg } from '../../../types'
 
 @Component({
   selector: 'marketplace-item',
   templateUrl: 'item.component.html',
   styleUrls: ['item.component.scss'],
-  imports: [CommonModule, RouterModule, TickerComponent, LocalizePipe],
+  imports: [
+    CommonModule,
+    RouterModule,
+    TickerComponent,
+    LocalizePipe,
+    TuiAvatar,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ItemComponent {

web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts

@@ -15,7 +15,13 @@ import { MarketplacePkgBase } from '../../../types'
   selector: 'marketplace-dep-item',
   template: `
     <div class="outer-container">
-      <span tuiAvatar appearance="action-grayscale" class="dep-img" size="l">
+      <span
+        tuiAvatar
+        appearance="action-grayscale"
+        class="dep-img"
+        size="l"
+        [round]="false"
+      >
         <img alt="" [src]="getImage(dep.key)" />
       </span>
       <div>

web/projects/marketplace/src/pages/show/flavors.component.ts

@@ -20,7 +20,7 @@ import { MarketplacePkg } from '../../types'
             [queryParams]="{ id: pkg.id, flavor: pkg.flavor }"
             queryParamsHandling="merge"
           >
-            <span tuiAvatar appearance="action-grayscale">
+            <span tuiAvatar appearance="action-grayscale" [round]="false">
               <img alt="" [src]="pkg.icon | trustUrl" />
             </span>
             <span tuiTitle>

web/projects/marketplace/src/pages/show/hero.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { TickerComponent } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
+import { TuiAvatar } from '@taiga-ui/kit'
 
 @Component({
   selector: 'marketplace-package-hero',
@@ -8,7 +9,9 @@ import { T } from '@start9labs/start-sdk'
     <div class="outer-container">
       <div class="inner-container box-shadow-lg">
         <!-- icon -->
-        <img [src]="determineIcon()" alt="{{ pkg.title }} Icon" />
+        <span tuiAvatar [round]="false">
+          <img [src]="determineIcon()" alt="{{ pkg.title }} Icon" />
+        </span>
         <!-- color background -->
         <div class="color-background">
           <img [src]="determineIcon()" alt="{{ pkg.title }} background image" />
@@ -51,12 +54,10 @@ import { T } from '@start9labs/start-sdk'
         min-height: 11rem;
       }
 
-      img {
+      [tuiAvatar] {
         width: 6rem;
         height: 6rem;
         pointer-events: none;
-        border-radius: 9999px;
-        object-fit: cover;
         position: absolute;
         top: -2.25rem;
         left: 1.75rem;
@@ -118,7 +119,7 @@ import { T } from '@start9labs/start-sdk'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TickerComponent],
+  imports: [TickerComponent, TuiAvatar],
 })
 export class MarketplacePackageHeroComponent {
   @Input({ required: true })

web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts

@@ -51,7 +51,12 @@ import UpdatesComponent from './updates.component'
     <tr (click)="expanded.set(!expanded())">
       <td>
         <div [style.gap.rem]="0.75" [style.padding-inline-end.rem]="1">
-          <span tuiAvatar appearance="action-grayscale" size="s">
+          <span
+            tuiAvatar
+            appearance="action-grayscale"
+            size="s"
+            [round]="false"
+          >
             <img alt="" [src]="item().icon" />
           </span>
           <span tuiTitle [style.margin]="'-0.125rem 0 0'">