From 0e9c90f2c081a2bdd3679f98b91e1e5f91ad758c Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Fri, 20 Mar 2026 11:16:45 +0400
Subject: [PATCH] chore: fix icons in marketplace

---
 .../src/pages/list/item/item.component.html           |  4 +++-
 .../src/pages/list/item/item.component.scss           |  3 ---
 .../marketplace/src/pages/list/item/item.component.ts |  9 ++++++++-
 .../show/dependencies/dependency-item.component.ts    |  8 +++++++-
 .../marketplace/src/pages/show/flavors.component.ts   |  2 +-
 .../marketplace/src/pages/show/hero.component.ts      | 11 ++++++-----
 .../routes/portal/routes/updates/item.component.ts    |  7 ++++++-
 7 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/web/projects/marketplace/src/pages/list/item/item.component.html b/web/projects/marketplace/src/pages/list/item/item.component.html
index 33b9d45e3..138fb4576 100644
--- a/web/projects/marketplace/src/pages/list/item/item.component.html
+++ b/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 }}
diff --git a/web/projects/marketplace/src/pages/list/item/item.component.scss b/web/projects/marketplace/src/pages/list/item/item.component.scss
index f108a26af..8db70cf45 100644
--- a/web/projects/marketplace/src/pages/list/item/item.component.scss
+++ b/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 {
diff --git a/web/projects/marketplace/src/pages/list/item/item.component.ts b/web/projects/marketplace/src/pages/list/item/item.component.ts
index 5d6f4f257..e9b24db52 100644
--- a/web/projects/marketplace/src/pages/list/item/item.component.ts
+++ b/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 {
diff --git a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts b/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
index 685f7b016..ee60a2a18 100644
--- a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
+++ b/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>
diff --git a/web/projects/marketplace/src/pages/show/flavors.component.ts b/web/projects/marketplace/src/pages/show/flavors.component.ts
index bea8286e3..b711c0614 100644
--- a/web/projects/marketplace/src/pages/show/flavors.component.ts
+++ b/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>
diff --git a/web/projects/marketplace/src/pages/show/hero.component.ts b/web/projects/marketplace/src/pages/show/hero.component.ts
index 7a951838d..65e25480c 100644
--- a/web/projects/marketplace/src/pages/show/hero.component.ts
+++ b/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 })
diff --git a/web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts b/web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts
index 03b88623a..6fd2d47ba 100644
--- a/web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts
+++ b/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'">