[PM-18066] new item details view (#15311)

* update item details v2 in libs for new view design. targets web, browser, and desktop

libs/angular/src/vault/components/icon.component.html

@@ -1,19 +1,44 @@
-<div class="tw-flex tw-justify-center tw-items-center" aria-hidden="true">
+<!-- Applying width and height styles directly to synchronize icon sizing between web/browser/desktop -->
+<div
+  class="tw-flex tw-justify-center tw-items-center"
+  [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+  aria-hidden="true"
+>
   <ng-container *ngIf="data$ | async as data">
-    <img
-      [src]="data.image"
-      *ngIf="data.imageEnabled && data.image"
-      class="tw-size-6 tw-rounded-md"
-      alt=""
-      decoding="async"
-      loading="lazy"
-      [ngClass]="{ 'tw-invisible tw-absolute': !imageLoaded() }"
-      (load)="imageLoaded.set(true)"
-      (error)="imageLoaded.set(false)"
-    />
-    <i
-      class="tw-w-6 tw-text-muted bwi bwi-lg {{ data.icon }}"
-      *ngIf="!data.imageEnabled || !data.image || !imageLoaded()"
-    ></i>
+    @if (data.imageEnabled && data.image) {
+      <img
+        [src]="data.image"
+        class="tw-rounded-md"
+        alt=""
+        decoding="async"
+        loading="lazy"
+        [ngClass]="{
+          'tw-invisible tw-absolute': !imageLoaded(),
+          'tw-size-6': !coloredIcon(),
+        }"
+        [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+        (load)="imageLoaded.set(true)"
+        (error)="imageLoaded.set(false)"
+      />
+    }
+    @if (!data.imageEnabled || !data.image || !imageLoaded()) {
+      <div
+        [ngClass]="{
+          'tw-flex tw-items-center tw-justify-center': coloredIcon(),
+          'tw-bg-illustration-bg-primary tw-rounded-full':
+            data.icon?.startsWith('bwi-') && coloredIcon(),
+        }"
+        [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+      >
+        <i
+          class="tw-text-muted bwi bwi-lg {{ data.icon }}"
+          [ngStyle]="{
+            color: coloredIcon() ? 'rgb(var(--color-illustration-outline))' : null,
+            width: data.icon?.startsWith('credit-card') && coloredIcon() ? '36px' : null,
+            height: data.icon?.startsWith('credit-card') && coloredIcon() ? '30px' : null,
+          }"
+        ></i>
+      </div>
+    }
   </ng-container>
 </div>

libs/angular/src/vault/components/icon.component.ts

@@ -27,6 +27,11 @@ export class IconComponent {
    */
   cipher = input.required<CipherViewLike>();
 
+  /**
+   * coloredIcon will adjust the size of favicons and the colors of the text icon when user is in the item details view.
+   */
+  coloredIcon = input<boolean>(false);
+
   imageLoaded = signal(false);
 
   protected data$: Observable<CipherIconDetails>;