[PM-9627] item details v2 defects (#10082)

* Pull proper item name in item details. add Typography Module to reusable view sections

libs/vault/src/cipher-view/additional-information/additional-information.component.ts

@@ -8,6 +8,7 @@ import {
   InputModule,
   SectionComponent,
   SectionHeaderComponent,
+  TypographyModule,
 } from "@bitwarden/components";
 
 @Component({
@@ -22,6 +23,7 @@ import {
     InputModule,
     SectionComponent,
     SectionHeaderComponent,
+    TypographyModule,
   ],
 })
 export class AdditionalInformationComponent {

libs/vault/src/cipher-view/attachments/attachments-v2.component.ts

@@ -22,6 +22,7 @@ import {
   IconButtonModule,
   SectionComponent,
   SectionHeaderComponent,
+  TypographyModule,
 } from "@bitwarden/components";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
@@ -36,6 +37,7 @@ import { PasswordRepromptService } from "@bitwarden/vault";
     IconButtonModule,
     SectionComponent,
     SectionHeaderComponent,
+    TypographyModule,
   ],
 })
 export class AttachmentsV2Component {

libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts

@@ -12,6 +12,7 @@ import {
   InputModule,
   SectionComponent,
   SectionHeaderComponent,
+  TypographyModule,
 } from "@bitwarden/components";
 
 @Component({
@@ -27,6 +28,7 @@ import {
     InputModule,
     SectionComponent,
     SectionHeaderComponent,
+    TypographyModule,
   ],
 })
 export class CustomFieldV2Component {

libs/vault/src/cipher-view/item-details/item-details-v2.component.html

@@ -7,27 +7,32 @@
       <label class="tw-block tw-w-full tw-mb-1 tw-text-xs tw-text-muted tw-select-none">
         {{ "itemName" | i18n }}
       </label>
-      <input readonly bitInput type="text" [value]="cipher.login.username" aria-readonly="true" />
+      <input readonly bitInput type="text" [value]="cipher.name" aria-readonly="true" />
     </div>
 
     <div *ngIf="cipher.collectionIds || cipher.organizationId || cipher.folderId">
-      <div *ngIf="!cipher.organizationId" [ngClass]="{ 'tw-mb-3': cipher.collectionIds }">
+      <p
+        *ngIf="!cipher.organizationId"
+        [ngClass]="{ 'tw-mb-3': cipher.collectionIds }"
+        bitTypography="body2"
+      >
         <i class="bwi bwi-user bwi-lg bwi-fw"></i> {{ "ownerYou" | i18n }}
-      </div>
-      <div
+      </p>
+      <p
         *ngIf="cipher.organizationId && organization"
         [ngClass]="{ 'tw-mb-3': cipher.collectionIds }"
+        bitTypography="body2"
       >
         <i class="bwi bwi-business bwi-lg bwi-fw"></i> {{ organization.name }}
-      </div>
-      <div *ngIf="cipher.collectionIds && collections" [ngClass]="{ 'tw-mb-3': cipher.folderId }">
-        <h3 *ngFor="let collection of collections">
+      </p>
+      <ul *ngIf="cipher.collectionIds && collections" [ngClass]="{ 'tw-mb-2': cipher.folderId }">
+        <p *ngFor="let collection of collections" class="tw-mb-1" bitTypography="body2">
           <i class="bwi bwi-collection bwi-lg bwi-fw"></i> {{ collection.name }}
-        </h3>
-      </div>
-      <div *ngIf="cipher.folderId && folder">
+        </p>
+      </ul>
+      <p *ngIf="cipher.folderId && folder" bitTypography="body2">
         <i class="bwi bwi-folder bwi-lg bwi-fw"></i> {{ folder.name }}
-      </div>
+      </p>
     </div>
   </bit-card>
 </bit-section>

libs/vault/src/cipher-view/item-details/item-details-v2.component.ts

@@ -6,13 +6,25 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
-import { CardComponent, SectionComponent, SectionHeaderComponent } from "@bitwarden/components";
+import {
+  CardComponent,
+  SectionComponent,
+  SectionHeaderComponent,
+  TypographyModule,
+} from "@bitwarden/components";
 
 @Component({
   selector: "app-item-details-v2",
   templateUrl: "item-details-v2.component.html",
   standalone: true,
-  imports: [CommonModule, JslibModule, CardComponent, SectionComponent, SectionHeaderComponent],
+  imports: [
+    CommonModule,
+    JslibModule,
+    CardComponent,
+    SectionComponent,
+    SectionHeaderComponent,
+    TypographyModule,
+  ],
 })
 export class ItemDetailsV2Component {
   @Input() cipher: CipherView;

libs/vault/src/cipher-view/item-history/item-history-v2.component.ts

@@ -4,7 +4,12 @@ import { RouterModule } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { CardComponent, SectionComponent, SectionHeaderComponent } from "@bitwarden/components";
+import {
+  CardComponent,
+  SectionComponent,
+  SectionHeaderComponent,
+  TypographyModule,
+} from "@bitwarden/components";
 
 @Component({
   selector: "app-item-history-v2",
@@ -17,6 +22,7 @@ import { CardComponent, SectionComponent, SectionHeaderComponent } from "@bitwar
     CardComponent,
     SectionComponent,
     SectionHeaderComponent,
+    TypographyModule,
   ],
 })
 export class ItemHistoryV2Component {