From 150b9ef29c76562ef623924480003205d580ce05 Mon Sep 17 00:00:00 2001
From: Jason Ng <jng@bitwarden.com>
Date: Thu, 18 Jul 2024 18:56:02 -0400
Subject: [PATCH] [PM-9629] Custom Fields V2 View Section Defects (#10103)

* Updates to Custom Fields V2 View
---
 .../custom-fields-v2.component.html           | 36 ++++++++++---------
 .../custom-fields-v2.component.ts             |  2 ++
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
index 91a380f53d..e01c4ca175 100644
--- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
+++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
@@ -4,25 +4,25 @@
   </bit-section-header>
   <bit-card>
     <div
-      class="tw-mb-4 tw-border-secondary-300 tw-bg-background"
+      class="tw-border-secondary-300"
       *ngFor="let field of fields; let last = last"
-      [ngClass]="{ 'tw-border-0 tw-border-b tw-border-solid tw-pb-2 tw-mb-4': !last }"
+      [ngClass]="{ 'tw-mb-4': !last }"
     >
       <ng-container *ngIf="field.type === fieldType.Text">
         <label class="tw-text-xs tw-text-muted tw-select-none">
           {{ field.name }}
         </label>
-        <div class="tw-flex tw-justify-between">
+        <bit-form-field>
           <input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
           <button
             bitIconButton="bwi-clone"
-            size="small"
+            bitSuffix
             type="button"
             [appCopyClick]="field.value"
             showToast
             [appA11yTitle]="'copyValue' | i18n"
           ></button>
-        </div>
+        </bit-form-field>
       </ng-container>
       <ng-container *ngIf="field.type === fieldType.Hidden">
         <label class="tw-text-xs tw-text-muted tw-select-none">
@@ -30,10 +30,10 @@
         </label>
         <bit-form-field>
           <input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
-          <button type="button" bitIconButton bitPasswordInputToggle></button>
+          <button bitSuffix type="button" bitIconButton bitPasswordInputToggle></button>
           <button
             bitIconButton="bwi-clone"
-            size="small"
+            bitSuffix
             type="button"
             [appCopyClick]="field.value"
             showToast
@@ -42,18 +42,22 @@
         </bit-form-field>
       </ng-container>
       <ng-container *ngIf="field.type === fieldType.Boolean">
-        <div class="tw-flex tw-my-2">
-          <input type="checkbox" [value]="field.value" readonly aria-readonly="true" />
-          <h5 class="tw-ml-3">
-            {{ field.name }}
-          </h5>
-        </div>
+        <bit-form-control>
+          <input
+            bitCheckbox
+            type="checkbox"
+            [checked]="field.value"
+            aria-readonly="true"
+            disabled
+          />
+          <bit-label> {{ field.name }} </bit-label>
+        </bit-form-control>
       </ng-container>
       <ng-container *ngIf="field.type === fieldType.Linked">
         <label class="tw-text-xs tw-text-muted tw-select-none">
           {{ "linked" | i18n }}: {{ field.name }}
         </label>
-        <div class="tw-flex tw-justify-between">
+        <bit-form-field>
           <input
             readonly
             bitInput
@@ -63,13 +67,13 @@
           />
           <button
             bitIconButton="bwi-clone"
-            size="small"
+            bitSuffix
             type="button"
             [appCopyClick]="field.name"
             showToast
             [appA11yTitle]="'copyValue' | i18n"
           ></button>
-        </div>
+        </bit-form-field>
       </ng-container>
     </div>
   </bit-card>
diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts
index e54e5996eb..762af73e31 100644
--- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts
+++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts
@@ -13,6 +13,7 @@ import {
   SectionComponent,
   SectionHeaderComponent,
   TypographyModule,
+  CheckboxModule,
 } from "@bitwarden/components";
 
 @Component({
@@ -29,6 +30,7 @@ import {
     SectionComponent,
     SectionHeaderComponent,
     TypographyModule,
+    CheckboxModule,
   ],
 })
 export class CustomFieldV2Component {